49 lines
1.7 KiB
Markdown
49 lines
1.7 KiB
Markdown
|
# 面试状态动画配置完成
|
|||
|
|
|
|||
|
|
## 完成的工作
|
|||
|
|
|
|||
|
|
### 1. 数据替换
|
|||
|
|
- 已成功替换16条大健康产业的面试状态数据到 `interviewStatus.json`
|
|||
|
|
- 数据包含不同状态类型：
|
|||
|
|
- 简历筛选未通过（5条）
|
|||
|
|
- 未参与面试（4条）
|
|||
|
|
- Offer已拒绝（4条）
|
|||
|
|
- Offer已接收（3条）
|
|||
|
|
|
|||
|
|
### 2. Lottie动画文件配置
|
|||
|
|
已将5个Lottie动画文件复制到项目目录：
|
|||
|
|
```
|
|||
|
|
src/assets/animations/interviewStatus/
|
|||
|
|
├── 1-off_初筛未通过.json
|
|||
|
|
├── 2-off_面试未通过.json
|
|||
|
|
├── 3-off_未参与面试.json
|
|||
|
|
├── 4-off_拒绝Offer.json
|
|||
|
|
└── 4-on_收到Offer.json
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 组件更新
|
|||
|
|
#### InterviewStatusAnimation组件
|
|||
|
|
- 从使用静态图片改为使用Lottie动画
|
|||
|
|
- 实现了智能的状态匹配逻辑
|
|||
|
|
- 支持根据状态文本或阶段日期自动匹配动画
|
|||
|
|
|
|||
|
|
#### InterviewStatusDropdown组件
|
|||
|
|
- 更新了状态映射配置
|
|||
|
|
- 添加了动画加载错误处理
|
|||
|
|
- 优化了状态描述文本
|
|||
|
|
|
|||
|
|
### 4. 状态映射逻辑
|
|||
|
|
实现了多层次的状态匹配：
|
|||
|
|
1. 根据面试状态文本关键词匹配
|
|||
|
|
2. 根据阶段日期内容匹配
|
|||
|
|
3. 提供默认动画作为兜底
|
|||
|
|
|
|||
|
|
## 文件变更列表
|
|||
|
|
- `src/data/interviewStatus.json` - 更新为大健康产业数据
|
|||
|
|
- `src/pages/CompanyJobsPage/components/InterviewStatusAnimation/index.jsx` - 改为使用Lottie动画
|
|||
|
|
- `src/pages/CompanyJobsPage/components/InterviewStatusAnimation/index.css` - 更新样式以适配动画容器
|
|||
|
|
- `src/pages/CompanyJobsPage/components/InterviewStatusDropdown/index.jsx` - 更新状态映射
|
|||
|
|
- `src/assets/animations/interviewStatus/` - 新增5个动画文件
|
|||
|
|
|
|||
|
|
## 效果
|
|||
|
|
现在当用户点击企业内推岗位页面右侧的面试状态时，会展示相应的Lottie动画效果，提供更好的视觉体验。
|