docs(console): add task 12 documentation for frontend project creation

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

@@ -0,0 +1,152 @@
+# 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:
+```bash
+cd /Users/movingsam/Fengling.Refactory.Buiding/src
+npm create vite@latest Fengling.Console.Web -- --template vue-ts
+```
+
+### Step 2: Install dependencies
+
+Run:
+```bash
+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`
+```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
+```
+
+Create: `src/Fengling.Console.Web/.env.production`
+```env
+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`
+```typescript
+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
+
+```bash
+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