feat(console): create Vue 3 frontend project with OAuth2 and basic modules

2026-02-02 10:33:23 +08:00 · 2026-02-02 10:33:23 +08:00 · 4c3337a408
commit 4c3337a408
parent 153d33f7af
28 changed files with 4259 additions and 0 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,9 @@
 {
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.2",
    "axios": "^1.13.4",
    "element-plus": "^2.13.2",
    "pinia": "^3.0.4",
    "vue-router": "^5.0.1"
  }
 }
--- a/src/Fengling.Console.Web/.env.development
+++ b/src/Fengling.Console.Web/.env.development
@ -0,0 +1,7 @@
 # Fengling.Console.Web 运管中心前端
 ## 开发环境配置
 VITE_AUTH_SERVICE_URL=http://localhost:5000
 VITE_GATEWAY_SERVICE_URL=http://localhost:5001
 VITE_CLIENT_ID=fengling-console
 VITE_REDIRECT_URI=http://localhost:5173/auth/callback
--- a/src/Fengling.Console.Web/.env.production
+++ b/src/Fengling.Console.Web/.env.production
@ -0,0 +1,7 @@
 # Fengling.Console.Web 运管中心前端
 ## 生产环境配置
 VITE_AUTH_SERVICE_URL=https://auth.fengling.local
 VITE_GATEWAY_SERVICE_URL=https://gateway.fengling.local
 VITE_CLIENT_ID=fengling-console
 VITE_REDIRECT_URI=https://console.fengling.local/auth/callback
--- a/src/Fengling.Console.Web/.gitignore
+++ b/src/Fengling.Console.Web/.gitignore
@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/src/Fengling.Console.Web/README.md
+++ b/src/Fengling.Console.Web/README.md
@ -0,0 +1,139 @@
 # Fengling Console.Web - 风铃运管中心前端
 ## 项目概述
 统一运维管理平台前端，用于管理网关配置、OAuth应用、用户等。
 ## 技术栈
 - Vue 3.4
 - TypeScript
 - Vite 5.4
 - Element Plus
 - Pinia
 - Vue Router 4
 - Axios
 ## 功能模块
 ### 1. 认证模块
 - OAuth2 授权码流登录
 - 密码流登录
 - Token 自动刷新
 - 登出功能
 ### 2. 网关管理
 - 租户列表和管理
 - 租户路由配置
 - 集群实例管理
 - 全局路由配置
 - 负载均衡策略
 ### 3. OAuth 应用管理
 - OAuth Client CRUD
 - 重定向 URI 配置
 - 授权类型配置
 - Client 状态管理
 ### 4. 用户管理
 - 用户列表
 - 角色分配
 - 租户分配
 - 用户状态管理
 ## 环境变量
 ### 开发环境 (.env.development)
 ```env
 VITE_AUTH_SERVICE_URL=http://localhost:5000
 VITE_GATEWAY_SERVICE_URL=http://localhost:5001
 VITE_CLIENT_ID=fengling-console
 VITE_REDIRECT_URI=http://localhost:5173/auth/callback
 ```
 ### 生产环境 (.env.production)
 ```env
 VITE_AUTH_SERVICE_URL=https://auth.fengling.local
 VITE_GATEWAY_SERVICE_URL=https://gateway.fengling.local
 ```
 ## 开发指南
 ### 安装依赖
 ```bash
 npm install
 ```
 ### 启动开发服务器
 ```bash
 npm run dev
 ```
 访问: http://localhost:5173
 ### 构建生产版本
 ```bash
 npm run build
 ```
 ### 预览生产构建
 ```bash
 npm run preview
 ```
 ## 目录结构
 ```
 src/
 ├── api/
 │   ├── auth.ts          # AuthService API封装
 │   └── gateway.ts      # Gateway API封装
 ├── components/         # 公共组件
 ├── stores/
 │   └── auth.ts          # Pinia store for auth
 ├── router/
 │   └── index.ts         # Vue Router配置
 └── views/
    ├── Auth/             # 认证相关页面
    │   ├── Login.vue
    │   └── Callback.vue
    ├── Gateway/          # 网关管理页面
    │   └── Dashboard.vue
    ├── OAuth/            # OAuth应用管理
    │   └── ClientList.vue
    └── Users/            # 用户管理
        └── UserList.vue
 ```
 ## API代理配置
 Vite 开发服务器配置了以下 API 代理：
 - `/api/auth/*` → `http://localhost:5000` (AuthService)
 - `/api/gateway/*` → `http://localhost:5001` (YarpGateway)
 ## OAuth2 集成
 Client 已在 AuthService 的 SeedData 中预注册：
 ```yaml
 Client ID: fengling-console
 授权类型: authorization_code, refresh_token
 重定向 URI: http://console.fengling.local/auth/callback
 作用域: api, offline_access
 ```
 ## 后续开发
 ### 迁移任务
 - [ ] 迁移 TenantList.vue
 - [ ] 迁移 TenantRoutes.vue
 - [ ] 迁移 ClusterInstances.vue
 - [ ] 迁移 GlobalRoutes.vue
 ### 功能增强
 - [ ] Token 自动刷新拦截器
 - [ ] 请求错误统一处理
 - [ ] Loading 状态管理
 - [ ] 权限控制
 - [ ] 完善 OAuth2 授权码流
