💄 修改滚动条样式.

2024-07-26 10:18:39 +08:00
parent 305312cc26
commit 3851ead8bb
13 changed files with 91 additions and 89 deletions
--- a/orion-visor-ui/src/components/exec/log/panel-modal/index.vue
+++ b/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) {
--- a/orion-visor-ui/src/components/exec/log/panel/exec-host.vue
+++ b/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"
-           :key="item.id"
-           class="exec-host-item"
-           :class="[ current === item.id ? 'exec-host-item-selected' : '' ]"
-           @click="emits('selected', item.id)">
-        <!-- 主机名称 -->
-        <div class="exec-host-item-name">
-          <span class="host-name">{{ item.hostName }}</span>
-          <span class="host-address">{{ item.hostAddress }}</span>
+      <a-scrollbar>
+        <div v-for="(item, index) in hosts"
+             :key="item.id"
+             class="exec-host-item"
+             :class="[ current === item.id ? 'exec-host-item-selected' : '' ]"
+             :style="{ marginBottom: index === hosts.length -1 ? 0 : '8px' }"
+             @click="emits('selected', item.id)">
+          <!-- 主机名称 -->
+          <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>
-        <!-- 状态 -->
-        <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>
  </div>
 </template>
@@ -78,13 +81,19 @@
  }

  .exec-host-items {
-    position: absolute;
-    width: calc(100% - 32px);
-    height: calc(100% - 68px);
-    overflow: auto;
+    position: relative;
+    width: 100%;
+    height: calc(100% - 38px);

-    &::-webkit-scrollbar-track {
-      display: none;
+    :deep(.arco-scrollbar) {
+      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;
--- a/orion-visor-ui/src/store/modules/cache/index.ts
+++ b/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 => ({}),

--- a/orion-visor-ui/src/store/modules/cache/types.ts
+++ b/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';
-import type { RoleQueryResponse } from '@/api/user/role';
-import type { HostQueryResponse } from '@/api/asset/host';
-import type { HostGroupQueryResponse } from '@/api/asset/host-group';
-import type { HostKeyQueryResponse } from '@/api/asset/host-key';
-import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
-import type { DictKeyQueryResponse } from '@/api/system/dict-key';
+// 缓存类型
+export type CacheType = 'users' | 'menus' | 'roles'
+  | 'hostGroups' | 'hostKeys' | 'hostIdentities'
+  | 'dictKeys'
+  | 'authorizedHostKeys' | 'authorizedHostIdentities'
+  | 'commandSnippetGroups' | 'pathBookmarkGroups'
+  | 'execJob'
+  | string

 export interface CacheState {
-  users?: UserQueryResponse[];
-  menus?: MenuQueryResponse[];
-  roles?: RoleQueryResponse[];
-  hosts?: HostQueryResponse[];
-  hostGroups?: HostGroupQueryResponse[];
-  hostKeys?: HostKeyQueryResponse[];
-  hostIdentities?: HostIdentityQueryResponse[];
-  dictKeys?: DictKeyQueryResponse[];
-  authorizedHostKeys?: HostKeyQueryResponse[];
-  authorizedHostIdentities?: HostIdentityQueryResponse[];
-
-  [key: string]: unknown;
+  [key: CacheType]: unknown;
 }
--- a/orion-visor-ui/src/store/modules/menu/index.ts
+++ b/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', {
--- a/orion-visor-ui/src/views/exec/exec-command/components/exec-command-panel-history.vue
+++ b/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">
-      <div v-for="record in historyLogs"
+    <a-scrollbar v-else>
+      <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 {
-    position: absolute;
-    width: calc(100% - 32px);
-    height: calc(100% - 64px);
-    overflow: auto;
+  .container {
+    :deep(.arco-scrollbar) {
+      position: absolute;
+      width: calc(100% - 32px);
+      height: calc(100% - 64px);

-    &::-webkit-scrollbar-track {
-      display: none;
+      &-container {
+        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;
--- a/orion-visor-ui/src/views/host/terminal/components/command-snippet/command-snippet-drawer.vue
+++ b/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 {
--- a/orion-visor-ui/src/views/host/terminal/components/layout/empty-recommend.vue
+++ b/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);
--- a/orion-visor-ui/src/views/host/terminal/components/new-connection/hosts-view.vue
+++ b/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>
--- a/orion-visor-ui/src/views/host/terminal/components/path-bookmark/path-bookmark-drawer.vue
+++ b/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 {
--- a/orion-visor-ui/src/views/host/terminal/components/ssh/ssh-view.vue
+++ b/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%;
--- a/orion-visor-ui/src/views/host/terminal/types/const.ts
+++ b/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: {
--- a/orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue
+++ b/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) {