tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-01 06:36:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

migrate frontend

Browse Source
This commit is contained in:
ryan
2026-06-18 17:26:57 +08:00
parent d7fe4ef8be
commit a9fd0bd128
53 changed files with 4765 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plan/20260618-openflare-wavelet-frontend-migration.md
+16 -15
View File
@@ -2,7 +2,7 @@
> **文档类型**：实现计划（Implementation Plan）
> **创建日期**：2026-06-18
> **状态**：规划中
> **状态**：实施中（阶段 0 基建 + 阶段 2 核心链路并行）
> **前置阅读**：[`Wavelet/AGENTS.md`](../../Wavelet/AGENTS.md)、[`docs/plan/20260618-openflare-wavelet-backend-migration.md`](./20260618-openflare-wavelet-backend-migration.md)
> **依赖**：后端阶段一（旧路径 `/api/*` 兼容）完成后启动；阶段二可与后端阶段五并行
@@ -510,15 +510,15 @@ OpenFlare
## 9. 分阶段实施计划
### 阶段 0：基建（1 周）
### 阶段 0：基建（1 周）— ✅ 已完成
| 任务 ID | 任务 | 产出 |
| 任务 ID | 任务 | 状态 |
|---|---|---|
| F0-1 | 创建 `lib/services/openflare/` 骨架 | types + base |
| F0-2 | 创建 `lib/navigation/openflare-nav.ts` | 导航配置 |
| F0-3 | 扩展 `app-sidebar.tsx` | OpenFlare 导航组 |
| F0-4 | 确认 embed 构建方案 | `Makefile` / `next.config.ts` |
| F0-5 | 移除旧前端入口引用准备 | 文档记录 |
| F0-1 | 创建 `lib/services/openflare/` 骨架 | ✅ `legacy-base.service.ts` + types |
| F0-2 | 创建 `lib/navigation/openflare-nav.ts` | ✅ |
| F0-3 | 扩展 `app-sidebar.tsx` | ✅ OpenFlare 导航组 |
| F0-4 | 确认 embed 构建方案 | ⏳ |
| F0-5 | 移除旧前端入口引用准备 | ⏳ |
### 阶段 1：认证与布局（1 周）
@@ -532,15 +532,16 @@ OpenFlare
**验收**：Wavelet 登录后可看到 OpenFlare 空导航骨架。
### 阶段 2：核心链路 UI（2–3 周）
### 阶段 2：核心链路 UI（2–3 周）— 进行中
| 任务 ID | 页面 | 依赖 API |
| 任务 ID | 页面 | 状态 |
|---|---|---|
| F2-1 | 节点列表 + 详情（edge） | 后端 B2-5 |
| F2-2 | 代理规则列表 + 详情 | 后端 B2-3 |
| F2-3 | 配置发布 | 后端 B2-4 |
| F2-4 | 应用日志 | 后端 B2-7 |
| F2-5 | relay/tunnel 详情页 | 后端 B4-2 |
| F2-1 | 节点列表 + 详情（edge） | ✅ 列表 + Edge 详情 |
| F2-2 | 代理规则列表 + 详情 | ✅ 列表 + 6 Tab 骨架 |
| F2-3 | 配置发布 | ✅ |
| F2-4 | 应用日志 | ✅ |
| F2-5 | relay/tunnel 详情页 | ⏳ |
| F2-6 | 代理规则详情各 Section 表单实装 | ⏳ |
**验收**：UI 完成节点→规则→发布闭环操作。
docs/plan/handover-openflare-frontend-migration.md
+110
View File
@@ -0,0 +1,110 @@
# OpenFlare 前端迁移 — 任务拆分与 AI 委派
> **状态**：进行中（阶段 0 基建 + 阶段 2 核心链路并行）
> **目标前端**：`Wavelet/frontend/`（Next.js 16 + shadcn/ui + Session 鉴权）
> **业务 API**：阶段一仍调用 `/api/*` legacy 兼容层（响应 `{success,message,data}`）
> **平台 API**：认证/用户/Admin 使用 `/api/v1/*`（响应 `{error_msg,data}`）
## 任务隔离规则
| 规则 | 说明 |
|---|---|
| 文件所有权 | 每个任务 **仅修改** 自己的 `app/(main)/openflare/<module>/`、`lib/services/openflare/<module>.service.ts` |
| 共享文件 | `F0` 独占：`lib/navigation/`、`lib/services/openflare/legacy-base.service.ts`、`lib/services/openflare/index.ts`（注册入口）、`components/layout/sidebar.tsx`（仅新增 OpenFlare 导航组）、`app/(main)/openflare/layout.tsx` |
| 禁止修改 | Wavelet 框架核心：`app/(auth)/*` 逻辑、`lib/services/core/*`、`components/ui/*` 源码 |
| UI 规范 | 标题 `h1 text-2xl font-semibold tracking-tight`；单文件 ≤600 行；参考 `/admin/demo`、`/admin/database` 拆分模式 |
| 组件 | 仅用 `@/components/ui/*`（shadcn），**禁止**复制旧 `openflare-server/web/components/ui` |
| 服务层 | 业务 API 继承 `LegacyOpenFlareBaseService`；平台 API 继续用 `BaseService` |
| 鉴权 | Session Cookie（`withCredentials`），**禁止** `OpenFlare-Token` localStorage |
| 质量门禁 | `cd Wavelet/frontend && pnpm typecheck && pnpm lint` |
## 任务队列
| ID | 板块 | 状态 | 负责目录/文件 |
|---|---|---|---|
| F0 | 基建：Legacy 服务基类 + 导航 + 侧栏 + 路由骨架 | ✅ 完成 | `legacy-base.service.ts`、`openflare-nav.ts`、`sidebar.tsx`、`/home` → `/openflare` |
| F-NODE | 节点列表 + Edge 详情 | ✅ 完成（Relay/Tunnel 详情待补） | `node.service.ts`、`openflare/nodes/` |
| F-PROXY | 代理规则列表 + 详情骨架 | ✅ 骨架完成（6 Tab 待实装） | `proxy-route.service.ts`、`openflare/proxy-routes/` |
| F-CFG | 配置发布 + 应用日志 | ✅ 完成 | `config-version.service.ts`、`apply-log.service.ts` |
| F-DASH | 总览仪表盘 | ⏳ | `dashboard.service.ts`、`openflare/page.tsx` |
| F-WAF | WAF 规则组 + IP 组 | ⏳ | `waf.service.ts`、`openflare/waf/` |
| F-WEB | 网站/证书/DNS | ⏳ | `website.service.ts`、`tls-certificate.service.ts`、`openflare/websites/` |
| F-PAGES | Pages 托管 | ⏳ | `pages.service.ts`、`openflare/pages/` |
| F-ORIGIN | 源站 | ⏳ | `origin.service.ts`、`openflare/origins/` |
| F-LOGS | 访问日志 | ⏳ | `access-log.service.ts`、`openflare/access-logs/` |
| F-ADMIN | 运维设置扩展 Admin | ⏳ | `option.service.ts`、`admin/settings` 扩展块 |
| F-AUTH | 认证复用验证（Wavelet 原生） | ⏳ | 仅导航/回调 URL，不改登录页 |
## Legacy API 适配要点
旧 OpenFlare 业务 API 响应：
```json
{ "success": true, "message": "", "data": { ... } }
```
Wavelet `BaseService` 期望 `{ "error_msg": "", "data": ... }`。业务服务必须使用 `LegacyOpenFlareBaseService`：
```typescript
// lib/services/openflare/legacy-base.service.ts
protected static async legacyGet<T>(path: string, params?: Record<string, unknown>): Promise<T>
protected static async legacyPost<T>(path: string, data?: unknown): Promise<T>
// 解析 success/message/data；success=false 时 throw ApiErrorBase(message)
```
阶段一 `basePath` 示例：`/api/nodes`、`/api/proxy-routes`（无 `/v1` 前缀）。
## 页面规范速查
```tsx
// 标准页面外壳（参考 admin/demo）
<div className="py-6 px-1 space-y-6">
<div className="flex items-center gap-2">
<Icon className="size-5 text-primary" />
<h1 className="text-2xl font-semibold tracking-tight">页面标题</h1>
</div>
{/* 内容 */}
</div>
```
| 旧组件 | Wavelet 替代 |
|---|---|
| `app-modal` | `Dialog` / `Sheet` |
| `app-table` | `Table` + `@tanstack/react-table` 或简易 Table |
| `status-badge` | `Badge` variant |
| `primary-button` | `Button` |
| ECharts 趋势图 | Recharts（世界地图可暂保留 ECharts） |
## 源代码参考
| 类型 | 路径 |
|---|---|
| 旧前端业务 | `openflare-server/web/features/<module>/` |
| 新前端标杆 | `Wavelet/frontend/app/(main)/admin/database/`、`admin/demo/` |
| 服务层范例 | `Wavelet/frontend/lib/services/admin/user.service.ts` |
| 迁移计划 | `docs/plan/20260618-openflare-wavelet-frontend-migration.md` |
| 后端 API | `docs/plan/20260618-openflare-wavelet-backend-migration.md` §12 |
## 验收命令
```bash
cd Wavelet/frontend
pnpm typecheck
pnpm lint
pnpm dev # 联调 wavelet api :3000
```
## 阶段验收标准
| 阶段 | 验收 |
|---|---|
| F0 完成 | 登录后侧栏可见 OpenFlare 导航；`/home` → `/openflare`；各路由有占位或骨架页 |
| F-NODE + F-PROXY + F-CFG | 节点 CRUD、规则 CRUD、配置发布/激活、应用日志列表可联调 |
| 全量 | 旧前端 18 个控制台路由功能对等；E2E 核心路径通过 |
## 下一步（F0 完成后）
1. 启动 **F-DASH**（仪表盘，依赖 dashboard API）
2. 启动 **F-WAF** + **F-WEB**（阶段 3 并行）
3. **F-ADMIN** 合并运维设置到 `admin/settings`
4. 更新 `docs/changelog/index.md`（代码变更时）
docs/plan/index.md
+1
View File
@@ -16,6 +16,7 @@
| [OpenFlare → Wavelet 后端迁移计划](./20260618-openflare-wavelet-backend-migration.md) | 将 `openflare-server` 后端迁移至 Wavelet 框架，保留 `/api/*` 路径，复用用户/认证等平台能力 |
| [OpenFlare 后端迁移 — AI 接手](./handover-openflare-backend-migration.md) | 后端迁移当前进度、任务队列、定时任务、goose 版本与下一步行动（阶段 5 收尾） |
| [OpenFlare → Wavelet 前端迁移计划](./20260618-openflare-wavelet-frontend-migration.md) | 将 `openflare-server/web` 业务 UI 按 Wavelet 设计风格重写，复用框架组件与 Admin 基建 |
| [OpenFlare 前端迁移 — AI 委派](./handover-openflare-frontend-migration.md) | 前端迁移任务队列、Legacy API 适配规范、子智能体文件所有权与验收标准 |
## 使用建议