86 lines
3.7 KiB
Markdown
86 lines
3.7 KiB
Markdown
|
# UI2.html 一比一复刻实施方案
|
|||
|
|
|
|||
|
|
## 一、比对分析结果
|
|||
|
|
|
|||
|
|
### 1. 首页（Home）差异
|
|||
|
|
- **精选内容网格**：UI2.html 为 4 个卡片布局，现有实现为 3 个卡片
|
|||
|
|
- **卡片样式**：部分卡片的背景色、边框圆角和交互效果与 UI2.html 不一致
|
|||
|
|
- **卡片内容**：卡片内文字、图标和布局与 UI2.html 存在差异
|
|||
|
|
|
|||
|
|
### 2. 作品列表页（Works）差异
|
|||
|
|
- **布局结构**：UI2.html 使用 `grid` 布局，现有实现使用 `flex` 布局
|
|||
|
|
- **交错排列**：UI2.html 中第二个作品图片在右侧，现有实现为固定左图右文
|
|||
|
|
- **图片样式**：
|
|||
|
|
- 宽高比：UI2.html 为 `aspect-[4/3]`，现有实现为 `aspect-[16/10]`
|
|||
|
|
- 叠加效果：UI2.html 有渐变叠加层和黑色遮罩，悬停时遮罩消失
|
|||
|
|
- 边框样式：UI2.html 有细边框和圆角
|
|||
|
|
- **文字样式**：
|
|||
|
|
- 标题：UI2.html 为 `text-4xl`，现有实现为 `text-5xl`
|
|||
|
|
- 描述：UI2.html 为 `leading-relaxed`，现有实现为 `leading-loose`
|
|||
|
|
- **交互效果**：
|
|||
|
|
- 点击区域：UI2.html 整个作品卡片可点击，现有实现仅标题和按钮可点击
|
|||
|
|
- 按钮样式：UI2.html 为带下划线文本按钮，现有实现为带边框按钮
|
|||
|
|
- **间距**：作品项间距 UI2.html 为 `gap-20`，现有实现为 `space-y-40`
|
|||
|
|
|
|||
|
|
### 3. 其他通用差异
|
|||
|
|
- **动画效果**：部分元素的动画延迟和持续时间与 UI2.html 不一致
|
|||
|
|
- **色彩变量**：需确保所有 tailwind 颜色变量与 UI2.html 完全匹配
|
|||
|
|
|
|||
|
|
## 二、复刻实施方案
|
|||
|
|
|
|||
|
|
### 1. 首页（Home）修复
|
|||
|
|
- **调整精选内容网格**：修改为 4 个卡片布局，与 UI2.html 一致
|
|||
|
|
- **修复卡片样式**：
|
|||
|
|
- 确保卡片背景色、边框圆角和阴影效果与 UI2.html 一致
|
|||
|
|
- 修复卡片内文字、图标和布局
|
|||
|
|
- **修复交互效果**：确保卡片悬停效果与 UI2.html 一致
|
|||
|
|
|
|||
|
|
### 2. 作品列表页（Works）重构
|
|||
|
|
- **修改布局结构**：使用 `grid` 布局替代 `flex` 布局
|
|||
|
|
- **实现交错排列**：第二个作品图片显示在右侧
|
|||
|
|
- **修复图片样式**：
|
|||
|
|
- 调整宽高比为 `aspect-[4/3]`
|
|||
|
|
- 添加渐变叠加层和黑色遮罩，悬停时遮罩消失
|
|||
|
|
- 添加细边框和圆角
|
|||
|
|
- **调整文字样式**：
|
|||
|
|
- 标题大小改为 `text-4xl`
|
|||
|
|
- 描述行高改为 `leading-relaxed`
|
|||
|
|
- **修复交互效果**：
|
|||
|
|
- 整个作品卡片可点击
|
|||
|
|
- 按钮样式改为带下划线文本按钮
|
|||
|
|
- **调整间距**：作品项间距改为 `gap-20`
|
|||
|
|
|
|||
|
|
### 3. 通用样式修复
|
|||
|
|
- **确保色彩变量一致**：检查并修复 tailwind 配置中的颜色变量
|
|||
|
|
- **修复动画效果**：调整元素的动画延迟和持续时间
|
|||
|
|
- **确保响应式布局一致**：检查所有断点的布局效果
|
|||
|
|
|
|||
|
|
### 4. 接口调用完善
|
|||
|
|
- **实现首页数据获取**：获取最新作品和精选文章数据
|
|||
|
|
- **实现作品列表数据获取**：确保从后端获取完整的作品数据
|
|||
|
|
- **实现博客列表数据获取**：获取博客文章数据
|
|||
|
|
- **实现代码片段数据获取**：获取代码片段数据
|
|||
|
|
|
|||
|
|
## 三、测试验证
|
|||
|
|
|
|||
|
|
### 1. 视觉测试
|
|||
|
|
- **像素级比对**：使用截图工具比对复刻页面与 UI2.html 的视觉效果
|
|||
|
|
- **响应式测试**：在不同屏幕尺寸下验证布局一致性
|
|||
|
|
- **动画效果测试**：验证所有动画效果与 UI2.html 一致
|
|||
|
|
|
|||
|
|
### 2. 功能测试
|
|||
|
|
- **链接测试**：确保所有链接和按钮点击正常
|
|||
|
|
- **数据加载测试**：验证所有数据从后端正确获取
|
|||
|
|
- **交互测试**：验证所有交互效果正常
|
|||
|
|
|
|||
|
|
## 四、实施步骤
|
|||
|
|
|
|||
|
|
1. **修复首页精选内容网格**
|
|||
|
|
2. **重构作品列表页布局**
|
|||
|
|
3. **修复作品图片样式和交互效果**
|
|||
|
|
4. **调整文字样式和间距**
|
|||
|
|
5. **完善接口调用功能**
|
|||
|
|
6. **进行视觉和功能测试**
|
|||
|
|
7. **修复发现的问题**
|
|||
|
|
|
|||
|
|
通过以上实施步骤，确保实现与 UI2.html 的像素级精度还原。
|