--- a/src/Fengling.Console.Web/index.html
+++ b/src/Fengling.Console.Web/index.html
@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fengling-console-web</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/src/Fengling.Console.Web/package-lock.json
+++ b/src/Fengling.Console.Web/package-lock.json
--- a/src/Fengling.Console.Web/package.json
+++ b/src/Fengling.Console.Web/package.json
@ -0,0 +1,22 @@
 {
  "name": "fengling-console-web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.24"
  },
  "devDependencies": {
    "@types/node": "^24.10.1",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/tsconfig": "^0.8.1",
    "typescript": "~5.9.3",
    "vite": "^7.2.4",
    "vue-tsc": "^3.1.4"
  }
 }
--- a/src/Fengling.Console.Web/public/vite.svg
+++ b/src/Fengling.Console.Web/public/vite.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/Fengling.Console.Web/src/App.vue
+++ b/src/Fengling.Console.Web/src/App.vue
@ -0,0 +1,30 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
 </script>
 <template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
 </template>
 <style scoped>
 .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
 }
 .logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
 }
 </style>
--- a/src/Fengling.Console.Web/src/api/auth.ts
+++ b/src/Fengling.Console.Web/src/api/auth.ts
@ -0,0 +1,97 @@
 import axios from 'axios'
 import type { AxiosInstance } from 'axios'
 const authAxios: AxiosInstance = axios.create({
  baseURL: '/api/auth',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
 })
 authAxios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
 )
 export const authService = {
  async login(username: string, password: string) {
    const response = await authAxios.post('/connect/token', new URLSearchParams({
      grant_type: 'password',
      username,
      password,
      scope: 'api offline_access',
    }), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    return response.data
  },
  async refreshToken(refreshToken: string) {
    const response = await authAxios.post('/connect/token', new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token: refreshToken,
      scope: 'api offline_access',
    }), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    return response.data
  },
  async logout() {
    await authAxios.post('/connect/logout')
    localStorage.removeItem('access_token')
    localStorage.removeItem('refresh_token')
    localStorage.removeItem('user_info')
  },
  async getClients() {
    const response = await authAxios.get('/api/oauthclients')
    return response.data
  },
  async createClient(client: any) {
    const response = await authAxios.post('/api/oauthclients', client)
    return response.data
  },
  async updateClient(id: number, client: any) {
    const response = await authAxios.put(`/api/oauthclients/${id}`, client)
    return response.data
  },
  async deleteClient(id: number) {
    await authAxios.delete(`/api/oauthclients/${id}`)
  },
  initiateOAuthLogin() {
    const clientId = import.meta.env.VITE_CLIENT_ID || 'fengling-console'
    const redirectUri = import.meta.env.VITE_REDIRECT_URI || 'http://localhost:5173/auth/callback'
    const scope = 'api offline_access'
    const params = new URLSearchParams({
      response_type: 'code',
      client_id: clientId,
      redirect_uri: redirectUri,
      scope: scope,
      state: Date.now().toString(),
    })
    const authServiceUrl = import.meta.env.VITE_AUTH_SERVICE_URL || 'http://localhost:5000'
    window.location.href = `${authServiceUrl}/connect/authorize?${params.toString()}`
  },
 }
 export default authAxios
