feat(global-header): 重构全局头部组件及样式优化
- 完全重写 GlobalHeader 组件结构，改用 div 语义及自定义样式替代原antd a-menu - 新增 Logo 区域包含图标和标题，支持点击跳转首页功能 - 实现导航菜单动态渲染，根据路由权限过滤显示 - 用户区域支持未登录和已登录两种状态切换 - 未登录时展示登录、注册按钮，支持路由跳转 - 已登录时显示用户头像、用户名及下拉菜单，包含个人中心、设置和退出登录操作 - 引入 Arco Design 图标组件优化视觉表现 - 完善登出流程，清理本地Token并提示用户 - 优化响应式布局和交互体验，提升用户界面整体一致性与可用性
This commit is contained in:
222
docs/home-page-optimization.md
Normal file
222
docs/home-page-optimization.md
Normal 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 应用的设计标准！🎉
|
||||
Reference in New Issue
Block a user