style: 样式拆分.

orion-ops-ui/src/assets/style/arco-extends.less

@@ -0,0 +1,143 @@
+// 内联菜单
+.arco-menu-inner::-webkit-scrollbar {
+  display: none;
+}
+
+// 吸顶列表
+.sticky-list {
+  .arco-list-header {
+    position: sticky;
+    background: var(--color-fill-2);
+    border-bottom: none;
+    top: 0;
+  }
+}
+
+// 表头
+.arco-table-td-content {
+  color: rgba(var(--gray-9), .95);
+  font-size: 13px;
+}
+
+// 表格
+.arco-table-cell {
+  .circle {
+    display: inline-block;
+    margin-right: 4px;
+    margin-bottom: 2px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgb(var(--blue-6));
+
+    &.pass {
+      background-color: rgb(var(--green-6));
+    }
+  }
+}
+
+// 垂直滚动
+.arco-scrollbar-track-direction-vertical {
+  width: 9px;
+
+  .arco-scrollbar-thumb-bar {
+    margin: 0;
+  }
+}
+
+// 水平滚动
+.arco-scrollbar-track-direction-horizontal {
+  height: 9px;
+
+  .arco-scrollbar-thumb-bar {
+    margin: 0;
+  }
+}
+
+// 表头
+.a-query-header-grid {
+  .arco-grid-item {
+    &:last-child {
+      display: flex !important;
+    }
+  }
+}
+
+// 标准卡片
+.general-card {
+  border-radius: 4px;
+  border: none;
+
+  & > .arco-card-header {
+    height: auto;
+    padding: 16px;
+    border: none;
+  }
+
+  & > .arco-card-body {
+    padding: 0 16px 16px 16px;
+  }
+}
+
+// 块状树
+.block-tree {
+  .arco-tree-node {
+    cursor: unset;
+
+    &-switcher {
+      margin-left: 8px;
+    }
+
+    &:hover {
+      background-color: var(--color-fill-1);
+    }
+
+    &-selected {
+      background-color: var(--color-fill-2);
+
+      &:hover {
+        background-color: var(--color-fill-1);
+      }
+    }
+
+    &-title {
+      padding: 0;
+      height: 32px;
+
+      &:hover {
+        background-color: var(--color-fill-1);
+      }
+
+      &-text {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+// 抽屉
+.arco-drawer {
+  &-header {
+    border-bottom: unset;
+  }
+
+  &-footer {
+    border-top: unset;
+  }
+
+  &-body {
+    padding: 0;
+  }
+}
+
+.arco-trigger-menu {
+  user-select: none;
+}
+
+.arco-dropdown-option-content {
+  user-select: none;
+}

orion-ops-ui/src/assets/style/global.less

@@ -12,8 +12,6 @@ body {
   background-color: var(--color-bg-1);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  --color-scrollbar-track: var(--color-neutral-1);
-  --color-scrollbar-thumb: var(--color-neutral-5);
 }
 
 // -- echarts
@@ -68,103 +66,6 @@ body {
   }
 }
 
-// -- arco
-.arco-menu-inner::-webkit-scrollbar {
-  display: none;
-}
-
-.sticky-list {
-  .arco-list-header {
-    position: sticky;
-    background: var(--color-fill-2);
-    border-bottom: none;
-    top: 0;
-  }
-}
-
-.arco-table-td-content {
-  color: rgba(var(--gray-9), .95);
-  font-size: 13px;
-}
-
-.arco-table-cell {
-  .circle {
-    display: inline-block;
-    margin-right: 4px;
-    margin-bottom: 2px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: rgb(var(--blue-6));
-
-    &.pass {
-      background-color: rgb(var(--green-6));
-    }
-  }
-}
-
-.arco-trigger-menu {
-  user-select: none;
-}
-
-.arco-dropdown-option-content {
-  user-select: none;
-}
-
-.arco-drawer-header {
-  border-bottom: unset;
-}
-
-.arco-drawer-footer {
-  border-top: unset;
-}
-
-.arco-drawer-container.drawer-body-padding-0 {
-  .arco-drawer-body {
-    padding: 0 !important;
-  }
-}
-
-.arco-scrollbar-track-direction-vertical {
-  width: 9px;
-
-  .arco-scrollbar-thumb-bar {
-    margin: 0;
-  }
-}
-
-.arco-scrollbar-track-direction-horizontal {
-  height: 9px;
-
-  .arco-scrollbar-thumb-bar {
-    margin: 0;
-  }
-}
-
-.a-query-header-grid {
-  .arco-grid-item {
-    &:last-child {
-      display: flex !important;
-    }
-  }
-}
-
-// -- card
-.general-card {
-  border-radius: 4px;
-  border: none;
-
-  & > .arco-card-header {
-    height: auto;
-    padding: 16px;
-    border: none;
-  }
-
-  & > .arco-card-body {
-    padding: 0 16px 16px 16px;
-  }
-}
-
 // -- click-icon
 .click-icon-wrapper {
   display: flex;
@@ -309,20 +210,24 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-::-webkit-scrollbar-track {
-  background-color: var(--color-scrollbar-track);
-  border-radius: 8px;
-}
-
 ::-webkit-scrollbar {
   -webkit-appearance: none;
-  width: 5px;
+  width: 6px;
-  height: 5px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--color-neutral-1);
+  border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-  cursor: pointer;
+  border: 1px solid transparent;
+  background-clip: padding-box;
   border-radius: 8px;
-  background-color: var(--color-scrollbar-thumb);
+  background-color: var(--color-neutral-5);
-  transition: color .2s ease;
+
+  &:hover {
+    background-color: var(--color-neutral-6);
+  }
 }

orion-ops-ui/src/components/app/setting/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 左侧固定配置按钮 -->
   <div v-if="!appStore.navbar" class="fixed-settings" @click="open">
     <a-button type="primary">
       <template #icon>
@@ -6,18 +7,21 @@
       </template>
     </a-button>
   </div>
+  <!-- 偏好配置抽屉 -->
   <a-drawer v-model:visible="visible"
             title="偏好设置"
             :width="300"
             :footer="false"
             :unmount-on-close="true"
             @cancel="() => setVisible(false)">
-    <!-- 布局设置 -->
+    <div class="preference-containers">
-    <Block :options="layoutOpts" title="布局设置" />
+      <!-- 布局设置 -->
-    <!-- 数据设置 -->
+      <Block :options="layoutOpts" title="布局设置" />
-    <Block :options="dataOpts" title="数据设置" />
+      <!-- 数据设置 -->
-    <!-- 页面视图 -->
+      <Block :options="dataOpts" title="数据设置" />
-    <Block :options="viewsOpts" title="页面视图" />
+      <!-- 页面视图 -->
+      <Block :options="viewsOpts" title="页面视图" />
+    </div>
   </a-drawer>
 </template>
 
@@ -151,4 +155,9 @@
       vertical-align: -4px;
     }
   }
+
+  .preference-containers{
+    padding: 0 16px;
+  }
+
 </style>

orion-ops-ui/src/components/asset/host-group/host-group-tree.vue

@@ -3,7 +3,7 @@
     <!-- 分组树 -->
     <a-tree v-if="treeData.length"
             ref="tree"
-            class="tree-container"
+            class="tree-container block-tree"
             :blockNode="true"
             :draggable="editable"
             :data="treeData"
@@ -359,41 +359,8 @@
     color: var(--color-text-3);
   }
 