--- a/src/Fengling.Console.Web/src/api/gateway.ts
+++ b/src/Fengling.Console.Web/src/api/gateway.ts
@ -0,0 +1,88 @@
 import axios from 'axios'
 const gatewayAxios = axios.create({
  baseURL: '/api/gateway',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
 })
 gatewayAxios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
 )
 export const gatewayService = {
  async getTenants() {
    const response = await gatewayAxios.get('/tenants')
    return response.data
  },
  async getTenant(id: number) {
    const response = await gatewayAxios.get(`/tenants/${id}`)
    return response.data
  },
  async createTenant(tenant: any) {
    const response = await gatewayAxios.post('/tenants', tenant)
    return response.data
  },
  async updateTenant(id: number, tenant: any) {
    const response = await gatewayAxios.put(`/tenants/${id}`, tenant)
    return response.data
  },
  async deleteTenant(id: number) {
    await gatewayAxios.delete(`/tenants/${id}`)
  },
  async getTenantRoutes(tenantId: number) {
    const response = await gatewayAxios.get(`/tenants/${tenantId}/routes`)
    return response.data
  },
  async createTenantRoute(tenantId: number, route: any) {
    const response = await gatewayAxios.post(`/tenants/${tenantId}/routes`, route)
    return response.data
  },
  async updateTenantRoute(id: number, route: any) {
    const response = await gatewayAxios.put(`/routes/${id}`, route)
    return response.data
  },
  async deleteTenantRoute(id: number) {
    await gatewayAxios.delete(`/routes/${id}`)
  },
  async getClusterInstances(clusterId: number) {
    const response = await gatewayAxios.get(`/clusters/${clusterId}/instances`)
    return response.data
  },
  async createClusterInstance(clusterId: number, instance: any) {
    const response = await gatewayAxios.post(`/clusters/${clusterId}/instances`, instance)
    return response.data
  },
  async updateClusterInstance(id: number, instance: any) {
    const response = await gatewayAxios.put(`/instances/${id}`, instance)
    return response.data
  },
  async deleteClusterInstance(id: number) {
    await gatewayAxios.delete(`/instances/${id}`)
  },
 }
 export default gatewayAxios
--- a/src/Fengling.Console.Web/src/assets/vue.svg
+++ b/src/Fengling.Console.Web/src/assets/vue.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/Fengling.Console.Web/src/components/HelloWorld.vue
+++ b/src/Fengling.Console.Web/src/components/HelloWorld.vue
@ -0,0 +1,41 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 defineProps<{ msg: string }>()
 const count = ref(0)
 </script>
 <template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 <style scoped>
 .read-the-docs {
  color: #888;
 }
 </style>
