修改UI样式

src/assets/styles/element-ui.scss

@@ -151,3 +151,38 @@
 .el-message-box .el-message-box__message {
   word-break: break-word;
 }
+
+// Element Plus 主色调自定义配置
+:root {
+  --el-color-primary: #203daf;
+  --el-color-primary-light-3: #4a5bb8;
+  --el-color-primary-light-5: #6b7ac1;
+  --el-color-primary-light-7: #8c99ca;
+  --el-color-primary-light-8: #9da8d0;
+  --el-color-primary-light-9: #aeb7d6;
+  --el-color-primary-dark-2: #1a2c6b;
+  --el-color-primary-dark-3: #162a5a;
+  --el-color-primary-dark-4: #122749;
+  --el-color-primary-dark-5: #0e2438;
+  --el-color-primary-dark-6: #0a2027;
+  --el-color-primary-dark-7: #061c16;
+  --el-color-primary-dark-8: #021805;
+  --el-color-primary-dark-9: #001404;
+
+  // 按钮文本颜色
+  // --el-button-text-color: #277700;
+
+  // 菜单文本颜色设置为纯黑色
+  --el-menu-text-color: #000000;
+  --el-menu-hover-text-color: #000000;
+  --el-menu-active-color: #203daf;
+  --el-menu-bg-color: #ffffff;
+  --el-menu-hover-bg-color: #f5f5f5;
+}
+
+// 深色模式下的菜单文本颜色
+html.dark {
+  --el-menu-text-color: #000000;
+  --el-menu-hover-text-color: #000000;
+  --el-menu-active-color: #203daf;
+}

src/assets/styles/sidebar.scss

@@ -72,6 +72,22 @@
       border: none;
       height: 100%;
       width: 100% !important;
+
+      // 强制设置菜单文本颜色为纯黑色
+      color: #000000 !important;
+
+      .el-menu-item,
+      .el-sub-menu__title {
+        color: #000000 !important;
+
+        &:hover {
+          color: #000000 !important;
+        }
+      }
+
+      .el-menu-item.is-active {
+        color: #203daf !important;
+      }
     }
 
     .el-menu-item,

src/components/Breadcrumb/index.vue

@@ -2,8 +2,8 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta?.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta?.title }}</a>
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect breadcrumb-item">{{ item.meta?.title }}</span>
+        <!-- <a v-else @click.prevent="handleLink(item)" class="breadcrumb-item">{{ item.meta?.title }}</a> -->
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -34,9 +34,9 @@ const getBreadcrumb = () => {
     matched = route.matched.filter((item) => item.meta && item.meta.title);
   }
   // 判断是否为首页
-  if (!isDashboard(matched[0])) {
-    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
-  }
+  // if (!isDashboard(matched[0])) {
+  //   matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
+  // }
   levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
 };
 const findPathNum = (str, char = '/') => {
@@ -87,4 +87,7 @@ onMounted(() => {
     cursor: text;
   }
 }
+.breadcrumb-item {
+  color: #000000 !important;
+}
 </style>

src/layout/components/Navbar.vue

@@ -218,7 +218,7 @@ watch(
 }
 
 .navbar {
-  height: 50px;
+  height: 40px;
   overflow: hidden;
   position: relative;
   //background: #fff;
@@ -263,8 +263,8 @@ watch(
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
-      height: 100%;
+      padding: 0 10px;
+      height: 123%;
       font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
@@ -288,8 +288,8 @@ watch(
 
         .user-avatar {
           cursor: pointer;
-          width: 40px;
-          height: 40px;
+          width: 30px;
+          height: 30px;
           border-radius: 10px;
           margin-top: 10px;
         }

src/layout/components/TagsView/index.vue

@@ -6,13 +6,13 @@
         :key="tag.path"
         :data-path="tag.path"
         :class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
-        :to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
+        :to="{ path: tag.path ? tag.path : '', query: tag.query }"
         class="tags-view-item"
         :style="activeStyle(tag)"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openMenu(tag, $event)"
       >
-        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon"/>
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
         {{ tag.title }}
         <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
           <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
@@ -52,7 +52,7 @@ const router = useRouter();
 const visitedViews = computed(() => useTagsViewStore().getVisitedViews());
 const routes = computed(() => usePermissionStore().getRoutes());
 const theme = computed(() => useSettingsStore().theme);
-const tagsIcon = computed(() => useSettingsStore().tagsIcon)
+const tagsIcon = computed(() => useSettingsStore().tagsIcon);
 
 watch(route, () => {
   addTags();
@@ -180,7 +180,7 @@ const closeLeftTags = () => {
   });
 };
 const closeOthersTags = () => {
-  router.push(selectedTag.value).catch(() => {});
+  router.push(selectedTag.value?.fullPath || '/').catch(() => {});
   proxy?.$tab.closeOtherPage(selectedTag.value).then(() => {
     moveToCurrentTag();
   });
@@ -240,27 +240,28 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: 48px;
   width: 100%;
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.12),
-    0 0 3px 0 rgba(0, 0, 0, 0.04);
+  // background-color: var(--el-bg-color);
+  // border-bottom: 1px solid var(--el-border-color-light);
+  // box-shadow:
+  //   0 1px 3px 0 rgba(0, 0, 0, 0.12),
+  //   0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
       position: relative;
       cursor: pointer;
-      height: 26px;
-      line-height: 23px;
+      height: 30px;
+      line-height: 30px;
       background-color: var(--el-bg-color);
       border: 1px solid var(--el-border-color-light);
-      color: #495060;
+      color: #000000;
       padding: 0 8px;
-      font-size: 12px;
+      font-size: 14px;
       margin-left: 5px;
-      margin-top: 4px;
+      margin-top: 10px;
+      border-radius: 3px;
       &:hover {
         color: var(--el-color-primary);
       }