-  :deep(.arco-tree-node) {
-    cursor: unset;
-
-    .arco-tree-node-switcher {
-      margin-left: 8px;
-    }
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-  }
-
-  :deep(.arco-tree-node-selected) {
-    background-color: var(--color-fill-2);
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-  }
-
   :deep(.arco-tree-node-title) {
     padding: 0 80px 0 0;
-    height: 32px;
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-
-    .arco-tree-node-title-text {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-    }
   }
 
   .node-title-wrapper {

orion-ops-ui/src/layout/default-layout.vue

@@ -29,7 +29,7 @@
                 mask-closable
                 :closable="false"
                 @cancel="drawerCancel">
-        <Menu />
+        <Menu style="padding: 12px 16px;" />
       </a-drawer>
       <!-- body -->
       <a-layout class="layout-content" :style="paddingStyle">
@@ -159,24 +159,6 @@
     height: 100%;
     overflow: auto;
     overflow-x: hidden;
-
-    :deep(.arco-menu) {
-      ::-webkit-scrollbar {
-        width: 12px;
-        height: 4px;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        border: 4px solid transparent;
-        background-clip: padding-box;
-        border-radius: 7px;
-        background-color: var(--color-text-4);
-      }
-
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: var(--color-text-3);
-      }
-    }
   }
 
   .layout-content {

orion-ops-ui/src/main.ts

@@ -11,6 +11,7 @@ import App from './App.vue';
 // 样式通过 arco-plugin 插件导入 详见目录文件 config/plugin/arcoStyleImport.ts
 import '@/assets/style/global.less';
 import '@/assets/style/layout.less';
+import '@/assets/style/arco-extends.less';
 import '@/api/interceptor';
 
 const app = createApp(App);

orion-ops-ui/src/views/asset/grant/components/router-roles.vue

@@ -8,7 +8,9 @@
                   :items="rolesRouter"
                   @change="(key, item) => emits('change', key, item)" />
       <!-- 加载中 -->
-      <a-skeleton v-else-if="loading" class="skeleton-wrapper">
+      <a-skeleton v-else-if="loading"
+                  class="skeleton-wrapper"
+                  :animation="true">
         <a-skeleton-line :rows="4" />
       </a-skeleton>
       <!-- 暂无数据 -->

orion-ops-ui/src/views/asset/grant/components/router-users.vue

@@ -8,7 +8,9 @@
                   :items="usersRouter"
                   @change="(key, item) => emits('change', key, item)" />
       <!-- 加载中 -->
-      <a-skeleton v-else-if="loading" class="skeleton-wrapper">
+      <a-skeleton v-else-if="loading"
+                  class="skeleton-wrapper"
+                  :animation="true">
         <a-skeleton-line :rows="4" />
       </a-skeleton>
       <!-- 暂无数据 -->

orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue

@@ -1,6 +1,5 @@
 <template>
   <a-drawer v-model:visible="visible"
-            class="drawer-body-padding-0"
             :title="title"
             :width="470"
             :mask-closable="false"

orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue

@@ -1,6 +1,5 @@
 <template>
   <a-drawer v-model:visible="visible"
-            class="drawer-body-padding-0"
             :width="420"
             :esc-to-close="false"
             :mask-closable="false"

orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue

@@ -213,7 +213,6 @@
     }
 
     .arco-drawer-body {
-      padding: 0;
       overflow: hidden;
     }
   }

