feat(workspace): 支持多行命令输入并新增仪表盘接口
将底部命令输入框改为支持自动增高的多行 textarea, 并把发送快捷键调整为 Ctrl+Shift+Enter,同时更新多语言提示文案 新增 dashboard summary 后端接口与聚合类型定义, 为首页管理驾驶舱改造提供统一数据入口,并同步知识库方案记录
This commit is contained in:
+1
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"已完成:命令输入多行与发送快捷键改造","updated_at":"2026-03-25 23:45:00"}
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
# 变更提案: command-input-multiline-shortcut
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 优化
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 已完成
|
||||
创建: 2026-03-25
|
||||
完成: 2026-03-25
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前工作区底部命令输入条仍是单行 `input`,默认按 `Enter` 立即发送到终端。这会阻碍输入多行命令或临时脚本,也容易在编辑中误发送。用户希望把发送动作切换为 `Ctrl+Shift+Enter`,并让输入框按内容自动扩展为多行。
|
||||
|
||||
### 目标
|
||||
- 将终端命令发送快捷键从单独 `Enter` 改为 `Ctrl+Shift+Enter`。
|
||||
- 将命令输入框升级为支持多行输入和按内容动态增高。
|
||||
- 保留现有会话级命令草稿状态、搜索切换、命令历史/快捷指令联动和空命令发送能力。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
时间约束: 本轮内完成前端改造与基础验证
|
||||
性能约束: 自动增高应只作用于当前输入框,不引入新的重型依赖
|
||||
兼容性约束: 保持现有 session store 的 commandInputContent 数据结构不变
|
||||
业务约束: 不破坏快捷指令/命令历史选中后回车发送逻辑;多行输入最多扩展约 6 行,超出后内部滚动
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] `CommandInputBar.vue` 支持多行命令输入,输入框随内容自动增高,最大高度约 6 行
|
||||
- [ ] 普通 `Enter` 仅插入换行,不再直接发送;`Ctrl+Shift+Enter` 可发送当前命令内容
|
||||
- [ ] 快捷指令/命令历史存在选中项时,发送逻辑仍可正常工作
|
||||
- [ ] 中英文/日文占位提示同步更新为新的快捷键说明
|
||||
- [ ] `packages/frontend` 的类型检查与构建通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
将 `CommandInputBar.vue` 中的单行 `input` 改为 `textarea`,继续通过 `currentSessionCommandInput` 读写当前会话的命令草稿。新增输入框高度同步逻辑,在内容变化、会话切换和组件挂载后按 `scrollHeight` 重新计算高度,并限制最大高度。键盘处理改为区分三类路径:`Ctrl+Shift+Enter` 发送当前输入、存在同步面板选中项时优先发送选中命令、普通 `Enter` 保持换行。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: `CommandInputBar.vue` 的输入组件、快捷键与高度同步逻辑
|
||||
- frontend: locale 文案中的命令输入占位提示
|
||||
预计变更文件: 3-4
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| `textarea` 替换后影响现有焦点切换、搜索切换或样式布局 | 中 | 复用现有 ref 与 focus action,只做输入节点最小替换 |
|
||||
| 自动增高在切换会话或清空输入后高度残留 | 中 | 在内容变更、activeSession 变更和发送后统一触发高度重算 |
|
||||
| 快捷指令/命令历史列表的选中发送逻辑被新快捷键覆盖 | 中 | 保留现有选中命令优先路径,并改为新快捷键触发 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术设计(可选)
|
||||
|
||||
### 架构设计
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[session.commandInputContent] --> B[CommandInputBar textarea]
|
||||
B --> C[auto resize]
|
||||
B --> D[keydown handler]
|
||||
D --> E[terminal:sendCommand]
|
||||
D --> F[quickCommands/history selected item]
|
||||
```
|
||||
|
||||
### 数据模型
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `commandInputRef` | `HTMLTextAreaElement \| null` | 命令输入框 DOM 引用 |
|
||||
| `maxCommandInputHeight` | `number` | 动态高度上限,约 6 行 |
|
||||
| `currentSessionCommandInput` | `string` | 当前活动会话的命令草稿内容 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心场景
|
||||
|
||||
### 场景: 多行命令编辑并发送
|
||||
**模块**: frontend
|
||||
**条件**: 用户在工作区命令输入条中输入多行命令或脚本片段。
|
||||
**行为**: 输入框按内容自动扩展高度,普通 `Enter` 插入换行,`Ctrl+Shift+Enter` 发送当前内容到终端。
|
||||
**结果**: 用户可在发送前完整编辑多行命令,不会因单独回车误触发发送。
|
||||
|
||||
### 场景: 选中快捷指令或历史命令后发送
|
||||
**模块**: frontend
|
||||
**条件**: 命令输入同步到快捷指令或命令历史,且列表中存在当前选中项。
|
||||
**行为**: 用户按发送快捷键时优先发送选中的命令项,并清空输入框与选中状态。
|
||||
**结果**: 原有联动发送体验保持不变,只是发送触发键改为新组合键。
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术决策
|
||||
|
||||
### command-input-multiline-shortcut#D001: 使用 `textarea` + 自动高度同步,而不是保留单行 `input`
|
||||
**日期**: 2026-03-25
|
||||
**状态**: ✅采纳
|
||||
**背景**: 需求同时要求“多行输入”和“动态支持多行”,单行 `input` 无法自然承载换行编辑与高度增长。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 改为 `textarea` 并动态调整高度 | 原生支持换行,改动集中,易于和现有 v-model/focus 逻辑兼容 | 需要额外处理高度重置和最大高度 |
|
||||
| B: 保留 `input`,另做弹层或隐藏编辑器 | 可保留单行样式 | 交互割裂,改动范围更大,和用户诉求不匹配 |
|
||||
**决策**: 选择方案A
|
||||
**理由**: `textarea` 是最小且直接满足需求的实现路径,可以在不改 store 结构的前提下提供多行编辑与动态高度能力。
|
||||
**影响**: frontend
|
||||
|
||||
---
|
||||
|
||||
## 6. 成果设计
|
||||
|
||||
### 设计方向
|
||||
- **美学基调**: 延续现有终端工作台的轻量工具条风格,不引入额外视觉噪声
|
||||
- **记忆点**: 单行输入自然生长为多行命令编辑区,但整体仍保持底部命令条的一体化布局
|
||||
- **参考**: 当前 `CommandInputBar` 样式语言 + 常见终端/IDE 命令面板的多行输入体验
|
||||
|
||||
### 视觉要素
|
||||
- **配色**: 保持现有 `bg-input`、`border-border/50`、`focus:ring-primary/50` 体系不变
|
||||
- **字体**: 沿用当前项目输入控件字体体系,保持终端工作台一致性
|
||||
- **布局**: 命令框横向占满剩余空间,纵向在 1 行到约 6 行之间平滑扩展
|
||||
- **动效**: 保留现有 `transition-all duration-300 ease-in-out`,让高度变化与 focus 态自然过渡
|
||||
- **氛围**: 不额外增加装饰,重点保持工具型界面的克制与稳定
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: 保留 placeholder 与键盘操作,避免纯图标表达发送规则
|
||||
- **响应式**: 在移动端仍需保持输入框可用,不挤压既有工具按钮
|
||||
@@ -0,0 +1,45 @@
|
||||
# 任务清单: command-input-multiline-shortcut
|
||||
|
||||
```yaml
|
||||
@feature: command-input-multiline-shortcut
|
||||
@created: 2026-03-25
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 4 | 0 | 0 | 4 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 命令输入交互改造
|
||||
|
||||
- [√] 1.1 在 `packages/frontend/src/components/CommandInputBar.vue` 中将命令输入节点从单行输入改为支持多行的 `textarea`,补齐自动高度同步逻辑 | depends_on: []
|
||||
- [√] 1.2 在 `packages/frontend/src/components/CommandInputBar.vue` 中调整键盘处理逻辑,将发送动作改为 `Ctrl+Shift+Enter`,并保持快捷指令/命令历史选中发送路径可用 | depends_on: [1.1]
|
||||
|
||||
### 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.2]
|
||||
- [√] 2.2 执行 `packages/frontend` 的构建验证,确认类型检查与打包通过 | depends_on: [2.1]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-25 23:40 | DESIGN | completed | 已确认采用 textarea 自动增高方案,最多约 6 行并改用 Ctrl+Shift+Enter 发送 |
|
||||
| 2026-03-25 23:44 | 1.1 / 1.2 | 完成 | `CommandInputBar.vue` 已切换为多行 textarea,并将发送动作改为 Ctrl+Shift+Enter |
|
||||
| 2026-03-25 23:44 | 2.1 | 完成 | 已同步中文、英文、日文命令输入占位提示文案 |
|
||||
| 2026-03-25 23:45 | 2.2 | 完成 | `packages/frontend` 执行 `npm run build` 通过,仅保留既有 Vite chunk 警告 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> 当前环境缺少可直接调用的 `python/py`,方案包通过模板降级方式手工创建。本轮未做浏览器级工作区实机操作,运行态确认以代码审查和前端构建通过为主。
|
||||
@@ -19,6 +19,7 @@
|
||||
| 202603252220 | connections-tree-toolbar-menu-polish | implementation | frontend | - | ✅完成 |
|
||||
| 202603252310 | connections-tree-search-explorer-polish | implementation | frontend | - | ✅完成 |
|
||||
| 202603252336 | connections-tree-hover-drag-polish | implementation | frontend | - | ✅完成 |
|
||||
| 202603252340 | command-input-multiline-shortcut | implementation | frontend | command-input-multiline-shortcut#D001 | ✅完成 |
|
||||
| 202603252229 | terminal-tab-group-visual | implementation | frontend | terminal-tab-group-visual#D001 | ✅完成 |
|
||||
| 202603252256 | workspace-monitor-terminal-polish | implementation | workspace-root | workspace-monitor-terminal-polish#D001 | ✅完成 |
|
||||
| 202603251200 | workspace-workbench-monitor | implementation | frontend, backend | workspace-workbench-monitor#D001 | ✅完成 |
|
||||
@@ -38,6 +39,7 @@
|
||||
- [202603252220_connections-tree-toolbar-menu-polish](./2026-03/202603252220_connections-tree-toolbar-menu-polish/) - 为连接管理页补树工具栏与展开/收起控制,并整理行内更多菜单
|
||||
- [202603252310_connections-tree-search-explorer-polish](./2026-03/202603252310_connections-tree-search-explorer-polish/) - 为连接管理页补左侧树搜索、命中链路过滤、节点计数高亮和资源管理器式头部布局
|
||||
- [202603252336_connections-tree-hover-drag-polish](./2026-03/202603252336_connections-tree-hover-drag-polish/) - 为连接管理页补树节点 hover 工具、分隔标题行和拖拽重排占位反馈
|
||||
- [202603252340_command-input-multiline-shortcut](./2026-03/202603252340_command-input-multiline-shortcut/) - 将命令输入框改为多行自动增高,并改用 Ctrl+Shift+Enter 发送
|
||||
- [202603252229_terminal-tab-group-visual](./2026-03/202603252229_terminal-tab-group-visual/) - 将顶部终端标签栏改成更明显的服务器组头与终端子标签
|
||||
- [202603252256_workspace-monitor-terminal-polish](./2026-03/202603252256_workspace-monitor-terminal-polish/) - 重新核对状态监控与终端标签剩余改动,并修正知识库归档索引与活跃方案状态
|
||||
- [202603251200_workspace-workbench-monitor](./2026-03/202603251200_workspace-workbench-monitor/) - `/workspace` 改为三栏 Workbench 布局,并新增开机累计流量监控
|
||||
|
||||
Reference in New Issue
Block a user