style(layout): adjust the Tree style and Tab style

Author: ZhaoJiSen

src/ThemeOverrides.ts

@@ -11,5 +11,7 @@ export const initialThemeOverrides = (): GlobalThemeOverrides => ({
   Dropdown: {},
   InternalSelection: {},
   InternalSelectMenu: {},
-  Layout: {}
+  Layout: {},
+  Collapse: {},
+  Tree: {}
 });

src/hooks/useTheme.ts

@@ -185,6 +185,20 @@ export const useTheme = () => {
       darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
     ).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
 
+    // 折叠面板
+    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
+      '#CCCCCC';
+    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize =
+      '11px';
+    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight =
+      '700';
+    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
+      '#C5C5C5';
+
+    // Tree
+    (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
+    (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor = '#cccccc';
+
     return darkOverrides;
   };
 

src/layouts/components/FileManagement/index.vue

@@ -3,9 +3,9 @@
     <n-descriptions label-placement="top" class="tree-wrapper" :title="t('List of Assets')">
       <n-descriptions-item>
         <n-collapse arrow-placement="left" :default-expanded-names="['asset-tree']">
-          <n-collapse-item title="资产树" name="asset-tree">
+          <n-collapse-item title="资产树" class="collapse-item" name="asset-tree">
             <template #header-extra>
-              <n-icon size="16px" :component="CheckboxOutline" />
+              <!--              <n-icon :size="16" :component="CheckboxOutline" />-->
             </template>
             <n-tree
               block-line
@@ -14,18 +14,20 @@
               draggable
               check-on-click
               checkbox-placement="left"
+              class="tree-item"
               :show-line="true"
               :pattern="pattern"
               :data="testData"
               :node-props="nodeProps"
               :on-update:expanded-keys="updatePrefixWithExpaned"
             />
           </n-collapse-item>
-          <n-collapse-item title="类型树" name="asset-type">
+          <n-collapse-item title="类型树" class="collapse-item" name="asset-type">
             <n-tree
               block-line
               :pattern="pattern"
               expand-on-click
+              class="tree-item"
               :data="data2"
               :node-props="nodeProps"
               :on-update:expanded-keys="updatePrefixWithExpaned"
@@ -57,7 +59,7 @@ import { reactive, ref, h, onUnmounted, onMounted } from 'vue';
 import { getTreeSource, getTreeDetailById } from '@/API/modules/tree';
 import ConnectionDialog from '@/components/ConnectionDialog/index.vue';
 import { NIcon, TreeOption, DropdownOption, useDialog, NPopover } from 'naive-ui';
-import { Folder, FolderOpenOutline, FileTrayFullOutline, CheckboxOutline } from '@vicons/ionicons5';
+import { Folder, FolderOpenOutline, FileTrayFullOutline } from '@vicons/ionicons5';
 
 import type { Tree } from '@/API/interface';
 
@@ -263,6 +265,36 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .tree-wrapper {
+  height: 100%;
   overflow: hidden;
+  :deep(.n-descriptions-header) {
+    height: 35px;
+    margin-bottom: unset;
+    margin-left: 21px;
+    font-size: 11px;
+    line-height: 40px;
+    color: var(--el-aside-tree-text-color);
+  }
+  .collapse-item {
+    margin: 0;
+    &.n-collapse-item--active {
+      height: calc(100vh - 94px);
+    }
+    :deep(.n-collapse-item__header) {
+      padding-top: 0;
+      .n-collapse-item__header-main {
+        height: 22px;
+      }
+    }
+    :deep(.n-collapse-item__content-wrapper) {
+      .n-collapse-item__content-inner {
+        padding-top: 0;
+        .tree-item .n-tree-node-wrapper {
+          padding: unset;
+          line-height: 22px;
+        }
+      }
+    }
+  }
 }
 </style>

src/layouts/components/Main/index.vue

@@ -52,7 +52,7 @@ const systemTips = reactive([
   display: flex;
   align-items: center;
   justify-content: center;
-  height: calc(100% - 40px);
+  height: calc(100% - 35px);
   min-height: 385px;
   background-color: var(--el-main-bg-color);
   :deep(.n-layout-scroll-container) {

src/layouts/components/Tab/index.vue

@@ -1,13 +1,20 @@
 <template>
   <n-layout-header class="header-tab">
     <n-flex justify="space-between" align="center">
-      <n-flex ref="el">
+      <n-flex ref="el" style="gap: 0">
         <n-flex
           justify="center"
           align="center"
           v-for="item in list"
-          :key="item.id"
           class="tab-item"
+          :key="item.id"
+          style="padding: 0 5px"
+          :class="{
+            'active-tab': item.isActive,
+            'first-click': item.clickCount === 1,
+            'second-click': item.clickCount === 2
+          }"
+          @click="handleTabClick(item)"
         >
           {{ item.name }}
         </n-flex>
@@ -41,22 +48,29 @@ const el = ref();
 const list = reactive([
   {
     name: 'Joao',
-    id: 1
+    id: 1,
+    clickCount: 0,
+    isActive: false
   },
   {
     name: 'Jean',
-    id: 2
+    id: 2,
+    clickCount: 0,
+    isActive: false
   },
   {
     name: 'Johanna',
-    id: 3
+    id: 3,
+    clickCount: 0,
+    isActive: false
   },
   {
     name: 'Juan',
-    id: 4
+    id: 4,
+    clickCount: 0,
+    isActive: false
   }
 ]);
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const draggable = useDraggable<UseDraggableReturn>(el, list, {
   animation: 150,
@@ -67,17 +81,46 @@ const draggable = useDraggable<UseDraggableReturn>(el, list, {
     console.log('update');
   }
 });
+
+const handleTabClick = (item: { id: number }) => {
+  list.forEach(tab => {
+    if (tab.id === item.id) {
+      tab.clickCount = tab.clickCount < 2 ? tab.clickCount + 1 : 1; // 重置为1时保证重新点击
+      tab.isActive = true;
+    } else {
+      tab.clickCount = 0;
+      tab.isActive = false;
+    }
+  });
+};
 </script>
 
 <style scoped lang="scss">
 .header-tab {
   position: relative;
   width: 100% !important;
-  height: 40px;
+  height: 35px;
   background-color: var(--el-main-header-bg-color);
   .tab-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 60px;
-    height: 40px;
+    height: 35px;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    &.first-click {
+      font-style: italic;
+      color: #ffffff;
+    }
+    &.second-click {
+      font-style: normal;
+      color: rgb(255 255 255 / 50%);
+    }
+    &.active-tab {
+      color: #ffffff;
+      background-color: var(--el-main-bg-color);
+    }
   }
   .operation-item {
     margin-right: 15px;

src/layouts/index.scss

@@ -14,6 +14,12 @@
     .n-layout-sider {
       background-color: var(--el-aside-tree-bg-color);
       border-left: 1px solid var(--el-aside-border-color);
+      .n-scrollbar .n-scrollbar-container .n-scrollbar-content {
+        padding: 0 !important;
+        .file-management {
+          height: calc(100vh - 35px);
+        }
+      }
 
       // 设置折叠状态下 padding 为零，否则侧边 item 图标无法点击
       &.n-layout-sider--collapsed .n-layout-sider-scroll-container {

src/styles/theme/aside.ts

@@ -12,6 +12,7 @@ export const asideTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
     '--el-aside-tree-bg-color': '#252526',
     '--el-aside-logo-text-color': '#dadada',
     '--el-aside-text-color': '#CCCCCC',
-    '--el-aside-border-color': '#414243'
+    '--el-aside-border-color': '#414243',
+    '--el-aside-tree-text-color': '#bbbbbb'
   }
 };