orion-ops-ui/src/views/user/info/components/login-history.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-spin :loading="loading" class="main-container">
+  <div class="main-container">
     <span class="extra-message">
       <template v-if="user">
         只展示用户 <span class="user-info">{{ user.nickname }}({{ user.username }})</span> 最近登录的 30 条历史记录
@@ -8,8 +8,14 @@
         只展示最近登录的 30 条历史记录
       </template>
     </span>
+    <!-- 加载中 -->
+    <a-skeleton v-if="loading"
+                style="width: 70%;"
+                :animation="true">
+      <a-skeleton-line :rows="4" />
+    </a-skeleton>
     <!-- 登录历史时间线 -->
-    <a-timeline v-if="list.length">
+    <a-timeline v-else-if="list.length">
       <a-timeline-item v-for="item in list"
                        :key="item.id">
         <!-- 图标 -->
@@ -41,16 +47,9 @@
         </div>
       </a-timeline-item>
     </a-timeline>
-    <!-- 加载中 -->
-    <a-space direction="vertical"
-             v-else-if="loading"
-             :style="{width: '70%'}"
-             size="large">
-      <a-skeleton-line :rows="4" />
-    </a-space>
     <!-- 空 -->
     <a-empty v-else />
-  </a-spin>
+  </div>
 </template>
 
 <script lang="ts">
@@ -64,7 +63,7 @@
   import type { LoginHistoryQueryResponse } from '@/api/user/operator-log';
   import type { PropType } from 'vue';
   import useLoading from '@/hooks/loading';
-  import { ref, onMounted } from 'vue';
+  import { ref, onBeforeMount } from 'vue';
   import { ResultStatus } from '../types/const';
   import { getCurrentLoginHistory } from '@/api/user/mine';
   import { getLoginHistory } from '@/api/user/operator-log';
@@ -80,7 +79,7 @@
   const { loading, setLoading } = useLoading();
 
   // 查询操作日志
-  onMounted(async () => {
+  onBeforeMount(async () => {
     try {
       setLoading(true);
       if (props.user) {

orion-ops-ui/src/views/user/info/components/user-session.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-spin :loading="loading" class="main-container">
+  <div class="main-container">
     <span class="extra-message">
       <template v-if="user">
         用户 <span class="user-info">{{ user.nickname }}({{ user.username }})</span> 所有登录设备的会话列表
@@ -8,8 +8,14 @@
         所有登录设备的会话列表
       </template>
     </span>
+    <!-- 加载中 -->
+    <a-skeleton v-if="loading"
+                style="width: 70%;"
+                :animation="true">
+      <a-skeleton-line :rows="4" />
+    </a-skeleton>
     <!-- 登录会话时间线 -->
-    <a-timeline v-if="list.length">
+    <a-timeline v-else-if="list.length">
       <template v-for="item in list"
                 :key="item.loginTime">
         <a-timeline-item v-if="item.visible">
@@ -48,16 +54,9 @@
         </a-timeline-item>
       </template>
     </a-timeline>
-    <!-- 加载中 -->
-    <a-space direction="vertical"
-             v-else-if="loading"
-             :style="{width: '70%'}"
-             size="large">
-      <a-skeleton-line :rows="4" />
-    </a-space>
     <!-- 空 -->
     <a-empty v-else />
-  </a-spin>
+  </div>
 </template>
 
 <script lang="ts">
@@ -71,7 +70,7 @@
   import type { UserSessionQueryResponse } from '@/api/user/user';
   import type { PropType } from 'vue';
   import useLoading from '@/hooks/loading';
-  import { ref, onMounted } from 'vue';
+  import { ref, onBeforeMount } from 'vue';
   import { getCurrentUserSessionList, offlineCurrentUserSession } from '@/api/user/mine';
   import { dateFormat } from '@/utils';
   import { isMobile } from '@/utils/is';
@@ -104,7 +103,7 @@
   };
 
   // 查询登录会话
-  onMounted(async () => {
+  onBeforeMount(async () => {
     try {
       setLoading(true);
       let sessions: UserSessionQueryResponse[];