## 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 次要指标默认折叠。 - 长文本默认缩写,完整值只通过悬停、复制或展开明细承接,不在主列表直接铺满一整行。