--- a/src/Fengling.Console.Web/src/main.ts
+++ b/src/Fengling.Console.Web/src/main.ts
@ -0,0 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 createApp(App).mount('#app')
--- a/src/Fengling.Console.Web/src/router/index.ts
+++ b/src/Fengling.Console.Web/src/router/index.ts
@ -0,0 +1,79 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Auth/Login.vue'),
    meta: { requiresAuth: false },
  },
  {
    path: '/auth/callback',
    name: 'AuthCallback',
    component: () => import('@/views/Auth/Callback.vue'),
    meta: { requiresAuth: false },
  },
  {
    path: '/',
    name: 'Dashboard',
    component: () => import('@/views/Gateway/Dashboard.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/tenants',
    name: 'TenantList',
    component: () => import('@/views/Gateway/TenantList.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/tenants/:tenantId/routes',
    name: 'TenantRoutes',
    component: () => import('@/views/Gateway/TenantRoutes.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/clusters',
    name: 'ClusterInstances',
    component: () => import('@/views/Gateway/ClusterInstances.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/routes/global',
    name: 'GlobalRoutes',
    component: () => import('@/views/Gateway/GlobalRoutes.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/oauth/clients',
    name: 'OAuthClients',
    component: () => import('@/views/OAuth/ClientList.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/users',
    name: 'UserList',
    component: () => import('@/views/Users/UserList.vue'),
    meta: { requiresAuth: true },
  },
 ]
 const router = createRouter({
  history: createWebHistory(),
  routes,
 })
 router.beforeEach((to, _from, next) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.isAuthenticated.value) {
    next({ name: 'Login' })
  } else if (to.name === 'Login' && authStore.isAuthenticated.value) {
    next({ name: 'Dashboard' })
  } else {
    next()
  }
 })
 export default router
--- a/src/Fengling.Console.Web/src/stores/auth.ts
+++ b/src/Fengling.Console.Web/src/stores/auth.ts
@ -0,0 +1,66 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 interface User {
  id: number
  userName: string
  email: string
  realName: string
  tenantId: number
  roles: string[]
 }
 export const useAuthStore = defineStore('auth', () => {
  const accessToken = ref<string | null>(null)
  const refreshToken = ref<string | null>(null)
  const user = ref<User | null>(null)
  const isAuthenticated = computed(() => !!accessToken.value)
  function setTokens(accessTokenValue: string, refreshTokenValue: string) {
    accessToken.value = accessTokenValue
    refreshToken.value = refreshTokenValue
    localStorage.setItem('access_token', accessTokenValue)
    localStorage.setItem('refresh_token', refreshTokenValue)
  }
  function setUser(userData: User) {
    user.value = userData
    localStorage.setItem('user_info', JSON.stringify(userData))
  }
  function clearAuth() {
    accessToken.value = null
    refreshToken.value = null
    user.value = null
    localStorage.removeItem('access_token')
    localStorage.removeItem('refresh_token')
    localStorage.removeItem('user_info')
  }
  function loadFromStorage() {
    const storedToken = localStorage.getItem('access_token')
    const storedRefreshToken = localStorage.getItem('refresh_token')
    const storedUser = localStorage.getItem('user_info')
    if (storedToken) {
      accessToken.value = storedToken
    }
    if (storedRefreshToken) {
      refreshToken.value = storedRefreshToken
    }
    if (storedUser) {
      user.value = JSON.parse(storedUser)
    }
  }
  return {
    accessToken,
    refreshToken,
    user,
    isAuthenticated,
    setTokens,
    setUser,
    clearAuth,
    loadFromStorage,
  }
 })
--- a/src/Fengling.Console.Web/src/style.css
+++ b/src/Fengling.Console.Web/src/style.css
@ -0,0 +1,79 @@
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
 }
 a:hover {
  color: #535bf2;
 }
 body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
 }
 h1 {
  font-size: 3.2em;
  line-height: 1.1;
 }
 button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
 button:hover {
  border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }
 .card {
  padding: 2em;
 }
 #app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
 }
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
 }
