> Runlume · 后台设计基线
# 标准后台设计

从 Runlume 平台前端提取的标准后台模板：语义 Token、布局外壳、公共组件与标准页型。业务系统接自己的菜单、身份与接口即可。

## 能力

- **语义 Token 主题**：颜色只走语义 Token，六套预设配色 + 基础色 × 主题色自由组合，切主题业务代码零改动。
- **组件按类型拆分**：九类组件页：基础控件、表单、数据展示、反馈、导航、图表、图标、主题与设置。
- **三种布局外壳**：侧边导航、顶部 + 侧边、纯顶部导航；侧栏宽度、圆角、页面过渡、顶栏操作顺序都能调。
- **零依赖图表**：折线、柱状、环形、迷你柱、条形、热力、雷达、漏斗、甘特全部自绘 SVG，跟随语义色与深色模式。
- **菜单与权限**：菜单可来自后台接口：多层级、外链与打开方式、权限码过滤；路由守卫落 403，按钮用 Can 隐藏或置灰。
- **中英双语与无障碍**：语言包单一入口，中英结构由类型强制对齐；键盘可达、焦点管理、高对比、色弱与减少动效。
- **标准页型**：工作台、列表、详情、设置、通知中心、登录注册与找回密码，页面零件统一复用。
- **命令面板**：⌘K 呼出全文搜索：匹配菜单与当前页已渲染内容，支持拼音、路径与键盘操作。
- **文档站与 AI 友好**：VitePress 文档站（构建检查死链）+ pnpm check 一把梭自证，AGENTS.md 与架构决策随代码维护。

## 组件索引

- 基础控件：按钮 / 输入 / 标签 / 进度
- 表单与选择：组合框 / 级联 / 多选 / 上传
- 数据展示：表格 / 树 / 表格树 / 分页
- 反馈与浮层：弹窗 / 抽屉 / 提示 / 状态
- 导航与流程：面包屑 / 页签 / 步骤条
- 指标与图表：折线 / 雷达 / 漏斗 / 甘特
- 图标：lucide 全量，点击复制
- 主题与设置：配色 / 通知 / 无障碍

## 快速开始

1. 复制目录 到业务仓库，改 package.json 的 name。
2. 换菜单：src/app/navigation.ts，或接后台菜单接口。
3. 换身份：src/app/session.ts 的会话与权限码。
4. 接接口：替换 pages/sample-data.ts，三态用 Loading / Empty / Error。
5. 换文案与品牌：src/lib/i18n.ts 与 public/brand/。

```bash
pnpm install
pnpm dev        # 应用 http://localhost:3200
pnpm docs:dev   # 文档 http://localhost:3210
pnpm check      # 格式 + 类型 + lint + 单测 + 构建
```

## 相关入口

- 文档站：https://adoc.runlume.app
- 在线演示：https://ago.runlume.app
- 源码（MIT）：https://github.com/runlume/admin-design