From 5f2b327e46e23efe787cc8e7ab31f6cca968ec23 Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Sun, 19 Apr 2026 15:53:50 +0800
Subject: [PATCH] Refine UI system constraints in IA spec

---
 .../2026-04-19-device-config-ia-redesign.md   | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/docs/superpowers/specs/2026-04-19-device-config-ia-redesign.md b/docs/superpowers/specs/2026-04-19-device-config-ia-redesign.md
index 04d14f6..ef41dca 100644
--- a/docs/superpowers/specs/2026-04-19-device-config-ia-redesign.md
+++ b/docs/superpowers/specs/2026-04-19-device-config-ia-redesign.md
@@ -73,6 +73,82 @@
 - 查看、管理、审计分开
 - 风格统一、简洁，不做普通 CRUD 表单后台的拼贴感
 
+## UI 视觉系统约束
+
+这次重设计不仅要重做信息架构，也要约束 UI 本身的表现方式，避免后续页面继续变成“每页一个风格”。
+
+后续实现必须遵守下面这些视觉约束：
+
+1. 优先基于统一的后台模板风格来实现  
+   不允许在不同页面随意发明新的颜色体系、按钮样式、字体层级、卡片风格和状态表现。
+
+2. 颜色必须克制且有明确语义  
+   - 中性色用于背景、分隔、普通信息
+   - 绿色用于成功 / 在线 / 正常
+   - 红色用于失败 / 离线 / 异常
+   - 黄色或橙色用于警告 / 风险
+   - 主强调色只承担选中、高亮、关键入口，不应泛滥
+
+3. 字体和字号层级必须固定  
+   不允许为了“显眼”在局部页面随意放大、缩小或切换字体。标题、正文、说明、技术字段都应使用统一层级。
+
+4. 组件样式必须统一  
+   按钮、表格、摘要卡、标签、状态点、抽屉、折叠区、表单输入框都应使用统一规则，不能每页重新设计。
+
+5. 图标优先表达状态，文字优先表达对象  
+   状态类信息尽量图标化；对象名、配置名、操作名则保持清楚简洁，不做花哨修饰。
+
+6. 页面视觉重心必须稳定  
+   不允许通过随意的高饱和颜色、大块阴影、混乱圆角、过多描边来制造“设计感”。这套后台应是稳定、专业、克制的运维界面。
+
+## 信息分层与收纳策略
+
+后台默认只展示运维真正需要的重点信息，其他内容应当有明确的收纳方式，避免页面堆满“技术上有用但不是当前最重要”的信息。
+
+信息展示分三层：
+
+### 第一层：默认可见的核心信息
+
+这是页面一打开就应该看到的信息，只保留支持判断和操作的关键内容。例如：
+
+- 设备是否在线
+- 服务是否运行
+- 当前运行配置摘要
+- 最近操作是否成功
+- 当前可执行的关键动作
+
+### 第二层：次要但常用的参考信息
+
+这些信息不是第一眼最重要，但经常需要核对。应通过折叠区、展开面板或局部详情块承载，例如：
+
+- `device_id`
+- IP、hostname
+- build_id、git_sha
+- 配置来源中的模板 / profile / overlay 明细
+- 最近一次操作的详细结果
+
+### 第三层：低频技术信息
+
+这些信息只在排查问题或高级使用时才需要，不能默认大面积展开。应进入抽屉、技术详情区或高级模式，例如：
+
+- 原始 JSON
+- 完整响应体
+- 原始路径
+- 调试输出
+- 底层接口报错细节
+
+### 收纳规则
+
+后续所有页面都应遵守以下收纳规则：
+
+- 默认页面只保留“判断当前状态”和“执行当前动作”需要的信息
+- 次要参考信息优先进入折叠区
+- 低频技术信息优先进入抽屉或高级面板
+- 不能因为“也许有人会看”就把所有信息都铺在主页面上
+
+这条规则非常重要：  
+页面不是数据库字段的平铺视图，而是运维任务的工作界面。
+
 ## 一级信息架构
 
 整个系统最终只保留四个一级模块：