--- a/src/Fengling.Console.Web/src/views/Auth/Callback.vue
+++ b/src/Fengling.Console.Web/src/views/Auth/Callback.vue
@ -0,0 +1,55 @@
 <template>
  <div class="callback-container">
    <el-card>
      <template #header>
        <h2>处理中...</h2>
      </template>
      <el-empty description="正在处理OAuth回调" />
    </el-card>
  </div>
 </template>
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 const router = useRouter()
 const route = useRoute()
 onMounted(() => {
  const code = route.query.code as string
  if (code) {
    ElMessage.success('OAuth登录成功')
    setTimeout(() => {
      router.push({ name: 'Login' })
    }, 2000)
  } else {
    ElMessage.error('无效的OAuth回调')
    setTimeout(() => {
      router.push({ name: 'Login' })
    }, 2000)
  }
 })
 </script>
 <style scoped>
 .callback-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f2f5;
 }
 .el-card {
  width: 400px;
  text-align: center;
 }
 h2 {
  margin: 0;
  color: #409eff;
 }
 </style>
--- a/src/Fengling.Console.Web/src/views/Auth/Login.vue
+++ b/src/Fengling.Console.Web/src/views/Auth/Login.vue
@ -0,0 +1,100 @@
 <template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <h2>风铃运管中心</h2>
      </template>
      <el-form :model="loginForm" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
            @keyup.enter="handleLogin"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleLogin" style="width: 100%">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
 </template>
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { authService } from '@/api/auth'
 import { useAuthStore } from '@/stores/auth'
 const router = useRouter()
 const authStore = useAuthStore()
 const formRef = ref<FormInstance>()
 const loading = ref(false)
 const loginForm = reactive({
  username: '',
  password: '',
 })
 const rules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度不能少于3个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' },
  ],
 }
 const handleLogin = async () => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  loading.value = true
  try {
    const response: any = await authService.login(loginForm.username, loginForm.password)
    authStore.setTokens(response.access_token, response.refresh_token)
    ElMessage.success('登录成功')
    router.push({ name: 'Dashboard' })
  } catch (error: any) {
    ElMessage.error(error.response?.data?.error_description || '登录失败，请检查用户名和密码')
  } finally {
    loading.value = false
  }
 }
 </script>
 <style scoped>
 .login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .login-card {
  width: 400px;
 }
 .login-card :deep(.el-card__header) {
  text-align: center;
 }
 h2 {
  margin: 0;
  color: #409eff;
 }
 </style>
--- a/src/Fengling.Console.Web/src/views/Gateway/Dashboard.vue
+++ b/src/Fengling.Console.Web/src/views/Gateway/Dashboard.vue
@ -0,0 +1,126 @@
 <template>
  <div class="dashboard">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          @select="handleMenuSelect"
        >
          <el-menu-item index="Dashboard">
            <el-icon><Monitor /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="TenantList">
            <el-icon><OfficeBuilding /></el-icon>
            <span>租户管理</span>
          </el-menu-item>
          <el-menu-item index="ClusterInstances">
            <el-icon><Connection /></el-icon>
            <span>集群实例</span>
          </el-menu-item>
          <el-menu-item index="GlobalRoutes">
            <el-icon><Share /></el-icon>
            <span>全局路由</span>
          </el-menu-item>
          <el-menu-item index="OAuthClients">
            <el-icon><Key /></el-icon>
            <span>OAuth应用</span>
          </el-menu-item>
          <el-menu-item index="UserList">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="Logout" @click="handleLogout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出登录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'Dashboard' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ currentBreadcrumb }}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view />
      </el-main>
    </el-container>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Monitor, OfficeBuilding, Connection, Share, Key, User, SwitchButton } from '@element-plus/icons-vue'
 import { authService } from '@/api/auth'
 import { useAuthStore } from '@/stores/auth'
 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
 const activeMenu = ref('Dashboard')
 const currentBreadcrumb = computed(() => {
  const breadcrumbMap: Record<string, string> = {
    Dashboard: '仪表盘',
    TenantList: '租户管理',
    TenantRoutes: '租户路由',
    ClusterInstances: '集群实例',
    GlobalRoutes: '全局路由',
    OAuthClients: 'OAuth应用',
    UserList: '用户管理',
  }
  return breadcrumbMap[route.name as string] || ''
 })
 const handleMenuSelect = (index: string) => {
  if (index === 'Logout') {
    handleLogout()
  } else {
    activeMenu.value = index
  }
 }
 const handleLogout = async () => {
  try {
    await authService.logout()
    authStore.clearAuth()
    ElMessage.success('退出成功')
    router.push({ name: 'Login' })
  } catch (error) {
    console.error('Logout error:', error)
    ElMessage.error('退出失败')
  }
 }
 </script>
 <style scoped>
 .dashboard {
  height: 100vh;
 }
 .el-container {
  height: 100%;
 }
 .el-aside {
  background-color: #545c64;
  color: #fff;
 }
 .el-menu {
  border-right: none;
 }
 .el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
 }
 .el-main {
  background-color: #f0f2f5;
  padding: 20px;
 }
 </style>
