meowrain/AI_OJ_FRONTEND
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(global-header): 重构全局头部组件及样式优化

Browse Source 
- 完全重写 GlobalHeader 组件结构，改用 div 语义及自定义样式替代原antd a-menu
- 新增 Logo 区域包含图标和标题，支持点击跳转首页功能
- 实现导航菜单动态渲染，根据路由权限过滤显示
- 用户区域支持未登录和已登录两种状态切换
- 未登录时展示登录、注册按钮，支持路由跳转
- 已登录时显示用户头像、用户名及下拉菜单，包含个人中心、设置和退出登录操作
- 引入 Arco Design 图标组件优化视觉表现
- 完善登出流程，清理本地Token并提示用户
- 优化响应式布局和交互体验，提升用户界面整体一致性与可用性
This commit is contained in:
meowrain
2025-12-14 16:19:28 +08:00
parent a13dae85b3
commit 05669a6570
24 changed files with 17378 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
docs/auth-api.md Normal file
View File

@@ -0,0 +1,243 @@
# AIOJ 认证服务 API 文档
## 概述
AIOJ认证服务提供JWT（JSON Web Token）为基础的用户认证和授权功能。该服务负责用户登录、令牌生成、令牌刷新和令牌验证。
**基础信息:**
- 服务名称: auth-service
- 基础路径: `/api`
- API版本: v1
- 认证方式: JWT Bearer Token
- 数据格式: JSON
## JWT认证机制
### 访问令牌 (Access Token)
- 有效期: 15分钟
- 用途: 访问受保护的API接口
- 格式: Bearer Token
### 刷新令牌 (Refresh Token)
- 有效期: 7天
- 用途: 获取新的Access Token
- 存储位置: Redis
### 请求头格式
```
Authorization: Bearer {access_token}
```
## API接口
### 1. 用户登录
用户通过用户名和密码进行登录认证。
**接口信息:**
- URL: `POST /api/v1/auth/login`
- 描述: 用户登录获取访问令牌
- 认证要求: 无需认证
**请求参数:**
```json
{
"userAccount": "string", // 用户账号
"userPassword": "string" // 用户密码
}
```
**请求示例:**
```bash
curl -X POST http://localhost:10011/api/v1/auth/login \
-H "Content-Type: application/json" \
-d '{
"userAccount": "admin",
"userPassword": "password123"
}'
```
**响应示例:**
```json
{
"success": true,
"message": "操作成功",
"data": {
"id": 1,
"userAccount": "admin",
"unionId": null,
"accessToken": "eyJhbGciOiJIUzI1NiJ9...",
"refreshToken": "eyJhbGciOiJIUzI1NiJ9...",
"expire": null
}
}
```
### 2. 令牌刷新
使用刷新令牌获取新的访问令牌。
**接口信息:**
- URL: `POST /api/v1/auth/refresh`
- 描述: 刷新访问令牌
- 认证要求: 无需认证
**请求参数:**
```
refreshToken=string // 刷新令牌
```
**请求示例:**
```bash
curl -X POST "http://localhost:10011/api/v1/auth/refresh?refreshToken=eyJhbGciOiJIUzI1NiJ9..."
```
**响应示例:**
```json
{
"success": true,
"message": "操作成功",
"data": {
"id": null,
"userAccount": null,
"unionId": null,
"accessToken": "eyJhbGciOiJIUzI1NiJ9...",
"refreshToken": "eyJhbGciOiJIUzI1NiJ9...",
"expire": null
}
}
```
### 3. 获取访问令牌
简化版的登录接口，仅返回访问令牌。
**接口信息:**
- URL: `POST /api/v1/auth/auth`
- 描述: 获取访问令牌（简化版登录）
- 认证要求: 无需认证
**请求参数:**
```json
{
"userAccount": "string", // 用户账号
"userPassword": "string" // 用户密码
}
```
**请求示例:**
```bash
curl -X POST http://localhost:10011/api/v1/auth/auth \
-H "Content-Type: application/json" \
-d '{
"userAccount": "admin",
"userPassword": "password123"
}'
```
**响应示例:**
```json
{
"success": true,
"message": "操作成功",
"data": "eyJhbGciOiJIUzI1NiJ9..."
}
```
### 4. 令牌验证
验证访问令牌的有效性。
**接口信息:**
- URL: `POST /api/v1/auth/validate`
- 描述: 验证访问令牌
- 认证要求: 可选的Authorization头
**请求头:**
```
Authorization: Bearer {access_token} // 可选
```
**请求示例:**
```bash
curl -X POST http://localhost:10011/api/v1/auth/validate \
-H "Authorization: Bearer eyJhbGciOiJIUzI1NiJ9..."
```
**响应示例:**
```json
{
"success": true,
"message": "操作成功",
"data": true
}
```
## 状态码说明
| 状态码 | 说明 | 描述 |
|--------|------|------|
| 200 | OK | 请求成功 |
| 400 | Bad Request | 请求参数错误 |
| 401 | Unauthorized | 未授权访问或令牌无效 |
| 403 | Forbidden | 禁止访问 |
| 500 | Internal Server Error | 服务器内部错误 |
## 错误响应格式
```json
{
"success": false,
"message": "错误描述",
"data": null
}
```
## 常见错误码
| 错误信息 | 可能原因 | 解决方案 |
|----------|----------|----------|
| "用户不存在或密码错误" | 用户账号或密码不正确 | 检查用户名和密码 |
| "Refresh Token 已过期" | 刷新令牌已过期 | 重新登录获取新令牌 |
| "Refresh Token 已失效" | 刷新令牌在Redis中不存在或已失效 | 重新登录获取新令牌 |
| "系统错误" | 服务间调用失败或系统异常 | 检查服务状态和网络连接 |
## 配置信息
### JWT配置
```yaml
jwt:
secret: "12345678901234567890123456789012" # 32字节密钥
access-expire: 900000 # 15分钟（毫秒）
refresh-expire: 604800000 # 7天（毫秒）
```
### 服务配置
```yaml
spring:
application:
name: auth-service
server:
port: 10011
servlet:
context-path: /api
```
## 安全注意事项
1. **令牌存储**: Access Token应存储在内存或HttpOnly Cookie中
2. **HTTPS传输**: 生产环境必须使用HTTPS协议
3. **密钥管理**: JWT密钥应定期轮换，使用强密钥
4. **令牌过期**: 合理设置令牌过期时间，平衡安全性和用户体验
5. **错误处理**: 不要在错误信息中泄露敏感信息
## 使用流程
1. **用户登录**: 调用`/login`接口获取Access Token和Refresh Token
2. **API访问**: 在请求头中携带Access Token访问受保护接口
3. **令牌刷新**: Access Token过期时使用Refresh Token获取新的Access Token
4. **令牌验证**: 可使用`/validate`接口验证Token有效性
## 联系信息
如有问题或建议，请联系开发团队。
---
*文档版本: v1.0*
*更新时间: 2025-12-14*

