fengling-console/docs/task-12-create-console-web-project.md

Task 12: Create Fengling.Console.Web Frontend Project

Task Description

Files:

• Create: src/Fengling.Console.Web/ (Vue 3 + Vite project)
• Create: src/Fengling.Console.Web/.env.development
• Create: src/Fengling.Console.Web/.env.production
• Create: src/Fengling.Console.Web/vite.config.ts
• Create: src/Fengling.Console.Web/src/api/auth.ts
• Create: src/Fengling.Console.Web/src/api/gateway.ts
• Create: src/Fengling.Console.Web/src/stores/auth.ts
• Create: src/Fengling.Console.Web/src/router/index.ts
• Create: src/Fengling.Console.Web/src/views/Auth/Login.vue
• Create: src/Fengling.Console.Web/src/views/Auth/Callback.vue
• Create: src/Fengling.Console.Web/src/views/Gateway/Dashboard.vue
• Create: src/Fengling.Console.Web/src/views/OAuth/ClientList.vue
• Create: src/Fengling.Console.Web/src/views/Users/UserList.vue

Implementation Steps

Step 1: Create Vue project

Run:

cd /Users/movingsam/Fengling.Refactory.Buiding/src
npm create vite@latest Fengling.Console.Web -- --template vue-ts

Step 2: Install dependencies

Run:

cd Fengling.Console.Web
npm install
npm install element-plus @element-plus/icons-vue pinia vue-router axios

Step 3: Configure environment variables

Create: src/Fengling.Console.Web/.env.development

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

Create: src/Fengling.Console.Web/.env.production

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

Step 4: Configure Vite

Create: src/Fengling.Console.Web/vite.config.ts

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')
      }
    }
  }
}))

Step 5: Create API modules

Create: src/Fengling.Console.Web/src/api/auth.ts - AuthService API封装 Create: src/Fengling.Console.Web/src/api/gateway.ts - Gateway API封装

Step 6: Create store

Create: src/Fengling.Console.Web/src/stores/auth.ts - Pinia store for auth

Step 7: Create router

Create: src/Fengling.Console.Web/src/router/index.ts - Vue Router配置

Step 8: Create views

Create authentication views:

• src/Fengling.Console.Web/src/views/Auth/Login.vue
• src/Fengling.Console.Web/src/views/Auth/Callback.vue

Create gateway management views:

• src/Fengling.Console.Web/src/views/Gateway/Dashboard.vue

Create OAuth management views:

• src/Fengling.Console.Web/src/views/OAuth/ClientList.vue

Create user management views:

• src/Fengling.Console.Web/src/views/Users/UserList.vue

Step 9: Commit

git add src/Fengling.Console.Web/
git commit -m "feat(console): create Vue 3 frontend project with OAuth2 and basic modules"

Context

This task creates the Fengling.Console.Web frontend project using Vue 3 + Vite. The frontend directly calls AuthService and YarpGateway APIs through Vite proxy configuration.

Tech Stack: Vue 3.4, TypeScript, Vite 5.4, Element Plus, Pinia, Vue Router 4, Axios

Verification

• Vue 3 project created with Vite
• Dependencies installed (Element Plus, Pinia, Vue Router, Axios)
• Environment variables configured
• Vite proxy configured for auth and gateway APIs
• API modules created
• Auth store created
• Router configured
• Authentication views created (Login, Callback)
• Dashboard view created
• OAuth Client management view created
• User management view created
• Build succeeds
• Committed to git

Notes

• OAuth2 authorization code flow ready but AuthService endpoint not yet implemented
• Password flow login implemented
• Gateway management views can be migrated from YarpGateway.Admin
• Token refresh interceptor to be added