--- a/src/Fengling.Console.Web/src/views/OAuth/ClientList.vue
+++ b/src/Fengling.Console.Web/src/views/OAuth/ClientList.vue
@ -0,0 +1,213 @@
 <template>
  <div class="oauth-clients">
    <el-container>
      <el-card>
        <template #header>
          <div class="header-content">
            <h2>OAuth应用管理</h2>
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>
              添加应用
            </el-button>
          </div>
        </template>
        <el-table :data="clients" style="width: 100%">
          <el-table-column prop="displayName" label="应用名称" />
          <el-table-column prop="clientId" label="Client ID" />
          <el-table-column prop="clientType" label="类型" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
                {{ row.status === 'active' ? '活跃' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          @current-change="fetchClients"
          layout="total, prev, pager, next"
          style="margin-top: 20px"
        />
      </el-card>
    </el-container>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="应用名称" prop="displayName">
          <el-input v-model="form.displayName" />
        </el-form-item>
        <el-form-item label="Client ID" prop="clientId">
          <el-input v-model="form.clientId" />
        </el-form-item>
        <el-form-item label="Client Secret" prop="clientSecret">
          <el-input v-model="form.clientSecret" type="password" show-password />
        </el-form-item>
        <el-form-item label="重定向URI" prop="redirectUris">
          <el-input v-model="form.redirectUrisString" placeholder="多个URI用逗号分隔" />
        </el-form-item>
        <el-form-item label="授权类型" prop="grantTypes">
          <el-select v-model="form.grantTypes" multiple>
            <el-option label="授权码" value="authorization_code" />
            <el-option label="密码" value="password" />
            <el-option label="刷新令牌" value="refresh_token" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status">
            <el-option label="活跃" value="active" />
            <el-option label="禁用" value="inactive" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { authService } from '@/api/auth'
 const clients = ref<any[]>([])
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 const dialogVisible = ref(false)
 const dialogTitle = ref('添加OAuth应用')
 const formRef = ref<FormInstance>()
 const isEdit = ref(false)
 const form = reactive({
  id: 0,
  displayName: '',
  clientId: '',
  clientSecret: '',
  redirectUrisString: '',
  grantTypes: ['authorization_code', 'refresh_token'],
  status: 'active',
 })
 const rules: FormRules = {
  displayName: [
    { required: true, message: '请输入应用名称', trigger: 'blur' },
  ],
  clientId: [
    { required: true, message: '请输入Client ID', trigger: 'blur' },
  ],
 }
 const fetchClients = async () => {
  try {
    const response = await authService.getClients()
    clients.value = Array.isArray(response) ? response : []
    total.value = clients.value.length
  } catch (error) {
    ElMessage.error('获取OAuth应用列表失败')
    console.error(error)
  }
 }
 const handleAdd = () => {
  dialogTitle.value = '添加OAuth应用'
  isEdit.value = false
  Object.assign(form, {
    id: 0,
    displayName: '',
    clientId: '',
    clientSecret: '',
    redirectUrisString: '',
    grantTypes: ['authorization_code', 'refresh_token'],
    status: 'active',
  })
  dialogVisible.value = true
 }
 const handleEdit = (row: any) => {
  dialogTitle.value = '编辑OAuth应用'
  isEdit.value = true
  Object.assign(form, {
    id: row.id,
    displayName: row.displayName,
    clientId: row.clientId,
    clientSecret: row.clientSecret || '',
    redirectUrisString: Array.isArray(row.redirectUris) ? row.redirectUris.join(',') : '',
    grantTypes: row.grantTypes,
    status: row.status,
  })
  dialogVisible.value = true
 }
 const handleDelete = async (row: any) => {
  try {
    await authService.deleteClient(row.id)
    ElMessage.success('删除成功')
    await fetchClients()
  } catch (error) {
    ElMessage.error('删除失败')
    console.error(error)
  }
 }
 const handleSubmit = async () => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  const formData = {
    ...form,
    redirectUris: form.redirectUrisString.split(',').map(uri => uri.trim()),
  }
  try {
    if (isEdit.value) {
      await authService.updateClient(formData.id, formData)
      ElMessage.success('更新成功')
    } else {
      await authService.createClient(formData)
      ElMessage.success('创建成功')
    }
    dialogVisible.value = false
    await fetchClients()
  } catch (error) {
    ElMessage.error('操作失败')
    console.error(error)
  }
 }
 onMounted(() => {
  fetchClients()
 })
 </script>
 <style scoped>
 .oauth-clients {
  padding: 20px;
 }
 .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
 }
 </style>