222
docs/home-page-optimization.md Normal file
View File

@@ -0,0 +1,222 @@
# 主页优化说明
## ✅ 已完成优化
我已经将主页从简单的 "HelloWorld" 重新设计为一个美观大方的现代化落地页。
## 🎨 页面布局
### 1. **Hero 区域（头部横幅）**
- **渐变背景**：紫色渐变（#667eea → #764ba2）
- **点阵图案背景**：增加视觉层次感
- **大标题**：AI Online Judge 带渐变文字效果
- **副标题**：智能编程评测平台 · 提升你的编程能力
- **CTA 按钮**：
- "开始刷题" - 跳转到题目列表（待实现）
- "AI 助手" - 跳转到 AI 聊天页面
- **浮动卡片**（大屏显示）：
- 算法题库
- 竞赛排行
- 实时评测
- 带浮动动画效果
### 2. **统计数据区域**
- 白色背景，投影效果
- 4 个统计指标：
- 📊 10,000+ 注册用户
- 📄 5,000+ 题目数量
- ✅ 100,000+ 提交次数
- 🏆 500+ 竞赛场次
### 3. **功能特色区域**
- 6 个功能卡片网格布局：
1. **海量题库**：涵盖算法、数据结构等多领域
2. **AI 辅助**：智能题解分析、代码优化建议
3. **实时评测**：毫秒级反馈、多语言支持
4. **竞赛系统**：定期竞赛、实时排行榜
5. **社区交流**：题解分享、经验交流
6. **数据分析**：学习数据统计、进度追踪
- **Hover 效果**：卡片上浮 + 阴影加深
### 4. **CTA 行动召唤区域**
- 渐变背景（与 Hero 一致）
- 根据登录状态显示不同按钮：
- 未登录：显示"免费注册"
- 已登录：显示"开始刷题"
## 🎯 设计特点
### 视觉设计
- **配色方案**：
- 主色：紫色渐变（#667eea → #764ba2）
- 背景：浅灰色（#f7f8fa）
- 文字：深灰色系统（#1d2129, #86909c）
- **圆角**：12-16px 柔和圆角
- **阴影**：多层次阴影营造深度
- **间距**：统一的 padding/margin 体系
### 交互效果
- ✨ 浮动卡片动画（3秒循环）
- 🎯 按钮 hover 效果
- 📈 卡片上浮效果（hover 时上移 8px）
- 💫 平滑过渡动画（0.3s ease）
### 响应式设计
- **桌面端**（>1024px）：
- 显示浮动卡片插图
- 功能卡片 3 列布局
- **平板端**（768-1024px）：
- 隐藏浮动卡片
- 功能卡片 2 列布局
- **移动端**（<768px）：
- 标题字号缩小
- 功能卡片单列布局
- 优化间距和 padding
## 🔧 技术实现
### Vue 3 组件
- 使用 `<script setup>` 语法
- 响应式状态管理（Pinia）
- 路由导航集成
### Arco Design 组件
- `a-button`：按钮组件
- `a-card`：卡片组件
- Icon 组件：各种图标
### SCSS 样式
- 嵌套选择器
- 变量和混合（通过 Arco Design CSS 变量）
- 媒体查询（响应式）
- 动画关键帧
### 智能逻辑
```typescript
// 根据登录状态显示不同按钮
v-if="userStore.loginUser.userRole === ACCESS_ENUM.NOT_LOGIN"
```
## 📱 页面预览结构
```
┌─────────────────────────────────────────┐
│ Hero 区域 (紫色渐变) │
│ AI Online Judge │
│ 智能编程评测平台 │
│ [开始刷题] [AI 助手] │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ 统计数据 (白色背景) │
│ 10,000+ 5,000+ 100,000+ 500+ │
│ 注册用户 题目数量 提交次数 竞赛 │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ 功能特色 │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │题库│ │AI │ │评测│ │
│ └────┘ └────┘ └────┘ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │竞赛│ │社区│ │数据│ │
│ └────┘ └────┘ └────┘ │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ CTA 区域 (紫色渐变) │
│ 准备好开始了吗？ │
│ [免费注册] 或 [开始刷题] │
└─────────────────────────────────────────┘
```
## 🚀 功能说明
### 导航功能
- **开始刷题**：跳转到题目列表（当前跳转到 /home，待题目列表页面完成后更新）
- **AI 助手**：跳转到 `/ai/chat` AI 聊天页面
- **免费注册**：跳转到 `/user/register` 注册页面（未登录时显示）
- **开始刷题**：跳转到题目列表（已登录时显示）
### 状态感知
- 自动检测用户登录状态
- 根据状态显示不同的 CTA 按钮
- 集成 Pinia store 状态管理
## 📝 待完善功能
1. **题目列表页面**
- 创建题目列表页面
- 更新 `goToProblems()` 方法的路由
2. **统计数据接口**
- 从后端获取真实统计数据
- 替换当前的硬编码数值
3. **动画优化**
- 页面加载动画
- 滚动触发动画（Intersection Observer）
4. **SEO 优化**
- 添加 meta 标签
- 优化标题和描述
## 🎨 样式亮点
### 渐变效果
```scss
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```
### 浮动动画
```scss
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
```
### 毛玻璃效果
```scss
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
```
### Hover 效果
```scss
&:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}
```
## 🧪 测试建议
### 视觉测试
- [ ] 各个区域布局正确
- [ ] 渐变和颜色显示正常
- [ ] 图标显示正确
- [ ] 卡片 hover 效果流畅
### 响应式测试
- [ ] 桌面端（1920px）：完整显示
- [ ] 笔记本（1366px）：布局合理
- [ ] 平板（768px）：卡片自适应
- [ ] 手机（375px）：单列布局
### 功能测试
- [ ] 按钮点击跳转正常
- [ ] 登录状态切换显示正确
- [ ] 动画流畅无卡顿
## 📊 性能优化
- ✅ 使用 SCSS 编写样式，构建时编译
- ✅ SVG 背景内联，减少 HTTP 请求
- ✅ 使用 CSS transform 实现动画（GPU 加速）
- ✅ 图标按需导入，减少包体积
## 相关文件
- [src/views/HomeView.vue](../../src/views/HomeView.vue) - 主页组件
- [src/store/user.ts](../../src/store/user.ts) - 用户状态管理
- [src/access/accessEnum.ts](../../src/access/accessEnum.ts) - 权限枚举
现在主页已经焕然一新，美观大方，符合现代 Web 应用的设计标准！🎉

