# 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 - 优先使用 `