--- a/src/Fengling.Console.Web/src/views/Users/UserList.vue
+++ b/src/Fengling.Console.Web/src/views/Users/UserList.vue
@ -0,0 +1,82 @@
 <template>
  <div class="user-list">
    <el-container>
      <el-card>
        <template #header>
          <div class="header-content">
            <h2>用户管理</h2>
          </div>
        </template>
        <el-table :data="users" style="width: 100%">
          <el-table-column prop="userName" label="用户名" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="realName" label="姓名" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="tenantId" label="租户ID" width="100" />
          <el-table-column label="角色">
            <template #default="{ row }">
              <el-tag v-for="role in row.roles" :key="role" type="success" size="small">
                {{ role }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="emailConfirmed" label="邮箱验证" width="100">
            <template #default="{ row }">
              <el-tag :type="row.emailConfirmed ? 'success' : 'warning'" size="small">
                {{ row.emailConfirmed ? '已验证' : '未验证' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          @current-change="fetchUsers"
          layout="total, prev, pager, next"
          style="margin-top: 20px"
        />
      </el-card>
    </el-container>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 const users = ref<any[]>([])
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 const fetchUsers = async () => {
  try {
    const response = await fetch('/api/auth/users')
    const data = await response.json()
    users.value = Array.isArray(data) ? data : []
    total.value = users.value.length
  } catch (error) {
    ElMessage.error('获取用户列表失败')
    console.error(error)
  }
 }
 onMounted(() => {
  fetchUsers()
 })
 </script>
 <style scoped>
 .user-list {
  padding: 20px;
 }
 .header-content h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
 }
 </style>
--- a/src/Fengling.Console.Web/tsconfig.app.json
+++ b/src/Fengling.Console.Web/tsconfig.app.json
@ -0,0 +1,16 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vite/client"],
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
--- a/src/Fengling.Console.Web/tsconfig.json
+++ b/src/Fengling.Console.Web/tsconfig.json
@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/src/Fengling.Console.Web/tsconfig.node.json
+++ b/src/Fengling.Console.Web/tsconfig.node.json
@ -0,0 +1,26 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "types": ["node"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/src/Fengling.Console.Web/vite.config.ts
+++ b/src/Fengling.Console.Web/vite.config.ts
@ -0,0 +1,27 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 export default defineConfig(({ mode }) => ({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 5173,
    proxy: {
      '/api/auth': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api\/auth/, '')
      },
      '/api/gateway': {
        target: 'http://localhost:5001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api\/gateway/, '/api')
      }
    }
  }
 }))
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
		`@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`