fengling-console/docs/plans/fengling-console-plan.md

Fengling.Console 运管中心规划

项目概述

项目名称: Fengling.Console 中文名称: 风铃运管中心 定位: 统一运维管理平台（前端Vue项目）

架构设计

前端（新建）

• 项目: src/Fengling.Console.Web/ (Vue 3 + Vite)
• 功能:
  • 网关路由管理
  • 租户管理
  • OAuth Client管理
  • 用户管理
  • 集群实例管理

后端API（已有）

1. Fengling.AuthService - 认证服务

   • OAuth Client管理 API
   • 用户管理 API
   • Token 端点

2. YarpGateway - 网关服务

   • 租户管理 API
   • 路由管理 API
   • 集群实例管理 API

功能模块

模块1: 认证登录

• OAuth2 授权码流登录
• Token刷新机制
• 登出功能
• Client: fengling-console

模块2: 网关管理

• 租户列表
• 租户路由配置
• 集群实例管理
• 全局路由配置
• 负载均衡策略

模块3: OAuth Client管理

• Client ID/Secret管理
• 重定向URI配置
• 授权类型配置
• Scope配置
• Client状态管理

模块4: 用户管理

• 用户列表
• 用户角色分配
• 租户分配
• 用户状态管理

认证集成

Fengling.Console作为OAuth Client

已在AuthService中预注册：

ClientId: "fengling-console"
ClientSecret: "console-secret-change-in-production"
RedirectUris: ["http://console.fengling.local/auth/callback"]
PostLogoutRedirectUris: ["http://console.fengling.local/"]
Scopes: ["api", "offline_access"]
GrantTypes: ["authorization_code", "refresh_token"]

目录结构

src/
├── Fengling.AuthService/          # 认证服务（已完成）
│   ├── Controllers/
│   │   ├── OAuthClientsController.cs  # OAuth Client管理API
│   │   └── AuthController.cs         # 认证API
│   ├── Models/
│   │   ├── OAuthApplication.cs
│   │   ├── ApplicationUser.cs
│   │   └── ApplicationRole.cs
│   └── Data/
│       ├── SeedData.cs              # 预注册fengling-console
│       └── ApplicationDbContext.cs
├── YarpGateway/                   # 网关服务（已有）
│   ├── Controllers/
│   │   ├── GatewayConfigController.cs
│   │   ├── TenantController.cs
│   │   └── ClusterInstanceController.cs
│   ├── Models/
│   │   ├── GwTenant.cs
│   │   ├── GwTenantRoute.cs
│   │   └── GwServiceInstance.cs
│   └── Data/
│       └── GatewayDbContext.cs
└── Fengling.Console.Web/          # 运管中心前端（新建）
    ├── src/
    │   ├── views/
    │   │   ├── Auth/              # 认证相关
    │   │   │   ├── Login.vue
    │   │   │   └── Callback.vue
    │   │   ├── Gateway/           # 网关管理
    │   │   │   ├── TenantList.vue
    │   │   │   ├── TenantRoutes.vue
    │   │   │   ├── ClusterInstances.vue
    │   │   │   └── GlobalRoutes.vue
    │   │   ├── OAuth/             # OAuth管理
    │   │   │   └── ClientList.vue
    │   │   └── Users/             # 用户管理
    │   │       └── UserList.vue
    │   ├── components/
    │   ├── api/
    │   │   ├── auth.ts            # AuthService API
    │   │   ├── gateway.ts         # Gateway API
    │   │   └── oauth.ts           # OAuth API
    │   ├── stores/
    │   │   ├── auth.ts
    │   │   └── user.ts
    │   └── router/
    │       └── index.ts
    ├── package.json
    └── vite.config.ts

API调用关系

Fengling.Console.Web (前端)
    ├── OAuth2登录 → Fengling.AuthService (/connect/authorize)
    ├── OAuth Client管理 → Fengling.AuthService (/api/oauthclients)
    ├── 用户管理 → Fengling.AuthService (/api/users)
    ├── 租户管理 → YarpGateway (/api/tenants)
    ├── 路由管理 → YarpGateway (/api/routes)
    └── 集群管理 → YarpGateway (/api/instances)

技术栈

前端 (Fengling.Console.Web)

• Vue 3 + TypeScript
• Vite
• Element Plus (UI组件库)
• Pinia (状态管理)
• Vue Router
• Axios (HTTP客户端)

后端API

• Fengling.AuthService: .NET 10.0, OpenIddict 7.2.0
• YarpGateway: .NET 10.0, YARP 2.2.0

实施计划

Phase 1: 认证服务扩展（已完成）

• Task 1-9: 完成AuthService基础功能
• Task 10: 添加OAuth Client模型和管理API
• Task 11: 预注册Fengling.Console作为Client

Phase 2: 运管中心前端（待开始）

• Task 12: 创建Fengling.Console.Web Vue项目
• Task 13: 配置项目结构和依赖
• Task 14: 实现OAuth2登录流程
• Task 15: 实现网关管理界面（迁移YarpGateway.Admin）
• Task 16: 实现OAuth Client管理界面
• Task 17: 实现用户管理界面
• Task 18: 配置API封装（调用AuthService和YarpGateway）
• Task 19: 添加Dockerfile和部署配置

依赖关系

Fengling.Console.Web (Vue前端)
    ↓ (OAuth2)
Fengling.AuthService (认证API)
    ↓ (JWT Token验证)
YarpGateway (网关API)

环境配置

开发环境

VITE_AUTH_SERVICE_URL=http://auth.fengling.local:5000
VITE_GATEWAY_SERVICE_URL=http://gateway.fengling.local:5000
VITE_CLIENT_ID=fengling-console
VITE_REDIRECT_URI=http://console.fengling.local:5173/auth/callback

生产环境

VITE_AUTH_SERVICE_URL=https://auth.fengling.local
VITE_GATEWAY_SERVICE_URL=https://gateway.fengling.local

注意事项

1. 无后端项目: Fengling.Console是纯前端项目
2. 直接调用现有API: 复用AuthService和YarpGateway的API
3. OAuth2认证: 使用授权码流登录
4. Token管理: 自动刷新access token
5. 跨域处理: 配置CORS或使用同域代理