1.整体样式修改

gaoluyang

昨天 31bc616ad716daf2ba0ec7fa38352644b6293dfc

 src/assets/styles/variables.module.scss

@@ -8,35 +8,35 @@
$yellow: #fec171;

$panGreen: #30b08f;



// 默认主题变量

$menuText: #bfcbd9;

$menuActiveText: #409eff;

$menuBg: #304156;

$menuHover: #263445;

// menu palette
$menuText: #677287;
$menuActiveText: #1f7a72;
$menuBg: #f4f7f4;
$menuHover: #e7eeea;


// 浅色主题theme-light

$menuLightBg: #002fa7;

$menuLightHover: #f0f1f5;

$menuLightText: #fff;

$menuLightActiveText: #002fa7;

// light theme
$menuLightBg: #f4f7f4;
$menuLightHover: #e7eeea;
$menuLightText: #3b4658;
$menuLightActiveText: #1f7a72;


// 基础变量

// layout
$base-sidebar-width: 200px;

$sideBarWidth: 200px;



// 菜单暗色变量

$base-menu-color: #bfcbd9;

$base-menu-color-active: #f4f4f5;

$base-menu-background: #304156;

$base-sub-menu-background: #1f2d3d;

$base-sub-menu-hover: #fff;

// sidebar
$base-menu-color: #677287;
$base-menu-color-active: #1f7a72;
$base-menu-background: #f4f7f4;
$base-sub-menu-background: #eef3ef;
$base-sub-menu-hover: #ffffff;


// 组件变量

$--color-primary: #409eff;

// component
$--color-primary: #1f7a72;
$--color-success: #67c23a;

$--color-warning: #e6a23c;

$--color-danger: #f56c6c;

$--color-info: #909399;

$--color-warning: #d89b41;
$--color-danger: #d25b52;
$--color-info: #7d8797;


:export {

  menuText: $menuText;

@@ -48,7 +48,6 @@
  menuLightText: $menuLightText;

  menuLightActiveText: $menuLightActiveText;

  sideBarWidth: $sideBarWidth;

  // 导出基础颜色

  blue: $blue;

  lightBlue: $light-blue;

  red: $red;

@@ -57,7 +56,6 @@
  tiffany: $tiffany;

  yellow: $yellow;

  panGreen: $panGreen;

  // 导出组件颜色

  colorPrimary: $--color-primary;

  colorSuccess: $--color-success;

  colorWarning: $--color-warning;

@@ -65,23 +63,45 @@
  colorInfo: $--color-info;

}



// CSS变量定义

:root {

  /* 亮色模式变量 */

  --sidebar-bg: #{$menuBg};

  --sidebar-text: #{$menuText};

  --sidebar-muted: #93a0b1;
  --menu-hover: #{$menuHover};

  --menu-active-bg: #dfe9e4;
  --menu-surface: rgba(255, 255, 255, 0.72);


  --navbar-bg: #ffffff;

  --navbar-text: #303133;

  --app-bg: #eef2ee;
  --app-bg-accent: #dfe8e2;
  --surface-base: #ffffff;
  --surface-soft: #f7faf8;
  --surface-muted: #eff4f1;
  --surface-border: #d8e1db;
  --surface-border-strong: #c9d5ce;
  --text-primary: #21313f;
  --text-secondary: #5f6d7e;
  --text-tertiary: #8a98a8;
  --shadow-sm: 0 10px 30px rgba(31, 49, 38, 0.06);
  --shadow-md: 0 18px 50px rgba(31, 49, 38, 0.1);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;


  /* splitpanes default-theme 变量 */

  --navbar-bg: rgba(255, 255, 255, 0.78);
  --navbar-text: #21313f;
  --navbar-hover: rgba(31, 122, 114, 0.08);

  --tags-bg: transparent;
  --tags-item-bg: rgba(255, 255, 255, 0.74);
  --tags-item-border: rgba(201, 213, 206, 0.88);
  --tags-item-text: #5f6d7e;
  --tags-item-hover: rgba(31, 122, 114, 0.08);
  --tags-close-hover: rgba(31, 122, 114, 0.18);

  --splitpanes-default-bg: #ffffff;

}



// 暗黑模式变量

html.dark {

  /* 默认通用 */

  --el-bg-color: #141414;

  --el-bg-color-overlay: #1d1e1f;

  --el-text-color-primary: #ffffff;

@@ -89,18 +109,15 @@
  --el-border-color: #434343;

  --el-border-color-light: #434343;



  /* 侧边栏 */

  --sidebar-bg: #141414;

  --sidebar-text: #ffffff;

  --menu-hover: #2d2d2d;

  --menu-active-text: #{$menuActiveText};



  /* 顶部导航栏 */

  --navbar-bg: #141414;

  --navbar-text: #ffffff;

  --navbar-hover: #141414;



  /* 标签栏 */

  --tags-bg: #141414;

  --tags-item-bg: #1d1e1f;

  --tags-item-border: #303030;

@@ -108,36 +125,29 @@
  --tags-item-hover: #2d2d2d;

  --tags-close-hover: #64666a;



  /* splitpanes 组件暗黑模式变量 */

  --splitpanes-bg: #141414;

  --splitpanes-border: #303030;

  --splitpanes-splitter-bg: #1d1e1f;

  --splitpanes-splitter-hover-bg: #2d2d2d;



  /* blockquote 暗黑模式变量 */

  --blockquote-bg: #1d1e1f;

  --blockquote-border: #303030;

  --blockquote-text: #d0d0d0;



  /* Cron 时间表达式 模式变量 */

  --cron-border: #303030;



  /* splitpanes default-theme 暗黑模式变量 */

  --splitpanes-default-bg: #141414;



  /* 侧边栏菜单覆盖 */

  .sidebar-container {

    .el-menu-item,

    .menu-title {

      color: var(--el-text-color-regular);

    }


    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,

    & .theme-dark .el-sub-menu .el-menu-item {

      background-color: var(--el-bg-color) !important;

    }

  }



  /* 顶部栏栏菜单覆盖 */

  .el-menu--horizontal {

    .el-menu-item {

      &:not(.is-disabled) {

@@ -149,7 +159,6 @@
    }

  }



  /* 分割窗格覆盖 */

  .splitpanes {

    background-color: var(--splitpanes-bg);



@@ -173,7 +182,6 @@
    }

  }



  /* 表格样式覆盖 */

  .el-table {

    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;

    --el-table-header-text-color: var(--el-text-color-regular) !important;

@@ -189,7 +197,6 @@
    }

  }



  /* 树组件高亮样式覆盖 */

  .el-tree {

    .el-tree-node.is-current > .el-tree-node__content {

      background-color: var(--el-bg-color-overlay) !important;

@@ -201,20 +208,17 @@
    }

  }



  /* 下拉菜单样式覆盖 */

  .el-dropdown-menu__item:not(.is-disabled):focus,

  .el-dropdown-menu__item:not(.is-disabled):hover {

    background-color: var(--navbar-hover) !important;

  }



  /* blockquote样式覆盖 */

  blockquote {

    background-color: var(--blockquote-bg) !important;

    border-left-color: var(--blockquote-border) !important;

    color: var(--blockquote-text) !important;

  }



  /* 时间表达式标题样式覆盖 */

  .popup-result .title {

    background: var(--cron-border);

  }