Runlume · 后台设计基线

标准后台设计

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

在线演示阅读文档查看源码

工作台 · 标准页型

工作台客户管理通知中心设计系统动态菜单

客户总数12,480

本月订单386

本月金额¥419,400

正常待处理处理中失败

清源环保科技 ¥128,000正常

云和智能制造 ¥264,500待处理

为什么用这一套

把“每个后台各写一套”的问题收口到一份可复制的基线。

颜色只走语义 Token，六套预设配色 + 基础色 × 主题色自由组合，切主题业务代码零改动。

九类组件页：基础控件、表单、数据展示、反馈、导航、图表、图标、主题与设置。

侧边导航、顶部 + 侧边、纯顶部导航；侧栏宽度、圆角、页面过渡、顶栏操作顺序都能调。

折线、柱状、环形、迷你柱、条形、热力、雷达、漏斗、甘特全部自绘 SVG，跟随语义色与深色模式。

菜单可来自后台接口：多层级、外链与打开方式、权限码过滤；路由守卫落 403，按钮用 Can 隐藏或置灰。

语言包单一入口，中英结构由类型强制对齐；键盘可达、焦点管理、高对比、色弱与减少动效。

工作台、列表、详情、设置、通知中心、登录注册与找回密码，页面零件统一复用。

⌘K 呼出全文搜索：匹配菜单与当前页已渲染内容，支持拼音、路径与键盘操作。

VitePress 文档站（构建检查死链）+ pnpm check 一把梭自证，AGENTS.md 与架构决策随代码维护。

侧栏「设计系统」下按类型拆分，每个控件都能在应用里直接交互。

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

Node.js 24 + pnpm 11.21.0。

终端

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