Luma 控制台设计规范#

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

参考来源与组件选择#

• Kumo 是 Cloudflare 基于 Base UI 的公开 React 组件库，其资源列表布局约束页面宽度并统一标题、说明和资源内容。
• Flow 支持有向关系、并行分支和自定义节点。已确认存在此组件，但不能仅凭截图判断具体页面用了它。
• cf-ui 已于 2021 年归档，不适合作为新增依赖。

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

通用规则#

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

验证边界#

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

公开网站#

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

仓库 Markdown 构建为有导航、表格和目录的独立文档页。构建发布流程见网站维护。