样式修改

zhangwencui

2026-06-18 9f5e18cc415cd3fef13f105ffeabae3c01ba9665

 src/assets/styles/variables.module.scss

@@ -12,27 +12,28 @@
$menuText: #5a6478;
$menuActiveText: #ffffff;
$menuBg: #f8fafb;
$menuHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
$menuHover: rgba(var(--el-color-primary-rgb, 139, 92, 246), 0.08);

// light theme - 使用主题色
$menuLightBg: #f8fafb;
$menuLightHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
$menuLightHover: rgba(var(--el-color-primary-rgb, 139, 92, 246), 0.08);
$menuLightText: #3d4858;
$menuLightActiveText: #ffffff;

// layout
$base-sidebar-width: 216px;
$base-sidebar-collapsed-width: 72px;
$sideBarWidth: 216px;

// sidebar - 优化后的侧边栏配色
$base-menu-color: #5a6478;
$base-menu-color-active: #0d9488;
$base-menu-color-active: #8b5cf6;
$base-menu-background: #f8fafb;
$base-sub-menu-background: #f0f5f4;
$base-sub-menu-hover: #ffffff;

// component - 优化后的主题色
$--color-primary: #0d9488;
$--color-primary: #8b5cf6;
$--color-success: #67c23a;
$--color-warning: #d89b41;
$--color-danger: #d25b52;
@@ -64,100 +65,122 @@
}

