frontend architecture

前端工程

技术栈

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

---

目录结构

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 版本总览

---

状态管理

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 变量实现：

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

主题模式：

• 深色（默认）
• 浅色
• 跟随系统