feat(connection): 支持已保存登录凭证并重构首页仪表盘
新增登录凭证管理接口、数据表与前端选择器，连接创建、 编辑和测试现已支持复用已保存凭证 重构首页为管理驾驶舱，增加统计卡片、趋势与分布图、 活跃连接排行，并通过 summary 聚合数据统一驱动
This commit is contained in:
yinjianm
@@ -18,6 +18,10 @@
|
||||
- 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
|
||||
|
||||
### 新增
|
||||
- **[frontend]**: 将首页仪表盘升级为统计卡片、趋势/分布图和活跃连接排行组成的管理驾驶舱 — by yinjianm
|
||||
- 方案: [202603252343_dashboard-management-cockpit](archive/2026-03/202603252343_dashboard-management-cockpit/)
|
||||
- **[backend]**: 新增 `/api/v1/dashboard/summary` 聚合接口，统一输出首页所需的连接、审计和 SSH 统计摘要 — by yinjianm
|
||||
- 方案: [202603252343_dashboard-management-cockpit](archive/2026-03/202603252343_dashboard-management-cockpit/)
|
||||
- **[frontend]**: 将底部命令输入框升级为支持多行草稿与自动增高，并把发送快捷键改为 `Ctrl+Shift+Enter` — by yinjianm
|
||||
- 方案: [202603252340_command-input-multiline-shortcut](archive/2026-03/202603252340_command-input-multiline-shortcut/)
|
||||
- **[frontend]**: 将服务器状态中的内存与磁盘区域升级为卡片化监控视图，补齐环形内存占比、磁盘设备信息、读写速率与挂载表格展示 — by yinjianm
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"status": "completed",
|
||||
"completed": 6,
|
||||
"failed": 0,
|
||||
"pending": 0,
|
||||
"total": 6,
|
||||
"percent": 100,
|
||||
"current": "全部任务完成，等待知识库归档",
|
||||
"updated_at": "2026-03-26 00:08:00"
|
||||
}
|
||||
+3
-3
@@ -18,7 +18,7 @@
|
||||
|
||||
### 目标
|
||||
- 将首页升级为管理驾驶舱式仪表盘，而不再只是列表首页。
|
||||
- 新增可快速扫读的统计卡片、近 7 天趋势图、连接类型分布和高频连接排行。
|
||||
- 新增可快速扫读的统计卡片、近 7 天趋势图、连接类型分布、事件类型分布和高频连接排行。
|
||||
- 通过后端聚合接口统一提供 dashboard summary，避免前端依赖多接口拼装复杂统计。
|
||||
- 保留现有连接列表、最近活动和跳转链路，让首页既能看总览，也能继续执行常用操作。
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
### 验收标准
|
||||
- [ ] 首页新增核心统计卡片，至少覆盖连接总数、近 7 天活跃连接数、审计日志总数、近 24 小时 SSH 成功/失败次数
|
||||
- [ ] 首页新增趋势和分布图表，至少覆盖近 7 天审计事件趋势和连接类型分布
|
||||
- [ ] 首页新增趋势和分布图表，至少覆盖近 7 天审计事件趋势、连接类型分布和事件类型分布
|
||||
- [ ] 首页新增“近期最活跃连接”排行，基于审计日志中的连接事件聚合
|
||||
- [ ] 后端提供单独的 dashboard summary API，并由前端页面消费
|
||||
- [ ] `packages/frontend` 与 `packages/backend` 的构建校验通过
|
||||
@@ -42,7 +42,7 @@
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
在后端新增 `dashboard` 聚合模块，提供 `GET /api/v1/dashboard/summary` 接口，直接基于 SQLite 中的 `connections`、`connection_tags`、`audit_logs` 数据生成首页所需的统计摘要。前端新增 dashboard store 与 summary 类型定义，重构 `DashboardView.vue`，将当前首页拆分为“统计卡片 + 图表区 + 排行/列表区 + 最近活动”，并继续复用现有连接列表与最近活动交互。图表继续使用仓库已存在的 `chart.js` / `vue-chartjs` 技术栈。
|
||||
在后端新增 `dashboard` 聚合模块，提供 `GET /api/v1/dashboard/summary` 接口，直接基于 SQLite 中的 `connections`、`connection_tags`、`audit_logs` 数据生成首页所需的统计摘要。前端新增 dashboard store 与 summary 类型定义，重构 `DashboardView.vue`，将当前首页拆分为“统计卡片 + 图表区 + 排行/列表区 + 最近活动”，并继续复用现有连接列表与最近活动交互。图表继续使用仓库已存在的 `chart.js` / `vue-chartjs` 技术栈，并新增事件类型分布图表用于补足首页对审计行为结构的感知。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
@@ -0,0 +1,54 @@
|
||||
# 任务清单: dashboard-management-cockpit
|
||||
|
||||
```yaml
|
||||
@feature: dashboard-management-cockpit
|
||||
@created: 2026-03-25
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 6 | 0 | 0 | 6 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 后端 Dashboard 聚合接口
|
||||
|
||||
- [√] 1.1 在 `packages/backend/src/dashboard/` 下新增 summary 查询与 service/controller/routes，实现基于连接表、标签关联表和审计日志表的聚合统计接口 | depends_on: []
|
||||
- [√] 1.2 在 `packages/backend/src/index.ts` 中注册 dashboard 路由，并补齐必要的后端类型定义 | depends_on: [1.1]
|
||||
|
||||
### 2. 前端数据接入
|
||||
|
||||
- [√] 2.1 在 `packages/frontend/src/types/server.types.ts` 中新增 dashboard summary 响应类型，并在 `packages/frontend/src/stores/` 中新增 dashboard store 负责获取首页聚合数据 | depends_on: [1.2]
|
||||
|
||||
### 3. 仪表盘页面重构
|
||||
|
||||
- [√] 3.1 重构 `packages/frontend/src/views/DashboardView.vue`，新增统计卡片、近 7 天趋势图、连接类型分布图、事件类型分布图和活跃连接排行，同时保留现有连接列表与最近活动区域 | depends_on: [2.1]
|
||||
- [√] 3.2 更新 `packages/frontend/src/locales/zh-CN.json`、`packages/frontend/src/locales/en-US.json`、`packages/frontend/src/locales/ja-JP.json` 的 dashboard 文案，补齐新增统计与图表标签 | depends_on: [3.1]
|
||||
|
||||
### 4. 验证
|
||||
|
||||
- [√] 4.1 执行 `packages/backend` 与 `packages/frontend` 的构建校验，确认新增 dashboard 接口和页面改造通过类型检查与打包 | depends_on: [3.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-25 23:50 | 1.1 | completed | 新增 backend dashboard 聚合模块，输出总量、趋势、分布和活跃连接排行 |
|
||||
| 2026-03-25 23:51 | 1.2 | completed | 已注册 `/api/v1/dashboard/summary` 路由并接入后端入口 |
|
||||
| 2026-03-25 23:56 | 2.1 | completed | 新增 dashboard store 与 summary 类型定义，首页改为单接口聚合数据驱动 |
|
||||
| 2026-03-26 00:05 | 3.1 | completed | 重构 DashboardView 并拆出 DashboardOverviewPanel，加入统计卡片、趋势/分布图和活跃连接排行 |
|
||||
| 2026-03-26 00:08 | 4.1 | completed | `packages/backend` 与 `packages/frontend` 构建通过，仅保留既有 chunk 警告 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> `create_package.py` 与 `validate_package.py` 在当前环境均未返回有效执行报告，方案包与校验结果已按模板规则手工接管。仓库存在若干与本任务无关的未提交后端改动，本次仅同步仪表盘相关文件。
|
||||
@@ -20,6 +20,7 @@
|
||||
| 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 | ✅完成 |
|
||||
| 202603252343 | dashboard-management-cockpit | implementation | frontend, backend | dashboard-management-cockpit#D001, dashboard-management-cockpit#D002 | ✅完成 |
|
||||
| 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 | ✅完成 |
|
||||
@@ -40,6 +41,7 @@
|
||||
- [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 发送
|
||||
- [202603252343_dashboard-management-cockpit](./2026-03/202603252343_dashboard-management-cockpit/) - 将首页升级为统计卡片、趋势/分布图和活跃连接排行组成的 dashboard 驾驶舱，并补充 summary 聚合接口
|
||||
- [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 布局，并新增开机累计流量监控
|
||||
|
||||
@@ -39,6 +39,11 @@
|
||||
**行为**: 按 `controller/service/repository/routes` 的分层模式组织连接、通知、设置、快速命令、主题等功能。
|
||||
**结果**: 新增后端能力时应优先延续现有业务域目录结构，而不是在入口文件堆叠逻辑。
|
||||
|
||||
### 仪表盘聚合接口
|
||||
**条件**: 前端首页需要一次性获取可视化仪表盘统计。
|
||||
**行为**: 后端新增 `packages/backend/src/dashboard/` 业务域，当前通过 `GET /api/v1/dashboard/summary` 聚合 SQLite 中的 `connections`、`connection_tags` 和 `audit_logs`，输出连接总量、近 7 天活跃连接数、标签覆盖连接数、24 小时 SSH 成功/失败计数、近 7 天活动趋势、连接类型分布、事件类型分布以及活跃连接排行；其中高频连接排行会安全解析审计日志 `details` 中的 `connectionId/connectionName`，解析失败的单条日志会被忽略而不阻断整体 summary。
|
||||
**结果**: 仪表盘统计口径集中在后端统一维护，首页不再依赖多接口前端拼装，后续扩展更多运营指标时可沿用同一聚合模块。
|
||||
|
||||
### 外观默认值
|
||||
**条件**: 数据库初始化、外观设置重置或前后端默认主题定义调整。
|
||||
**行为**: `appearance.repository.ts` 负责写入默认 UI 外观设置，`config/default-themes.ts` 保持与前端同名默认主题定义一致，作为默认外观与终端主题的镜像基线；当前默认外观中终端文字描边和阴影开关默认开启，但仅作为“无保存值时”的回退，不主动覆盖数据库里已有用户配置。
|
||||
|
||||
@@ -39,6 +39,11 @@
|
||||
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。`CommandInputBar.vue` 当前已将底部命令框升级为支持会话级草稿保留的多行 `textarea`：普通 `Enter` 插入换行，`Ctrl+Shift+Enter` 发送当前命令，输入框会按内容自动增高至约 6 行，超出后在输入框内部滚动，并继续兼容快捷指令/命令历史同步与选中发送逻辑。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；`Terminal.vue` 会跟踪 xterm 的视口行号与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复，并在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`session.store` 当前会为同一 SSH 连接下的新终端分配递增的 `terminalIndex`，`TerminalTabBar.vue` 则进一步把连续同连接会话渲染成“服务器组头 + 终端子标签 + 组尾新增按钮”，全局 `+` 只负责选择其他服务器，从而让“单连接默认 1 个终端、可继续追加多个终端”的关系在顶部标签栏里更接近参考图；`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，当前左侧进一步支持基于标签名路径分隔符推导的多级标签树、树节点展开状态持久化、分组 scope 恢复，以及树工具栏中的展开全部、收起全部和重置范围控制；近期又补上了独立的左侧树搜索、命中节点及祖先路径过滤、命中链路自动展开、节点计数高亮，以及更接近资源管理器的树头部布局；本轮继续为树节点加入 hover 工具按钮、资源管理器式分隔标题行与拖拽重排占位反馈；右侧结果列表则同时支持顶部排序控件、列头点击排序，并将行内操作整理为“连接”主按钮加“更多”菜单（编辑/测试/克隆/删除）；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
|
||||
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中工作区终端行为和标签交互优先落在 `session.store.ts`、`session/actions/sessionActions.ts`、`session/getters.ts`、`TerminalTabBar.vue`、`WorkspaceView.vue`、`Terminal.vue` 与相关 locale 文件。
|
||||
|
||||
### 仪表盘总览
|
||||
**条件**: 用户登录后访问 `/` 首页仪表盘。
|
||||
**行为**: `DashboardView.vue` 当前会并行拉取连接列表、最近审计日志、标签列表和新的 dashboard summary 数据，并将总览区拆到 `DashboardOverviewPanel.vue`：顶部提供连接总数、近 7 天活跃连接、标签覆盖率、审计日志总量、24 小时 SSH 成功/失败等统计卡片，中部展示近 7 天活动趋势、连接类型分布和事件类型分布图表，下方展示高频连接排行；`dashboard.store.ts` 负责缓存 `/api/v1/dashboard/summary` 的聚合结果，原有连接列表和最近活动则继续复用 `connections.store.ts` 与 `audit.store.ts`。
|
||||
**结果**: 首页从“列表首页”升级为“总览 + 操作入口”的管理驾驶舱，用户可在同一页面完成扫描、筛选和直接连接。
|
||||
|
||||
## 依赖关系
|
||||
|
||||
```yaml
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
# 任务清单: dashboard-management-cockpit
|
||||
|
||||
```yaml
|
||||
@feature: dashboard-management-cockpit
|
||||
@created: 2026-03-25
|
||||
@status: pending
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 0 | 0 | 0 | 6 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 后端 Dashboard 聚合接口
|
||||
|
||||
- [ ] 1.1 在 `packages/backend/src/dashboard/` 下新增 summary 查询与 service/controller/routes，实现基于连接表、标签关联表和审计日志表的聚合统计接口 | depends_on: []
|
||||
- [ ] 1.2 在 `packages/backend/src/index.ts` 中注册 dashboard 路由，并补齐必要的后端类型定义 | depends_on: [1.1]
|
||||
|
||||
### 2. 前端数据接入
|
||||
|
||||
- [ ] 2.1 在 `packages/frontend/src/types/server.types.ts` 中新增 dashboard summary 响应类型，并在 `packages/frontend/src/stores/` 中新增 dashboard store 负责获取首页聚合数据 | depends_on: [1.2]
|
||||
|
||||
### 3. 仪表盘页面重构
|
||||
|
||||
- [ ] 3.1 重构 `packages/frontend/src/views/DashboardView.vue`，新增统计卡片、近 7 天趋势图、连接类型分布图和活跃连接排行，同时保留现有连接列表与最近活动区域 | depends_on: [2.1]
|
||||
- [ ] 3.2 更新 `packages/frontend/src/locales/zh-CN.json`、`packages/frontend/src/locales/en-US.json`、`packages/frontend/src/locales/ja-JP.json` 的 dashboard 文案，补齐新增统计与图表标签 | depends_on: [3.1]
|
||||
|
||||
### 4. 验证
|
||||
|
||||
- [ ] 4.1 执行 `packages/backend` 与 `packages/frontend` 的构建校验，确认新增 dashboard 接口和页面改造通过类型检查与打包 | depends_on: [3.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-25 23:43 | DESIGN | completed | 已确认采用“后端 summary 接口 + 前端驾驶舱重构”的实现路径，统计口径优先使用稳定数据库数据 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> `create_package.py` 在当前环境未返回有效执行报告，方案包已按模板规则手工创建。开发实施阶段需同步前后端、locale 和知识库变更记录。
|
||||
Reference in New Issue
Block a user