# 星尘 Stardust · 星际指挥台（无界星图）交互设计方案 > 本文档对应一套**可双击运行的交互式 HTML 原型**，位于本方案文件夹 `Doc/星枢-无界星图/` 内： > `index.html`、`prototype-overview.html`、`prototype-monitor.html`、`prototype-config.html`、`prototype-console.html`、`cosmic.css`（创意稿见同目录 `参考-星尘UI设计方案-星际指挥台.md`）。 > 文档说明设计哲学、四级视角（含项目/星域）交互、星舰控制台（纯列表页生产级处理）、色彩寓意、公共构件、文件串联与实现要点。 > 创意来源：`星尘UI设计方案-星际指挥台.md`（外部创意稿），本方案在其基础上脱离原稿既有令牌、自由重构配色与交互。 --- ## 1. 设计哲学：无界星图 整屏即一片**活的宇宙**，不套用传统的"应用外壳"（无顶栏、无侧栏、无卡片边框）。 - **尺度即层级**：用宇宙尺度隐喻分布式系统的观察粒度 - **星域（项目）** → 银河视角（项目内集群）→ 恒星系视角（单节点）→ 尘埃视角（单服务内部） - **项目即星域**：星尘的 `GalaxyProject` 是顶层容器，"一个项目就是一切"——项目内包含节点、应用、配置、监控、部署等。映射为一片独立**宇宙泡（星域）**，入口先选星域，后续三级视角均在该星域内切片。 - **状态即色彩**：整片宇宙的配色由"环境状态"驱动，色彩本身就是语义（见第 4 节） - **引力即交互**：拖拽、牵引、抛射、坍缩等动作借用天体力学意象，让运维操作有"操作星体"的仪式感 - **玻璃 + 辉光 + 动效**：全息面板、扫描线、引力波冲击波构成视觉语言 --- ## 2. 三级视角总览 | 层级 | 原型文件 | 隐喻 | 核心交互 | |------|----------|------|----------| | 星域（项目） | `index.html` 入口选择 | 宇宙泡 | 项目列表发光球体，点击进入该星域的银河视角（`?project=`） | | Level 1 银河视角 | `prototype-overview.html` | 星域内全集群星图 | 力导向星图、光束粒子流（调用）、星港坞导航、Ctrl+K 曲速命令、星域药丸 | | Level 2 恒星系视角 | `prototype-monitor.html` | 单节点 | 中央恒星 + 资源环形仪表（随负载变色）、椭圆轨道行星（服务）、点击行星展开全息面板 | | Level 3 尘埃视角 | `prototype-config.html` | 单服务内部 | **奇点坍缩舱 / 引力透镜**（见第 3 节） | | 星舰控制台 | `prototype-console.html` | 星图档案馆 | 跨星域治理台：分组导航 + 玻璃数据表（见第 2.5 节） | ### 串联关系（相对路径，从各文件同源） ``` index.html (选择星域 project) └─ prototype-overview.html?project=xxx (银河 · 星域内) └─ ?node=n3&project=xxx ─ prototype-monitor.html (恒星系) └─ ?svc=order-svc&project=xxx ─ prototype-config.html (尘埃) └─ 面包屑 / 星港坞 可逐层返回 └─ prototype-console.html?project=xxx (星舰控制台 · 跨星域治理) ``` - 跨页跳转统一走"**跃迁闪屏**"（`warp-flash`）+ `cosmos.warp-fold` 空间折叠过渡 - `?project` / `?node` / `?svc` 查询参数在目标页被读取；四级路径（星域→银河→恒星系→尘埃）始终串接 - 星舰控制台与沉浸式星图**并列**：前者是按星域切片的"活的拓扑"，后者是跨星域的"档案与治理" ### 2.5 项目（星域）映射 与 星舰控制台模式（纯列表页生产级处理） **问题**：星尘除"活的拓扑"外，还有大量**纯记录 / 治理型列表页**——Redis 监控、MySQL 监控、网关、部署流水线、MCP 令牌、审计、用户、角色、星尘设置，以及结构化的应用 / 节点 / 配置 / 调用链 / 告警列表。把它们硬塞进 3D 宇宙会牺牲可用性（密集数据无法在星图中高效检索、翻页、批量操作）。 **决策（负责任的 UX 分层）**： - **沉浸式星图**只承载"活的拓扑与态势"——星域（项目）、节点、应用、配置、监控、注册发现的动态关系。 - **星舰控制台 / 星图档案馆（Command Deck）**承载"档案与治理"——保留宇宙皮肤（星空背景、玻璃、主题切换、曲速命令），但用**生产级数据表**呈现：分组导航、搜索、筛选 chips、分页、状态星、操作列、mono 字体用于代码/连接串。两处共享同一套设计令牌与色彩寓意，视觉语言统一。 - 二者的边界：**星图按星域切片，控制台是跨星域治理台**（顶部"星域"选择器只切换当前视角上下文，列表本身为全局治理视图）。 **功能 → 隐喻 / 落点总表（补全星尘全部一级功能）**： | 真实功能（星尘域） | 隐喻 / 落点 | |------|------| | GalaxyProject 项目 | 星域（宇宙泡），`index.html` 入口选择，沉浸式视图的顶层切片 | | App 应用（注册中心） | 星尘 / 行星；控制台"应用"列表 | | Node 节点（StarAgent） | 恒星；控制台"节点"列表（CPU/内存条） | | AppConfig 配置 | 奇点吸积盘质点（引力透镜编辑）；控制台"配置"列表 | | 注册发现 AppService/Online/Consume | 恒星系轨道行星 / 光束；控制台服务列表 | | Trace / AppMeter 调用链·指标 | 维度罗盘-监控；控制台"调用链"列表 | | Alarm 告警 | 危机主题提示；控制台"告警"列表 | | **Redis 监控** | 控制台"Redis"列表（实例/角色/内存条/连接/命中率） | | **MySQL 监控** | 控制台"MySQL"列表（实例/版本/连接/QPS/慢查询） | | **网关 Gateway** | 控制台"网关"列表（路由/上游/命中） | | **部署流水线 Deployment** | 控制台"部署"列表（流水线/分支/状态/耗时） | | 平台 MCP 令牌 / 审计 / 服务器 | 控制台"平台"分组（令牌范围、审计结果） | | **用户 / 角色（Cube）** | 控制台"系统"分组（账号/角色/权限数/成员） | | **星尘设置 Setting** | 控制台"系统-设置"列表（配置项/值/说明） | > 控制台页以**数据驱动**渲染（`SECTIONS` 对象定义各域列与样例数据），新增功能域只需追加一段配置，符合"以发展的眼光"消除脆弱性。 --- ## 3. Level 3 尘埃视角 · 奇点坍缩舱（核心创意） > 痛点：旧版尘埃视角只是"卡片堆叠"（全息面板 + 标签页 + 表格），缺乏沉浸感。 > 重构为**把单个服务看作一颗坍缩中的奇点**，所有操作围绕它展开。 ### 3.1 舞台构成（Canvas + 玻璃浮层） - **奇点（服务核心）**：径向辉光 + 事件视界暗核 + 自转光纹，缓慢脉冲 - **吸积盘**：透视椭圆环（三层）+ 160 颗旋转尘埃，营造纵深 - **配置质点**：每项配置作为一颗发光质点，沿轨道**公转**；颜色按分组（db/cache/log/perf/feature/disc） - **维度罗盘**：环绕奇点的四个悬浮锚点，非标签页 - 上 = 监控（环形仪表 + 流动粒子） - 右 = 配置（质点环，默认） - 下 = 日志（螺旋喷流粒子 + 底部日志读出） - 左 = 拓扑（中心本服务 + 外环依赖节点 + 调用流动光束） - **信息读出条**：底部玻璃条，随维度切换展示对应数据摘要（非卡片堆叠） ### 3.2 关键交互 1. **引力扰动涟漪**：鼠标靠近配置质点时，质点被"引力"牵引偏移，松手平滑回弹 —— 让盘面随光标呼吸 2. **引力透镜编辑**：点击质点 → 从星核浮出编辑环（两侧旋转光环装饰），盘面**冻结聚焦**（暂停公转）；就地编辑值并实时显示 diff（旧值划线 + 新值），确认后"注入奇点"触发闪光，节点标记待发布 3. **时间晶体（版本回溯）**：右下控件列出历史版本，点击切换配置快照，盘面重组为旧版质点布局并涟漪 4. **超新星发布**：底部"✦ 超新星发布" → 全屏多次冲击波 + 质点抛射动画 + 自动切换"超新星"主题，模拟配置向全集群扩散 ### 3.3 为什么这样设计 - 用**天体力学**隐喻替代"表单/表格"：编辑 = 向奇点注入物质，发布 = 超新星爆发，回滚 = 时间晶体重组 - 维度从"堆叠卡片"变为"环绕奇点的轨道"，视觉上更贴近宇宙主题，信息密度更聚焦 - 所有操作都有**仪式感动效**（浮出、冻结、闪光、冲击波），区别于普通后台 CRUD --- ## 4. 色彩搭配切换寓意（核心创新） 右上角主题切换器在 **5 套独立配色**间切换，每套即一种**集群环境状态语义**；左下角寓意图例随主题变化： | 主题 | 配色基调 | 寓意 | 适用场景 | |------|----------|------|----------| | 宁静 Serene | 蓝紫星海 | 全部健康，引力场稳定 | 日常观测 | | 微澜 Attention | 暮色琥珀 | 存在告警，场出现扰动 | 告警待查 | | 危机 Crisis | 黑洞红吸积盘 | 严重故障，奇点坍缩加剧 | 故障处置 | | 超新星 Supernova | 炽金爆发 | 远程发布中，星核重组 | 发布过程 | | 扩容 Genesis | 星海新绿 | 弹性扩容，引力波涟漪 | 扩缩容 | 实现：所有颜色走 CSS 变量（`--star/--accent/--nebula-*/--ok/...`），`body.theme-*` 切换整片宇宙配色，元素监听 `var()` 变化平滑过渡（背景 0.9s、辉光同步）。Canvas 通过 `getComputedStyle` 读取当前主题变量值喂给绘制。 --- ## 5. 公共交互构件（跨三级视角复用） - **星港坞 Star Dock**：底部弧形悬浮导航，靠近底部 / 悬停热区自动浮出，三个视角互相跳转 - **曲速命令 Warp Command（Ctrl+K）**：空间折叠 + 命令面板，可搜索星体 / 服务 / 切换主题 / 触发发布 - **全息面板 Holographic Panel**：扫描线纹理 + 顶缘光带 + 缩放入场 / 碎裂关闭 - **跃迁闪屏 Warp Flash**：跨页跳转的统一过渡动效 - **三层视差星空 + 星云色雾 + 暗角**：所有页面共享的背景层（`cosmic.css` 中 `.cosmos/.starfield/.nebula/.vignette`） --- ## 6. 文件清单与职责 | 文件 | 职责 | |------|------| | `cosmic.css` | 共享宇宙设计系统：主题令牌、玻璃组件、星空背景、星港坞、曲速命令、全息面板、动效、SVG 通用类、控制台外壳类 | | `index.html` | 入口门户：星域（项目）选择 + 三视角卡片 + 控制台入口 + 「色彩搭配切换寓意」说明 | | `prototype-overview.html` | Level 1 银河视角（星域内），含星域药丸与控制台入口 | | `prototype-monitor.html` | Level 2 恒星系视角，面包屑串接星域 | | `prototype-config.html` | Level 3 尘埃视角（奇点坍缩舱，见第 3 节），面包屑串接星域 | | `prototype-console.html` | **星舰控制台 / 星图档案馆**：跨星域治理台，分组导航 + 玻璃数据表（见第 2.5 节） | > 各页均 `<link rel="stylesheet" href="cosmic.css">` 复用同一设计系统；主题切换、曲速命令、寓意图例逻辑保持一致；`?project` 在四级路径间透传。 --- ## 7. 实现要点与踩坑 1. **SVG 呈现属性不支持 `var()`**：`fill="var(--x)"` / `stop-color="var(--x)"` 作为 XML 属性不生效（只对 CSS 生效）。解决：用 JS 设置 `element.style.fill='var(--x)'` 或 `stopColor`。 2. **SVG `transform:rotate` 绕中心**：需 `transform-box: fill-box; transform-origin: center;` 才能绕自身中心旋转（环形仪表）。 3. **Canvas 读取主题色**：Canvas 不能用 CSS 变量直接当颜色，需用 `getComputedStyle(document.body).getPropertyValue('--star')` 读取字符串后喂给 `fillStyle/strokeStyle`；主题切换时重新读取缓存。 4. **浮层 transform 冲突**：悬浮锚点的"居中定位 `translateX(-50%)`"会被"激活态 `scale()`"覆盖而错位。解决：定位改用 `margin` 负值居中，`transform` 只保留 `scale`。 5. **性能**：节点 / 尘埃数量克制（配置 8 项、尘埃 160 颗），辉光用 `shadowBlur` 控制；`requestAnimationFrame` 单循环驱动。 --- ## 8. 如何预览 - **最简单**：直接用浏览器打开本文件夹下的 `index.html`（所有原型为纯静态 HTML + CSS + 原生 JS，无构建、无依赖） - **本地静态服务**（可选，避免个别浏览器 file:// 限制）： ``` cd Doc/星枢-无界星图 python -m http.server 8080 # 浏览器访问 http://localhost:8080/index.html ``` - 快捷键：`Ctrl/Cmd + K` 唤起曲速命令；底部靠近唤出星港坞 --- ## 9. 后续可演进 - 接入真实配置 / 监控 / 日志 / 列表数据接口（控制台 `SECTIONS` 已数据驱动，替换样例即可；当前为星尘真实风格的示例数据） - 维度罗盘升级为可拖拽旋转的全景环 - 奇点坍缩舱支持多服务同屏对比（多奇点引力相互作用） - 控制台"新建/编辑"操作接真实抽屉表单（当前为示意占位） - 沉浸式星图与控制台共享同一份数据服务，避免双份维护 - 沉淀为可复用的"宇宙 UI 组件库"（玻璃 / 星港坞 / 曲速命令 / 冲击波 / 控制台数据表）