yinjianm
91aa6e83ca
add shared page and auth shells to standardize the main application layout and authentication entry experience refresh dashboard, settings, login, setup, notifications, proxies, and audit logs with a consistent Element Plus based control-center presentation modernize workspace side panels and status monitor while keeping the three-column layout, and fix the terminal hover cursor to show a text caret
54 lines
3.2 KiB
Markdown
54 lines
3.2 KiB
Markdown
# frontend
|
|
|
|
## 职责
|
|
|
|
`packages/frontend` 是 Vue 3 + Vite 的 Web 客户端，负责登录、初始化设置、连接管理、工作区布局、终端与文件编辑、通知与审计视图，以及对后端 REST/WebSocket 和远程桌面网关的前端集成。
|
|
|
|
## 接口定义（可选）
|
|
|
|
> 模块对外暴露的公共 API 和数据结构
|
|
|
|
### 公共 API
|
|
| 函数/方法 | 参数 | 返回值 | 说明 |
|
|
|----------|------|--------|------|
|
|
| `src/main.ts` 启动流程 | 无 | Vue 应用实例 | 启动时先检查 setup/auth 状态，再挂载路由和应用。 |
|
|
| `src/router/index.ts` | 路由对象 | Vue Router 实例 | 管理 `/`、`/login`、`/workspace`、`/settings` 等页面与路由守卫。 |
|
|
| `useWebSocketConnection()` 等 composable | 业务参数 | 响应式状态/方法 | 处理 SSH 会话、文件管理、设置页等前端交互逻辑。 |
|
|
|
|
### 数据结构
|
|
| 字段 | 类型 | 说明 |
|
|
|------|------|------|
|
|
| `authStore` | Pinia store | 保存 `isAuthenticated`、`needsSetup` 等认证状态。 |
|
|
| `session.store` | Pinia store | 管理工作区标签、终端、SFTP 与弹窗状态。 |
|
|
| `connections.store` | Pinia store | 管理连接列表及其与后端的同步。 |
|
|
|
|
## 行为规范
|
|
|
|
### 应用启动
|
|
**条件**: 浏览器加载前端入口。
|
|
**行为**: `main.ts` 先并行拉取 setup 状态与认证状态；若用户已登录，再加载设置和外观数据；最后才注册路由并挂载应用。
|
|
**结果**: 路由守卫在挂载前即可拿到最新认证状态，避免错误跳转。
|
|
|
|
### 路由访问控制
|
|
**条件**: 用户访问任一路由。
|
|
**行为**: `router.beforeEach` 根据 `needsSetup` 与 `isAuthenticated` 决定是否重定向到 `/setup`、`/login` 或首页。
|
|
**结果**: 初始化设置和登录约束由统一路由守卫执行。
|
|
|
|
### 工作区交互
|
|
**条件**: 用户进入 `/workspace` 或相关管理页面。
|
|
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。
|
|
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中布局与交互微调优先落在 `layout.store.ts`、`LayoutRenderer.vue`、`WorkspaceWorkbench.vue` 和 `Terminal.vue`。
|
|
|
|
## 依赖关系
|
|
|
|
```yaml
|
|
依赖: workspace-root, backend, remote-gateway, vue-router, pinia
|
|
被依赖: 无
|
|
```
|
|
|
|
## 最近变更
|
|
|
|
- 2026-03-25: 前端主站视觉语言统一切换为 `Slate Control Center`，新增 `PageShell.vue` 与 `AuthPanelLayout.vue` 作为主要页面和认证入口的统一壳层。
|
|
- 2026-03-25: `/workspace` 继续保持“三栏工作台”结构，但左侧 `Workbench` 与右侧 `StatusMonitor` 已重做为更现代的 Element Plus 控制中心风格；状态监控保留并展示开机累计上/下行流量。
|
|
- 2026-03-25: `Dashboard / Settings / Login / Setup / Notifications / Proxies / Audit Logs` 已统一接入新的卡片化表达、控制区和统计信息风格，后续同类页面优先复用公共壳层而不是单页散落自定义布局。
|