优化

src/app/components/WorkspaceTabs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -125,7 +126,7 @@ watch(
 </script>
 
 <template>
-  <section class="workspace-tabs" aria-label="页面工作区">
+  <section class="workspace-tabs admin-workbench" aria-label="页面工作区">
     <div ref="tabListRef" class="workspace-tab-list" role="tablist" aria-label="已打开页面" @wheel="handleTabWheel">
       <div
         v-for="(tab, index) in workspace.tabs"
@@ -156,7 +157,7 @@ watch(
       </div>
     </div>
 
-    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
+    <el-dropdown trigger="click" placement="bottom-end" popper-class="admin-workbench shell-header-popper" @command="handleCommand">
       <el-button class="workspace-tab-more" text aria-label="页签管理" title="页签管理">
         <MoreHorizontal :size="18" aria-hidden="true" />
       </el-button>
@@ -181,9 +182,8 @@ watch(
   min-width: 0;
   height: 44px;
   align-items: stretch;
-  border-bottom: 1px solid var(--cc-border);
-  background: #f7f9fc;
-  box-shadow: 0 5px 14px rgba(23, 42, 70, .045);
+  border-bottom: 1px solid var(--workbench-border);
+  background: var(--workbench-surface);
 }
 .workspace-tab-list {
   display: flex;
@@ -208,10 +208,10 @@ watch(
   border: 1px solid transparent;
   border-bottom: 0;
   border-radius: 8px 8px 0 0;
-  color: #526178;
+  color: var(--workbench-muted);
 }
-.workspace-tab:hover { background: #eef3fa; color: #24344d; }
-.workspace-tab.is-active { border-color: var(--cc-border); background: #fff; color: #172033; }
+.workspace-tab:hover { background: var(--workbench-surface-soft); color: var(--workbench-text); }
+.workspace-tab.is-active { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); color: var(--workbench-primary); }
 .workspace-tab-activate {
   display: flex;
   min-width: 0;
@@ -239,19 +239,19 @@ watch(
   border: 0;
   border-radius: 6px;
   background: transparent;
-  color: #7b8799;
+  color: var(--workbench-muted);
   cursor: pointer;
 }
-.workspace-tab-close:hover { background: #dde6f2; color: #26364d; }
+.workspace-tab-close:hover { background: var(--workbench-accent-border); color: var(--workbench-primary); }
 .workspace-tab-activate:focus-visible,
-.workspace-tab-close:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
-.workspace-tab-more { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 0; border-left: 1px solid var(--cc-border); color: #526178; }
+.workspace-tab-close:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: -2px; }
+.workspace-tab-more { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 0; border-left: 1px solid var(--workbench-border); color: var(--workbench-muted); }
 
 @media (max-width: 720px) {
   .workspace-tabs { top: 64px; height: 48px; }
   .workspace-tab-list { align-items: center; padding: 4px 6px; }
   .workspace-tab { min-width: 140px; height: 40px; border-bottom: 1px solid transparent; border-radius: 8px; }
-  .workspace-tab.is-active { border-color: #cbd7e7; }
+  .workspace-tab.is-active { border-color: var(--workbench-accent-border); }
   .workspace-tab-close { width: 34px; height: 34px; flex-basis: 34px; }
   .workspace-tab-more { height: 48px; }
 }