# 前端工程

## 技术栈

| 技术 | 用途 |
|------|------|
| Vue 3 | UI 框架 |
| Vite | 构建工具 |
| TypeScript | 类型系统 |
| Pinia | 状态管理 |
| Vue Router | 路由管理 |

---

## 目录结构

```text
packages/rex-console-web/
├── package.json
├── index.html
├── src/
│   ├── main.ts
│   ├── App.vue
│   ├── router.ts
│   ├── api/            # 按接口域拆分
│   ├── stores/         # 状态管理
│   ├── components/     # 跨功能通用组件
│   ├── composables/    # 组合式函数
│   ├── layouts/        # 布局组件
│   ├── pages/          # 页面路由入口
│   ├── features/       # 按功能域组织组件
│   │   ├── terminal/
│   │   ├── sql/
│   │   ├── files/
│   │   ├── agents/
│   │   ├── settings/
│   │   └── workspace/
│   ├── styles/         # 主题和全局样式
│   └── i18n/           # 国际化
├── public/
└── vite.config.ts
```

---

## 页面路由

| 页面 | 路由 | 布局 | 说明 |
|------|------|------|------|
| Login | `/login` | 全屏 | 登录认证 |
| Dashboard | `/dashboard` | 标准布局 | 仪表盘 |
| Environments | `/environments` | 标准布局 | 环境列表 |
| EnvironmentDetail | `/environments/:id` | 标准布局 | 环境详情 |
| EnvironmentNew | `/environments/new` | 标准布局 | 创建环境 |
| ResourceNew | `/resources/new` | 标准布局 | 创建资源向导 |
| Workspace | `/workspace` | 工作区布局 | 多标签分屏 |
| Terminal | `/terminal` | 全屏 | SSH 终端 |
| SqlConsole | `/sql` | 全屏 | SQL 控制台 |
| Files | `/files` | 全屏 | 文件管理 |
| Agents | `/agents` | 标准布局 | Agent 管理 |
| AuditLog | `/audit-log` | 标准布局 | 审计日志 |
| Settings | `/settings` | 标准布局 | 个人设置 |

---

## 全局组件

| 组件 | 说明 |
|------|------|
| `AppLayout` | 桌面侧边栏 + 移动端底部导航 |
| `FullScreenLayout` | 终端、SQL、文件管理等全屏页面 |
| `WorkspaceLayout` | 多标签 + 分屏工作区 |
| `ResourceIcon` | 协议图标、颜色、状态点 |
| `ContextMenu` | 统一右键菜单，支持 divider、danger、submenu |
| `ConfirmDialog` | 删除、断开、重启、重置令牌等确认弹窗 |
| `ToastProvider` | 全局 Toast |
| `ThemeToggle` | 深色/浅色/跟随系统切换 |
| `I18nSwitch` | 中文/英文切换 |
| `TransferQueuePanel` | 文件传输队列 |
| `VersionOverview` | Hub 和 Agent 版本总览 |

---

## 状态管理

```text
stores/
├── auth.ts        登录态、会话过期、登出
├── user.ts        用户设置、主题、语言
├── env.ts         环境列表、环境详情
├── resource.ts    资源列表、连接方式、凭据引用
├── agent.ts       Agent 列表、在线状态、版本、平台
├── workspace.ts   标签页、分屏布局、连接状态
├── transfer.ts    传输任务、进度、冲突处理
├── audit.ts       审计日志筛选条件和列表
└── ui.ts          Toast、Modal、Loading
```

状态数据优先从 Hub API 获取，本地只做 UI 状态缓存。敏感字段不在 localStorage 中明文保存。

---

## 设计系统

### 品牌色彩

| 角色 | 色值 | 用途 |
|------|------|------|
| 主色 | `#E8912D` | 按钮、选中态 |
| 成功 | `#3FB950` | 在线、SSH |
| 危险 | `#F85149` | 错误、Redis |
| 信息 | `#58A6FF` | MySQL、提示 |
| 紫色 | `#8B5CF6` | PostgreSQL、SFTP |
| 警告 | `#D29922` | SQLite |
| 终端背景 | `#0D1117` | 终端背景 |
| 页面背景 | `#161B22` | 页面背景 |
| 卡片背景 | `#1C2128` | 卡片背景 |

### 字体

- 标题/代码：JetBrains Mono (monospace)
- 正文：Inter (sans-serif)

### 组件规范

- **卡片**：圆角 8px、1px 边框、padding 20px
- **按钮**：高度 36px（sm 28 / lg 42）、圆角 6px
- **徽章**：胶囊形，协议色半透明背景
- **滚动条**：6px 宽，灰色，hover 变亮

---

## 国际化

支持语言：
- 中文 (zh)
- 英文 (en)

切换方式：
- 设置页切换
- 侧栏切换
- 持久化 localStorage

---

## 主题系统

CSS 变量实现：

```css
--bg-deep /* 深层背景 */
--bg-surface /* 表面背景 */
--bg-elevated /* 浮起背景 */
--bg-hover /* 悬浮背景 */
--text-primary /* 主要文字 */
--text-secondary /* 次要文字 */
--border /* 边框 */
```

主题模式：
- 深色（默认）
- 浅色
- 跟随系统