💄 修改滚动条样式.

orion-visor-ui/src/components/exec/log/panel-modal/index.vue

@@ -119,11 +119,6 @@
         align-items: center;
       }
     }
-
-    .exec-host-items {
-      width: 100%;
-      height: calc(100% - 38px);
-    }
   }
 
   :deep(.log-header) {

orion-visor-ui/src/components/exec/log/panel/exec-host.vue

@@ -13,23 +13,26 @@
     </div>
     <!-- 主机列表 -->
     <div class="exec-host-items">
-      <div v-for="item in hosts"
+      <a-scrollbar>
-           :key="item.id"
+        <div v-for="(item, index) in hosts"
-           class="exec-host-item"
+             :key="item.id"
-           :class="[ current === item.id ? 'exec-host-item-selected' : '' ]"
+             class="exec-host-item"
-           @click="emits('selected', item.id)">
+             :class="[ current === item.id ? 'exec-host-item-selected' : '' ]"
-        <!-- 主机名称 -->
+             :style="{ marginBottom: index === hosts.length -1 ? 0 : '8px' }"
-        <div class="exec-host-item-name">
+             @click="emits('selected', item.id)">
-          <span class="host-name">{{ item.hostName }}</span>
+          <!-- 主机名称 -->
-          <span class="host-address">{{ item.hostAddress }}</span>
+          <div class="exec-host-item-name">
+            <span class="host-name">{{ item.hostName }}</span>
+            <span class="host-address">{{ item.hostAddress }}</span>
+          </div>
+          <!-- 状态 -->
+          <div class="exec-host-item-status">
+            <a-tag :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
+              {{ getDictValue(execHostStatusKey, item.status) }}
+            </a-tag>
+          </div>
         </div>
-        <!-- 状态 -->
+      </a-scrollbar>
-        <div class="exec-host-item-status">
-          <a-tag :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
-            {{ getDictValue(execHostStatusKey, item.status) }}
-          </a-tag>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -78,13 +81,19 @@
   }
 
   .exec-host-items {
-    position: absolute;
+    position: relative;
-    width: calc(100% - 32px);
+    width: 100%;
-    height: calc(100% - 68px);
+    height: calc(100% - 38px);
-    overflow: auto;
 
-    &::-webkit-scrollbar-track {
+    :deep(.arco-scrollbar) {
-      display: none;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      &-container {
+        height: 100%;
+        overflow-y: auto;
+      }
     }
   }
 
@@ -99,7 +108,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
     background: var(--color-fill-2);
     transition: all .2s;
     user-select: none;

orion-visor-ui/src/store/modules/cache/index.ts

@@ -1,4 +1,4 @@
-import type { CacheState } from './types';
+import type { CacheState, CacheType } from './types';
 import type { AxiosResponse } from 'axios';
 import type { TagType } from '@/api/meta/tag';
 import { getTagList } from '@/api/meta/tag';
@@ -19,14 +19,6 @@ import { getCommandSnippetGroupList } from '@/api/asset/command-snippet-group';
 import { getExecJobList } from '@/api/job/exec-job';
 import { getPathBookmarkGroupList } from '@/api/asset/path-bookmark-group';
 
-export type CacheType = 'users' | 'menus' | 'roles'
-  | 'hostGroups' | 'hostKeys' | 'hostIdentities'
-  | 'dictKeys'
-  | 'authorizedHostKeys' | 'authorizedHostIdentities'
-  | 'commandSnippetGroups' | 'pathBookmarkGroups'
-  | 'execJob'
-  | string
-
 export default defineStore('cache', {
   state: (): CacheState => ({}),
 

orion-visor-ui/src/store/modules/cache/types.ts

@@ -1,23 +1,12 @@
-import type { UserQueryResponse } from '@/api/user/user';
+// 缓存类型
-import type { MenuQueryResponse } from '@/api/system/menu';
+export type CacheType = 'users' | 'menus' | 'roles'
-import type { RoleQueryResponse } from '@/api/user/role';
+  | 'hostGroups' | 'hostKeys' | 'hostIdentities'
-import type { HostQueryResponse } from '@/api/asset/host';
+  | 'dictKeys'
-import type { HostGroupQueryResponse } from '@/api/asset/host-group';
+  | 'authorizedHostKeys' | 'authorizedHostIdentities'
-import type { HostKeyQueryResponse } from '@/api/asset/host-key';
+  | 'commandSnippetGroups' | 'pathBookmarkGroups'
-import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
+  | 'execJob'
-import type { DictKeyQueryResponse } from '@/api/system/dict-key';
+  | string
 
 export interface CacheState {
-  users?: UserQueryResponse[];
+  [key: CacheType]: unknown;
-  menus?: MenuQueryResponse[];
-  roles?: RoleQueryResponse[];
-  hosts?: HostQueryResponse[];
-  hostGroups?: HostGroupQueryResponse[];
-  hostKeys?: HostKeyQueryResponse[];
-  hostIdentities?: HostIdentityQueryResponse[];
-  dictKeys?: DictKeyQueryResponse[];
-  authorizedHostKeys?: HostKeyQueryResponse[];
-  authorizedHostIdentities?: HostIdentityQueryResponse[];
-
-  [key: string]: unknown;
 }

orion-visor-ui/src/store/modules/menu/index.ts

@@ -1,10 +1,10 @@
 import type { RouteMeta, RouteRecordNormalized } from 'vue-router';
 import type { MenuState } from './types';
 import type { MenuQueryResponse } from '@/api/system/menu';
+import router from '@/router';
 import { defineStore } from 'pinia';
 import { Notification } from '@arco-design/web-vue';
 import { getMenuList } from '@/api/user/auth';
-import router from '@/router';
 import { EnabledStatus } from '@/types/const';
 
 export default defineStore('menu', {

orion-visor-ui/src/views/exec/exec-command/components/exec-command-panel-history.vue

@@ -18,9 +18,10 @@
       <a-empty description="无执行记录" />
     </div>
     <!-- 批量执行日志 -->
-    <div v-else class="exec-history-rows">
+    <a-scrollbar v-else>
-      <div v-for="record in historyLogs"
+      <div v-for="(record, index) in historyLogs"
            :key="record.id"
+           :style="{ marginBottom: index === historyLogs.length -1 ? 0 : '8px' }"
            class="exec-history"
            @click="emits('selected', record)">
         <!-- 机器数量 -->
@@ -32,7 +33,7 @@
           {{ record.description }}
         </span>
       </div>
-    </div>
+    </a-scrollbar>
   </div>
 </template>
 
@@ -110,14 +111,16 @@
 </script>
 
 <style lang="less" scoped>
-  .exec-history-rows {
+  .container {
-    position: absolute;
+    :deep(.arco-scrollbar) {
-    width: calc(100% - 32px);
+      position: absolute;
-    height: calc(100% - 64px);
+      width: calc(100% - 32px);
-    overflow: auto;
+      height: calc(100% - 64px);
 
-    &::-webkit-scrollbar-track {
+      &-container {
-      display: none;
+        height: 100%;
+        overflow-y: auto;
+      }
     }
   }
 
@@ -127,7 +130,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
     background: var(--color-fill-2);
     transition: all .2s;
     user-select: none;

orion-visor-ui/src/views/host/terminal/components/command-snippet/command-snippet-drawer.vue

@@ -320,6 +320,18 @@
     height: calc(100% - 56px);
     overflow: auto;
     padding-bottom: 4px;
+
+    &::-webkit-scrollbar-track {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: transparent;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background: var(--color-fill-4);
+    }
   }
 
   .loading-skeleton {

orion-visor-ui/src/views/host/terminal/components/layout/empty-recommend.vue

@@ -75,9 +75,8 @@
   import type { HostQueryResponse } from '@/api/asset/host';
   import { onMounted, ref } from 'vue';
   import { useTerminalStore } from '@/store';
-  import { PanelSessionType, TerminalTabs } from '../../types/const';
+  import { PanelSessionType, TerminalTabs, emptyRecommendCount } from '../../types/const';
 
-  const totalCount = 7;
   const { tabManager, hosts, openSession } = useTerminalStore();
 
   const combinedHandlers = ref<Array<CombinedHandlerItem>>([{
@@ -103,7 +102,7 @@
         ...hosts.hostList.filter(s => s.favorite).map(s => s.id),
         ...hosts.hostList.map(s => s.id)
       ])
-    ].slice(0, totalCount - 1)
+    ].slice(0, emptyRecommendCount - 1)
       .map(s => hosts.hostList.find(t => t.id === s) as HostQueryResponse)
       .filter(Boolean)
       .map(s => {
@@ -116,10 +115,10 @@
     // 插入主机列表
     combinedHandlers.value.push(...combinedHosts);
     // 不足显示的行数用设置补充
-    if (totalCount - 1 - combinedHosts.length > 0) {
+    if (emptyRecommendCount - 1 - combinedHosts.length > 0) {
       const fillTabs = Object.values(TerminalTabs)
         .filter(s => s.key !== TerminalTabs.NEW_CONNECTION.key)
-        .slice(0, totalCount - 1 - combinedHosts.length)
+        .slice(0, emptyRecommendCount - 1 - combinedHosts.length)
         .map(s => {
           return {
             title: s.title,
@@ -147,23 +146,19 @@
 
   .combined-container {
     padding: 12px;
-    margin: 64px auto 0 auto;
+    margin: 32px auto 0 auto;
     width: @container-width;
-    height: @container-height;
+    max-height: @container-height;
     display: flex;
     flex-direction: column;
     align-items: center;
     box-sizing: content-box;
     overflow: hidden;
-
-    &:hover {
-      overflow: auto;
-    }
   }
 
   .combined-handler {
     width: @container-width - @transform-x;
-    height: @handler-height;
+    max-height: @handler-height;
     border-radius: 4px;
     margin-bottom: 6px;
     color: var(--color-content-text-1);

orion-visor-ui/src/views/host/terminal/components/new-connection/hosts-view.vue

@@ -134,10 +134,4 @@
 </script>
 
 <style lang="less" scoped>
-  .list-view-container {
-    max-height: 100%;
-    width: 100%;
-    overflow: auto;
-    position: relative;
-  }
 </style>

orion-visor-ui/src/views/host/terminal/components/path-bookmark/path-bookmark-drawer.vue

@@ -320,6 +320,18 @@
     height: calc(100% - 56px);
     overflow: auto;
     padding-bottom: 4px;
+
+    &::-webkit-scrollbar-track {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: transparent;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background: var(--color-fill-4);
+    }
   }
 
   .loading-skeleton {

orion-visor-ui/src/views/host/terminal/components/ssh/ssh-view.vue

@@ -242,7 +242,7 @@
     width: 100%;
     height: calc(100% - @ssh-header-height);
     position: relative;
-    padding: 6px 0 0 6px;
+    padding: 8px;
 
     .ssh-inst {
       width: 100%;

orion-visor-ui/src/views/host/terminal/types/const.ts

@@ -1,5 +1,8 @@
 import type { ShortcutKeyItem } from './define';
 
+// 首页推荐数量
+export const emptyRecommendCount = 7;
+
 // 终端 tab
 export const TerminalTabs = {
   NEW_CONNECTION: {

orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue

@@ -421,7 +421,7 @@
 
   .command-editor {
     width: 100%;
-    height: calc(100vh - 318px);
+    height: calc(100vh - 324px);
   }
 
   :deep(.arco-input-append) {