主题与应用壳

本篇讲控制台的「外观与骨架」：三种导航范式如何切换、主题色与圆角等设计令牌在哪改、暗色主题现状如何。

应用壳结构

所有业务页面都嵌在统一的应用壳 MainLayout 里：

MainLayout 按 app.navMode 在三种导航间切换：

// MainLayout.vue（节选）
<NavDual v-if="app.navMode === 'dual'" />
<NavTree v-else-if="app.navMode === 'tree'" />
<NavRail v-else @open-cmdk="cmdkOpen = true" />

三种导航范式

范式	`navMode`	形态	适用
双列（默认）	`dual`	92px 模块竖栏 + 218px 子菜单栏	模块多、层级浅
树形	`tree`	256px 三级展开树 + 顶部面包屑（SubBar）	层级深、爱用树
图标栏	`rail`	70px 图标竖栏，悬停弹出子菜单 flyout	追求内容区最大化

切换入口在顶栏的设置弹层 SettingsPopover：

// SettingsPopover.vue（节选）
const NAV_OPTIONS = [
  { mode: 'dual', name: '双列（推荐）' },
  { mode: 'tree', name: '树形' },
  { mode: 'rail', name: '图标栏' },
]
// 选择后：app.setNavMode(opt.mode)

选择会通过 app.setNavMode 持久化到 localStorage 的 forge.nav，刷新后保持。

⌘K 命令面板

CmdkPalette 由 ⌘K / Ctrl+K 唤起，把全部模块的菜单树拍平后做搜索，分「最近访问」与「全部导航」两组，支持上下键高亮、回车跳转。它依赖 app.loadAllMenus()（一次性加载所有模块菜单）。

主题的双轨制

控制台的主题分两条轨道，各管一摊，互不冲突：

轨道一（antd 控件）：tokens.ts 导出一个 forgeTheme: ThemeConfig，在 App.vue 用 <a-config-provider :theme="forgeTheme"> 包住整个应用。表格、表单、分页、按钮等 antd 控件的颜色/圆角/控件高度都由它决定。
轨道二（壳与自绘组件）：顶栏、三导航、卡片、tag、抽屉等是手写组件，靠 forge.css 里的 CSS 变量控制。

vue

<!-- App.vue 全部结构 -->
<a-config-provider :theme="forgeTheme" :locale="zhCN">
  <router-view />
</a-config-provider>

改主题要改两处

改主色这类「贯穿全站」的令牌，antd 轨道改 tokens.ts 的 colorPrimary，CSS 轨道改 forge.css 的 --primary。只改一处会出现「按钮变了但卡片没变」的不一致。两条轨道当前都对齐到薄荷绿 #1f9d5b。

设计令牌速查

antd 轨道（tokens.ts）

token	值	含义
`colorPrimary` / `colorSuccess`	`#1f9d5b`	主色（薄荷绿）
`colorWarning`	`#d98a17`	警告
`colorError`	`#e0533c`	错误
`colorInfo`	`#3a7bf0`	信息
`borderRadius`	`8`	控件圆角
`borderRadiusLG`	`12`	卡片/抽屉/模态圆角
`borderRadiusSM`	`6`	小圆角
`controlHeight`	`38`	控件高度

tokens.ts 还对 Menu / Table / Pagination / Button / Input 等做了组件级覆盖（如表头底色、菜单选中态）。

CSS 轨道（forge.css）

CSS 变量定义在 [data-theme="a"]（Theme A 浅色薄荷绿）上，主要令牌：

变量	含义
`--primary` / `--bg` / `--surface`	主色 / 页面底色 / 卡片面色
`--border`	边框色
`--text` / `--text-muted` / `--text-faint`	主文字 / 次要 / 最弱
`--radius-card: 12px` / `--radius-ctl: 8px` / `--radius-sm: 6px`	圆角三档
`--sp-1 … --sp-9`	4px→56px 八档间距
`--shadow-sm` / `--shadow-pop` / `--shadow-raise`	阴影三档

三个 CSS 文件分工：

文件	职责
`forge.css`	设计令牌（`:root` 主题无关 + `[data-theme="a"]` 浅色 + `[data-theme]` 语义状态色）
`shell.css`	壳层结构样式（顶栏、三导航、弹层、抽屉、响应式）
`antd-overrides.css`	对 antd 控件的深度样式覆盖（表格、分页、表单细节）

暗色主题：尚未实现

当前没有暗色主题

代码里只声明了 [data-theme="a"]（浅色薄荷绿），没有 [data-theme="dark"] 之类的暗色定义，也没有任何地方在运行时切换 documentElement 的 data-theme。设置弹层目前只切导航范式，不切主题。

要扩展暗色：① 在 forge.css 增加一组 [data-theme="dark"] 变量；② 为 antd 轨道准备一份暗色 ThemeConfig（或用 antd 的 theme.darkAlgorithm）；③ 在设置弹层加一个开关，切换 documentElement 的 data-theme 并切换 a-config-provider 的 :theme。这是当前的一个自然扩展点。

图标系统

壳与自绘组件的图标统一走 ForgeIcon + theme/icons.ts：

icons.ts 是一个 name → SVG path 字典（60+ 图标），并带别名表（如历史名 shop → store），查不到回退 box。
ForgeIcon 按 name 取出 path 串、拆成多段子路径，渲染成统一描边风格的 <svg>。

vue

<ForgeIcon name="plus" :size="15" />

加图标：在 icons.ts 的 ICONS 里加一项 name: 'M...'（24×24 viewBox 的 path）即可全站可用。

下一步

回到总览查看全部章节。
想理解壳与渲染引擎如何协作支撑整站，转设计文档 · 整体架构。

主题与应用壳 ​

应用壳结构 ​

三种导航范式 ​

主题的双轨制 ​

设计令牌速查 ​

antd 轨道（tokens.ts） ​

CSS 轨道（forge.css） ​

暗色主题：尚未实现 ​

图标系统 ​

下一步 ​