Vue 3 + TypeScript + Element Plus 实现的 Enterprise Connector 后台。 对接后端 36 个 REST 端点, 一体化管理租户 / 数据源 / 模板 / 授权 / 字典 / 异步任务。
后端仓库:
sea_star_enterprise_connector_public(独立, 通过 OpenAPI 契约对接) License:Apache 2.0 (与后端一致)
工程蓝图 × 终端仪表 × 高密度 × 仪式感破坏动作。每个表格行都有 4px 状态色条 + 等宽 ID, 整个后台像一份机械工单, 而不是 SaaS dashboard。
完整规范见 docs/DESIGN_TOKENS.md。
| 模块 | 选型 |
|---|---|
| 框架 | Vue 3.5 + TypeScript 5.6 |
| 构建 | Vite 6 |
| UI 库 | Element Plus 2.8 (CSS Variables 全局覆盖) |
| 状态 | Pinia 2 |
| 路由 | vue-router 4 (hash mode) |
| HTTP | axios 1.7 + @tanstack/vue-query 5 |
| i18n | vue-i18n 10 (中 / 日 / 英) |
| 表单 | vee-validate 4 + zod 3 |
| SQL 编辑器 | monaco-editor 0.52 (多方言高亮 + 占位符 lint) |
| 图表 | @unovis/vue |
| 图标 | lucide-vue-next (line 1.5px) |
| 测试 | vitest + playwright |
| 包管理 | pnpm 9 |
四步:装依赖 → 配置后端地址(可选）→ 起后端(另一个终端)→ 起前端。 下面三个版本任选一个整段照抄;差异只在「复制 .env」和「调 mvnw」两处。
Base(bash · Linux / macOS / Git Bash)
# 1. 装依赖
pnpm install
# 2. 配置后端地址(可选,默认 http://localhost:8080)
cp .env.example .env # 编辑 VITE_BACKEND_URL
# 3. 启动后端(另一个终端)
cd ../sea_star_enterprise_connector_public
./mvnw spring-boot:run # Linux/macOS; Windows 的 Git Bash 用 ./mvnw.cmd
# 4. 启动前端
pnpm dev # 打开 http://127.0.0.1:5173PowerShell
# 1. 装依赖
pnpm install
# 2. 配置后端地址(可选)
Copy-Item .env.example .env # 编辑 VITE_BACKEND_URL
# 3. 启动后端(另一个终端)
cd ..\sea_star_enterprise_connector_public
.\mvnw.cmd spring-boot:run
# 4. 启动前端
pnpm dev # 打开 http://127.0.0.1:5173cmd
:: 1. 装依赖
pnpm install
:: 2. 配置后端地址(可选)
copy .env.example .env
:: 3. 启动后端(另一个终端)
cd ..\sea_star_enterprise_connector_public
mvnw.cmd spring-boot:run
:: 4. 启动前端
pnpm dev首次访问需要在 /login 输入 X-API-Key (后端 application.yaml 里的 ADMIN_API_KEY)。
src/
├── shared/ # 共通层 (所有跨页面共用的能力)
│ ├── http/ # axios + 拦截器 + 错误规范化
│ ├── api/ # 8 个 controller 对应的 8 个文件 → 36 端点
│ ├── router/ # 路由集中表 + 守卫
│ ├── stores/ # auth / ui (theme/density/lang) / toast / trace
│ ├── i18n/ # vue-i18n + 共通字典 zh/ja/en
│ ├── components/ # Ec* 原子组件 (待补)
│ ├── composables/ # usePurge / useConfirm / usePolling / useToast / usePagination
│ ├── styles/ # tokens.css (方案 B 已应用)
│ └── utils/ # format / tenantId
├── views/ # 页面层, 只组合 shared
│ ├── overview/ # 首页仪表盘
│ ├── tenants/ # 租户三栏 (含 ds / actions / SQL 编辑器)
│ ├── datasources/ # 数据源管理
│ ├── templates/ # action 模板分组
│ ├── action-configs/ # 授权管理
│ ├── dict/ # sys_dict 热更新
│ ├── tasks/ # 异步任务列表
│ ├── danger-zone/ # purge / restore 集中页
│ ├── login/ # X-API-Key 输入
│ └── _misc/ # 404 等
├── App.vue
└── main.ts
docs/
├── API_COVERAGE.md # 36 端点 → UI 入口 checklist (核心交付物)
├── COMMON_LAYER.md # 共通层使用指南
└── DESIGN_TOKENS.md # 设计规范
CLAUDE.md # Claude Code 协作指引
36 个后端端点的实施 checklist:docs/API_COVERAGE.md
当前进度:0/36 (脚手架阶段)
阶段目标:
- Phase 1 scaffold (现在) → 工程骨架 / 共通层 / 类型定义
- Phase 2 read paths → 12/36 (所有 GET 类端点 + 列表页)
- Phase 3 full CRUD → 30/36 (除 purge/restore 外都做完)
- Phase 4 danger ops → 35/36 (含 purge/restore, 唯一不做的是
POST /internal/callback因为是后端→后端回调) - GA → 35/36 + 至少 60% 端点 e2e 测试
- 前端只依赖后端 REST 契约 (URL / method / request / response shape), 不依赖后端代码
- 后端 ErrorResponse
{ code, message, details?, traceId? }由shared/http/error.ts规范化为BizError - 后端 mybatis-flex
Page<T>由shared/http/types.ts的Page<T>类型对齐 - 后端 enum (
Tier/AccessType/TaskStatus) 由shared/api/*.ts的 string union type 对齐, 后端改 enum 时必须同步前端类型
开发:pnpm dev, Vite 反代后端
生产:pnpm build 出 dist/, Nginx 托管 + 反向代理 /admin /health /mcp /internal 到后端
公网部署额外要求(MVP 不在范围内):
- X-API-Key 改成 httpOnly cookie + 真实账号体系
- 启用 CSP (与 Monaco editor 兼容需放开
worker-src 'self' blob:) - 国密 / 字段加密 / 操作审计
支持 中 / 日 / 英 三语切换, 顶栏 中 / 日 / EN 三格切换器。
首次访问按 navigator.language 检测, 之后存 localStorage.ec.lang。
翻译原则(详见 CLAUDE.md i18n 章节):等宽字体里的技术字面量都不翻译 —— ID、SQL、占位符、API path、错误码、时间戳。
Apache 2.0