## 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` 结构；概览指标保持紧凑，危险操作集中到单独分区，不把删除类动作和普通查询动作混在一起。