77 lines
7.0 KiB
Markdown
77 lines
7.0 KiB
Markdown
## 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 次要指标默认折叠。
|
||
- 长文本默认缩写，完整值只通过悬停、复制或展开明细承接，不在主列表直接铺满一整行。
|
||
- `发布` 页主动作必须集中在一条 action bar；区块内部不重复摆放刷新、预检查、执行类按钮。
|
||
- 高权重动作必须明显少于次动作；`保存 / 执行 / 立即刷新` 才能用高权重按钮，其余默认降为 ghost 或轻量控件。
|
||
- `执行日志` 和 `服务日志` 默认不直接铺在主页面里；页面只保留摘要，完整日志通过统一弹层查看和导出。
|
||
- `配置` 页左侧必须保持 explorer 式树状浏览，不回退到一张张大卡片；组折叠、当前项高亮、上下项切换都要直接可用。
|
||
- `配置` 页左侧 explorer 不重复展示已经在 workbench head 里出现的 baseUrl、组数、环境信息。
|
||
- `配置` 页不要重复出现“页面标题 / 分区标题 / 当前文件卡片”三层同义信息；当前文件、group、type 合并进工具条和 metadata strip。
|
||
- `配置` 页左侧文件树优先高密度列表，压缩单项高度、内边距和顶部无效空白。
|
||
- `任务型页面` 优先使用紧凑任务头，不再额外堆一张信息价值低的说明卡。
|
||
- 主机视图里的百分比指标优先使用小圆环 + 数值标签，不回退到纯文本堆叠。
|
||
- 主机行中部优先展示“在线服务 / 异常服务摘要”，避免重复出现“全部正常”这类低信息密度文案。
|
||
- 主机分组标题必须带主机数、服务数、异常主机数，保证高密度时仍能快速扫读分区状态。
|
||
- 总览页在全正常状态下不继续渲染空异常区；异常摘要、异常主机、异常基础设施为空时直接隐藏，正常项只保留紧凑摘要。
|
||
- 首页异常摘要优先使用分段状态带；正常健康态保持紧凑卡组，不回退到多张孤立大卡。
|
||
- 首页服务矩阵的每个业务分组应作为独立分组卡展示，分组头直接包含服务数、节点数、异常数。
|
||
- 首页的网关 / 应用 / 支付分组允许使用轻微色温差异和导向线区分，但必须克制，不把分组色做成高饱和装饰。
|
||
- 首页正常主机默认使用紧凑卡栅格；没有异常主机时不渲染大空态占位。
|
||
- 主机指标拿不到时显示采集状态芯片，不用空圆环或占位短横伪装成正常指标。
|
||
- `发布` 页更新目标和滚动重启优先使用多列紧凑服务卡，完整宽表只留给执行结果和明细。
|
||
- 可选择条目优先使用胶囊式勾选控件，已选态要明显强于未选态，不能只靠原生 checkbox 本体提示选择结果。
|
||
- 首页侧栏卡、基础设施小卡、任务页工作区尽量复用同一套顶部导向线和轻表面语言，避免不同页面像不同产品拼接。
|
||
- `数据库` 视图使用统一的工作台入口，`MySQL / MongoDB` 通过同一层引擎切换承接，不再把数据库操作散落在不同页面角落。
|
||
- `MongoDB / MySQL` 操作页都采用 `左侧 explorer + 右侧 workbench` 结构；概览指标保持紧凑，危险操作集中到单独分区，不把删除类动作和普通查询动作混在一起。
|