AIGC/demo/frontend/README.md

# AIGC Demo - Vue.js 前端

这是一个基于 Vue.js 3 + Element Plus 的现代化前端应用，为 AIGC Demo 项目提供用户界面。

## 🚀 技术栈

- **Vue.js 3** - 渐进式 JavaScript 框架
- **Element Plus** - Vue 3 组件库
- **Vue Router** - 官方路由管理器
- **Pinia** - Vue 状态管理库
- **Axios** - HTTP 客户端
- **Vite** - 现代化构建工具

## 📁 项目结构

```
frontend/
├── src/
│   ├── components/          # 公共组件
│   │   ├── NavBar.vue      # 导航栏
│   │   └── Footer.vue      # 页脚
│   ├── views/              # 页面组件
│   │   ├── Home.vue        # 首页
│   │   ├── Login.vue       # 登录页
│   │   ├── Register.vue    # 注册页
│   │   ├── Orders.vue      # 订单列表
│   │   └── ...
│   ├── router/             # 路由配置
│   │   └── index.js
│   ├── stores/             # 状态管理
│   │   ├── user.js         # 用户状态
│   │   └── orders.js       # 订单状态
│   ├── api/                # API 接口
│   │   ├── request.js      # Axios 配置
│   │   ├── auth.js         # 认证接口
│   │   ├── orders.js       # 订单接口
│   │   └── payments.js     # 支付接口
│   ├── assets/             # 静态资源
│   ├── utils/              # 工具函数
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── index.html              # HTML 模板
├── package.json            # 依赖配置
├── vite.config.js          # Vite 配置
└── README.md               # 说明文档
```

## 🛠️ 安装和运行

### 前置要求

- Node.js 16+ 
- npm 或 yarn

### 安装依赖

```bash
cd frontend
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 🔧 配置说明

### Vite 配置

```javascript
// vite.config.js
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 后端服务地址
        changeOrigin: true
      }
    }
  }
})
```

### API 代理

前端开发服务器会自动将 `/api` 请求代理到后端服务器 `http://localhost:8080`，这样避免了跨域问题。

## 📱 功能特性

### 🎨 现代化 UI
- **Element Plus** 组件库，提供丰富的 UI 组件
- **响应式设计**，支持桌面、平板、手机
- **主题定制**，统一的视觉风格
- **图标支持**，Element Plus Icons

### 🔐 用户认证
- **登录/注册**，完整的用户认证流程
- **表单验证**，实时验证用户输入
- **状态管理**，Pinia 管理用户状态
- **路由守卫**，保护需要认证的页面

### 📋 订单管理
- **订单列表**，分页、筛选、搜索
- **订单详情**，完整信息展示
- **订单创建**，动态表单
- **状态管理**，订单状态流转

### 💳 支付集成
- **多种支付方式**，支付宝、PayPal
- **支付状态跟踪**，实时状态更新
- **支付记录**，完整的支付历史

### 👨‍💼 管理功能
- **用户管理**，用户列表和操作
- **订单管理**，管理员订单管理
- **权限控制**，基于角色的访问控制

## 🔄 状态管理

### 用户状态 (stores/user.js)

```javascript
export const useUserStore = defineStore('user', () => {
  const user = ref(null)
  const token = ref(localStorage.getItem('token'))
  const isAuthenticated = computed(() => !!token.value && !!user.value)
  
  const loginUser = async (credentials) => { /* ... */ }
  const registerUser = async (userData) => { /* ... */ }
  const logoutUser = async () => { /* ... */ }
  
  return { user, token, isAuthenticated, loginUser, registerUser, logoutUser }
})
```

### 订单状态 (stores/orders.js)

```javascript
export const useOrderStore = defineStore('orders', () => {
  const orders = ref([])
  const currentOrder = ref(null)
  const loading = ref(false)
  
  const fetchOrders = async (params) => { /* ... */ }
  const createNewOrder = async (orderData) => { /* ... */ }
  const updateOrder = async (id, status) => { /* ... */ }
  
  return { orders, currentOrder, loading, fetchOrders, createNewOrder, updateOrder }
})
```

## 🌐 API 接口

### 认证接口

```javascript
// 登录
POST /api/auth/login
{
  "username": "user",
  "password": "password"
}

// 注册
POST /api/auth/register
{
  "username": "newuser",
  "email": "user@example.com",
  "password": "password"
}

// 获取当前用户
GET /api/auth/me
```

### 订单接口

```javascript
// 获取订单列表
GET /api/orders?page=0&size=10&status=PENDING

// 获取订单详情
GET /api/orders/{id}

// 创建订单
POST /api/orders/create
{
  "orderType": "PRODUCT",
  "currency": "CNY",
  "orderItems": [...]
}

// 更新订单状态
POST /api/orders/{id}/status
{
  "status": "PAID",
  "notes": "备注"
}
```

## 🎯 路由配置

```javascript
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首页' }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { title: '登录', guest: true }
  },
  {
    path: '/orders',
    name: 'Orders',
    component: Orders,
    meta: { title: '订单管理', requiresAuth: true }
  },
  {
    path: '/admin/orders',
    name: 'AdminOrders',
    component: AdminOrders,
    meta: { title: '订单管理', requiresAuth: true, requiresAdmin: true }
  }
]
```

## 🔒 权限控制

### 路由守卫

```javascript
router.beforeEach((to, from, next) => {
  const userStore = useUserStore()
  
  // 检查是否需要认证
  if (to.meta.requiresAuth && !userStore.isAuthenticated) {
    next('/login')
    return
  }
  
  // 检查是否需要管理员权限
  if (to.meta.requiresAdmin && !userStore.isAdmin) {
    next('/')
    return
  }
  
  next()
})
```

### API 拦截器

```javascript
// 请求拦截器 - 添加认证头
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器 - 处理错误
api.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      // 未授权，跳转到登录页
      localStorage.removeItem('token')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)
```

## 📱 响应式设计

### 断点配置

```css
/* 移动端 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
  }
}

/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
  .content {
    padding: 20px;
  }
}

/* 桌面端 */
@media (min-width: 1025px) {
  .container {
    max-width: 1200px;
  }
}
```

## 🚀 部署

### 构建生产版本

```bash
npm run build
```

构建完成后，`dist` 目录包含所有静态文件。

### Nginx 配置

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 🔧 开发工具

### VS Code 推荐插件

- **Vue Language Features (Volar)** - Vue 3 支持
- **TypeScript Vue Plugin (Volar)** - TypeScript 支持
- **ESLint** - 代码检查
- **Prettier** - 代码格式化
- **Auto Rename Tag** - 自动重命名标签
- **Bracket Pair Colorizer** - 括号配对着色

### 调试工具

- **Vue DevTools** - Vue 开发者工具
- **Pinia DevTools** - Pinia 状态管理工具
- **Element Plus DevTools** - Element Plus 组件调试

## 📝 开发规范

### 组件命名

- 组件文件名使用 PascalCase：`UserProfile.vue`
- 组件名使用 PascalCase：`UserProfile`

### 文件结构

```
components/
├── common/           # 通用组件
├── layout/          # 布局组件
└── business/        # 业务组件
```

### 代码风格

- 使用 Composition API
- 优先使用 `<script setup>` 语法
- 使用 TypeScript 类型定义
- 遵循 ESLint 规则

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支：`git checkout -b feature/new-feature`
3. 提交更改：`git commit -am 'Add new feature'`
4. 推送分支：`git push origin feature/new-feature`
5. 提交 Pull Request

## 📄 许可证

MIT License

---

**注意**: 这是一个演示项目，生产环境使用前请进行充分的安全测试和性能优化。