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>`