重构(前端): 重新组织状态监视器布局和快速搜索助手

将状态监视器模板重塑为分组的概览/模块部分，以使结构与参考面板布局保持一致，并提高组件可读性，以便后续进行 UI 迭代工作。将全局快速搜索中的连接标签查找助手移至计算搜索结果之前，以避免时间顺序问题，并使设置逻辑中的依赖关系流更加清晰。在 .helloagents 下添加用于状态监视器-参考布局对等的规划工件，以跟踪提案上下文和实施任务。
2026-04-15 23:42:08 +08:00
parent 9b45ad77e5
commit a28822ec79
4 changed files with 878 additions and 527 deletions
@@ -0,0 +1,126 @@
+# 变更提案: status-monitor-reference-layout-parity
+
+## 元信息
+```yaml
+类型: 新功能/修复/重构/优化
+方案类型: implementation
+优先级: P0/P1/P2/P3
+状态: 草稿
+创建: 2026-04-15
+```
+
+---
+
+## 1. 需求
+
+### 背景
+{为什么需要这个变更}
+
+### 目标
+{要达成什么目标}
+
+### 约束条件
+```yaml
+时间约束: {如有}
+性能约束: {如有}
+兼容性约束: {如有}
+业务约束: {如有}
+```
+
+### 验收标准
+- [ ] {标准1}
+- [ ] {标准2}
+
+---
+
+## 2. 方案
+
+### 技术方案
+{简要描述实现方式}
+
+### 影响范围
+```yaml
+涉及模块:
+  - {模块1}: {影响说明}
+预计变更文件: {数量}
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| {风险} | 高/中/低 | {措施} |
+
+---
+
+## 3. 技术设计（可选）
+
+> 涉及架构变更、API设计、数据模型变更时填写
+
+### 架构设计
+```mermaid
+flowchart TD
+    A[组件A] --> B[组件B]
+```
+
+### API设计
+#### {METHOD} {路径}
+- **请求**: {结构}
+- **响应**: {结构}
+
+### 数据模型
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| {字段} | {类型} | {说明} |
+
+---
+
+## 4. 核心场景
+
+> 执行完成后同步到对应模块文档
+
+### 场景: {场景名称}
+**模块**: {所属模块}
+**条件**: {前置条件}
+**行为**: {操作描述}
+**结果**: {预期结果}
+
+---
+
+## 5. 技术决策
+
+> 本方案涉及的技术决策，归档后成为决策的唯一完整记录
+
+### status-monitor-reference-layout-parity#D001: {决策标题}
+**日期**: 2026-04-15
+**状态**: ✅采纳 / ❌废弃 / ⏸搁置
+**背景**: {为什么需要这个决策}
+**选项分析**:
+| 选项 | 优点 | 缺点 |
+|------|------|------|
+| A: {方案A} | {优点} | {缺点} |
+| B: {方案B} | {优点} | {缺点} |
+**决策**: 选择方案{X}
+**理由**: {详细理由}
+**影响**: {对哪些模块有影响}
+
+---
+
+## 6. 成果设计
+
+> 含视觉产出的任务由 DESIGN Phase2 填充。非视觉任务整节标注"N/A"。
+
+### 设计方向
+- **美学基调**: {鲜明的美学方向名称+具体描述 — 禁止"现代简洁"等空泛词}
+- **记忆点**: {这个设计最令人难忘的一个特征}
+- **参考**: {URL/截图/风格描述/无}
+
+### 视觉要素
+- **配色**: {主色+强调色+背景色，色值或方向}
+- **字体**: {展示字体(标题)+正文字体配对+选择理由，避免 Arial/Inter/Roboto 等通用字体}
+- **布局**: {整体结构+空间策略}
+- **动效**: {入场动画/状态切换/交互反馈的动态效果策略}
+- **氛围**: {背景处理/纹理/阴影/透明叠层等纵深细节}
+
+### 技术约束
+- **可访问性**: {对比度/语义化/导航要求/N/A}
+- **响应式**: {断点/适配策略/N/A}
@@ -0,0 +1,41 @@
+# 任务清单: status-monitor-reference-layout-parity
+
+```yaml
+@feature: status-monitor-reference-layout-parity
+@created: 2026-04-15
+@status: pending
+@mode: {R2|R3}
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 0 | 0 | 0 | X |
+
+---
+
+## 任务列表
+
+### 1. {阶段/模块名称}
+
+- [ ] 1.1 在 `{文件路径}` 中实现 {具体功能}
+- [ ] 1.2 在 `{文件路径}` 中实现 {具体功能}
+  - 依赖: 1.1
+
+### 2. {阶段/模块名称}
+
+- [ ] 2.1 {任务描述}
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+
+---
+
+## 执行备注
+
+> 记录执行过程中的重要说明、决策变更、风险提示等
@@ -23,6 +23,24 @@ const inputRef = ref<HTMLInputElement | null>(null);
 const query = ref('');
 const selectedIndex = ref(0);

+const tagLookup = computed(() => {
+  const map = new Map<number, string>();
+  tags.value.forEach((tag) => {
+    map.set(tag.id, tag.name);
+  });
+  return map;
+});
+
+const getConnectionTagNames = (connection: ConnectionInfo): string[] => {
+  if (!connection.tag_ids?.length) {
+    return [];
+  }
+
+  return connection.tag_ids
+    .map((tagId) => tagLookup.value.get(tagId))
+    .filter((tagName): tagName is string => Boolean(tagName));
+};
+
 const results = computed(() => searchConnections(props.connections, query.value, 8, {
  getAdditionalFields: getConnectionTagNames,
 }));
@@ -97,24 +115,6 @@ const handleKeyDown = (event: KeyboardEvent) => {
 };

 const getConnectionLabel = (connection: ConnectionInfo): string => connection.name || connection.host;
-
-const tagLookup = computed(() => {
-  const map = new Map<number, string>();
-  tags.value.forEach((tag) => {
-    map.set(tag.id, tag.name);
-  });
-  return map;
-});
-
-const getConnectionTagNames = (connection: ConnectionInfo): string[] => {
-  if (!connection.tag_ids?.length) {
-    return [];
-  }
-
-  return connection.tag_ids
-    .map((tagId) => tagLookup.value.get(tagId))
-    .filter((tagName): tagName is string => Boolean(tagName));
-};
 </script>

 <template>