refactor: 完成多主题模块的重构

src/layouts/LeftMode.vue

@@ -76,6 +76,7 @@ $transition-time: 0.35s;
   left: 0;
   z-index: 1001;
   overflow: hidden;
+  border-right: var(--v3-sidebar-border-right);
 }
 
 .main-container {

src/layouts/LeftTopMode.vue

@@ -79,6 +79,7 @@ $transition-time: 0.35s;
   left: 0;
   z-index: 1001;
   overflow: hidden;
+  border-right: var(--v3-sidebar-border-right);
   padding-top: var(--v3-navigationbar-height);
 }
 

src/styles/theme/core/element-plus.scss

@@ -2,24 +2,23 @@
 
 // 侧边栏的 item 的 popper
 .el-popper {
-  border: none !important;
   .el-menu {
-    background-color: lighten($theme-bg-color, 2%) !important;
+    background-color: var(--el-bg-color);
     .el-menu-item {
-      background-color: lighten($theme-bg-color, 2%) !important;
+      background-color: var(--el-bg-color);
       &.is-active,
       &:hover {
-        background-color: lighten($theme-bg-color, 6%) !important;
+        background-color: var(--el-bg-color-overlay);
-        color: $active-font-color !important;
+        color: #ffffff;
       }
     }
     .el-sub-menu__title {
-      background-color: lighten($theme-bg-color, 2%) !important;
+      background-color: var(--el-bg-color);
     }
     .el-sub-menu {
       &.is-active {
         > .el-sub-menu__title {
-          color: $active-font-color !important;
+          color: #ffffff;
         }
       }
     }

src/styles/theme/core/layouts.scss

@@ -3,25 +3,25 @@
 .app-wrapper {
   // 侧边栏
   .sidebar-container {
-    background-color: lighten($theme-bg-color, 2%);
+    background-color: var(--el-bg-color);
     .el-menu {
-      background-color: lighten($theme-bg-color, 2%) !important;
+      background-color: var(--el-bg-color);
       .el-menu-item {
-        background-color: lighten($theme-bg-color, 2%) !important;
+        background-color: var(--el-bg-color);
         &.is-active,
         &:hover {
-          background-color: lighten($theme-bg-color, 6%) !important;
+          background-color: var(--el-bg-color-overlay);
-          color: $active-font-color !important;
+          color: #ffffff;
         }
       }
     }
     .el-sub-menu__title {
-      background-color: lighten($theme-bg-color, 2%) !important;
+      background-color: var(--el-bg-color);
     }
     .el-sub-menu {
       &.is-active {
         > .el-sub-menu__title {
-          color: $active-font-color !important;
+          color: #ffffff !important;
         }
       }
     }

src/styles/theme/dark-blue/variables.scss

@@ -4,5 +4,3 @@
 $theme-name: "dark-blue";
 // 主题背景颜色
 $theme-bg-color: #001b44;
-// active 状态下文字颜色
-$active-font-color: #ffffff;

src/styles/theme/dark/variables.scss

@@ -4,5 +4,3 @@
 $theme-name: "dark";
 // 主题背景颜色
 $theme-bg-color: #141414;
-// active 状态下文字颜色
-$active-font-color: #ffffff;

src/styles/variables.css

@@ -15,6 +15,7 @@
   /** Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
   --v3-sidebar-width: 220px;
   --v3-sidebar-hide-width: 58px;
+  --v3-sidebar-border-right: 1px solid var(--el-fill-color);
   --v3-sidebar-menu-item-height: 60px;
   --v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
   --v3-sidebar-menu-bg-color: #001428;

src/styles/vxe-table.css

@@ -46,7 +46,7 @@
   /*table*/
   --vxe-table-header-font-color: var(--el-text-color-regular);
   --vxe-table-footer-font-color: var(--el-text-color-regular);
-  --vxe-table-border-color: var(--el-border-color);
+  --vxe-table-border-color: var(--el-border-color-lighter);
   --vxe-table-header-background-color: var(--el-bg-color);
   --vxe-table-body-background-color: var(--el-bg-color);
   --vxe-table-footer-background-color: var(--el-bg-color);
@@ -70,7 +70,7 @@
   /*toolbar*/
   --vxe-toolbar-background-color: var(--el-bg-color);
   --vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
-  --vxe-toolbar-panel-background-color: var(--el-bg-color);
+  --vxe-toolbar-panel-background-color: var(--el-bg-color-overlay);
 
   /*pager*/
   --vxe-pager-background-color: var(--el-bg-color);

src/views/table/element-plus/index.vue

@@ -148,7 +148,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
           <el-table-column prop="username" label="用户名" align="center" />
           <el-table-column prop="roles" label="角色" align="center">
             <template #default="scope">
-              <el-tag v-if="scope.row.roles === 'admin'" effect="plain">admin</el-tag>
+              <el-tag v-if="scope.row.roles === 'admin'" type="primary" effect="plain">admin</el-tag>
               <el-tag v-else type="warning" effect="plain">{{ scope.row.roles }}</el-tag>
             </template>
           </el-table-column>

src/views/table/vxe-table/tsx/RoleColumnSolts.tsx

@@ -3,7 +3,7 @@ import { type VxeColumnPropTypes } from "vxe-table/types/column"
 const solts: VxeColumnPropTypes.Slots = {
   default: ({ row, column }) => {
     const cellValue = row[column.field]
-    const type = cellValue === "admin" ? "" : "warning"
+    const type = cellValue === "admin" ? "primary" : "warning"
     return [<span class={`el-tag el-tag--${type} el-tag--plain`}>{cellValue}</span>]
   }
 }