:root {
  --sidebar-bg: #{$menuBg};
  --sidebar-text: #{$menuText};
  --sidebar-muted: #5a6478;
  --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
  --menu-active-bg: var(--el-color-primary, #0d9488);
  --menu-active-text: #ffffff;
  --menu-surface: #f8fafb;
  --sidebar-width: 216px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 64px;
  --tagsbar-height: 40px;
  --content-gap: 16px;
  --content-radius: 10px;
  --layout-header-z: 20;

  --app-bg: #f0f4f3;
  --app-bg-accent: #e0ebe9;
  --el-color-primary: #8b5cf6;
  --el-color-primary-rgb: 139, 92, 246;
  --el-color-success: #14b8a6;
  --el-color-warning: #f59e0b;
  --el-color-danger: #ef4444;

  --sidebar-bg: #f8fafb;
  --sidebar-text: #5a6478;
  --sidebar-muted: #8b9bb4;
  --menu-hover: rgba(139, 92, 246, 0.08);
  --menu-active-bg: rgba(139, 92, 246, 0.1);
  --menu-active-text: #8b5cf6;
  --menu-surface: #ffffff;
  --menu-active-glow: none;

  --app-bg: #f8fafc;
  --app-bg-accent: #f1f5f9;
  --surface-base: #ffffff;
  --surface-soft: #f7faf9;
  --surface-muted: #eef3f2;
  --surface-border: #d5e0de;
  --surface-border-strong: #c5d5d2;
  --text-primary: #1e293b;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.1);
  --shadow-menu: 0 2px 8px rgba(0, 0, 0, 0.05);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --surface-soft: rgba(255, 255, 255, 0.9);
  --surface-muted: #f1f5f9;
  --surface-border: #e2e8f0;
  --surface-border-strong: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-menu: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;
  --radius-xs: 2px;

  --navbar-bg: rgba(255, 255, 255, 0.85);
  --navbar-text: #1e293b;
  --navbar-hover: rgba(13, 148, 136, 0.08);
  --el-border-radius-base: var(--radius-sm);
  --el-border-radius-small: var(--radius-xs);
  --el-border-radius-round: 999px;
  --el-border-radius-circle: 50%;

  --tags-bg: transparent;
  --tags-item-bg: rgba(255, 255, 255, 0.8);
  --tags-item-border: rgba(197, 213, 210, 0.9);
  --tags-item-text: #4a5568;
  --tags-item-hover: rgba(13, 148, 136, 0.1);
  --tags-close-hover: rgba(13, 148, 136, 0.2);
  
  --accent-primary: #0d9488;
  --accent-light: #14b8a6;
  --accent-lighter: #5eead4;
  --navbar-bg: #4b23a0;
  --navbar-text: #f8fafc;
  --navbar-hover: rgba(255, 255, 255, 0.08);

  --splitpanes-default-bg: #ffffff;
  --tags-bg: #f8fafc;
  --tags-item-bg: #ffffff;
  --tags-item-border: #e2e8f0;
  --tags-item-text: #475569;
  --tags-item-hover: #f1f5f9;
  --tags-close-hover: rgba(239, 68, 68, 0.1);

  --accent-primary: #8b5cf6;
  --accent-light: #3b82f6;
  --accent-lighter: #60a5fa;

  --panel-mask: rgba(255, 255, 255, 0.88);
  --panel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --splitpanes-default-bg: #f3f7fc;
}

html.dark {
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #d0d0d0;
  --el-border-color: #434343;
  --el-border-color-light: #434343;
  --el-bg-color: #f8fbff;
  --el-bg-color-overlay: #f3f7fd;
  --el-text-color-primary: #1e293b;
  --el-text-color-regular: #475569;
  --el-border-color: rgba(148, 163, 184, 0.2);
  --el-border-color-light: rgba(148, 163, 184, 0.18);

  --sidebar-bg: #1a1a1a;
  --sidebar-text: #d0d0d0;
  --sidebar-muted: #888888;
  --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.12);
  --menu-active-bg: var(--el-color-primary, #0d9488);
  --menu-active-text: #ffffff;
  --menu-surface: #1a1a1a;
  
  --text-primary: #ffffff;
  --text-secondary: #d0d0d0;
  --text-tertiary: #888888;
  --accent-primary: var(--el-color-primary, #0d9488);
  --accent-light: var(--el-color-primary-light-3, #14b8a6);
  --sidebar-bg: linear-gradient(180deg, #0e2a4f 0%, #123e69 55%, #0e2a4f 100%);
  --sidebar-text: rgba(234, 242, 255, 0.82);
  --sidebar-muted: rgba(234, 242, 255, 0.82);
  --menu-hover: rgba(147, 197, 253, 0.2);
  --menu-active-bg: linear-gradient(135deg, #2f80ff 0%, #38bdf8 100%);
  --menu-active-text: #f8fbff;
  --menu-surface: linear-gradient(180deg, rgba(13, 43, 79, 0.97) 0%, rgba(8, 28, 52, 0.94) 100%);

  --navbar-bg: #141414;
  --navbar-text: #ffffff;
  --navbar-hover: #141414;
  --text-primary: #1e293b;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --accent-primary: #2563eb;
  --accent-light: #3b82f6;

  --tags-bg: #141414;
  --tags-item-bg: #1d1e1f;
  --tags-item-border: #303030;
  --tags-item-text: #d0d0d0;
  --tags-item-hover: #2d2d2d;
  --tags-close-hover: #64666a;
  --navbar-bg: rgba(255, 255, 255, 0.86);
  --navbar-text: #1f3658;
  --navbar-hover: rgba(37, 99, 235, 0.08);

  --splitpanes-bg: #141414;
  --splitpanes-border: #303030;
  --splitpanes-splitter-bg: #1d1e1f;
  --splitpanes-splitter-hover-bg: #2d2d2d;
  --tags-bg: transparent;
  --tags-item-bg: rgba(255, 255, 255, 0.9);
  --tags-item-border: rgba(148, 163, 184, 0.22);
  --tags-item-text: #334155;
  --tags-item-hover: #f4f8ff;
  --tags-close-hover: rgba(37, 99, 235, 0.16);

  --blockquote-bg: #1d1e1f;
  --blockquote-border: #303030;
  --blockquote-text: #d0d0d0;
  --cron-border: #303030;
  --splitpanes-default-bg: #141414;
  --splitpanes-bg: #f3f7fc;
  --splitpanes-border: rgba(148, 163, 184, 0.22);
  --splitpanes-splitter-bg: #e7eef8;
  --splitpanes-splitter-hover-bg: #d9e6f7;

  --blockquote-bg: #f3f7ff;
  --blockquote-border: rgba(59, 130, 246, 0.36);
  --blockquote-text: #334155;
  --cron-border: rgba(148, 163, 184, 0.22);
  --splitpanes-default-bg: #f3f7fc;

  .sidebar-container {
    .el-menu-item,
    .menu-title {
      color: var(--sidebar-text);
    }
    

    .el-menu-item.is-active,
    .el-menu-item.is-active .menu-title {
      color: var(--menu-active-text) !important;
@@ -167,7 +190,7 @@
    & .theme-dark .el-sub-menu .el-menu-item {
      background-color: var(--el-bg-color) !important;
    }
    

    & .theme-dark .el-sub-menu .el-menu-item.is-active {
      background-color: var(--menu-active-bg) !important;
    }
@@ -208,16 +231,17 @@
  }

  .el-table {
    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
    --el-table-header-text-color: var(--el-text-color-regular) !important;
    --el-table-border-color: var(--el-border-color-light) !important;
    --el-table-header-bg-color: var(--table-header-bg-custom, #e9d5ff) !important;
    --el-table-header-text-color: var(--table-header-text-custom, #1e293b) !important;
    --el-table-border-color: rgba(148, 163, 184, 0.4) !important;
    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
    border-radius: 0;

    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      th {
        background-color: var(--el-bg-color-overlay, #f0f1f5) !important;
        color: var(--el-text-color-regular, #515a6e);
        background-color: var(--el-table-header-bg-color) !important;
        color: var(--el-table-header-text-color) !important;
      }
    }
  }