# 星尘 Stardust · 交互与UI设计方案 ## 设计主题：「无界星图」Boundless Star Map > 应用服务犹如宇宙中的尘埃，承载服务的计算机节点则是星星。 > 星星与尘埃共同构成浩瀚星空——即为星尘。 > 每一次操作都是一次星际旅行，每一个服务都是一颗独特的星辰。 --- ## 一、设计哲学 ### 1.1 核心理念：宇宙即界面 传统管理后台将信息装进方框、侧栏和标签页里。星尘的设计彻底打破这个范式——**整个屏幕就是一片活的宇宙**，没有"应用边框"，没有顶部导航条，没有侧边菜单栏。用户不是"使用一个管理工具"，而是"漂浮在数字宇宙中探索"。 ### 1.2 隐喻体系 | 宇宙意象 | 系统映射 | 视觉表达 | |----------|----------|----------| | 星星（恒星） | 计算节点（物理机/VM/容器宿主） | 发光球体，大小映射算力，颜色映射负载 | | 尘埃（粒子） | 应用服务实例 | 围绕恒星运转的微粒，密度映射实例数 | | 光束（引力线） | 服务调用关系 | 连线粗细映射 QPS，粒子流动表示数据传输 | | 星云 | 项目/环境/区域分组 | 半透明色雾包裹一组星体 | | 星座 | 集群 | 一组有引力关联的恒星集合 | | 超新星爆发 | 远程发布/部署 | 从恒星中心向外扩散的光波 | | 黑洞 | 故障节点 | 暗色塌陷 + 红色吸积盘 | | 脉冲信号 | 告警 | 从异常星体发出的规律闪烁 | ### 1.3 产品定位 星尘是 NewLife 生态的轻量级分布式服务治理平台，提供集群管理、配置中心、注册发现、APM 监控、日志中心、远程发布六大核心能力。 ### 1.4 目标用户 | 角色 | 核心场景 | 使用频率 | |------|----------|----------| | 运维工程师 | 集群巡检、故障定位、扩缩容、远程发布 | 每日高频 | | 后端开发 | 查看服务拓扑、链路追踪、配置变更 | 每日中频 | | 架构师 | 全局拓扑审视、性能趋势、容量规划 | 每周低频 | | 技术管理者 | 可用性大盘、发布进度、告警统计 | 每周低频 | --- ## 二、交互架构：缩放式空间导航 ### 2.1 三级缩放宇宙（核心创新） 彻底抛弃"页面跳转"概念。所有信息存在于同一片宇宙空间中，通过**缩放**（Zoom）在三个层级间穿梭： ``` ┌─────────────────────────────────────────────────────────────────┐ │ │ │ Level 1 · 银河视角（Galaxy View） │ │ ═══════════════════════════════ │ │ 整个集群 = 一片星系 │ │ 每颗恒星 = 一个计算节点 │ │ 恒星周围的尘埃云 = 该节点上的服务群 │ │ 恒星间光束 = 跨节点调用 │ │ 星云色雾 = 环境/项目分组 │ │ │ │ ↓ 点击恒星 / 滚轮放大 │ │ │ │ Level 2 · 恒星系视角（Star System View） │ │ ═══════════════════════════════════ │ │ 单个节点 = 一颗恒星居中 │ │ 服务 = 轨道上的行星/尘埃环 │ │ 内环 = 核心服务（高 QPS） │ │ 外环 = 边缘服务（低频） │ │ 行星大小 = 实例数 │ │ 行星颜色 = 健康状态 │ │ 恒星表面 = 节点资源（CPU/内存/磁盘 环形仪表） │ │ │ │ ↓ 点击行星 / 继续放大 │ │ │ │ Level 3 · 尘埃视角（Dust View） │ │ ═══════════════════════════════ │ │ 单个服务 = 一颗尘埃粒子放大 │ │ 全息面板展开：配置 / 监控 / 日志 / 发布 │ │ 服务详情以"全息投影"形态呈现 │ │ 操作按钮环绕粒子 │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### 2.2 导航交互 | 操作 | 效果 | 动效 | |------|------|------| | 滚轮/双指缩放 | 在三级视角间连续过渡 | 600ms 惯性缩放 + 星体渐显 | | 单击恒星 | 跃迁至该恒星系（Level 2） | 400ms 加速飞入 + 光芒扩散 | | 单击行星/尘埃 | 展开全息详情面板（Level 3） | 300ms 粒子聚合 + 面板浮现 | | 拖拽 | 平移星图 | 1:1 跟手 + 惯性滑动 | | 双击空白 | 返回上一级 | 500ms 拉远 + 星体缩小 | | Esc | 返回银河视角 | 600ms 极速拉远 | | Ctrl+K | 唤起曲速命令面板 | 200ms 空间折叠 + 面板弹出 | ### 2.3 星港坞（Star Dock）— 替代侧边栏 不是固定在屏幕边缘的菜单栏，而是一个**悬浮在底部中央的弧形坞站**： - 默认状态：隐藏，仅在鼠标移向屏幕底部 60px 区域时浮现 - 形态：半透明弧形条，5-7 个星点图标排列在弧线上 - 每个星点 = 一个功能域（总览/监控/配置/发布/日志/治理） - 悬停：星点放大 + 名称浮现 + 发光 - 点击：执行"跃迁"——星图快速重组为该功能域的最佳视角 - 当前所在域：星点持续发出柔和脉冲光 **关键区别**：星港坞不是"导航到另一个页面"，而是"改变观察宇宙的方式"。比如点击"监控"，星图不跳转，而是每颗恒星上方浮现实时指标光环，光束上显示延迟数字。 ### 2.4 曲速命令面板（Ctrl+K） - 触发：Ctrl+K 或 屏幕中央双击 - 形态：屏幕中心展开一个"空间折叠"效果——周围星图向四周拉伸模糊，中央浮现命令面板 - 宽度 640px，圆角 24px，深空玻璃质感 - 功能：搜索任何星体/服务/配置、执行操作、自然语言指令 - 键盘优先：↑↓ 选择，Enter 执行（执行=跃迁到目标），Esc 关闭 - 智能建议：根据当前视角和最近操作推荐命令 ### 2.5 全息面板（Holographic Panel） 当用户需要查看详细信息时，面板不是"弹出窗口"，而是从目标星体**投射**出来的全息影像： - 从星体中心向外展开（scale 0.6→1 + blur 4px→0 + opacity 0→1） - 半透明深空玻璃底 + 发光边缘 + 扫描线纹理 - 位置：智能定位，不遮挡目标星体（通常偏右上方） - 关闭：面板碎裂为粒子回归星体（300ms） - 可拖拽移动、可钉住（pin）变为固定侧面板 ### 2.6 环境感知（Ambient Intelligence） 整个宇宙的视觉状态实时反映集群健康： | 集群状态 | 宇宙表现 | |----------|----------| | 全部健康 | 宁静蓝紫色调，星点缓慢闪烁，粒子匀速流动 | | 存在告警 | 告警星体发出琥珀色脉冲，周围空间微微泛橙 | | 严重故障 | 故障星体变暗塌陷（黑洞化），红色吸积盘旋转，背景出现红色微光 | | 发布中 | 目标恒星发出超新星光波，粒子加速向外扩散 | | 扩容中 | 新恒星从远处飞入，伴随引力波涟漪 | --- ## 三、视觉规范 ### 3.1 色彩体系：宇宙光谱 | 语义 | 色值 | 用途 | |------|------|------| | 恒星蓝 Primary | `#6366F1` | 主操作、焦点、拓扑连线、核心交互 | | 星云紫 Accent | `#8B5CF6` | 品牌强调、导航高亮、数据可视化主色 | | 银河粉 Highlight | `#EC4899` | 品牌渐变终点、特殊强调、光晕 | | 超新星橙 Warning | `#F59E0B` | 告警、需关注、异常指标 | | 类星体绿 Success | `#10B981` | 健康状态、成功操作 | | 脉冲红 Danger | `#EF4444` | 故障、错误、紧急、严重告警 | | 宇宙青 Info | `#22D3EE` | 辅助信息、网络指标、次级强调 | **宇宙背景色阶：** | 层级 | 色值 | 用途 | |------|------|------| | 深空底 Abyss | `#0B1120` | 宇宙最底层背景 | | 深空 Deep | `#0F172A` | 面板底色、星港坞 | | 星际 Mid | `#1E293B` | 全息面板背景 | | 星云 Light | `#334155` | 悬停态、次级面板 | | 边界光 | `rgba(99,102,241,0.2)` | 发光边框、焦点态 | | 微边界 | `rgba(148,163,184,0.1)` | 普通分割线 | **发光效果：** | 场景 | 值 | |------|-----| | 恒星发光 | `0 0 20px rgba(99,102,241,.4), 0 0 60px rgba(139,92,246,.15)` | | 尘埃微粒 | `0 0 6px rgba(139,92,246,.5), 0 0 12px rgba(99,102,241,.2)` | | 焦点环 | `0 0 0 4px rgba(99,102,241,.12), 0 0 20px rgba(99,102,241,.15)` | | 全息面板 | `0 8px 32px rgba(0,0,0,.4), 0 0 1px rgba(99,102,241,.5), inset 0 0 30px rgba(99,102,241,.03)` | | 星港坞 | `0 -4px 24px rgba(99,102,241,.1), 0 0 1px rgba(139,92,246,.4)` | | 跃迁光波 | `0 0 40px rgba(99,102,241,.3), 0 0 80px rgba(139,92,246,.1)` | ### 3.2 字体与排版 - 字体栈：`"Inter", "PingFang SC", "Microsoft YaHei", sans-serif` - 数据数字：`"JetBrains Mono", "SF Mono", monospace` - 字号阶梯：12 / 13 / 14 / 16 / 20 / 24 / 32 / 40 - 字重：400（正文）/ 500（标签）/ 600（标题）/ 700（数据大字） ### 3.3 间距与圆角 - 间距基准 4px：4 / 8 / 12 / 16 / 24 / 32 / 48 - 圆角：4px（标签）/ 8px（按钮）/ 12px（卡片）/ 16px（面板）/ 24px（全息面板/命令面板） - 全息面板内边距：24px（标准）/ 32px（宽松） ### 3.4 动效规范 | 动效 | 参数 | 场景 | |------|------|------| | 星点闪烁 | opacity 0.3→1, 3s alternate | 背景星点 | | 尘埃轨道运动 | 沿椭圆路径 rotate, 8-20s linear | 服务粒子 | | 数据粒子流动 | 沿光束路径 translate, 2-4s linear | 服务调用线 | | 恒星呼吸 | scale 1→1.03, 4s ease-in-out | 活跃节点 | | 跃迁飞入 | scale 0.3→1 + blur(8px)→0, 500ms | 进入恒星系 | | 全息展开 | scale(0.6)→1 + blur(4px)→0 + opacity, 400ms | 详情面板 | | 全息关闭 | scale→0.8 + opacity→0 + blur(2px), 300ms | 关闭面板 | | 星港浮现 | translateY(20px)→0 + opacity, 250ms | 底部坞站 | | 超新星发布 | scale 1→3 + opacity 1→0, 800ms | 发布动画 | | 引力波 | scale 1→2.5 + opacity .6→0, 1s | 状态变化反馈 | | 环境脉动 | 背景色/边框色渐变, 4s | 告警状态 | --- ## 四、Element Plus 组件映射 ### 4.1 主题定制策略 通过覆盖 Element Plus CSS 变量实现宇宙主题： ```css :root { --el-color-primary: #6366F1; --el-color-primary-light-3: #818CF8; --el-color-primary-light-5: #A5B4FC; --el-color-primary-light-7: #C7D2FE; --el-color-primary-light-9: #EEF2FF; --el-color-primary-dark-2: #4F46E5; --el-color-success: #10B981; --el-color-warning: #F59E0B; --el-color-danger: #EF4444; --el-color-info: #8B5CF6; --el-bg-color: #1E293B; --el-bg-color-page: #0F172A; --el-bg-color-overlay: #334155; --el-text-color-primary: #F1F5F9; --el-text-color-regular: #94A3B8; --el-text-color-secondary: #64748B; --el-border-color: rgba(99,102,241,.2); --el-border-color-light: rgba(148,163,184,.1); --el-fill-color-blank: #1E293B; --el-mask-color: rgba(11,17,32,0.85); } ``` ### 4.2 核心组件使用 | 功能区域 | Element Plus 组件 | 定制要点 | |----------|-------------------|----------| | 星港坞 | 自定义 SVG + el-tooltip | 弧形布局、发光星点、悬浮触发 | | 曲速命令 | el-autocomplete + el-scrollbar | 命令面板样式、键盘导航、空间折叠背景 | | 全息面板 | el-drawer / 自定义 | 全息投影动效、半透明玻璃、扫描线 | | 数据表格 | el-table | 深空行色、悬浮发光、状态列药丸 | | 状态标签 | el-tag | 药丸形、发光边框、语义色 | | 进度展示 | el-progress | 渐变填充、发光轨道 | | 表单配置 | el-form + el-input | 深底输入框、聚焦发光边框 | | 选项切换 | el-tabs / el-segmented | 星轨式下划线、发光选中态 | | 通知告警 | el-notification | 从星体方向"飞入"、发光边框 | | 拓扑图 | 自定义 SVG + d3-force | 力导向布局、粒子动画、缩放平移 | | 图表 | 自定义 SVG / ECharts | 配色对齐宇宙光谱 | --- ## 五、核心页面设计 ### 5.1 银河视角 / 集群总览（首页 · Level 1） **这就是打开星尘看到的第一个画面——一片活的宇宙。** **全屏构成：** - 三层视差星空背景（远/中/近），鼠标移动产生微视差 - 中央区域：力导向星图占据 100% 视口 - 恒星 = 计算节点（8-16个），大小映射 CPU 核数 - 每颗恒星周围有 3-8 个尘埃粒子环绕 = 服务实例 - 恒星间光束连接 = 服务调用（粒子沿光束流动） - 星云色雾 = 环境分组（生产/预发/开发） - 左上角：极简坐标指示器（"银河视角 · 生产集群 · 12 节点 · 47 服务"） - 右上角：集群健康脉冲灯（一个呼吸的小圆点，颜色=整体状态） - 底部：星港坞（隐藏，鼠标靠近底部时浮现） **交互：** - 悬停恒星 → 恒星放大 1.2x + 光环显示核心指标（CPU/QPS/服务数） - 点击恒星 → 跃迁至恒星系视角（Level 2） - 悬停光束 → 显示调用关系 tooltip（源→目标，QPS，延迟） - 滚轮缩放 → 连续缩放星图 - 拖拽 → 平移探索 - Ctrl+K → 曲速命令面板 - 鼠标移向底部 → 星港坞浮现 **环境感知：** - 全部健康：宁静蓝紫，粒子慢速流动 - 有告警：告警恒星琥珀脉冲 + 周围空间微橙 - 故障：故障恒星暗化 + 红色吸积盘 + 背景微红 ### 5.2 恒星系视角 / 节点监控（Level 2） **从银河缩入一颗恒星后看到的画面。** **全屏构成：** - 背景：星空 + 远处其他恒星模糊可见（暗示可以返回） - 中央：目标恒星（大，占视口 20%），表面有资源环形仪表 - 外环：CPU 使用率（弧度） - 中环：内存使用率 - 内环：磁盘 IO - 恒星颜色随负载变化（蓝→橙→红） - 轨道系统：3-4 条椭圆轨道环绕恒星 - 每条轨道上有 2-4 个行星 = 服务 - 行星大小 = 实例数 - 行星颜色 = 健康状态（绿/黄/红） - 行星沿轨道缓慢运动 - 左上角：面包屑（"银河 → 节点名"），可点击返回 - 右侧（按需）：点击行星后浮现全息面板，显示服务详情 **交互：** - 悬停行星 → 行星放大 + 名称标签 + 核心指标 - 点击行星 → 全息面板展开（服务监控/配置/日志） - 点击恒星本体 → 节点详情全息面板（系统信息、进程列表） - 双击空白 / Esc → 返回银河视角 - 滚轮 → 微调缩放 ### 5.3 尘埃视角 / 服务详情（Level 3 · 全息面板） **点击一颗行星（服务）后展开的全息投影面板。** **面板构成（480px 宽，从行星位置投射）：** - 头部：服务名 + 状态药丸 + 实例数 - 标签页（el-tabs 定制为星轨式）： - 监控：QPS 面积图 + 延迟 P99 + 错误率 - 配置：Key-Value 表格（可编辑）+ 发布按钮 - 日志：最近日志流（虚拟滚动） - 拓扑：该服务的上下游调用关系（迷你图） - 底部操作栏：重启 / 扩容 / 查看链路 / 发布 **配置编辑（在"配置"标签内）：** - 表格式 Key-Value（el-table 行内编辑） - 修改后行高亮 + diff 标记 - "发布配置"按钮 → 超新星动画（光波从面板扩散到星图） - 版本历史：时间线形式，点击可回滚 --- ## 六、技术实现要点 ### 6.1 前端架构 ``` Stardust.Web.Vue/ ├── src/ │ ├── theme/ │ │ ├── cosmic-variables.css # 宇宙主题 CSS 变量 │ │ ├── element-overrides.css # Element Plus 覆盖 │ │ └── animations.css # 全局动效 │ ├── components/ │ │ ├── Universe/ # 宇宙容器（缩放/平移/视差） │ │ │ ├── StarField.vue # 三层星空背景 │ │ │ ├── GalaxyView.vue # Level 1 银河视角 │ │ │ ├── StarSystem.vue # Level 2 恒星系 │ │ │ └── DustPanel.vue # Level 3 全息面板 │ │ ├── StarDock/ # 星港坞（底部弧形导航） │ │ ├── WarpCommand/ # 曲速命令面板 │ │ ├── HologramPanel/ # 全息投影面板容器 │ │ ├── StellarTopology/ # 星际拓扑（d3-force） │ │ └── AmbientState/ # 环境感知控制器 │ ├── composables/ │ │ ├── useZoomNavigation.ts # 缩放导航状态机 │ │ ├── useStarField.ts # 星点生成 │ │ ├── useParticleFlow.ts # 粒子流动 │ │ ├── useOrbitalMotion.ts # 轨道运动 │ │ └── useAmbientState.ts # 环境感知 │ └── views/ │ └── Universe.vue # 唯一路由入口（无多页面） ``` ### 6.2 关键设计决策 **单路由架构**：整个应用只有一个路由 `/`。所有"页面切换"都是宇宙视角的变化（缩放/平移/聚焦），不是 Vue Router 跳转。这从根本上消除了"页面"概念。 **状态驱动视角**：一个全局 `viewState` 状态机控制当前视角： ```typescript type ViewState = | { level: 'galaxy' } | { level: 'star-system', nodeId: string } | { level: 'dust', nodeId: string, serviceId: string } ``` ### 6.3 性能考量 - 星空背景：CSS animation + 少量 DOM（150 个星点），GPU 加速 - 拓扑图：SVG + d3-force，节点 < 200 时 60fps - 轨道运动：CSS @keyframes + transform，不触发重排 - 缩放：CSS transform: scale() + translate()，GPU 合成层 - 按需渲染：Level 2/3 内容仅在跃迁时加载 - 数据刷新：WebSocket 推送 + 节流渲染（1s 合并） ### 6.4 响应式策略 - ≥1440px：完整星图 + 全息面板并排 - 1024-1440px：全息面板覆盖星图右侧 40% - 768-1024px：全息面板全屏覆盖（带返回按钮） - <768px：简化为列表视图（保留宇宙视觉主题） --- ## 七、设计交付物 1. **设计方案文档**（本文件） 2. **银河视角原型** — `prototype-overview.html`（Level 1 全屏星图 + 星港坞 + 曲速命令） 3. **恒星系原型** — `prototype-monitor.html`（Level 2 节点监控 + 轨道服务 + 全息面板） 4. **尘埃视角原型** — `prototype-config.html`（Level 3 服务配置 + 全息编辑 + 发布动画） 所有原型使用纯 HTML/CSS/JS + SVG 动画，可直接在浏览器打开体验完整交互。