feat: 重构前端项目结构并优化代码

refactor: 迁移前端资源文件至web目录
feat: 新增多种图标资源
style: 统一代码风格和格式化配置
docs: 更新README和文档说明
chore: 更新依赖和配置文件
fix: 修复部分类型定义和枚举
perf: 优化路由和组件加载逻辑

frontend/web/src/styles/dark/css-vars.css

@@ -0,0 +1,329 @@
+/* 暗黑模式通过 CSS 自定义变量，官方链接：https://element-plus.org/zh-CN/guide/dark-mode.html#%E9%80%9A%E8%BF%87-css */
+/**
+ * Element Plus 主题最小回退变量（合并版）
+ *
+ * === 配色层级（同一主色：哪里深、哪里浅）===
+ * L0 页面画布：--el-bg-color / --el-bg-color-page（大面积）
+ * L1 内容区块：--el-bg-color-overlay（卡片/表格等）
+ * L2 卡片/表格容器面：--el-bg-color-overlay（抬升中性面）
+ * L3 表头/侧栏条：使用 fill 层级（不再做混色）
+ * L4 浮层（下拉/弹窗）：面板底 = overlay，不用整板灌主色；强调在选项/按钮/focus
+ * L5 再嵌套浅填充：--el-fill-color-light（hover 槽、禁用底等）
+ * 标签栏 TagsView：使用 Element Plus fill/bg token
+ * 主色强度：点线控件（按钮、focus、选中字）用实色 primary；面状 hover/范围/斑马用 fill 层级
+ *
+ * === 本文区块 ===
+ * :root 亮色 / html.dark 暗色 / 运行时 theme.ts 覆盖
+ * 弹层、浮层 Popper、Select 选项、DatePicker 范围、级联、表格见对应注释
+ * 其余排期：Message、图表取 CSS 变量、登录全屏页；Tabs border-card 顶条 / Steps simple / Progress 轨道见下文
+ */
+
+:root,
+html :root {
+  /* 基础中性色（画布/浅分割线轻混主色，随 --el-color-primary 略偏主题，保持淡淡层次） */
+  --el-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #f8fafc 95%);
+  --el-bg-color-page: var(--el-bg-color);
+  --el-bg-color-overlay: #ffffff;
+  --el-fill-color: #e2e8f0;
+  --el-fill-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 3%, #f1f5f9 93%);
+  /* 亮色：分割线偏淡（主色比例略降、灰底偏浅） */
+  --el-border-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 6%, #e2e8f0 94%);
+  --el-border-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 7.5%, #eef2f7 92.5%);
+  --el-border-color-lighter: color-mix(in srgb, var(--el-color-primary, #4080ff) 15%, #f1f5f9 92%);
+  --el-border-color-extra-light: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 5.5%,
+    #f4f6f8 94.5%
+  );
+  --el-text-color-primary: #0f172a;
+  --el-text-color-regular: #475569;
+  --el-text-color-secondary: #64748b;
+  --el-text-color-placeholder: #94a3b8;
+
+  /* 阴影/遮罩 */
+  --el-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --el-box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --el-overlay-color: rgba(15, 23, 42, 0.5);
+  --el-overlay-color-light: rgba(15, 23, 42, 0.3);
+  --el-overlay-color-lighter: rgba(15, 23, 42, 0.15);
+
+  /* 菜单 hover 兼容 */
+  --el-menu-hover-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #f3f6fb 92%);
+
+  /* 全局原生滚动条：轨道浅底 + 滑块混主色（随 theme.ts / --el-color-primary 变） */
+  --app-scrollbar-track: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #eef2f7 95%);
+  --app-scrollbar-thumb: color-mix(in srgb, var(--el-color-primary, #4080ff) 35%, #bcc8d4 65%);
+  --app-scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 48%,
+    #94a3b8 52%
+  );
+
+  /*
+   * 表格：表头 / 斑马 / 行悬停 — 同一主色，深浅分层（亮底；整体偏浅、主色占比低）
+   * 表头略深 → 悬停中等 → 斑马最浅
+   */
+  --el-table-theme-header-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #f4f6f9 92%);
+  --el-table-theme-hover-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 5.5%,
+    var(--el-bg-color-overlay) 94.5%
+  );
+  --el-table-theme-stripe-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 4%,
+    var(--el-bg-color-overlay) 97%
+  );
+  /*
+   * 表格线：浅灰为主、主色极淡，避免格线抢眼（接近分割线「若有若无」）
+   */
+  --el-table-theme-border-color: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 15.5%,
+    #eef2f7 95.5%
+  );
+
+  /* 画布/分割线交给 Element Plus：不再维护 layout-* 混色变量 */
+
+  /* Select / TreeSelect 选项行（EP 默认 hover=fill-light、选中无底，与主题脱节） */
+  --el-select-option-hover-bg: var(--el-fill-color-light);
+  --el-select-option-selected-bg: var(--el-color-primary-light-9);
+
+  /* DatePicker 区间内底（EP 默认 inrange≈极浅灰，与主题脱节） */
+  --el-datepicker-range-bg: var(--el-color-primary-light-9);
+  --el-datepicker-range-hover-bg: var(--el-color-primary-light-8);
+
+  /*
+   * 弹层
+   * - 遮罩：--el-overlay-color
+   * - 面板底：纯中性 overlay（不要混主色）；主题色交给内部 primary 按钮、表单 focus、链接等
+   * - Drawer 继承 --el-dialog-bg-color；Dialog 见下方 html .el-dialog（压过 EP 的 var(--el-bg-color)）
+   */
+  --el-dialog-bg-color: var(--el-bg-color-overlay);
+  --el-popover-bg-color: var(--el-dialog-bg-color);
+  --el-popup-modal-bg-color: var(--el-overlay-color);
+  --el-popup-modal-opacity: 1;
+}
+
+html.dark {
+  /*
+   * 布局分区（仅暗色）：侧栏主色略高 → 顶栏次之 → 主内容最淡（大面积阅读区）→ 卡片 overlay 略亮
+   */
+  --layout-nav-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 6.5%, #101828 93.5%);
+  --layout-header-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #121a2a 95%);
+  --layout-content-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 4%, #0f172a 96%);
+  /* Logo 区与侧栏同一底（左侧布局下与 .layout__sidebar / --menu-background 一致，避免色差条） */
+  --layout-sidebar-logo-bg: var(--layout-nav-bg);
+  /* 卡片/表格面板：比主内容略「抬」一点 */
+  --el-bg-color-overlay: color-mix(in srgb, var(--el-color-primary, #4080ff) 6%, #1e293b 94%);
+
+  /* 基础中性色（画布 = 主内容区） */
+  --el-bg-color: var(--layout-content-bg);
+  --el-bg-color-page: var(--layout-content-bg);
+  --el-fill-color: #1e293b;
+  --el-fill-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #334155 92%);
+  /* 暗色：缝隙/分割线略深一层，区划更清晰 */
+  --el-border-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 14%, #334155 86%);
+  --el-border-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 12%, #475569 88%);
+  --el-border-color-lighter: color-mix(in srgb, var(--el-color-primary, #4080ff) 13%, #3d4f69 87%);
+  --el-border-color-extra-light: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 11%,
+    #334155 89%
+  );
+  --el-text-color-primary: #f8fafc;
+  --el-text-color-regular: #e2e8f0;
+  --el-text-color-secondary: #94a3b8;
+  --el-text-color-placeholder: #64748b;
+
+  /* 阴影/遮罩 */
+  --el-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
+  --el-box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --el-overlay-color: rgba(0, 0, 0, 0.7);
+  --el-overlay-color-light: rgba(0, 0, 0, 0.5);
+  --el-overlay-color-lighter: rgba(0, 0, 0, 0.3);
+
+  /*
+   * 菜单 hover / 激活：真正颜色在 --_menu-*，再赋给 --el-menu-hover-bg-color。
+   * EP 在 el-menu 根上内联 --el-menu-hover-bg-color = TinyColor(bg).shade(20)，会盖掉仅在 html 上的定义；
+   * 用下面 html.dark .el-menu { ... !important } 把同一套色压回组件根，子项即可用 EP 默认 hover。
+   */
+  --_menu-hover-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 14%,
+    var(--layout-nav-bg) 86%
+  );
+  --_menu-active-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 21%,
+    var(--layout-nav-bg) 79%
+  );
+  --el-menu-hover-bg-color: var(--_menu-hover-bg);
+  --el-menu-active-bg-color: var(--_menu-active-bg);
+
+  /* 暗色全局滚动条：与主内容区协调，滑块略柔 */
+  --app-scrollbar-track: color-mix(in srgb, var(--el-color-primary, #4080ff) 7.5%, #0f172a 92.5%);
+  --app-scrollbar-thumb: color-mix(in srgb, var(--el-color-primary, #4080ff) 33%, #475569 67%);
+  --app-scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 46%,
+    #64748b 54%
+  );
+
+  /*
+   * 表格：暗底整体偏浅一档，主色占比降低，更接近面板底 --el-bg-color-overlay
+   */
+  --el-table-theme-header-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 11%, #243044 89%);
+  --el-table-theme-hover-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 7.5%,
+    var(--el-bg-color-overlay) 92.5%
+  );
+  --el-table-theme-stripe-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 4%,
+    var(--el-bg-color-overlay) 96%
+  );
+  /* 表格线：暗色下偏柔，与 overlay 接近、略亮一线即可辨认 */
+  --el-table-theme-border-color: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 9%,
+    #3d4f63 91%
+  );
+
+  /* 画布/分割线/Tags hover 不再维护 layout-* 混色变量 */
+
+  --el-select-option-hover-bg: var(--el-fill-color-light);
+  --el-select-option-selected-bg: var(--el-color-primary-light-9);
+
+  --el-datepicker-range-bg: var(--el-color-primary-light-9);
+  --el-datepicker-range-hover-bg: var(--el-color-primary-light-8);
+
+  --el-dialog-bg-color: var(--el-bg-color-overlay);
+  --el-popover-bg-color: var(--el-dialog-bg-color);
+  --el-popup-modal-bg-color: var(--el-overlay-color);
+  --el-popup-modal-opacity: 1;
+}
+
+/* 压过 EP 内联的 shade(20)，使子项 hover 读到与 html 一致的主题混色 */
+html.dark .el-menu {
+  --el-menu-hover-bg-color: var(--_menu-hover-bg) !important;
+}
+
+/* Dialog：EP 在 .el-dialog 上写死 --el-dialog-bg-color: var(--el-bg-color)，改为抬升中性底 */
+html .el-dialog {
+  --el-dialog-bg-color: var(--el-bg-color-overlay);
+}
+
+/*
+ * 浮层 Popper（与弹窗同一 token：--el-dialog-bg-color，现为中性 overlay）
+ * EP 部分组件写死 --el-bg-color-overlay；显式统一到 --el-dialog-bg-color 便于后续改一处全局同步。
+ */
+html .el-cascader {
+  --el-cascader-menu-fill: var(--el-dialog-bg-color);
+}
+
+html .el-mention {
+  --el-mention-bg-color: var(--el-dialog-bg-color);
+}
+
+html .el-select__popper.el-popper,
+html .el-tree-select__popper.el-popper,
+html .el-dropdown__popper.el-popper,
+html .el-autocomplete__popper.el-popper,
+html .el-mention__popper.el-popper,
+html .el-picker__popper.el-popper {
+  background: var(--el-dialog-bg-color);
+}
+
+html .el-select__popper.el-popper .el-popper__arrow:before,
+html .el-tree-select__popper.el-popper .el-popper__arrow:before,
+html .el-dropdown__popper.el-popper .el-popper__arrow:before,
+html .el-autocomplete__popper.el-popper .el-popper__arrow:before,
+html .el-mention__popper.el-popper .el-popper__arrow:before,
+html .el-picker__popper.el-popper .el-popper__arrow:before {
+  background: var(--el-dialog-bg-color);
+}
+
+html .el-picker-panel {
+  background: var(--el-dialog-bg-color);
+  --el-datepicker-inrange-bg-color: var(--el-datepicker-range-bg);
+  --el-datepicker-inrange-hover-bg-color: var(--el-datepicker-range-hover-bg);
+}
+
+html .el-dropdown-menu {
+  background-color: var(--el-dialog-bg-color);
+}
+
+html .el-color-picker-panel {
+  background: var(--el-dialog-bg-color);
+}
+
+html .el-transfer-panel {
+  background: var(--el-dialog-bg-color);
+}
+
+/* Select / TreeSelect：选项 hover、选中背景随主色（浮层底仍为 overlay） */
+html .el-select__popper .el-select-dropdown__item.is-hovering,
+html .el-tree-select__popper .el-select-dropdown__item.is-hovering {
+  background-color: var(--el-select-option-hover-bg);
+}
+
+html .el-select__popper .el-select-dropdown__item.is-selected,
+html .el-tree-select__popper .el-select-dropdown__item.is-selected {
+  background-color: var(--el-select-option-selected-bg);
+}
+
+/* 级联面板节点 hover 与 Select 一致（面板内自带 --el-cascader-node-background-hover） */
+html .el-cascader-panel {
+  --el-cascader-node-background-hover: var(--el-select-option-hover-bg);
+}
+
+/* Skeleton 动画条：跟随中性 fill */
+html .el-skeleton {
+  --el-skeleton-to-color: var(--el-fill-color);
+}
+
+/* Tabs border-card：使用中性 fill，避免混色 */
+html .el-tabs--border-card > .el-tabs__header,
+html.dark .el-tabs--border-card > .el-tabs__header {
+  background: var(--el-fill-color-light);
+}
+
+/* Steps 简约模式底条 */
+html .el-steps--simple,
+html.dark .el-steps--simple {
+  background: var(--el-fill-color-light);
+}
+
+/* Progress：轨道使用中性 fill */
+html .el-progress-bar__outer,
+html.dark .el-progress-bar__outer {
+  background-color: var(--el-fill-color-light);
+}
+
+/* ---------- Element Plus 表格（随 :root / html.dark 与 theme.ts 主色变） ---------- */
+html .el-table {
+  --el-table-bg-color: var(--el-bg-color-overlay);
+  --el-table-tr-bg-color: var(--el-bg-color-overlay);
+  --el-table-header-bg-color: var(--el-table-theme-header-bg);
+  --el-table-striped-row-bg: var(--el-table-theme-stripe-bg);
+  --el-table-row-hover-bg-color: var(--el-table-theme-hover-bg);
+  --el-table-border-color: var(--el-table-theme-border-color);
+  --el-table-border: 1px solid var(--el-table-border-color);
+}
+
+html .el-table.el-table--striped {
+  --el-fill-color-lighter: var(--el-table-theme-stripe-bg);
+}
+
+/*
+ * Element Plus 自绘滚动条（el-scrollbar）：侧栏菜单、表格 body、TagsView、分页等
+ * EP 默认 --el-scrollbar-bg-color 为 text-secondary + 低透明度，与主题无关；此处与上方「全局原生滚动条」同色
+ */
+html .el-scrollbar {
+  --el-scrollbar-bg-color: var(--app-scrollbar-thumb);
+  --el-scrollbar-hover-bg-color: var(--app-scrollbar-thumb-hover);
+  --el-scrollbar-opacity: 1;
+  --el-scrollbar-hover-opacity: 1;
+}

frontend/web/src/styles/element-plus.scss

@@ -0,0 +1,68 @@
+$border: 1px solid var(--el-border-color-light);
+
+/* el-dialog */
+.el-dialog {
+  .el-dialog__header {
+    padding: 15px 20px;
+    margin: 0;
+    border-bottom: $border;
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+  }
+
+  .el-dialog__footer {
+    padding: 15px;
+    border-top: $border;
+  }
+}
+
+/** el-drawer */
+.el-drawer {
+  .el-drawer__header {
+    padding: 15px 20px;
+    margin: 0;
+    color: inherit;
+    border-bottom: $border;
+  }
+
+  .el-drawer__body {
+    padding: 20px;
+  }
+
+  .el-drawer__footer {
+    padding: 15px;
+    border-top: $border;
+  }
+}
+
+// 抽屉和对话框底部按钮区域
+.dialog-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+// 列表
+.el-card {
+  .el-card__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+// 表格内操作列：单元格 .cell 默认 overflow:hidden，会裁切 el-button 的 :focus-visible outline（常见为底边缺失）。
+// 仅对「含 el-button」的单元格放开裁剪，避免整表 .cell 全改为 visible 破坏省略号与长文本布局。
+.el-table .el-table__cell .cell:has(.el-button) {
+  overflow: visible;
+}
+
+// 不支持 :has() 的环境：将 outline 略向内收，减轻裁切（效果弱于上一段）。
+@supports not selector(:has(*)) {
+  .el-table .el-button:focus-visible {
+    outline-offset: -1px;
+  }
+}

frontend/web/src/styles/index.scss

@@ -0,0 +1,258 @@
+// ==================== 主题变量导入 ====================
+// 1. 项目自定义变量（侧边栏、布局等）
+@use './variables';
+
+// 2. 暗黑模式变量（合并）
+@use './dark/css-vars';
+
+// ==================== 基础样式 ====================
+@use './reset';
+@use './element-plus';
+
+// ==================== layout内容样式 ====================
+.app-container {
+  display: flex;
+  flex-direction: column;
+  /* 不用 gap：否则 ExportModal/抽屉 等块级兄弟会与 PageContent 之间多出一道 16px，表格用 100vh 时高度也不对 */
+  gap: 0;
+  height: 100%;
+  padding: 16px;
+  overflow: auto;
+  border-radius: 4px;
+}
+
+/* 与搜索区纵向间距（替代原 gap）；主表格占满剩余高度，便于 el-table height:100% */
+.app-container > .el-card.data-table {
+  flex: 1;
+  min-height: 0;
+  margin-top: 16px;
+}
+
+.app-container > .el-card.data-table:first-child {
+  margin-top: 0;
+}
+
+/* 用户管理等：首行是 el-row 时占满高度 */
+.app-container > .el-row {
+  flex: 1;
+  min-height: 0;
+}
+
+/* 块级弹窗宿主不参与纵向 flex 分配，避免挤压主表格 */
+.app-container > .curd-export-modal-host,
+.app-container > .curd-import-modal-host {
+  flex: 0 0 auto;
+}
+
+// ==================== 搜索区域样式 ====================
+.search-container {
+  border: 1px solid var(--el-border-color-light);
+}
+
+// ==================== 表格区域样式 ====================
+.data-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  /* 嵌套在 el-row/el-col 等内部时，与上方搜索区留白 */
+  margin-top: 16px;
+
+  // 表格工具栏区域（与 PageSearch+PageContent 各业务页 #toolbar 插槽一致：flex 换行，避免 el-row 挤压右侧）
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 8px;
+    column-gap: 12px;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    &--left,
+    &--right {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+
+      @media (min-width: 768px) {
+        gap: 12px;
+      }
+
+      .el-button {
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+      }
+    }
+
+    &--right {
+      flex-shrink: 0;
+      justify-content: flex-end;
+    }
+  }
+
+  // 表格内容区域
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    transition:
+      height 0.3s ease,
+      flex 0.3s ease;
+  }
+
+  // 分页区域
+  .el-pagination {
+    justify-content: flex-end;
+  }
+}
+
+/* 主表格 margin-top 见上；此处保留嵌套在非直接子级时的默认 .data-table margin-top */
+
+// 进度条颜色
+#nprogress .bar {
+  background-color: var(--el-color-primary);
+}
+
+// ==================== 全局原生滚动条（与主题主色混色，Firefox + WebKit） ====================
+* {
+  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--app-scrollbar-track);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--app-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--app-scrollbar-thumb-hover);
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--app-scrollbar-track);
+}
+
+// ==================== 菜单选中态（子菜单） ====================
+// 给左侧/混合左侧以及顶部弹层子菜单的选中项增加背景色，增强可见性
+.el-menu--vertical .el-menu-item.is-active,
+.el-menu--popup .el-menu-item.is-active {
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+// ==================== 侧边栏激活项「右侧竖杠」指示条 ====================
+// 仅作用于左侧布局、混合布局左侧侧栏（避免影响顶部菜单与弹层菜单）
+.layout__sidebar,
+.layout__sidebar--left {
+  .el-menu--vertical {
+    .el-menu-item.is-active {
+      box-shadow: inset -3px 0 0 0 var(--menu-active-indicator, var(--el-color-primary));
+    }
+  }
+}
+
+// 经典蓝：激活项背景不使用偏白色，改为蓝系轻色差背景
+html.sidebar-color-blue {
+  .el-menu--vertical .el-menu-item.is-active,
+  .el-menu--popup .el-menu-item.is-active {
+    background-color: var(--menu-hover) !important;
+  }
+}
+
+// 混合布局左侧菜单 hover 不单独覆盖：
+// 统一交给 Element Plus 的 --el-menu-hover-bg-color 与 MenuItem.vue 的通用规则，
+// 确保 Mix-left 与 Left 侧边布局保持一致。
+
+// 暗色：hover 由 EP + css-vars 中 html.dark .el-menu 覆写 --el-menu-hover-bg-color 生效；仅激活项需压过 primary-light-9
+html.dark .el-menu--vertical .el-menu-item.is-active,
+html.dark .el-menu--popup .el-menu-item.is-active {
+  background-color: var(--el-menu-active-bg-color) !important;
+}
+
+// 亮色 + 经典蓝：悬浮背景使用经典蓝体系（比底色略深），避免发白
+html.sidebar-color-blue .el-menu {
+  .el-menu-item:hover,
+  .el-sub-menu__title:hover {
+    background-color: var(--menu-hover) !important;
+  }
+}
+
+html.sidebar-color-blue .el-menu--popup {
+  .el-menu-item:hover {
+    background-color: var(--menu-hover) !important;
+  }
+}
+
+// ==================== 窄屏时隐藏菜单文字，只显示图标 ====================
+// 窄屏时隐藏菜单文字，只显示图标
+.hideSidebar {
+  // Top布局和Mix布局的水平菜单
+  &.layout-top .layout__header .el-menu--horizontal,
+  &.layout-mix .layout__header .el-menu--horizontal {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*='i-svg']):not(.el-icon) {
+        display: none !important;
+      }
+    }
+  }
+
+  // Mix布局的左侧菜单
+  &.layout-mix .layout__sidebar--left .el-menu {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*='i-svg']):not(.el-icon) {
+        display: none !important;
+      }
+    }
+  }
+}
+
+// 代码生成：写入本地确认 — 随内容变宽（不超过视口），路径单行、列表区内横向滚动
+.el-message-box.gencode-write-confirm-box {
+  --gencode-write-confirm-max: min(1100px, calc(100vw - 32px));
+
+  --el-messagebox-width: var(--gencode-write-confirm-max);
+  box-sizing: border-box;
+  width: fit-content !important;
+  min-width: min(360px, calc(100vw - 32px));
+  max-width: var(--gencode-write-confirm-max) !important;
+  padding-bottom: 8px;
+
+  .el-message-box__message {
+    box-sizing: border-box;
+    max-width: 100%;
+    padding-top: 4px;
+  }
+
+  .gencode-write-confirm-body {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .gencode-write-path-list-wrap {
+    max-height: 44vh;
+    overflow: auto;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  }
+
+  .gencode-write-path-row:last-child {
+    border-bottom: none !important;
+  }
+}

frontend/web/src/styles/reset.scss

@@ -0,0 +1,77 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-color: currentcolor;
+  border-style: solid;
+  border-width: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  line-height: 1.5;
+  tab-size: 4;
+  text-size-adjust: 100%;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family:
+    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
+    Arial, sans-serif;
+  line-height: inherit;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+img,
+svg {
+  display: inline-block;
+}
+
+svg {
+  // 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
+  vertical-align: -0.15em;
+}
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a,
+a:focus,
+a:hover {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a:focus,
+a:active,
+div:focus {
+  outline: none;
+}

frontend/web/src/styles/variables.module.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable property-no-unknown */
+:export {
+  sidebar-width: $sidebar-width;
+  navbar-height: $navbar-height;
+  tags-view-height: $tags-view-height;
+  menu-background: $menu-background;
+  menu-text: $menu-text;
+  menu-active-text: $menu-active-text;
+  menu-hover: $menu-hover;
+}
+/* stylelint-enable property-no-unknown */

frontend/web/src/styles/variables.scss

@@ -0,0 +1,100 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      // 默认主题色 - 修改此值时需同步修改 src/settings.ts 中的 themeColor
+      'base': #4080ff,
+    ),
+    'success': (
+      'base': #23c343,
+    ),
+    'warning': (
+      'base': #ff9a2e,
+    ),
+    'danger': (
+      'base': #f76560,
+    ),
+    'info': (
+      'base': #a9aeb8,
+    ),
+    'default': (
+      'base': #f5f5f5,
+    ),
+  ),
+
+  $bg-color: (
+    'page': #f5f8fd,
+  )
+);
+
+/** 全局SCSS变量 */
+
+:root {
+  --menu-background: #fff; // 菜单背景色
+  /* Logo 与侧栏导航同一底（亮色；暗色见 html.dark 与 css-vars --layout-nav-bg） */
+  --sidebar-logo-background: var(--menu-background);
+  --layout-logo-bg: var(--menu-background);
+  --menu-text: #212121; // 菜单文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
+  --menu-active-text: var(
+    --el-menu-active-color
+  ); // 菜单激活文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
+
+  --menu-hover: #e6f4ff; // 菜单悬停背景色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
+  --sidebar-logo-text-color: #333; // 侧边栏 Logo 文字颜色
+}
+
+/** 浅色主题-深蓝色侧边栏配色 */
+html.sidebar-color-blue {
+  --menu-background: #304156; // 菜单背景色
+  --menu-text: #bfcbd9; // 菜单文字颜色
+  --menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色
+  --menu-hover: #263445; // 菜单悬停背景色
+  --el-menu-hover-bg-color: var(--menu-hover); // 顶部/侧边菜单 hover 统一
+  --sidebar-logo-text-color: #fff; // 侧边栏 Logo 文字颜色
+}
+
+/** 暗黑主题 */
+html.dark {
+  /* 侧栏底：与主内容区分区，见 src/styles/dark/css-vars.css --layout-nav-bg */
+  --menu-background: var(--layout-nav-bg);
+  --menu-text: #fff;
+  --menu-active-text: var(--el-menu-active-color);
+  --menu-hover: var(--el-menu-hover-bg-color);
+  --sidebar-logo-background: var(--layout-sidebar-logo-bg);
+  --layout-logo-bg: var(--layout-sidebar-logo-bg);
+  --sidebar-logo-text-color: #fff;
+
+  /** WangEditor Dark */
+  /* Textarea - css vars */
+  --w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
+  --w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
+  --w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
+  --w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
+  --w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
+  --w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
+  --w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
+  --w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
+
+  /* Toolbar - css vars */
+  --w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
+  --w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
+  --w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
+  --w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
+  --w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
+  --w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
+
+  /*  Modal - css vars */
+  --w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
+  --w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
+}
+
+$menu-background: var(--menu-background); // 菜单背景色
+$menu-text: var(--menu-text); // 菜单文字颜色
+$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
+$menu-hover: var(--menu-hover); // 菜单悬停背景色
+$sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色
+$sidebar-logo-text-color: var(--sidebar-logo-text-color); // 侧边栏 Logo 文字颜色
+
+$sidebar-width: 210px; // 侧边栏宽度
+$sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
+$navbar-height: 50px; // 导航栏高度
+$tags-view-height: 34px; // TagsView 高度