# 星尘 Stardust 控制台 · 设计规范 (Design Specification) > 版本：v2（星尘蓝主题 + 信息架构收敛） > 配套：`tokens.css` · `element-theme-override.css` · `element-token-mapping.md` · `tailwind.config.js` > 原则：**设计令牌是唯一事实来源**；Vue 工程引用主题 CSS，禁止页面硬编码颜色。 --- ## 1. 设计理念 星尘是面向**互娱应用**的分布式管控台。核心心智：**一切皆围绕「应用」**——节点、服务、配置、监控、发布都不是独立模块，而是「应用」或「节点」的下级，由上级披露。设计上用**星图（constellation）**隐喻分布式拓扑，星尘蓝 `#6673FF` 为品牌，星尘青 `#6FE3EC` 为强调。 --- ## 2. 信息架构（IA）— 收敛后的 4 入口 原 8 个独立页收敛为 4 个侧栏入口；非独立模块收拢到其上级，由上级「详情抽屉」披露。 | 侧栏入口 | 内容 | 被收敛进来的下级（在详情抽屉里披露） | |---|---|---| | **概览** Overview | 星图入口 + KPI + 健康/事件 + 功能导航 | （无） | | **节点** Nodes | 节点列表 + KPI + 拓扑卡 | 原「服务」→ 节点详情新增 **服务 Tab**（本节点提供/消费的服务） | | **应用** Apps | 应用列表 + 主从抽屉 | 原「配置 / 监控 / 发布 / 服务」→ 应用详情抽屉 6 Tab：概览 / 实例 / **配置** / **发布** / **监控** / **服务** | | **设置** Settings | 基础信息 / 通知 / 安全 / 外观 | （无） | **收敛理由（用户定义）**：配置、监控、发布都是「`应用 × 环境 × 项目`」维度，无应用无法操作；服务是「节点对外提供、应用提供/消费」的，挂在节点与应用下披露。 > ⚠️ 历史文件 `stardust-design-tokens.md` 描述的是**旧的生命绿（#00875A）**主题与 8 页 IA，已被本规范（星尘蓝 + 4 页 IA）取代；新工程以本规范为准。 --- ## 3. 色彩系统 ### 3.1 品牌与语义色 | 语义 | Token | 值 | 用途 | |---|---|---|---| | 品牌（星尘蓝） | `--sd-color-brand` | `#6673FF` | 主操作、活动态、链接、进度 | | 渐变末端 | `--sd-color-brand-2` | `#8C5CF5` | 品牌渐变 / 强调按钮 | | 强调（星尘青） | `--sd-color-accent` | `#6FE3EC` | 焦点环、顶带中段、高亮 | | 在线 / 成功 | `--sd-color-online` | `#43E8A3` | 在线药丸、成功 | | 告警 / 警告 | `--sd-color-alert` | `#FFC208` | 告警药丸、警告 | | 离线 / 危险 | `--sd-color-offline` | `#FF4545` | 离线药丸、错误、删除 | 每个语义色均预计算 `light-3/5/7/8/9`、`dark-2` 浅深阶（见 `tokens.css`），供 Tag / 药丸 / 按钮 hover 使用。 ### 3.2 表面层级（暗色） `page #16202A` < `surface #1F2A33`（卡片/控件） < `elevated #26333F`（抽屉/弹层） < `input #18222C`。 ### 3.3 文本与边框 文本 5 级：`#E6EDF3 / #C7D0DA / #8A97A6 / #6B7785 / #5A6675`。 边框 5 级：`#3A4450 / #33414E / #2D3943 / #27323B / #47535F`。 --- ## 4. 字体排版 - 字体栈：`"Inter", "PingFang SC", "Microsoft YaHei", ...`（含中文回退）。 - 字号阶梯：`12 / 13 / 14 / 16 / 20 / 24 / 32 / 40`。 - 字重：`400 / 500 / 600 / 700`。等宽字体用于版本号、IP、指标数值。 --- ## 5. 间距 / 圆角 / 阴影 - 间距（4px 基准）：`4 / 8 / 12 / 16 / 24 / 32 / 48`（对应 `--sd-space-1…12`）。 - 圆角：`4 / 6 / 12 / 16`（默认 `6`，卡片 `12`，大卡 `16`）。 - 阴影：3 级蓝调 —— S1（卡片轻）、S2（悬浮）、S3（抽屉/弹层）。 --- ## 6. 图标规范 - **一律内联 SVG**，`stroke="currentColor"`、`fill="none"`、线宽 `1.5`。**禁止 emoji**。 - 关键图标意图：星图（点阵+连线）、节点（多圆点阵）、网关（菱形分流）、发布（上行箭头）、配置（齿轮）、监控 APM（心率波）、注册（地球）、日志（文档线）、服务（交换箭头）。 --- ## 7. 布局与组件技术约定（防硬编码核心） | 关注点 | 方案 | |---|---| | 布局（栅格/间距/定位/对齐） | **Tailwind** 工具类，颜色/间距来自 `tailwind.config.js` 映射的 `--sd-*` | | 交互组件（按钮/表格/Tab/抽屉/开关/表单/弹层） | **Element Plus** 组件，自动套用主题 | | 主题来源 | **`tokens.css` 唯一事实** → `element-theme-override.css` 覆盖 `--el-*`；业务代码零硬编码色值 | | 暗色 | 根节点 `class="dark"`，Element 暗色变量被覆盖接管 | **反模式（禁止）**：在 `.vue` / `.tsx` 里写 `#6673FF`、`#16202A` 之类字面色值。要改色 → 只改 `tokens.css`，全站生效。 --- ## 8. 交互规范 - **星图背景**：所有页面统一带首页星图背景（`2_2.png` 或内联 SVG 星点），强化「分布式」心智。 - **详情披露**：节点 / 应用采用「列表 → 右侧抽屉」主从结构，详情在抽屉内用 **Tab** 切换（应用 6 Tab，节点含服务 Tab）。 - **状态色**：在线绿 / 告警黄 / 离线红三态药丸，贯穿列表、拓扑、详情。 - **配置双模式**：表格 ↔ 文本切换 + 版本导出 / 对比上一版 / 回滚。 - **监控**：时间范围选择 + 自动刷新脉冲点（如「自动刷新 · 15s」）+ 内联 SVG 面积图。 - **发布**：流水线步骤（构建→上传→分发→部署）箭头推进 + 图例（✓完成 / ●进行中 / ○等待）。 - **等比重缩放**：画布基准 1440×900，`transform: scale(min(w/1440,h/900))` 居中。 --- ## 9. 文件索引（令牌体系） | 文件 | 职责 | |---|---| | `tokens.css` | 设计令牌唯一来源（`--sd-*`） | | `element-theme-override.css` | 用 `--sd-*` 覆盖 Element Plus `--el-*`（最后引入） | | `element-token-mapping.md` | 令牌→Element 映射表 + 覆盖清单 + Vue 接入步骤 | | `tailwind.config.js` | 把 `--sd-*` 注入 Tailwind 主题（布局用） | | `design-spec.md` | 本规范 | --- ## 10. Anti-slop 自检 - [x] 无紫粉杂色（仅星尘蓝→紫渐变、青强调） - [x] 无 emoji（图标全内联 SVG） - [x] 卡片无左侧彩边 - [x] 中文回退字体齐备 - [x] 文本对比度达 WCAG AA - [x] 颜色零硬编码（统一经令牌）