refact: 暗黑模式下的 tab 选项卡

components.d.ts

@@ -39,6 +39,7 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
+    NPopover: typeof import('naive-ui')['NPopover']
     NSpace: typeof import('naive-ui')['NSpace']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']

src/components/Layout/LayoutWork.vue

@@ -9,6 +9,7 @@
         class="resize-content"
       >
         <!-- <ProjectTree /> -->
+        侧边栏
       </div>
       <div
         class="resize-line"

src/modules/HomeFront/pages/index.vue

@@ -3,9 +3,9 @@
     title="主页"
     flex-content
   >
-    <template #action>
+    <!-- <template #action>
       <n-button>测绘</n-button>
-    </template>
+    </template> -->
 
     <n-data-table
       :columns="tableColumns"

src/router/frontend/index.ts

@@ -553,9 +553,6 @@ export const routesHomeFrontend: RouteRecordRaw = {
         {
           path: 'dashboard',
           name: 'DashboardIndex',
-          meta: {
-            title: 'Dashboard'
-          },
           redirect: {
             name: 'DashboardConsole'
           },

src/widgets/WorkTabs/Tabs.vue

@@ -16,10 +16,12 @@
         v-for="(tabItem) in workTabsStore.currentTabsInCacheSpace"
         :key="tabItem.tabKey"
         ref="refsTabs"
-        class="tab-item-box"
-        :class="{
-          active: tabItem.tabKey === workTabsStore.currentCacheSpace?.activeTabKey
-        }"
+        :class="[
+          'tab-item-box',
+          {
+            'active': tabItem.tabKey === workTabsStore.currentCacheSpace?.activeTabKey
+          }
+        ]"
         @click="handleSwitch(tabItem)"
       >
         <span
@@ -28,17 +30,18 @@
         >{{ tabItem.customLabel || tabItem.label }}</span>
         <div
           v-if="!isOnlyOneTab"
-          class="tab-item-icon"
+          class="tab-item-icon flex items-center"
           @click.stop="handleCloseTab(tabItem)"
         >
-          <IconFont icon="icon-error" />
+          <n-icon :component="IosCloseCircleOutline" />
         </div>
       </li>
     </ul>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { IosCloseCircleOutline } from '@vicons/ionicons4'
 import useWorkTabsStore from './store'
 import type { WorkTab } from './types'
 
@@ -206,10 +209,11 @@ onUnmounted(async() => {
       padding: 0 11px 0 12px;
       cursor: pointer;
       transition: all .2s;
-      background-color: #dee2ea;
       border-radius: 8px 8px 0 0;
       margin-right: 2px;
 
+      --at-apply: bg-#dee2ea dark:bg-#565555;
+
       &:last-child {
         margin-right: 0;
         transition: all .2s;
@@ -231,25 +235,31 @@ onUnmounted(async() => {
         font-size: 14px;
         font-family: PingFangSC-Regular, "PingFang SC";
         font-weight: 400;
-        color: #303133;
+
+        --at-apply: c-#303133 dark:c-#dee2ea;
       }
 
       &:hover {
-        background-color: #cacfd8;
+        --at-apply: bg-#cacfd8 dark:bg-#3e3e3e;
 
         & > .tab-item-icon {
           color: #909399;
         }
       }
 
       &.active {
-        background-color: #fff;
+        --at-apply: bg-#fff dark:bg-#1e1e20;
+
+        & > .tab-item-label {
+          --at-apply: dark:c-#fff;
+        }
 
         & > .tab-item-icon {
           color: transparent;
         }
 
         &:hover {
+          --at-apply: dark:bg-#1e1e20;
 
           & > .tab-item-icon {
             color: #b6b9c1;

src/widgets/WorkTabs/TabsOptions.vue

@@ -1,21 +1,22 @@
 <template>
-  <el-popover
+  <n-popover
     trigger="hover"
-    :width="236"
-    :show-after="300"
-    popper-class="tabs-options-box"
+    style="width: 236px"
+    :delay="300"
+    class="tabs-options-box"
     placement="bottom-start"
-    @show="isKeepHover = true"
-    @hide="isKeepHover = false"
+    @update:show="(showValue) => isKeepHover = showValue"
   >
-    <template #reference>
+    <template #trigger>
       <div
-        class="tabs-options-action"
+        class="tabs-options-action hover-bg-#cacfd8 dark:hover-c-#303133"
         :class="{
-          'is-hover': isKeepHover
+          'bg-#cacfd8 dark:c-#303133': isKeepHover
         }"
       >
-        <IconFont icon="icon-arrow_down" />
+        <n-icon
+          :component="KeyboardDoubleArrowDownFilled"
+        />
       </div>
     </template>
     <template #default>
@@ -27,7 +28,7 @@
         @click="handleCloseOtherTabs()"
       >
         <span class="close-icon">
-          <IconFont icon="icon-error" />
+          <n-icon :component="IosCloseCircleOutline" />
         </span>
         <span class="close-other-text">关闭其他标签</span>
       </div>
@@ -55,11 +56,13 @@
         </li>
       </ul>
     </template>
-  </el-popover>
+  </n-popover>
 </template>
 
 <script lang="ts" setup>
 
+import { IosCloseCircleOutline } from '@vicons/ionicons4'
+import { KeyboardDoubleArrowDownFilled } from '@vicons/material'
 import useWorkTabsStore from './store'
 import type { WorkTab } from './types'
 
@@ -110,14 +113,6 @@ const isKeepHover = ref(false)
   transition: .3s;
   cursor: pointer;
   z-index: 0;
-
-  &:hover {
-    background-color: #cacfd8;
-  }
-
-  &.is-hover {
-    background-color: #cacfd8;
-  }
 }
 
 .tabs-options-box {

src/widgets/WorkTabs/TabsOutset.vue

@@ -1,14 +1,21 @@
 <template>
   <div
     id="tabs-outset-box"
-    @click="handleJumpToCockpit()"
+    @click="handleJumpToOverview()"
   >
-    <IconFont icon="icon-jiashicang" />
-    <span class="tabs-outset-box-label">驾</span>
+    <n-icon
+      :component="AppFolder20Regular"
+    />
+    <span
+      v-if="false"
+      class="tabs-outset-box-label"
+    >驾</span>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { AppFolder20Regular } from '@vicons/fluent'
+
 
 /**
  * 驾驶舱 - 🏠
@@ -20,9 +27,9 @@ defineOptions({
 
 const router = useTabRouter()
 
-const handleJumpToCockpit = () => {
+const handleJumpToOverview = () => {
   router.push({
-    name: 'GroupProjectCockpit'
+    name: 'GroupProjectDetail'
   })
 }
 </script>

src/widgets/WorkTabs/index.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="work-tabs-container">
-    <div class="work-tabs__controller">
+    <div class="work-tabs__controller bg-#eaedf2 dark:bg-#7a7a7a">
       <TabsOutset v-if="showOutset" />
       <TabsHeader />
-      <!-- TODO: 需要将 element-plus 重构为 naive-ui 组件 -->
-      <!-- <TabsOptions /> -->
+      <TabsOptions />
     </div>
 
     <div class="work-tabs__content">
@@ -43,7 +42,6 @@ const showOutset = computed(() => route.path.includes('/group-project'))
     justify-content: space-between;
     user-select: none;
     padding: 16px 21px 0 24px;
-    background-color: #eaedf2;
     position: relative;
   }
 
@@ -61,7 +59,6 @@ const showOutset = computed(() => route.path.includes('/group-project'))
   .work-tabs__content {
     flex: 1;
     min-height: 0;
-    background-color: #fff;
     overflow-y: auto;
   }
 }