From 154bb7ee6084b08d4164721e0754c58572a50714 Mon Sep 17 00:00:00 2001 From: yinjianm Date: Wed, 15 Apr 2026 21:34:45 +0800 Subject: [PATCH] feat(frontend): remodel status monitor panel and show tags in global search refactor workspace status monitoring UI into a dense responsive dark panel style, including unified header, resource cards, and trend chart shells. enhance global connection quick search cards by rendering connection tag chips from tags store for easier host disambiguation. update helloagents changelog, archive proposals/tasks, and module index to record both completed frontend improvements. --- .helloagents/CHANGELOG.md | 6 + .../proposal.md | 139 ++ .../tasks.md | 56 + .../.status.json | 1 + .../proposal.md | 117 ++ .../tasks.md | 51 + .helloagents/archive/_index.md | 2 + .helloagents/modules/frontend.md | 6 +- .../GlobalConnectionQuickSearch.vue | 35 + .../frontend/src/components/StatusCharts.vue | 165 ++- .../frontend/src/components/StatusMonitor.vue | 1257 +++++++++++------ 11 files changed, 1329 insertions(+), 506 deletions(-) create mode 100644 .helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/proposal.md create mode 100644 .helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/tasks.md create mode 100644 .helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/.status.json create mode 100644 .helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/proposal.md create mode 100644 .helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/tasks.md diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md index 1e7ab56..d29cd1d 100644 --- a/.helloagents/CHANGELOG.md +++ b/.helloagents/CHANGELOG.md @@ -2,6 +2,12 @@ ## [Unreleased] +- **[frontend]**: 将工作区状态监控重构为更接近服务器监控小屏的深色响应式面板，统一头部信息条、资源监控条、内存/网络/磁盘卡片及 CPU/网络趋势图风格 — by yinjianm + - 方案: [202604152109_status-monitor-responsive-remodel](archive/2026-04/202604152109_status-monitor-responsive-remodel/) + +- **[frontend]**: 为全局服务器检索结果卡片补充服务器标签显示，便于在 `Ctrl+Shift+F` 快速检索时区分同名或近似主机 - by yinjianm + - 方案: [202604152110_workspace-global-search-show-connection-tags](archive/2026-04/202604152110_workspace-global-search-show-connection-tags/) + - **[frontend]**: 修复持续日志输出时切换终端后的 viewport 恢复偏移问题，改为按距底部偏移恢复滚动位置，避免重新激活后无法继续向下滚到最底部 — by yinjianm - 方案: [202604120705_terminal-scroll-viewport-restore-fix](archive/2026-04/202604120705_terminal-scroll-viewport-restore-fix/) diff --git a/.helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/proposal.md b/.helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/proposal.md new file mode 100644 index 0000000..825d252 --- /dev/null +++ b/.helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/proposal.md @@ -0,0 +1,139 @@ +# 变更提案: status-monitor-responsive-remodel + +## 元信息 +```yaml +类型: 重构/优化 +方案类型: implementation +优先级: P1 +状态: 已确认 +创建: 2026-04-15 +``` + +--- + +## 1. 需求 + +### 背景 +当前 `StatusMonitor.vue` 已经具备基础监控能力，但信息组织仍然偏表单式和松散卡片式，与用户给出的高密度监控参考图不一致。用户要求将“服务器状态”改造成统一的深色监控面板风格，同时明确指出不能直接照搬截图，因为现有组件结构、子组件边界和可用数据字段都与截图不同。 + +### 目标 +- 在不改动后端数据结构的前提下，将 `StatusMonitor.vue` 重组为更接近参考图的高密度状态监控布局 +- 同步调整 `StatusCharts.vue`，使底部趋势图与主监控区风格统一，避免视觉断层 +- 保持侧栏窄宽度、常规工作区宽度和移动端下都能稳定展示，保证响应式体验 + +### 约束条件 +```yaml +时间约束: 当前回合内完成设计、实现与验证 +性能约束: 保持现有实时刷新逻辑，不引入额外轮询或高频动画负担 +兼容性约束: 不修改 ServerStatus 数据模型，不破坏现有会话切换、历史趋势和复制 IP 等行为 +业务约束: 仅使用现有 CPU/内存/Swap/网络/磁盘字段做“视觉映射”，不伪造参考图中不存在的数据组件 +``` + +### 验收标准 +- [ ] `StatusMonitor.vue` 输出统一的深色监控面板视觉，系统信息、CPU、内存、网络、磁盘分区清晰且整体节奏接近参考图 +- [ ] `StatusCharts.vue` 与主监控区采用同一风格语言，图表容器、标题、边框、配色统一 +- [ ] 在窄侧栏和宽容器下布局都可读，关键模块不会溢出或只在单一宽度下可用 + +--- + +## 2. 方案 + +### 技术方案 +保留当前 `ServerStatus` 数据模型和 `StatusCharts` 的历史数据来源，仅重构前端展示层。 + +具体做法： +- 重写 `StatusMonitor.vue` 模板结构，将零散状态行重排为“头部信息条 + 资源总览区 + 分块卡片 + 趋势区”的紧凑监控布局 +- 复用现有计算属性与格式化逻辑，并补充少量只读映射计算，使 CPU/Swap、内存统计、网络吞吐、磁盘信息可以更贴近参考图表达 +- 改造 `StatusCharts.vue` 的图表外壳与配色，使其与主卡片共享同一套面板语言和暗色调 +- 通过容器断点与媒体断点双层控制，针对侧栏窄宽度优先纵向堆叠，宽屏再切为多列布局 + +### 影响范围 +```yaml +涉及模块: + - packages/frontend/src/components/StatusMonitor.vue: 主监控面板结构与样式重构 + - packages/frontend/src/components/StatusCharts.vue: 趋势图外壳与主题风格统一 + - .helloagents/CHANGELOG.md: 记录本次实现型变更 +预计变更文件: 3 +``` + +### 风险评估 +| 风险 | 等级 | 应对 | +|------|------|------| +| 参考图与现有组件结构不一致，易出现“强行复刻”后语义不通 | 中 | 按现有字段重组视觉模块，只在展示层做映射，不硬拼不存在的数据块 | +| 侧栏宽度较窄，复杂卡片容易挤压变形 | 中 | 使用 container query + media query 双层适配，优先保证窄宽度可读性 | +| 图表风格与主区域脱节 | 低 | 同步调整 `StatusCharts.vue` 的面板壳层、标题层级和配色体系 | + +--- + +## 3. 技术设计（可选） + +> 本次无后端接口和数据模型变更，仅描述前端组件关系调整。 + +### 架构设计 +```mermaid +flowchart TD + A[Session Store / statusMonitorManager] --> B[StatusMonitor.vue] + B --> C[头部信息条] + B --> D[资源总览卡片] + B --> E[磁盘与网络明细] + B --> F[StatusCharts.vue] +``` + +### API设计 +N/A + +### 数据模型 +N/A + +--- + +## 4. 核心场景 + +> 执行完成后同步到对应模块文档 + +### 场景: 窄侧栏中的服务器状态监控 +**模块**: `packages/frontend/src/components/StatusMonitor.vue` +**条件**: 用户已连接活动会话，状态监控面板显示在侧栏或窄容器中 +**行为**: 组件将系统信息、资源指标、磁盘和网络信息压缩为高密度纵向监控布局，并将趋势图保持为统一风格的可读模块 +**结果**: 用户在窄宽度下也能快速看到核心监控信息，界面风格与参考图接近且保持结构自洽 + +--- + +## 5. 技术决策 + +> 本方案涉及的技术决策，归档后成为决策的唯一完整记录 + +### status-monitor-responsive-remodel#D001: 基于现有组件数据结构做视觉重构，而非截图式逐像素复刻 +**日期**: 2026-04-15 +**状态**: ✅采纳 +**背景**: 用户给出的参考图和仓库内现有状态监控组件并不是同一套数据组织方式。若按截图硬做，会引入伪数据展示和组件结构错位。 +**选项分析**: +| 选项 | 优点 | 缺点 | +|------|------|------| +| A: 直接按截图复刻 | 视觉最接近参考图 | 容易出现字段不匹配、组件语义错位、维护成本高 | +| B: 基于现有字段和组件边界做同风格重构 | 结构真实、可维护、能保留现有行为 | 与截图不会 1:1 完全一致 | +**决策**: 选择方案 B +**理由**: 用户已经明确提醒要注意组件情况，因此应优先尊重现有组件结构和真实数据边界，在此基础上做到风格、密度和节奏接近参考图。 +**影响**: 影响 `StatusMonitor.vue` 与 `StatusCharts.vue` 的结构组织、样式语言和响应式策略 + +--- + +## 6. 成果设计 + +> 含视觉产出的任务由 DESIGN Phase2 填充。非视觉任务整节标注"N/A"。 + +### 设计方向 +- **美学基调**: 工业监控台风格的深色数据面板，强调高密度、低装饰噪音、荧光状态色和类似运维控制面板的秩序感 +- **记忆点**: 头部信息条与纵向资源块形成“窄屏也像真实服务器监控小屏”的强监控感 +- **参考**: 用户提供的服务器状态截图；但实现以当前组件结构和真实字段为准 + +### 视觉要素 +- **配色**: 以接近 `#14181d` 的炭黑背景为基底，辅以薄荷绿状态线、青蓝 CPU/网络高亮、琥珀磁盘标签和红色告警环形占比 +- **字体**: 延续项目现有字体体系，不额外引入远程字体；通过更紧凑的字号层级、等宽数字和大写微标签来形成监控台气质 +- **布局**: 顶部系统信息先行，资源块以纵向密集分段排列；在更宽容器中让次级统计变为网格，窄容器中退化为单列 +- **动效**: 保留进度和图表的实时变化动势，避免夸张过渡；重点使用轻量 hover 和状态高亮 +- **氛围**: 使用深色渐变、细边框、内阴影、弱发光线条和压低透明度的分隔来塑造监控终端氛围 + +### 技术约束 +- **可访问性**: 保持文本和背景对比度；保留语义化标题与可点击 IP 的交互反馈 +- **响应式**: 同时使用 container query 与 `@media` 断点；窄容器单列堆叠，较宽容器切回分栏 diff --git a/.helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/tasks.md b/.helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/tasks.md new file mode 100644 index 0000000..83e6848 --- /dev/null +++ b/.helloagents/archive/2026-04/202604152109_status-monitor-responsive-remodel/tasks.md @@ -0,0 +1,56 @@ +# 任务清单: status-monitor-responsive-remodel + +> **@status:** completed | 2026-04-15 21:32 + +```yaml +@feature: status-monitor-responsive-remodel +@created: 2026-04-15 +@status: completed +@mode: R2 +``` + +## 进度概览 + +| 完成 | 失败 | 跳过 | 总数 | +|------|------|------|------| +| 5 | 0 | 0 | 5 | + +--- + +## 任务列表 + +### 1. 方案与结构确认 + +- [√] 1.1 完成现有状态监控组件、子组件与数据字段的对齐分析，明确哪些视觉块可由现有字段支撑 | depends_on: [] + +### 2. 主监控区重构 + +- [√] 2.1 在 `packages/frontend/src/components/StatusMonitor.vue` 中重构头部信息区、CPU/内存/网络/磁盘模块布局与样式 | depends_on: [1.1] +- [√] 2.2 在 `packages/frontend/src/components/StatusMonitor.vue` 中补齐窄侧栏与较宽容器下的响应式适配 | depends_on: [2.1] + +### 3. 趋势图风格统一 + +- [√] 3.1 在 `packages/frontend/src/components/StatusCharts.vue` 中统一图表容器、标题层级与暗色监控风格 | depends_on: [2.1] + +### 4. 验证与记录 + +- [√] 4.1 执行前端构建验证并同步记录方案包与 CHANGELOG | depends_on: [2.2, 3.1] + +--- + +## 执行日志 + +| 时间 | 任务 | 状态 | 备注 | +|------|------|------|------| +| 2026-04-15 21:09 | 1.1 | completed | 已确认采用“按现有组件数据结构做同风格重构”的实现路线 | +| 2026-04-15 21:22 | 2.1 / 2.2 | completed | `StatusMonitor.vue` 已重排为头部信息条 + 资源监控条 + 内存/网络/磁盘卡片布局，并补齐容器级响应式规则 | +| 2026-04-15 21:24 | 3.1 | completed | `StatusCharts.vue` 已统一为同风格深色图表面板 | +| 2026-04-15 21:25 | 4.1 | completed | `npm run build` 通过；保留现有 Vite 动态导入和大 chunk 警告，未新增本次改动导致的错误 | + +--- + +## 执行备注 + +- 用户明确要求注意现有组件边界，禁止对参考图做脱离数据结构的硬复刻 +- 本次实现默认保留现有 `ServerStatus` 字段模型、历史趋势来源和会话相关行为 +- 构建阶段存在仓库既有的动态导入 chunk 警告，但本次改动未引入新的阻断性构建错误 diff --git a/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/.status.json b/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/.status.json new file mode 100644 index 0000000..6a11b64 --- /dev/null +++ b/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/.status.json @@ -0,0 +1 @@ +{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"Completed - global connection quick search tags visible in result cards","updated_at":"2026-04-15 21:19:00"} diff --git a/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/proposal.md b/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/proposal.md new file mode 100644 index 0000000..bd34f9a --- /dev/null +++ b/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/proposal.md @@ -0,0 +1,117 @@ +# 变更提案: workspace-global-search-show-connection-tags + +## 元信息 +```yaml +类型: 优化 +方案类型: implementation +优先级: P2 +状态: 草稿 +创建: 2026-04-15 +``` + +--- + +## 1. 需求 + +### 背景 +当前“全局服务器检索”弹层由 [`packages/frontend/src/components/GlobalConnectionQuickSearch.vue`](../../../../packages/frontend/src/components/GlobalConnectionQuickSearch.vue) 渲染，结果项只展示服务器名称、类型、地址和用户名。仓库中的连接对象已经具备 `tag_ids`，标签列表也有现成的 `tags.store.ts` 缓存与拉取逻辑，但该弹层没有把服务器标签显示出来，导致同名或相似主机难以快速区分。 + +### 目标 +- 在全局服务器检索结果项中显示服务器标签。 +- 保持现有快捷检索、键盘导航和点击连接行为不变。 +- 仅做前端局部增强，不引入后端、接口或数据模型改动。 + +### 约束条件 +```yaml +时间约束: 本轮内完成组件增强与基础验证 +性能约束: 结果列表最多展示 8 条，标签映射应在组件内轻量计算 +兼容性约束: 不改变现有 ConnectionInfo 结构与 searchConnections 返回格式 +业务约束: 仅增强“全局服务器检索”弹层，不扩展到其他连接列表入口 +``` + +### 验收标准 +- [ ] 打开“全局服务器检索”后，带标签的服务器结果项能在卡片内看到标签 chips。 +- [ ] 无标签的服务器结果项仍可正常展示、导航和连接，不因标签缺失报错。 +- [ ] 保持当前名称、类型、地址、用户名信息布局可读，不出现明显挤压或换行错乱。 +- [ ] 前端构建或类型检查通过，至少验证本组件改动未引入编译错误。 + +--- + +## 2. 方案 + +### 技术方案 +在 `GlobalConnectionQuickSearch.vue` 内直接接入 `useTagsStore()`，复用现有标签缓存并在组件挂载时补拉一次标签数据。通过本地 `computed` 建立 `tagId -> tagName` 映射，再为每条连接解析 `tag_ids` 对应的标签名称，在结果卡片的元信息区域下方增加一行轻量标签 chips。实现范围限定在展示层，不改动 `connectionSearch.ts` 的搜索评分逻辑。 + +### 影响范围 +```yaml +涉及模块: + - frontend: 全局服务器检索弹层结果项增加标签展示 + - knowledge-base: 新增方案包并记录本次前端优化 +预计变更文件: 4 +``` + +### 风险评估 +| 风险 | 等级 | 应对 | +|------|------|------| +| 标签数据在弹层首次打开时尚未加载完成，结果项短时间内无标签 | 低 | 组件挂载时主动 `fetchTags()`，并允许标签缺失时静默降级 | +| 标签过多导致结果卡片高度膨胀或信息拥挤 | 中 | 使用小号 chips、换行展示，并限制在现有卡片信息区内 | +| 为该弹层单独接入 tags store 造成多余耦合 | 低 | 仅复用现有 store，不新增 props 链路或接口改造 | + +--- + +## 3. 技术设计（可选） + +> 本次不涉及架构、API 或数据模型变更，N/A。 + +--- + +## 4. 核心场景 + +### 场景: 通过标签区分全局检索结果 +**模块**: frontend +**条件**: 用户打开“全局服务器检索”，列表中存在已绑定标签的连接 +**行为**: 结果项在名称/类型信息下方额外展示该连接的标签 chips +**结果**: 用户可以更快区分环境、分组或用途相近的服务器 + +### 场景: 无标签服务器保持兼容 +**模块**: frontend +**条件**: 用户打开“全局服务器检索”，结果中存在未绑定标签的连接 +**行为**: 结果项继续展示现有信息，不额外报错或阻断操作 +**结果**: 快捷检索、键盘选择和连接动作保持原样可用 + +--- + +## 5. 技术决策 + +### workspace-global-search-show-connection-tags#D001: 在搜索弹层内部直接复用 tags store +**日期**: 2026-04-15 +**状态**: ✅采纳 +**背景**: 需要为全局服务器检索显示标签，但当前 `App.vue` 仅向该组件传入 `connections` 和 `isLoading`，没有透传标签数据。 +**选项分析**: +| 选项 | 优点 | 缺点 | +|------|------|------| +| A: 在 `App.vue` 继续向下传递标签 props | 数据流显式 | 需要扩大父组件耦合面，修改调用链 | +| B: 在 `GlobalConnectionQuickSearch.vue` 内直接复用 `tags.store.ts` | 改动最小，可直接复用现有缓存与接口 | 组件对 tags store 有额外依赖 | +**决策**: 选择方案 B +**理由**: 本次是局部展示增强，优先选择最小改动路径，避免为一个展示字段重构父组件 props。 +**影响**: frontend + +--- + +## 6. 成果设计 + +### 设计方向 +- **美学基调**: 延续现有全局检索弹层的深色命令面板视觉，在结果卡片中加入低对比度、轻量化标签 chips，强化“检索信息补充”而不是“主信息抢占”。 +- **记忆点**: 搜索结果在紧凑卡片中同时保留连接类型 badge 与标签 chips，形成一眼可辨识的服务器上下文。 +- **参考**: 复用 [`packages/frontend/src/views/ConnectionsView.vue`](../../../../packages/frontend/src/views/ConnectionsView.vue) 现有标签 pills 风格。 + +### 视觉要素 +- **配色**: 延续 `bg-header`、`border-border`、`text-text-secondary` 的现有系统色，不新增主题色。 +- **字体**: 继续使用项目现有字体栈，标签文本维持 `text-[11px]` 级别作为辅助信息。 +- **布局**: 标签位于结果项第二信息层，单独一行换行展示，不挤占标题与连接地址主信息。 +- **动效**: 复用结果卡片已有 hover/selected 态，不新增额外动效。 +- **氛围**: 保持紧凑、专业、偏命令面板式检索体验，以信息清晰为先。 + +### 技术约束 +- **可访问性**: 标签文字需保持足够对比度，不影响现有键盘导航焦点可读性。 +- **响应式**: 结果卡片内标签允许自动换行，避免在窄宽度弹层下溢出。 diff --git a/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/tasks.md b/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/tasks.md new file mode 100644 index 0000000..87918ba --- /dev/null +++ b/.helloagents/archive/2026-04/202604152110_workspace-global-search-show-connection-tags/tasks.md @@ -0,0 +1,51 @@ +# 任务清单: workspace-global-search-show-connection-tags + +> **@status:** completed | 2026-04-15 21:34 + +```yaml +@feature: workspace-global-search-show-connection-tags +@created: 2026-04-15 +@status: completed +@mode: R2 +``` + +## 进度概览 + +| 完成 | 失败 | 跳过 | 总数 | +|------|------|------|------| +| 4 | 0 | 0 | 4 | + +--- + +## 任务列表 + +### 1. 方案设计 + +- [√] 1.1 完成全局服务器检索入口定位，确认实际组件为 `packages/frontend/src/components/GlobalConnectionQuickSearch.vue` | depends_on: [] + +### 2. 前端实现 + +- [√] 2.1 在 `packages/frontend/src/components/GlobalConnectionQuickSearch.vue` 中接入 `tags.store.ts`，建立标签名称映射并为结果项提供标签数据 | depends_on: [1.1] +- [√] 2.2 在 `packages/frontend/src/components/GlobalConnectionQuickSearch.vue` 中为搜索结果卡片增加标签 chips 展示，并保持现有信息布局稳定 | depends_on: [2.1] + +### 3. 验证与知识同步 + +- [√] 3.1 执行前端构建或等价校验，确认全局服务器检索标签展示改动未引入编译错误 | depends_on: [2.2] + +--- + +## 执行日志 + +| 时间 | 任务 | 状态 | 备注 | +|------|------|------|------| +| 2026-04-15 21:10 | DESIGN | completed | 已确认“全局服务器检索”实际入口为 `GlobalConnectionQuickSearch.vue`，并收敛为单组件展示增强 | +| 2026-04-15 21:15 | 2.1-2.2 | completed | 已在 `GlobalConnectionQuickSearch.vue` 内接入 `tags.store.ts` 并为结果卡片新增标签 chips | +| 2026-04-15 21:19 | 3.1 | completed | `npm --workspace @nexus-terminal/frontend run build` 被仓库现有 `StatusMonitor.vue` 类型错误阻断；`npm --workspace @nexus-terminal/frontend exec vite build` 通过，确认本次组件改动可正常打包 | + +--- + +## 执行备注 + +> 本次范围限定为“全局服务器检索”弹层，不扩展到 `WorkspaceConnectionList.vue` 或其他连接列表入口。若后续需要统一所有搜索/列表入口的标签展示，再单独起方案包处理。 +> +> 当前仓库存在与本次改动无关的前端类型问题：`packages/frontend/src/components/StatusMonitor.vue` 缺少若干模板引用属性定义，导致全量 `vue-tsc --noEmit` 失败。 diff --git a/.helloagents/archive/_index.md b/.helloagents/archive/_index.md index 0c4d1e4..c9ddefa 100644 --- a/.helloagents/archive/_index.md +++ b/.helloagents/archive/_index.md @@ -7,6 +7,8 @@ | 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 | |--------|------|------|---------|------|------| +| 202604152110 | workspace-global-search-show-connection-tags | - | - | - | ✅完成 | +| 202604152109 | status-monitor-responsive-remodel | - | - | - | ✅完成 | | 202604122248 | connections-tag-batch-management | implementation | frontend, backend | connections-tag-batch-management#D001 | ✅完成 | | 202604120709 | quickcommands-double-click-tooltip | implementation | frontend | quickcommands-double-click-tooltip#D001 | ✅完成 | | 202604120705 | terminal-scroll-viewport-restore-fix | - | - | - | ✅完成 | diff --git a/.helloagents/modules/frontend.md b/.helloagents/modules/frontend.md index 42c8e10..2e7cf43 100644 --- a/.helloagents/modules/frontend.md +++ b/.helloagents/modules/frontend.md @@ -36,7 +36,7 @@ ### 工作区交互 **条件**: 用户进入 `/workspace` 或相关管理页面。 -**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 继续整合快捷指令、命令历史、文件管理和编辑器四个面板，导航入口保持为纯图标按钮，但已调整为位于 `Workbench` 标题区上方的横向 icon rail，四个入口自左向右排列、默认仅显示图标并通过 tooltip 暴露名称，默认激活快捷指令。`CommandInputBar.vue` 当前已将底部命令框升级为支持会话级草稿保留的多行 `textarea`：普通 `Enter` 插入换行，`Ctrl+Shift+Enter` 发送当前命令，输入框会按内容自动增高至约 6 行，超出后在输入框内部滚动，并继续兼容快捷指令/命令历史同步与选中发送逻辑。应用根组件 `App.vue` 现在还新增了全局服务器快捷检索：已登录页面按下 `Ctrl+Shift+F` 会打开 `GlobalConnectionQuickSearch.vue`，通过 `utils/connectionSearch.ts` 对连接名称、主机、用户名和类型做本地模糊排序，并直接复用 `sessionStore.handleConnectRequest()` 触发 SSH 工作区跳转或 RDP / VNC 弹窗连接。快捷指令相关能力目前由 `AddEditQuickCommandForm.vue`、`QuickCommandsView.vue` 与新增的 `utils/quickCommandTemplate.ts` 协同实现：编辑弹窗左侧既可维护自定义 `${变量名}`，也提供 `${{date}}`、`${{time}}`、`${{timestamp}}`、`${{week}}`、`${{uuid}}`、`${{random:8}}`、`${{clipboard}}`、`${{password}}` 等动态变量的一键插入；实际执行时会统一走共享解析器，覆盖编辑弹窗执行、列表直接执行、粘贴到命令输入框和发送到全部服务器等链路，并对未定义变量、无法读取的剪贴板或不可用密码给出非阻断告警。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；该视图当前还支持命令项右键菜单，并已修正为实底卡片式上下文菜单，提供立即执行、粘贴到命令输入框（不自动发送）、复制命令、发送到全部服务器、编辑和删除等动作。快捷命令列表的鼠标主交互当前已从“单击立即执行”收紧为“单击仅更新选中态、双击才执行”，从而继续兼容键盘 `Enter` 的选中执行路径并降低误触风险；每条命令项同时会把完整 `command` 文本挂到浏览器原生 tooltip 上，便于在名称或命令被截断时直接 hover 核对完整内容。`Terminal.vue` 现在会跟踪 xterm 相对底部的视口偏移与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复；当隐藏标签在后台持续追加日志时，重新激活会基于“距底部偏移”而不是过期的绝对行号恢复 viewport，避免用户继续向下滚动时无法回到底部。组件同时继续在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`session.store` 当前会为同一 SSH 连接下的新终端分配递增的 `terminalIndex`。当前顶部 `TerminalTabBar.vue` 已改为服务器级入口：SSH 项只负责在不同服务器之间切换，全局 `+` 继续负责选择其他服务器；同一服务器下的多个终端则下沉到 `LayoutRenderer.vue` 的终端面板内部，以次级标签条承载切换、关闭和新增，从而让“进入服务器后再管理该服务器的多个终端”成为主要交互模型。服务器组头现在除主点击切换外，还额外提供了一个 hover 后出现的 `X` 按钮，点击后会复用既有 `session:close` 事件逐个关闭该 `connectionId` 下的全部终端。当前终端标签右键菜单继续复用 `WorkspaceView.vue` 中转的会话关闭链路，除关闭当前、关闭其他、关闭左右侧外，也支持直接触发“关闭全部”来清空当前工作区中的全部终端标签。连接新增弹窗中的脚本模式则继续由 `useAddConnectionForm.ts` 统一清洗输入：会先剔除空行、Markdown 代码围栏行，再按单引号/双引号感知切分参数，并去掉成对包裹值的外层引号，避免像 `-p '$Moka1998A'` 这样的输入把 `'` 一并保存。`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，当前左侧进一步支持基于标签名路径分隔符推导的多级标签树、树节点展开状态持久化、分组 scope 恢复，以及树工具栏中的展开全部、收起全部和重置范围控制；近期又补上了独立的左侧树搜索、命中节点及祖先路径过滤、命中链路自动展开、节点计数高亮，以及更接近资源管理器的树头部布局；本轮继续为树节点加入 hover 工具按钮、资源管理器式分隔标题行与拖拽重排占位反馈；右侧结果列表则同时支持顶部排序控件、列头点击排序，并将行内操作整理为“连接”主按钮加“更多”菜单（编辑/测试/克隆/删除）；连接页顶部工具条当前又补上了独立“标签管理”入口，打开 `ManageConnectionTagsModal.vue` 后可按标签名搜索、多选、批量删除标签，并通过显式危险开关决定删除标签时是否连带删除命中的连接；`tags.store.ts` 在该链路里会统一刷新标签与连接缓存，而 `ConnectionsView.vue` 会在当前 scope 指向已删标签或分组时自动回退到 `all`。`FileManager.vue` 当前已进一步收敛为固定 `/` 根节点的单栏资源管理器树，组件加载时会优先拉取 `/` 目录，树中按“目录在前、文件在后”同时显示目录和文件节点，点击目录只展开与聚焦，点击文件则沿用现有工作区文件打开链路；文件右键菜单链路则已补齐图标化菜单结构、危险态删除项、终端子菜单（执行 `cd` 命令到终端 / 新建终端到当前目录）、复制文件名与复制绝对路径等动作，并继续复用现有下载、权限、新建、上传和删除逻辑，同时又新增了独立“上传文件夹”入口：前端会先将本地目录打包为 zip，再复用现有 `sftp:upload` 链路上传，并在上传成功后自动调用远端解压、尝试清理临时压缩包；外部拖拽文件或目录上传时，则会按鼠标当前悬停的目录作为目标路径，其中目录同样走“先压缩再上传”的路径，从而显著降低小文件很多时的扫描与上传耗时；本轮又补上了拖拽上传前的目标路径确认、桌面端右键子菜单点击展开，以及目录删除时“仅删空目录 / 强制递归删除”的显式二选一；当前右键菜单的关闭职责已经收敛到 `FileManagerContextMenu.vue` 组件层处理，`useFileManagerContextMenu.ts` 不再额外注册捕获阶段的全局点击关闭监听，以避免“终端 / 上传 / 压缩”等带子菜单项在展开或点击前被提前关闭；同时 `useSftpActions.ts` 会在删除目录后自动回退当前或待加载的失效路径，避免文件树持续对已删除目录刷出 `No such file`。样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。 +**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 继续整合快捷指令、命令历史、文件管理和编辑器四个面板，导航入口保持为纯图标按钮，但已调整为位于 `Workbench` 标题区上方的横向 icon rail，四个入口自左向右排列、默认仅显示图标并通过 tooltip 暴露名称，默认激活快捷指令。`CommandInputBar.vue` 当前已将底部命令框升级为支持会话级草稿保留的多行 `textarea`：普通 `Enter` 插入换行，`Ctrl+Shift+Enter` 发送当前命令，输入框会按内容自动增高至约 6 行，超出后在输入框内部滚动，并继续兼容快捷指令/命令历史同步与选中发送逻辑。应用根组件 `App.vue` 现在还新增了全局服务器快捷检索：已登录页面按下 `Ctrl+Shift+F` 会打开 `GlobalConnectionQuickSearch.vue`，通过 `utils/connectionSearch.ts` 对连接名称、主机、用户名和类型做本地模糊排序，并直接复用 `sessionStore.handleConnectRequest()` 触发 SSH 工作区跳转或 RDP / VNC 弹窗连接；该检索弹层现在还会复用 `tags.store.ts` 读取标签名称映射，在结果卡片内补充显示每台服务器的标签 chips，便于快速区分同名或近似主机。快捷指令相关能力目前由 `AddEditQuickCommandForm.vue`、`QuickCommandsView.vue` 与新增的 `utils/quickCommandTemplate.ts` 协同实现：编辑弹窗左侧既可维护自定义 `${变量名}`，也提供 `${{date}}`、`${{time}}`、`${{timestamp}}`、`${{week}}`、`${{uuid}}`、`${{random:8}}`、`${{clipboard}}`、`${{password}}` 等动态变量的一键插入；实际执行时会统一走共享解析器，覆盖编辑弹窗执行、列表直接执行、粘贴到命令输入框和发送到全部服务器等链路，并对未定义变量、无法读取的剪贴板或不可用密码给出非阻断告警。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；该视图当前还支持命令项右键菜单，并已修正为实底卡片式上下文菜单，提供立即执行、粘贴到命令输入框（不自动发送）、复制命令、发送到全部服务器、编辑和删除等动作。快捷命令列表的鼠标主交互当前已从“单击立即执行”收紧为“单击仅更新选中态、双击才执行”，从而继续兼容键盘 `Enter` 的选中执行路径并降低误触风险；每条命令项同时会把完整 `command` 文本挂到浏览器原生 tooltip 上，便于在名称或命令被截断时直接 hover 核对完整内容。`Terminal.vue` 现在会跟踪 xterm 相对底部的视口偏移与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复；当隐藏标签在后台持续追加日志时，重新激活会基于“距底部偏移”而不是过期的绝对行号恢复 viewport，避免用户继续向下滚动时无法回到底部。组件同时继续在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`session.store` 当前会为同一 SSH 连接下的新终端分配递增的 `terminalIndex`。当前顶部 `TerminalTabBar.vue` 已改为服务器级入口：SSH 项只负责在不同服务器之间切换，全局 `+` 继续负责选择其他服务器；同一服务器下的多个终端则下沉到 `LayoutRenderer.vue` 的终端面板内部，以次级标签条承载切换、关闭和新增，从而让“进入服务器后再管理该服务器的多个终端”成为主要交互模型。服务器组头现在除主点击切换外，还额外提供了一个 hover 后出现的 `X` 按钮，点击后会复用既有 `session:close` 事件逐个关闭该 `connectionId` 下的全部终端。当前终端标签右键菜单继续复用 `WorkspaceView.vue` 中转的会话关闭链路，除关闭当前、关闭其他、关闭左右侧外，也支持直接触发“关闭全部”来清空当前工作区中的全部终端标签。连接新增弹窗中的脚本模式则继续由 `useAddConnectionForm.ts` 统一清洗输入：会先剔除空行、Markdown 代码围栏行，再按单引号/双引号感知切分参数，并去掉成对包裹值的外层引号，避免像 `-p '$Moka1998A'` 这样的输入把 `'` 一并保存。`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，当前左侧进一步支持基于标签名路径分隔符推导的多级标签树、树节点展开状态持久化、分组 scope 恢复，以及树工具栏中的展开全部、收起全部和重置范围控制；近期又补上了独立的左侧树搜索、命中节点及祖先路径过滤、命中链路自动展开、节点计数高亮，以及更接近资源管理器的树头部布局；本轮继续为树节点加入 hover 工具按钮、资源管理器式分隔标题行与拖拽重排占位反馈；右侧结果列表则同时支持顶部排序控件、列头点击排序，并将行内操作整理为“连接”主按钮加“更多”菜单（编辑/测试/克隆/删除）；连接页顶部工具条当前又补上了独立“标签管理”入口，打开 `ManageConnectionTagsModal.vue` 后可按标签名搜索、多选、批量删除标签，并通过显式危险开关决定删除标签时是否连带删除命中的连接；`tags.store.ts` 在该链路里会统一刷新标签与连接缓存，而 `ConnectionsView.vue` 会在当前 scope 指向已删标签或分组时自动回退到 `all`。`FileManager.vue` 当前已进一步收敛为固定 `/` 根节点的单栏资源管理器树，组件加载时会优先拉取 `/` 目录，树中按“目录在前、文件在后”同时显示目录和文件节点，点击目录只展开与聚焦，点击文件则沿用现有工作区文件打开链路；文件右键菜单链路则已补齐图标化菜单结构、危险态删除项、终端子菜单（执行 `cd` 命令到终端 / 新建终端到当前目录）、复制文件名与复制绝对路径等动作，并继续复用现有下载、权限、新建、上传和删除逻辑，同时又新增了独立“上传文件夹”入口：前端会先将本地目录打包为 zip，再复用现有 `sftp:upload` 链路上传，并在上传成功后自动调用远端解压、尝试清理临时压缩包；外部拖拽文件或目录上传时，则会按鼠标当前悬停的目录作为目标路径，其中目录同样走“先压缩再上传”的路径，从而显著降低小文件很多时的扫描与上传耗时；本轮又补上了拖拽上传前的目标路径确认、桌面端右键子菜单点击展开，以及目录删除时“仅删空目录 / 强制递归删除”的显式二选一；当前右键菜单的关闭职责已经收敛到 `FileManagerContextMenu.vue` 组件层处理，`useFileManagerContextMenu.ts` 不再额外注册捕获阶段的全局点击关闭监听，以避免“终端 / 上传 / 压缩”等带子菜单项在展开或点击前被提前关闭；同时 `useSftpActions.ts` 会在删除目录后自动回退当前或待加载的失效路径，避免文件树持续对已删除目录刷出 `No such file`。样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。 **结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中工作区终端行为和标签交互优先落在 `session.store.ts`、`session/actions/sessionActions.ts`、`session/getters.ts`、`TerminalTabBar.vue`、`WorkspaceView.vue`、`Terminal.vue` 与相关 locale 文件。 ### 仪表盘总览 @@ -58,6 +58,6 @@ ### 状态监控卡片 **条件**: 用户在 `/workspace` 右侧状态监控面板查看服务器资源状态。 -**行为**: `StatusMonitor.vue` 当前将内存与磁盘区域升级为卡片化监控视图：内存卡片展示总量、已用、缓存、空闲和环形占比，磁盘卡片展示设备名、文件系统类型、读写速率以及挂载点/大小/可用/已用率表格；CPU、Swap、网络速率和 `StatusCharts.vue` 的 CPU / 网络曲线继续保留，其中 CPU 型号行会在主型号文案下方追加一个次级 badge，直接显示后端推送的 `cpuCores`（如 `16 核`）。 -**结果**: 状态监控从“简单进度行”升级为“高信息密度卡片”，并直接承接后端新增的内存细分字段、磁盘元数据和 CPU 核心数，无需用户再登录服务器手动查询机器规格。 +**行为**: `StatusMonitor.vue` 当前进一步重构为深色监控台式布局：顶部先展示系统信息、网卡与可复制 IP 的信息条，随后通过横向资源监控条汇总 CPU / 内存 / Swap / 磁盘占比，再把内存、网络和磁盘拆成三块独立监控卡片。内存卡片继续展示总量、已用、缓存、空闲和环形占比；网络卡片改为分别展示下载/上传瞬时速率、累计流量和相对负载条；磁盘卡片则展示设备名、文件系统、挂载点、纵向占比槽以及读写速率和容量信息。`StatusCharts.vue` 也同步改为与主卡片同风格的深色 CPU / 网络趋势面板。整组布局同时使用容器断点与媒体断点，在窄侧栏下优先单列堆叠，在更宽工作区中再切换为多列。 +**结果**: 状态监控从“卡片化资源块”进一步升级为“统一风格的响应式监控台”，既接近用户给定的高密度服务器面板参考图，又保持与现有组件数据结构和后端字段完全一致。 diff --git a/packages/frontend/src/components/GlobalConnectionQuickSearch.vue b/packages/frontend/src/components/GlobalConnectionQuickSearch.vue index 4c1630e..7e18d68 100644 --- a/packages/frontend/src/components/GlobalConnectionQuickSearch.vue +++ b/packages/frontend/src/components/GlobalConnectionQuickSearch.vue @@ -1,7 +1,9 @@