fengling-console/src/YarpGateway.Admin

YARP Gateway Admin

基于Vue3 + Element Plus的YARP网关管理界面。

功能特性

• ✅ 租户管理（CRUD）
• ✅ 租户路由配置
• ✅ 服务实例管理
• ✅ 加权负载均衡配置
• ✅ 配置热重载
• ✅ 实时监控仪表板
• ✅ TypeScript类型支持

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问: http://localhost:5173

构建生产版本

npm run build

预览生产构建

npm run preview

项目结构

src/
├── api/           # API接口定义
│   └── index.ts
├── components/     # 公共组件
│   └── Layout.vue
├── router/         # 路由配置
│   └── index.ts
├── stores/         # Pinia状态管理
│   └── tenant.ts
├── views/          # 页面组件
│   ├── TenantList.vue      # 租户列表
│   ├── TenantRoutes.vue    # 租户路由
│   ├── ClusterInstances.vue # 实例管理
│   └── Dashboard.vue      # 仪表板
├── App.vue         # 根组件
└── main.ts         # 入口文件

页面说明

租户列表 (/tenants)

• 查看所有租户
• 创建新租户
• 删除租户
• 查看租户路由

租户路由 (/tenants/:tenantCode/routes)

• 查看租户的所有服务路由
• 创建新路由
• 删除路由
• 查看服务实例

服务实例 (/clusters/:clusterId/instances)

• 查看Cluster下的所有实例
• 添加新实例
• 设置权重
• 删除实例

监控仪表板 (/dashboard)

• 总租户数
• 总路由数
• 总Cluster数
• 总实例数
• 快速操作

环境变量

.env.development:

VITE_API_BASE_URL=http://localhost:8080

API接口配置

开发环境通过Vite代理转发到后端:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

技术栈

• Vue 3 - 渐进式JavaScript框架
• TypeScript - 类型安全
• Vite - 构建工具
• Element Plus - UI组件库
• Pinia - 状态管理
• Vue Router - 路由管理
• Axios - HTTP客户端

开发建议

添加新页面

1. 在 src/views/ 创建Vue组件
2. 在 src/router/index.ts 添加路由
3. 在 Layout.vue 添加菜单项

添加API接口

在 src/api/index.ts 添加：

export const api = {
  yourModule: {
    yourMethod: (params) => request.get('/api/your-endpoint', { params })
  }
}

添加状态管理

在 src/stores/ 创建Pinia store：

import { defineStore } from 'pinia'

export const useYourStore = defineStore('your', () => {
  // state, actions
})

Docker部署

# 构建镜像
docker build -t yarp-gateway-admin .

# 运行容器
docker run -d -p 5173:80 yarp-gateway-admin

License

MIT