语义 Token 主题
颜色只走 bg-card / text-muted-foreground / text-success 这类语义工具类，六套预设配色 + 基础色 × 主题色自由组合，切主题时业务代码零改动
标准后台设计
语义 Token、布局外壳、公共组件与标准页型，业务系统直接复制这一份
Skip to content
组件按类型拆分
基础控件、表单与选择、数据展示、反馈与浮层、导航与流程、指标与图表、图标、主题与设置，共九类页面，每个能力都能直接交互
三种布局外壳
侧边导航、顶部 + 侧边导航、顶部导航三种模式；侧栏宽度、圆角、页面过渡、顶栏操作顺序都可在设置里调，偏好存浏览器
零依赖图表
折线、柱状、环形、迷你柱、条形、热力、雷达、漏斗、甘特全部自绘 SVG，跟随语义色与深色模式，不引第三方图表库
中英双语与无障碍
src/lib/i18n.ts 是唯一语言包入口，中英结构由类型强制对齐；键盘可达、对话框焦点管理、高对比与色弱模式、减少动效
标准页型
工作台、列表、详情、设置、通知中心、登录注册与找回密码，页面零件（页头、筛选、工具栏、空态、错误态）统一复用
快捷键与命令面板
⌘K 呼出全文搜索（⌘⇧S 同样可用）；常用页面可自定义快捷键，冲突会直接提示
对 Agent 友好
pnpm check / verify 一把梭自证，pre-commit 与 CI 同源；AGENTS.md、架构决策与工作流文档随代码一起维护
快速开始
bash
pnpm install
pnpm dev # 应用 http://localhost:3200
pnpm docs:dev # 本文档站 http://localhost:3210
pnpm check # 格式 + 类型 + lint + 单测 + 生产构建1
2
3
4
2
3
4
这套设计包含什么
| 层 | 位置 | 说明 |
|---|---|---|
| 主题与 Token | src/index.css、src/palettes.css、src/custom-palettes.css、src/accessibility.css | 语义色、六套预设配色、基础色 × 主题色、无障碍覆盖 |
| 布局外壳 | src/components/console-layout.tsx | 侧栏 + 顶栏 + 页签栏 + 面包屑 + 内容区，三种布局模式 |
| 基础控件 | src/components/ui/ | button / input / select / table / tabs / dialog 等，基于 Radix 原语 |
| 公共组件 | src/components/ | 表格、树、图表、设置面板、页型零件等后台语义组件 |
| 纯逻辑 | src/lib/ | 偏好、i18n、树、分页、指标、表格偏好、快捷键 |
| 标准页型 | src/pages/ | 工作台、客户列表与详情、设置、通知中心、登录注册 |
| 组件总览 | src/pages/design-system/ | 九类页面，改组件必须先在这里补示例 |
边界
这里只放设计与交互层：不放业务接口、认证、权限模型与业务规则。示例数据都是内存态，刷新即重置； 认证、上传、树拖拽、懒加载等通过 prop 注入（uploader、onMove、loadChildren、onSignOut）。