项目重构

gaoluyang

5 天以前 c7566bba45e6f90594d36ec4b80ac4ff89f577ee

 src/assets/styles/variables.module.scss

@@ -8,35 +8,35 @@
$yellow: #FEC171;
$panGreen: #30B08F;

// 默认主题变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #1a1f2e;
$menuHover: #263445;
// 默认主题变量（实验室青绿：「浅色素雅」侧边栏 —— 白底 + 青绿选中）
$menuText: #5c6b69;
$menuActiveText: #0d9488;
$menuBg: #ffffff;
$menuHover: #f2f7f6;

// 浅色主题theme-light
// 浅色主题theme-light（业务定制：侧边栏与浅色主题一致，白底 + 青绿选中 + 左侧竖条）
$menuLightBg: #ffffff;
$menuLightHover: #f0f1f5;
$menuLightText: #303133;
$menuLightActiveText: #409EFF;
$menuLightHover: #f2f7f6;
$menuLightText: #5c6b69;
$menuLightActiveText: #0d9488;

// 基础变量
$base-sidebar-width: 200px;
$sideBarWidth: 200px;

// 菜单暗色变量
$base-menu-color: rgba(255,255,255,.65);
$base-menu-color-active: #ffffff;
$base-menu-background: #1a1f2e;
$base-sub-menu-background: #141824;
$base-sub-menu-hover: rgba(255,255,255,.06);
// 菜单暗色变量（浅色主题下的侧边栏：白底主菜单 + 极浅灰二级菜单）
$base-menu-color: #5c6b69;
$base-menu-color-active: #0d9488;
$base-menu-background: #ffffff;
$base-sub-menu-background: #fafbfb;
$base-sub-menu-hover: #eef4f3;

// 组件变量
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;
$--color-primary: #0d9488;
$--color-success: #16a34a;
$--color-warning: #d98b1c;
$--color-danger: #e05252;
$--color-info: #6b7c85;

:export {
  menuText: $menuText;
@@ -65,15 +65,18 @@
  colorInfo: $--color-info;
}

// CSS变量定义
// CSS变量定义（侧边栏相关变量的「唯一定义处」仍是 assets/styles/theme/tokens.scss，
// 这里跟进同一组值 —— 本文件在 tokens.scss 之后加载，同名变量会覆盖它）
:root {
  /* 亮色模式变量 */
  --sidebar-bg: #{$menuBg};
  --sidebar-text: #{$menuText};
  --menu-hover: #{$menuHover};
  --menu-active-text: #{$menuLightActiveText};
  --menu-active-bg: #e4f2ef;
  
  --navbar-bg: #ffffff;
  --navbar-text: #303133;
  --navbar-text: #1f2d2b;
  
  /* splitpanes default-theme 变量 */
  --splitpanes-default-bg: #ffffff;
@@ -97,9 +100,10 @@

  /* 侧边栏 */
  --sidebar-bg: #141414;
  --sidebar-text: #ffffff;
  --sidebar-text: #d0d0d0;
  --menu-hover: #2d2d2d;
  --menu-active-text: #{$menuActiveText};
  --menu-active-text: #2dd4bf;
  --menu-active-bg: #2d2d2d;

  /* 顶部导航栏 */
  --navbar-bg: #141414;
@@ -114,7 +118,6 @@
  --tags-item-hover: #2d2d2d;
  --tags-close-hover: #64666a;
  /* 卡片模式激活页签 */
  --tags-card-active-bg: var(--el-bg-color-overlay);
  --tags-card-active-bg: color-mix(in srgb, var(--el-color-primary) 22%, var(--el-bg-color-overlay) 78%);
  --tags-card-active-border: var(--tags-card-active-bg);

@@ -155,6 +158,10 @@
      .el-menu-item,
      .el-sub-menu__title {
        color: var(--sidebar-text) !important;
      }
      /* 暗色下选中项仍走主色，否则会被上面的 !important 压成普通文字色 */
      .el-menu-item.is-active {
        color: var(--el-color-primary) !important;
      }
      .el-menu-item:not(.is-active):hover,
      .submenu-title-noDropdown:hover,
@@ -227,11 +234,11 @@
    &:not(.tags-view-container--chrome) .tags-view-wrapper .tags-view-item.active {
      background-color: var(--tags-card-active-bg) !important;
      border-color: var(--tags-card-active-border) !important;
      color: var(--current-color, #409eff) !important;
      color: var(--current-color, var(--el-color-primary)) !important;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);

      &::before {
        background: var(--current-color, #409eff) !important;
        background: var(--current-color, var(--el-color-primary)) !important;
      }
    }
  }