# Luma 控制台设计规范 {#luma-console-design}

参考于 2026-09-12 审阅：用户提供的 Cloudflare 路由截图。其信息层级应用于整个控制台，包括应用、交付、基础设施、可观测和设置。

## 参考来源与组件选择 {#sources-and-component-decision}

- [Kumo](https://github.com/cloudflare/kumo) 是 Cloudflare 基于 Base UI 的公开 React 组件库，其[资源列表布局](https://github.com/cloudflare/kumo/blob/main/packages/kumo/src/blocks/resource-list/resource-list.tsx)约束页面宽度并统一标题、说明和资源内容。
- [Flow](https://kumo-ui.com/components/flow/) 支持有向关系、并行分支和自定义节点。已确认存在此组件，但不能仅凭截图判断具体页面用了它。
- [cf-ui](https://github.com/cloudflare/cf-ui) 已于 2021 年归档，不适合作为新增依赖。

保留现有 React 19、Base UI、Tailwind 4 和 shadcn，通过共享语义 token 和组件吸收参考设计。图交互保留 Cytoscape 与 Dagre，不仅为外观引入第二套组件或图框架。

## 通用规则 {#shared-rules}

- 中性页面底色、白色内容面、细边框、8px 基础圆角。蓝色用于主操作、链接和选中态。健康语义色必须有证据，入口或路由配置不代表健康。
- 固定顶部栏显示工作空间及同步状态。偏好与退出仅在侧边栏，无全局刷新按钮。桌面折叠操作位于侧栏头部，收起后仍可见；移动端侧栏在画外，保留导航入口。侧栏维持工作空间归属和嵌套路由，保留品牌与集群身份。
- 主内容最大 1400px，横向留白响应式变化，章节间距 24px。终端工作区使用完整可用尺寸。
- 一个页面标题，桌面操作右对齐。可观测子页用紧凑 22px 标题，不重复工作空间说明。应用详情面包屑位于顶栏，正文用紧凑对象标题和标签页。指标是标题下带标签的计数，仅展示信息，不伪装筛选按钮。
- 表格使用浅色表头底带、细分隔线、统一单元格内边距并约束横向溢出。表单与浮层沿用语义组件、焦点管理和校验。
- 页面级导航标签页（应用详情、存储、网络）使用带下划线的 `line` 变体；卡片内的视图切换保留默认分段样式。
- 状态颜色统一经 `StatePill`/`stateVariant`：成功为绿色，进行中或警告为琥珀色，失败为红色；未知状态保持中性，缺失值显示为 `—`。
- 日期、容量和百分比统一经 `format.ts`（`formatDateTime`、二进制单位的 `formatBytes`、`formatPercent`），同一数值在各页面显示一致。应用内链接使用 `spaLink`，带修饰键的点击仍可新开标签页。
- 网络页分开路由与节点拓扑。搜索和入口筛选同时作用于图与表格。选择路由聚焦完整当前路径，清空选择恢复筛选概览。证书重试按后端能力提供。
- 保留明暗主题、键盘和窄屏导航。不要为了填满空状态而加入 API 诊断或无依据的健康结论。

## 验证边界 {#validation-boundary}

本地开发数据用于布局与交互检查，不证明生产健康，也不改变真实路由、证书或部署。

## 公开网站 {#public-website}

GitHub Pages 沿用中性底色、8px 卡片、细边框和蓝色操作。宣传页使用更大标题，嵌入控制台示意保持紧凑。中英文首页内容对应，示意使用示例域名并明确标注示例数据，不声称生产健康。

仓库 Markdown 构建为有导航、表格和目录的独立文档页。构建发布流程见[网站维护](website.zh-CN.md)。