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

安装依赖

cd frontend
npm install

开发模式

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

预览生产版本

npm run preview

🔧 配置说明

Vite 配置

// 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)

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)

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 接口

认证接口

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

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

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

订单接口

// 获取订单列表
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": "备注"
}

🎯 路由配置

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 }
  }
]

🔒 权限控制

路由守卫

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 拦截器

// 请求拦截器 - 添加认证头
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)
  }
)

📱 响应式设计

断点配置

/* 移动端 */
@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;
  }
}

🚀 部署

构建生产版本

npm run build

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

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

---

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