216
docs/proxy-config.md Normal file
View File

@@ -0,0 +1,216 @@
# API 代理配置说明
## 配置完成
✅ 已成功配置 Vite API 代理转发功能
## 配置详情
### 1. Vite 代理配置 ([vite.config.ts](../../vite.config.ts:28-36))
```typescript
server: {
host: "0.0.0.0",
port: 3000,
open: true,
// API 代理配置
proxy: {
// 代理所有 /api 开头的请求
'/api': {
target: 'http://localhost:8085', // 后端服务器地址
changeOrigin: true, // 改变请求头中的 origin
secure: false, // 支持 https
},
},
}
```
### 2. 环境配置更新 ([.env.dev](../../.env.dev))
```env
VITE_API_URL=/api # 改为相对路径，使用代理
```
## 工作原理
```
前端请求流程：
┌─────────────┐
│ 前端应用 │
│ localhost:3001 │
└──────┬──────┘
│ 请求: /api/v1/auth/login
↓
┌──────────────┐
│ Vite 代理 │
│ 自动转发 │
└──────┬───────┘
│ 转发到: http://localhost:8085/api/v1/auth/login
↓
┌──────────────┐
│ 后端服务器 │
│ localhost:8085 │
└──────────────┘
```
### 请求示例
**前端发起请求：**
```typescript
// axios baseURL 为 '/api'
await login({ userAccount: 'admin', userPassword: 'password' })
// 实际请求 URL: http://localhost:3001/api/v1/auth/login
```
**Vite 代理自动转发：**
```
http://localhost:3001/api/v1/auth/login
↓
http://localhost:8085/api/v1/auth/login
```
## 配置说明
### proxy 配置项
- **`target`**: 后端服务器地址（`http://localhost:8085`）
- **`changeOrigin`**: 修改请求头的 origin，避免后端 CORS 限制
- **`secure`**: 是否验证 SSL 证书（开发环境设为 false）
- **`rewrite`**: （可选）重写请求路径
### 路径重写示例
如果后端 API 不包含 `/api` 前缀，可以使用 `rewrite`：
```typescript
proxy: {
'/api': {
target: 'http://localhost:8085',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
```
这样前端请求 `/api/v1/auth/login` 会被转发为 `http://localhost:8085/v1/auth/login`
## 已配置的 API
根据后端文档 ([auth-api.md](../../auth-api.md))，以下接口已配置代理：
- ✅ `POST /api/v1/auth/login` - 用户登录
- ✅ `POST /api/v1/auth/refresh` - 刷新令牌
- ✅ `POST /api/v1/auth/auth` - 获取访问令牌
- ✅ `POST /api/v1/auth/validate` - 验证令牌
## 跨域问题解决
### 开发环境
✅ 使用 Vite 代理转发，不会有跨域问题
### 生产环境
生产环境需要在后端配置 CORS，或者使用 Nginx 反向代理：
**Nginx 配置示例：**
```nginx
server {
listen 80;
server_name your-domain.com;
# 前端静态文件
location / {
root /var/www/html;
try_files $uri $uri/ /index.html;
}
# API 代理
location /api {
proxy_pass http://localhost:8085;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
```
## 测试代理
### 1. 启动后端服务
确保后端服务运行在 `localhost:8085`
### 2. 启动前端开发服务器
```bash
npm run dev
```
服务器现在运行在：http://localhost:3001
### 3. 测试登录功能
访问：http://localhost:3001/#/user/login
尝试登录，查看网络请求：
- 请求 URL 应该是：`http://localhost:3001/api/v1/auth/login`
- Vite 会自动转发到：`http://localhost:8085/api/v1/auth/login`
### 4. 查看代理日志
在浏览器开发者工具的 Network 标签中，可以看到：
- Request URL: `http://localhost:3001/api/v1/auth/login`
- 如果代理成功，会收到来自 `localhost:8085` 的响应
## 常见问题
### Q1: 代理不生效？
**A:**
1. 确认修改配置后重启了开发服务器
2. 检查请求 URL 是否以 `/api` 开头
3. 查看控制台是否有错误信息
### Q2: 后端服务连接失败？
**A:**
1. 确认后端服务正在运行：`http://localhost:8085`
2. 尝试直接访问后端 API 测试
3. 检查防火墙设置
### Q3: 收到 CORS 错误？
**A:**
- 开发环境不应该有 CORS 问题，因为使用了代理
- 如果仍有问题，检查 `changeOrigin: true` 是否设置
### Q4: 需要代理多个后端服务？
**A:**
```typescript
proxy: {
'/api': {
target: 'http://localhost:8085',
changeOrigin: true,
},
'/auth': {
target: 'http://localhost:8086',
changeOrigin: true,
},
}
```
## 环境差异
| 环境 | API URL | 说明 |
|------|---------|------|
| 开发环境 | `/api` | 使用 Vite 代理转发到 localhost:8085 |
| 生产环境 | `https://api.your-domain.com` | 直接请求生产环境 API |
## 下一步
1. ✅ 代理配置已完成
2. ⏳ 启动后端服务（端口 8085）
3. ⏳ 测试登录功能
4. ⏳ 验证 API 调用是否正常
## 相关文件
- [vite.config.ts](../../vite.config.ts) - Vite 配置
- [.env.dev](../../.env.dev) - 开发环境配置
- [.env.prod](../../.env.prod) - 生产环境配置（待更新）
- [src/plugins/axios.ts](../../src/plugins/axios.ts) - Axios 配置
- [auth-api.md](../../auth-api.md) - 后端 API 文档