# 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