feat(frontend): 支持快捷指令跨组拖拽并升级网络历史图

新增快捷指令跨标签组拖拽能力,支持将未标记命令直接拖入
目标标签组,并修正 manual/name/last_used 排序按钮状态映射

将状态监控内存与网络卡片的响应式阈值统一收紧到 250px,
同时用可悬浮查看最近采样点的 canvas 历史图替换网络趋势线
This commit is contained in:
yinjianm
2026-04-19 03:40:48 +08:00
parent 8ce007a305
commit 0e01153157
16 changed files with 1001 additions and 136 deletions
@@ -0,0 +1 @@
{"status":"completed","completed":5,"failed":0,"pending":0,"total":5,"done":5,"percent":100,"current":"已完成状态监控内存/网络卡片的 250px 响应式阈值调整,并接入网络 canvas 历史图","updated_at":"2026-04-19 03:33:00"}
@@ -0,0 +1,137 @@
# 变更提案: status-monitor-memory-network-canvas-history
## 元信息
```yaml
类型: 优化
方案类型: implementation
优先级: P1
状态: 已确认
创建: 2026-04-19
```
---
## 1. 需求
### 背景
当前 `/workspace` 右侧状态监控面板里,内存模块在较宽但仍偏窄的侧栏下过早切成手机式竖排,导致信息密度下降;网络模块则继续沿用 SVG sparkline,只能看趋势轮廓,无法像底部 `StatusCharts.vue` 那样通过 `canvas` 折线图查看更明确的历史采样值。用户明确要求把内存和网络模块的竖排阈值都收紧到“组件宽度低于 250px 才切手机竖排”,并把网络线图升级成可查看历史数据的 `canvas` 图表。
### 目标
- 将内存卡片的响应式切换阈值收紧到容器宽度小于 `250px` 才改为竖排布局。
- 让网络卡片遵循同样的 `250px` 响应式阈值,并在宽度充足时保持更高信息密度的横向布局。
- 把网络卡片的 SVG 线改成 `canvas` 折线图,展示最近 24 个采样点,并支持 hover 查看上下行历史值。
- 复用现有历史采样数据链路,不新增后端接口或 websocket 消息。
### 约束条件
```yaml
时间约束: 本轮只改前端状态监控相关组件和文案
性能约束: 复用现有 Chart.js / vue-chartjs 依赖,不新增图表库
兼容性约束: 不改变 useStatusMonitor 现有历史数组结构和 StatusCharts 既有行为
业务约束: 历史图展示基于现有前端采样缓存,仅限当前会话已收到的监控数据
```
### 验收标准
- [ ] 内存模块在容器宽度大于等于 `250px` 时保持横向高密度布局,仅在低于 `250px` 时切为竖排。
- [ ] 网络模块遵循同样的 `250px` 阈值,并在宽度充足时展示图表与统计信息的横向布局。
- [ ] 网络模块的折线图使用 `canvas` 渲染,数据来自最近 24 个网络历史采样点。
- [ ] 鼠标 hover 网络图时可查看上下行历史值,单位与当前历史峰值一致。
- [ ] 前端构建通过;若缺少本地后端导致运行态无法全链路验证,需要在执行备注中如实记录。
---
## 2. 方案
### 技术方案
保留 `useStatusMonitor.ts` 的历史采样来源不变,在 `StatusMonitor.vue` 中重组内存和网络卡片布局。内存卡片改为默认双列分布,仅在模块容器宽度低于 `250px` 时切为单列。网络卡片新增一个专用的 `StatusMonitorNetworkHistoryChart.vue` 子组件,用 `vue-chartjs` + Chart.js 渲染最近 24 个采样点的上下行折线图,沿用 `StatusCharts.vue` 的单位换算思路与 hover tooltip 行为,并在 `250px` 以下退回为单列竖排。
### 影响范围
```yaml
涉及模块:
- frontend: StatusMonitor 卡片布局与网络历史图展示
- frontend-i18n: 状态监控卡片新增历史采样提示文案
预计变更文件: 6
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 在窄侧栏下新增 Chart.js 画布导致卡片高度或宽度挤压 | 中 | 将网络卡片拆成受 container query 控制的双列/单列布局,并限制图表包装高度 |
| 小图表与底部大图表重复渲染后造成会话切换时重绘抖动 | 中 | 仅渲染最近 24 点,关闭动画,使用轻量 options 并避免额外 watcher |
| 单位换算在小图与大图不一致,导致用户误读 | 低 | 直接复用与 `StatusCharts.vue` 一致的峰值判定和 tooltip 单位策略 |
---
## 3. 技术设计(可选)
### 架构设计
```mermaid
flowchart TD
A[useStatusMonitor 历史数组] --> B[StatusMonitor.vue]
B --> C[内存卡片 container query 布局]
B --> D[StatusMonitorNetworkHistoryChart.vue]
D --> E[Chart.js canvas 折线图]
```
### 数据模型
| 字段 | 类型 | 说明 |
|------|------|------|
| `netRxHistory` | `(number | null)[]` | 当前会话的下载速率历史,单位为 Bytes/sec |
| `netTxHistory` | `(number | null)[]` | 当前会话的上传速率历史,单位为 Bytes/sec |
| `memUsedHistory` | `(number | null)[]` | 当前会话的已用内存历史,继续由底部图表使用 |
---
## 4. 核心场景
> 执行完成后同步到对应模块文档
### 场景: 侧栏宽度适中时保持高密度监控布局
**模块**: frontend
**条件**: 用户在 `/workspace` 右侧状态监控中查看内存和网络模块,模块宽度大于等于 `250px`
**行为**: 内存卡片保持环形概览与统计块并排,网络卡片保持历史图与统计表并排。
**结果**: 用户在常见侧栏宽度下看到更高密度的监控信息,而不是过早进入手机竖排布局。
### 场景: 网络模块查看近期历史采样
**模块**: frontend
**条件**: 当前会话已积累网络历史采样,用户将鼠标移动到网络卡片中的折线图上。
**行为**: `canvas` 折线图显示最近 24 个采样点,并通过 tooltip 展示该采样点的上下行历史值。
**结果**: 用户可以在侧栏内直接查看近期网络波动,而不必只看 SVG 趋势线或切到下方大图。
---
## 5. 技术决策
> 本方案涉及的技术决策,归档后成为决策的唯一完整记录
### status-monitor-memory-network-canvas-history#D001: 复用 Chart.js 实现网络卡片内联历史图
**日期**: 2026-04-19
**状态**: ✅采纳
**背景**: 网络卡片需要从 SVG sparkline 升级为可 hover 查看历史值的 `canvas` 图表,但仓库已经存在底部 `StatusCharts.vue` 的 Chart.js 方案。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 继续手写 SVG sparkline 并自建 hover 逻辑 | 依赖少、组件轻 | 需要自行处理命中区域、tooltip、单位换算和历史点映射 |
| B: 复用现有 Chart.js / vue-chartjs 体系做小型内联图 | `canvas` 输出天然满足需求,tooltip 和响应式能力现成 | 需要额外封装一个轻量子组件,避免主文件继续膨胀 |
**决策**: 选择方案 B
**理由**: 仓库已稳定使用 Chart.js,直接复用能最小成本满足“canvas + 历史值 hover”要求,同时与底部图表保持交互一致。
**影响**: 影响前端状态监控卡片结构与本地文案,不涉及后端接口和状态采样协议。
---
## 6. 成果设计
### 设计方向
- **美学基调**: 延续当前状态监控的深色服务器小屏风格,但把“趋势感”从装饰性线条升级为更有仪表感的真实历史图。
- **记忆点**: 网络卡片左侧嵌入式 `canvas` 折线图,在狭窄侧栏内也能像迷你监控屏一样浏览最近采样。
- **参考**: 视觉与交互参考现有 `StatusCharts.vue`,但收敛为卡片内联版本,维持当前状态监控卡片的材质和边框体系。
### 视觉要素
- **配色**: 保持深色背景和当前网络上下行的绿/蓝语义色,不引入新的主色体系。
- **字体**: 沿用现有状态监控与图表中的 monospace 数值展示。
- **布局**: 网络模块在宽度充足时采用“图表左 / 数据右”的双列结构,低于 `250px` 再退化为竖排。
- **动效**: 图表关闭动画,仅保留 hover tooltip 反馈,避免监控场景下的无意义运动。
- **氛围**: 保持服务器监控面板的控制台式深色氛围,不做额外装饰性改造。
### 技术约束
- **可访问性**: 图表容器保留可读标题和最近采样说明,避免只剩抽象线条。
- **响应式**: 以 container query 为准,`250px` 以下才切为手机竖排。
@@ -0,0 +1,53 @@
# 任务清单: status-monitor-memory-network-canvas-history
> **@status:** completed | 2026-04-19 03:32
```yaml
@feature: status-monitor-memory-network-canvas-history
@created: 2026-04-19
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 5 | 0 | 0 | 5 |
---
## 任务列表
### 1. 状态监控卡片实现
- [√] 1.1 在 `packages/frontend/src/components/StatusMonitor.vue` 中把内存卡片的横向布局阈值调整为低于 250px 才切竖排 | depends_on: []
- [√] 1.2 新增 `packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue`,用 canvas 折线图展示最近 24 个网络历史采样点并支持 hover 查看值 | depends_on: [1.1]
- [√] 1.3 在 `packages/frontend/src/components/StatusMonitor.vue` 中接入网络历史图组件,并让网络模块在 250px 以下才切竖排 | depends_on: [1.2]
### 2. 文案与验证
- [√] 2.1 在 `packages/frontend/src/locales/zh-CN.json``packages/frontend/src/locales/en-US.json``packages/frontend/src/locales/ja-JP.json` 中补充网络历史采样提示文案 | depends_on: [1.3]
- [√] 2.2 运行 `packages/frontend` 构建校验并记录结果 | depends_on: [2.1]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-19 03:20 | design | completed | 已创建 implementation 方案包,范围锁定为状态监控内存/网络卡片的 250px 响应式阈值与网络 canvas 历史图 |
| 2026-04-19 03:26 | 1.1 | completed | 已将内存卡片默认布局改为高密度横排,仅在容器宽度低于 250px 时切竖排 |
| 2026-04-19 03:29 | 1.2 | completed | 已新增网络历史图子组件,复用 Chart.js canvas 展示最近 24 个采样点并支持 hover 查看上下行值 |
| 2026-04-19 03:31 | 1.3 | completed | 已在 StatusMonitor 中接入网络历史图,并让网络模块与内存模块共用 250px 竖排阈值 |
| 2026-04-19 03:32 | 2.1 | completed | 已补充中英日三套“最近历史采样点”文案 |
| 2026-04-19 03:33 | 2.2 | completed | `npm --workspace @nexus-terminal/frontend run build` 通过,仅保留既有 chunk 警告 |
---
## 执行备注
> 记录执行过程中的重要说明、决策变更、风险提示等
- 当前需求只涉及前端卡片布局与图表渲染,现有 websocket 历史采样数据链路保持不变。
- 运行态限制: 本轮未拉起完整登录后工作区环境,因此“hover 查看网络历史值”的最终交互仍建议在你的实际 `/workspace` 环境手动确认一次。
@@ -0,0 +1,197 @@
# 变更提案: quickcommands-cross-group-drag-move
## 元信息
```yaml
类型: 新功能
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-19
完成: 2026-04-19
```
---
## 1. 需求
### 背景
快捷指令视图已经支持分组拖拽排序、组内命令拖拽排序和扁平列表拖拽排序,但当前命令拖放逻辑仍然把拖拽限制在“同一分组内”。这会导致用户虽然能整理每个分组内部的顺序,却不能把命令从一个标签组直接拖到另一个标签组,也不能把“未标记”命令直接拖进目标标签组,和 Workbench 中“拖到目标容器即完成归类”的直觉交互不一致。
### 目标
- 让已标记分组中的命令可以拖到另一个已标记分组内,并在落点位置插入。
- 让“未标记”分组中的命令可以直接拖到已标记分组内,并自动添加目标标签。
- 跨分组移动后移除原分组标签,只保留目标分组与其它未受影响的既有标签。
- 修正快捷指令排序按钮在 `manual / name / last_used` 三种模式下的文案和图标映射。
### 约束条件
```yaml
时间约束: 本轮完成前端实现、构建验证与知识库同步
性能约束: 不新增依赖,继续使用现有原生 drag/drop 与 store action
兼容性约束: 优先复用现有后端增量标签同步与重排接口,不新增后端路由
业务约束: 搜索过滤态仍禁止拖拽排序;本轮暂不支持把已标记命令拖入“未标记”分组
```
### 验收标准
- [ ] 开启标签分组时,把命令从标签 A 拖到标签 B 后,命令会移除标签 A、加入标签 B,并插入到标签 B 的目标位置。
- [ ] 开启标签分组时,把“未标记”命令拖到标签 B 后,命令会新增标签 B,并插入到标签 B 的目标位置。
- [ ] 当前轮次不支持把已标记命令拖入“未标记”分组,界面会给出非阻断提示而不是错误修改标签。
- [ ] 排序按钮能正确反映 `manual / name / last_used` 三种模式的标题与图标。
- [ ] `npm run build --workspace @nexus-terminal/backend``npm run build --workspace @nexus-terminal/frontend` 通过。
---
## 2. 方案
### 技术方案
本次改动只调整前端编排,继续复用已落地的快捷指令更新与顺序持久化能力,不新增后端接口。
第一步,在 `QuickCommandsView.vue` 放开命令拖放目标的“同组限制”,并补一个支持“源项不在目标列表中时插入”的列表工具函数。这样拖拽命中目标组后,既能处理原来的组内重排,也能处理跨组插入。
第二步,在命令 drop 分支中区分三类路径:同组重排继续沿用现有 `reorderCommandsInTag` / `reorderQuickCommands`;“未标记 -> 已标记”与“已标记 A -> 已标记 B”则先通过 `updateQuickCommand(...)` 更新标签集合,再按目标组当前列表调用 `reorderCommandsInTag(targetTagId, ...)` 固定落点顺序。
第三步,保留“拖到未标记分组”禁用策略。因为本轮已确认的业务语义是“移除原标签并加入目标标签”,而未标记分组没有可加入的标签,若开放该动作就会变成“删除标签”或“清空所有标签”,和当前确认范围冲突,所以只给用户提示,不执行实际写入。
最后顺手修正排序按钮在 `manual` 模式下的标题与图标,让拖拽完成后切回 `manual` 时,控件状态与实际排序一致。
### 影响范围
```yaml
涉及模块:
- frontend: QuickCommandsView 需要实现跨分组拖放与 manual 排序按钮修正
- knowledge-base: 需要同步 frontend/backend 模块文档与 CHANGELOG
预计变更文件: 5-7
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 跨组移动先改标签、再改目标组顺序,中间刷新可能导致落点顺序丢失 | 中 | 在标签更新完成后立刻基于刷新后的目标组列表再次提交 `reorderCommandsInTag` |
| 目标是“未标记”分组时语义不清,可能被误实现为清空全部标签 | 高 | 明确禁止该路径,仅提示用户本轮不支持 |
| 多标签命令跨组移动时若直接覆盖 tagIds,可能误删其他标签 | 中 | 基于原 `tagIds` 做“移除 sourceTagId、加入 targetTagId”的增量计算 |
| `manual` 排序按钮状态未修正,用户会误判当前排序模式 | 低 | 同步补齐 `sortButtonTitle``sortButtonIcon` 的三态映射 |
---
## 3. 技术设计
### 架构设计
```mermaid
flowchart LR
A[QuickCommandsView drop] --> B{是否跨分组}
B -->|否| C[现有组内重排]
B -->|是| D[updateQuickCommand 同步 tagIds]
D --> E[reorderCommandsInTag 固定目标组落点]
E --> F[(现有 reorder / association API)]
```
### API设计
#### PUT /api/v1/quick-commands/:id
- **请求**:
```json
{
"name": "Deploy",
"command": "npm run deploy",
"tagIds": [5, 9]
}
```
- **响应**:
```json
{
"message": "快捷指令已更新"
}
```
#### PUT /api/v1/quick-commands/reorder-by-tag
- **请求**:
```json
{
"tagId": 9,
"commandIds": [12, 7, 19]
}
```
- **响应**:
```json
{
"message": "标签内快捷指令顺序已更新"
}
```
### 数据模型
| 字段 | 类型 | 说明 |
|------|------|------|
| `QuickCommandFE.tagIds` | `number[]` | 命令当前绑定的标签集合,跨组移动时按“移除源标签 + 加入目标标签”增量计算 |
| `QuickCommandFE.tagOrders` | `Record<number, number>` | 命令在各标签组中的局部顺序,更新标签后通过目标组重排接口重新固定 |
| `GroupedQuickCommands.commands` | `QuickCommandFE[]` | 分组视图当前命令列表,跨组插入后用于计算目标顺序 |
| `QuickCommandSortByType` | `'manual' | 'name' | 'usage_count' | 'last_used'` | 排序按钮需要正确反映其中实际启用的三种前端模式 |
---
## 4. 核心场景
### 场景: 已标记命令拖到另一个已标记分组
**模块**: frontend
**条件**: 用户开启快捷指令标签分组,当前不处于搜索过滤状态。
**行为**: 用户把标签 A 中的命令拖到标签 B 的某个命令上,前端先移除标签 A、加入标签 B,再按落点重排标签 B。
**结果**: 命令从标签 A 消失,出现在标签 B 的目标位置,刷新后保持一致。
### 场景: 未标记命令拖到已标记分组
**模块**: frontend
**条件**: 用户开启快捷指令标签分组,存在“未标记”分组且当前不处于搜索过滤状态。
**行为**: 用户把“未标记”命令拖到某个标签组内,前端为命令新增目标标签,并在目标组内固定插入顺序。
**结果**: 命令离开“未标记”分组,进入目标标签组。
### 场景: 已标记命令拖到未标记分组
**模块**: frontend
**条件**: 用户尝试把某个标签组中的命令拖到“未标记”分组。
**行为**: 前端识别为当前轮次未支持的路径,只给出提示,不提交更新请求。
**结果**: 原有标签关系保持不变,避免误清空标签。
---
## 5. 技术决策
### quickcommands-cross-group-drag-move#D001: 优先复用现有更新与重排接口,而不是新增“跨组移动”专用后端接口
**日期**: 2026-04-19
**状态**: 已采纳
**背景**: 现有后端已经提供 `updateQuickCommand``reorder-by-tag` 和增量标签关联同步能力,理论上足以表达“移除原标签、加入目标标签、固定目标组顺序”。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 新增后端 `move-between-tags` 专用接口 | 前端调用简单,语义集中 | 需要新增 controller/service/repository 路径,改动面更大 |
| B: 复用现有更新命令 + 标签内重排接口 | 后端零新增接口,改动集中在前端编排 | 前端需要串联两步请求 |
**决策**: 选择方案 B
**理由**: 当前用户确认的是交互增强,不是后端能力缺失。复用现有接口可以最小代价完成需求,并降低本轮回归面。
**影响**: frontend
### quickcommands-cross-group-drag-move#D002: 本轮禁止“已标记 -> 未标记”拖放
**日期**: 2026-04-19
**状态**: 已采纳
**背景**: 已确认的业务语义是“拖到目标分组后,移除原分组标签并加入目标分组标签”。未标记分组没有可加入的标签,因此该路径语义不完整。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 拖入未标记时清空全部标签 | 交互看起来完整 | 会把“移动分组”变成“清空标签”,风险高且和当前确认不一致 |
| B: 拖入未标记时只移除源标签 | 语义比清空全部标签更保守 | 对多标签命令仍不清晰,用户难以预期 |
| C: 本轮禁用该路径,只提示用户 | 范围清晰,不引入隐式删除语义 | 功能覆盖面少一步 |
**决策**: 选择方案 C
**理由**: 当前需求边界已经确认到“加入目标标签”,而未标记不具备该条件。禁用比猜测性实现更安全。
**影响**: frontend
---
## 6. 成果设计
### 设计方向
- **美学基调**: 延续现有快捷指令工作台的深色工具面板风格,不做视觉重设计,只强化“卡片可以被移入另一组”的操作感。
- **记忆点**: 命令卡片在跨组拖放时仍使用现有虚线高亮占位,用户可以直接感知落点是在目标组内部而不是只做选中。
- **参考**: 复用当前 `QuickCommandsView.vue` 中已存在的组内拖拽高亮和手动排序交互。
### 视觉要素
- **配色**: 继续沿用主题变量和当前 `qc-drop-target` 虚线反馈,不新增独立拖拽色板。
- **字体**: 沿用现有标题和命令 monospace 体系,不调整文本层级。
- **布局**: 保持现有分组头和命令卡结构,仅扩展拖放命中逻辑与排序按钮状态表达。
- **动效**: 继续使用现有 hover / 拖放过渡,不增加额外动画。
- **氛围**: 保持克制、偏工程控制台的交互表达,让跨组归类像“拖入目标容器”一样直接。
### 技术约束
- **可访问性**: 不能破坏现有单击选中、双击执行、右键菜单和键盘选择逻辑。
- **响应式**: 继续兼容紧凑模式与 Workbench 窄栏布局,不增加额外结构占位。
@@ -0,0 +1,55 @@
# 任务清单: quickcommands-cross-group-drag-move
> **@status:** completed | 2026-04-19 03:34
```yaml
@feature: quickcommands-cross-group-drag-move
@created: 2026-04-19
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 7 | 0 | 0 | 7 |
---
## 任务列表
### 1. 方案与范围收敛
- [√] 1.1 确认 `packages/frontend/src/views/QuickCommandsView.vue` 当前只支持同组命令拖拽,并梳理可复用的 `updateQuickCommand` / `reorderCommandsInTag` 能力 | depends_on: []
- [√] 1.2 明确跨组移动语义为“移除源标签、加入目标标签”,并将“拖入未标记”限定为本轮不支持路径 | depends_on: [1.1]
### 2. 前端交互实现
- [√] 2.1 在 `packages/frontend/src/views/QuickCommandsView.vue` 中补充支持跨组插入的列表工具函数,并放开跨组拖放命中判断 | depends_on: [1.2]
- [√] 2.2 在 `packages/frontend/src/views/QuickCommandsView.vue` 中实现“已标记 -> 已标记”和“未标记 -> 已标记”的跨组移动编排,同时为“已标记 -> 未标记”提供提示保护 | depends_on: [2.1]
- [√] 2.3 在 `packages/frontend/src/views/QuickCommandsView.vue` 中修正 `manual / name / last_used` 三态排序按钮文案与图标 | depends_on: [2.1]
### 3. 验证与同步
- [√] 3.1 执行 `npm run build --workspace @nexus-terminal/backend``npm run build --workspace @nexus-terminal/frontend`,确认现有后端与前端构建通过 | depends_on: [2.2, 2.3]
- [√] 3.2 同步更新 `.helloagents/modules/frontend.md``.helloagents/modules/backend.md``.helloagents/CHANGELOG.md`,记录跨分组拖放能力并归档方案包 | depends_on: [3.1]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-19 03:22 | EVALUATE | completed | 已按 R2 确认“跨组拖拽 = 移除原分组标签并加入目标分组标签” |
| 2026-04-19 03:24 | DESIGN | completed | 已确认优先复用现有快捷指令更新与标签内重排接口,不新增后端路由 |
| 2026-04-19 03:27 | 2.1 / 2.2 / 2.3 | completed | `QuickCommandsView.vue` 已补齐跨分组插入 helper、跨组移动分支、未标记保护提示与 manual 排序按钮映射 |
| 2026-04-19 03:31 | validate_package | completed | `validate_package.py 202604190322_quickcommands-cross-group-drag-move --path E:/code/vue/nexus-terminal` 通过 |
| 2026-04-19 03:34 | 3.1 | completed | `npm run build --workspace @nexus-terminal/backend``npm run build --workspace @nexus-terminal/frontend` 通过;前端仅保留既有 vite chunk warnings |
| 2026-04-19 03:34 | 3.2 | completed | 已同步 frontend/backend 模块文档与 CHANGELOG,准备归档方案包 |
---
## 执行备注
> 本轮实现以前端编排为主:同组拖拽保持原有重排路径,跨组拖拽则拆成“静默更新 tagIds”与“固定目标组顺序”两步,以最小改动复用现有后端能力,同时避免在拖放操作中弹出编辑成功提示。
+4
View File
@@ -7,6 +7,8 @@
| 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
|--------|------|------|---------|------|------|
| 202604190322 | quickcommands-cross-group-drag-move | implementation | frontend | quickcommands-cross-group-drag-move#D001, quickcommands-cross-group-drag-move#D002 | ✅完成 |
| 202604190319 | status-monitor-memory-network-canvas-history | - | - | - | ✅完成 |
| 202604190208 | quickcommands-drag-reorder | - | - | - | ✅完成 |
| 202604190210 | connection-card-default-test-button | implementation | frontend | - | ✅完成 |
| 202604190201 | connection-password-visibility-toggle | - | - | - | ✅完成 |
@@ -59,6 +61,8 @@
## 按月归档
### 2026-04
- [202604190322_quickcommands-cross-group-drag-move](./2026-04/202604190322_quickcommands-cross-group-drag-move/) - 支持将快捷指令从一个标签组拖到另一个标签组内,并允许把未标记命令直接拖入目标标签组
- [202604190319_status-monitor-memory-network-canvas-history](./2026-04/202604190319_status-monitor-memory-network-canvas-history/) - 将状态监控中的内存与网络卡片响应式阈值统一收紧到 250px,并把网络卡片的 SVG 趋势线升级为可 hover 查看最近 24 个采样点的 canvas 历史图
- [202604190210_connection-card-default-test-button](./2026-04/202604190210_connection-card-default-test-button/) - 将连接管理页 SSH 连接卡片的默认操作区调整为“连接 / 测试 / 更多”,并移除更多菜单中的重复测试入口
- [202604190201_connection-password-visibility-toggle](./2026-04/202604190201_connection-password-visibility-toggle/) - 为连接新增/编辑表单与登录凭证管理弹窗补充密码显隐切换,默认仍隐藏,仅在本地输入端切换明文核对
- [202604152323_status-monitor-reference-layout-parity](./2026-04/202604152323_status-monitor-reference-layout-parity/) - 将右侧状态监控默认视图重排为更贴近参考图的窄屏监控布局,修正顶部信息区与模块内部左右关系