4.1 KiB
4.1 KiB
Design Context
Users
- 主要使用者是 deploy 机上的运维、后端开发和值班人员。
- 他们会在同一页面里完成巡检、异常定位、配置核对、服务更新和滚动重启。
- 这个面板的核心目标是 3 秒扫状态、10 秒定位异常、30 秒进入操作。
Brand Personality
- 气质是冷静、可靠、克制。
- 界面要传递“可控、可信、响应快”，不是展示型大屏，也不是炫技 demo。
- 页面文案必须短，不写解释性口号，不加无意义描述。
Aesthetic Direction
- 视觉方向固定为浅色工业控制台。
- 主题采用浅底、钢蓝主强调、绿橙红只用于状态，不做装饰。
- 结构采用硬质面板、清晰边线、小圆角、机架式主机条带。
- 禁止继续使用玻璃拟态、霓虹渐变、厚重阴影、大 Hero、紫蓝科技感 demo 风。
Design Principles
- 先扫读，再操作：总览在顶部，异常优先暴露，操作区保持直接。
- 状态色只表达状态：正常、警告、异常必须一眼可分，但不要泛滥。
- 同类控件同一语言：按钮、筛选、输入框、列表项统一边线和圆角系统。
- 面板比卡片重要：减少漂浮卡片感，增强工作台和控制台感。
- 文案最短化：标题、标签、动作名称直接，不补说明性废话。
Information Architecture
- 首页默认视图必须先给“状态总览”，不能先给配置编辑器或发布表单。
- 首页第一屏核心固定为“服务状态矩阵”，行是服务，列是部署主机/实例。
- 主机区必须使用紧凑条带，一台主机一行；主机指标不能继续做四个大卡片。
Nacos / Mongo / TAT在首页只做基础设施摘要，详细表格放到基础设施视图。配置和发布必须独立成单独视图，不再默认堆在首页长滚动流里。- 筛选优先按业务分组：
全部 / 异常 / 网关 / 应用 / 支付 / 基础设施。
Density Rules
- 首屏要尽量在不滚动的情况下同时看到异常摘要和大部分服务状态。
- 首页首屏结构固定收敛为：顶部导航、工具条、紧凑摘要条、服务矩阵；不再插入宽而矮利用率低的大提示块。
- 服务状态单元格只保留状态码或极简状态，不在矩阵里铺长 URL 或返回正文。
- 最近异常并入可折叠右侧详情面板顶部，不单独占首页整行宽度。
- 详情信息通过可折叠右侧详情面板或展开行承载，不通过继续增高卡片解决。
- 异常项排序必须前置，正常项后置，保证值班扫屏优先看到问题。
- 紧凑模式下隐藏分组、均值、URL、返回详情等次要信息，优先保留状态判断信息。
- 正常态默认降饱和处理，灰绿或中性灰优先；红橙只服务于告警和异常。
Layout Rules
- 服务矩阵按业务分组切成多个子矩阵，减少未部署空白格，不再把所有主机列硬拼成一张大表。
- 服务矩阵只保留一层分组表达，禁止在行内和表头重复写相同分组信息。
- 服务矩阵表头和第一列默认 sticky，横向或纵向滚动时不能丢服务名和主机名。
- 首页主机区只展示业务主机条带，
Nacos / Mongo等基础设施主机放到基础设施或主机视图承接。 - 主机指标必须收成一行短文本，不回退到四个大指标块或一排高饱和胶囊。
总览 / 发布 / 配置 / 基础设施不共享同一套工具条；监控筛选只属于总览、服务、主机视图。发布页必须是专用工作台：顶部 sticky 操作栏、单独状态条、构建参数在上、更新目标和滚动重启都用紧凑表格。配置页必须拆成页内 tabs：Nacos / Go Env / 历史版本；编辑区使用 sticky 工具条、metadata strip、源码 / Diff切换。基础设施页必须有二级导航：状态总览 / Nacos 服务 / Mongo 指标 / TAT；Nacos 服务默认折叠实例，Mongo 次要指标默认折叠。- 长文本默认缩写，完整值只通过悬停、复制或展开明细承接，不在主列表直接铺满一整行。