|
|
@@ -0,0 +1,292 @@
|
|
|
+# 故事017.013: 首页(Dashboard)样式对照原型调整
|
|
|
+
|
|
|
+## 元信息
|
|
|
+- **史诗**: 017 - 人才小程序功能实现
|
|
|
+- **优先级**: P1 - 用户体验改进
|
|
|
+- **状态**: Approved
|
|
|
+- **创建日期**: 2025-12-26
|
|
|
+- **负责人**: 开发团队
|
|
|
+
|
|
|
+## 故事描述
|
|
|
+
|
|
|
+**作为** 人才小程序用户,
|
|
|
+**我想要** 首页样式与原型设计完全一致,
|
|
|
+**以便** 获得符合预期的用户体验和视觉一致性。
|
|
|
+
|
|
|
+### 背景
|
|
|
+
|
|
|
+**原型设计参考:**
|
|
|
+- `docs/小程序原型/rencai.html` 行160-301 (首页/个人主页)
|
|
|
+
|
|
|
+**当前实现状态:**
|
|
|
+- ✅ 故事017.002完成: 登录与首页实现
|
|
|
+- ✅ 故事017.012完成: 统一Navbar导航栏组件规范
|
|
|
+- ✅ 首页基础功能已实现,但样式与原型存在差异
|
|
|
+
|
|
|
+**问题分析:**
|
|
|
+对照原型设计首页部分(rencai.html 行160-301),发现以下样式差异:
|
|
|
+
|
|
|
+| 模块 | 原型要求 | 当前实现 | 优先级 |
|
|
|
+|------|----------|----------|--------|
|
|
|
+| 个人信息卡片 | 3列统计:本月出勤/异常记录/本月薪资 | 只有2列,缺少"异常记录" | P1 |
|
|
|
+| 头像区域 | 圆形头像(首字) + 右侧二维码按钮 | 无头像显示,无二维码按钮 | P2 |
|
|
|
+| 打卡模块标题 | "今日打卡" | 无标题 | P2 |
|
|
|
+| 打卡状态指示器 | 绿点脉冲动画 + "已打卡"文字 | 简单标签,无动画 | P1 |
|
|
|
+| 时间显示 | 大号时间"09:27" + 日期"2023年11月25日 星期六" | 无时间显示,无日期 | P1 |
|
|
|
+| 上班/下班卡片 | 圆形图标 + 灰色背景,未打卡灰色 | 蓝色方形背景 | P1 |
|
|
|
+| 远程打卡按钮 | 文案"小程序远程打卡" | 文案"远程打卡" | P2 |
|
|
|
+| 功能入口 | 4个彩色圆角方形背景 | 圆形图标卡片 | P2 |
|
|
|
+| 通知列表 | 彩色圆形图标 + 标题 + 副标题 | 红点 + 标题 + 日期 | P1 |
|
|
|
+
|
|
|
+### 原型详细对照
|
|
|
+
|
|
|
+**1. 顶部个人信息卡片** (原型行174-204)
|
|
|
+```
|
|
|
+- 蓝色渐变背景: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)
|
|
|
+- 左侧: 圆形头像(首字,60px,白色边框) + 姓名 + 残疾类型
|
|
|
+- 右侧: 二维码图标按钮 (白色半透明背景)
|
|
|
+- 3列统计数据: 本月出勤(28) | 异常记录(0) | 本月薪资(¥4,800)
|
|
|
+```
|
|
|
+
|
|
|
+**2. 打卡状态模块** (原型行206-233)
|
|
|
+```
|
|
|
+- 标题: "今日打卡"
|
|
|
+- 状态指示器: 绿点(带脉冲动画) + "已打卡"文字
|
|
|
+- 大号时间: "09:27" (text-2xl font-bold)
|
|
|
+- 日期: "2023年11月25日 星期六"
|
|
|
+- 上班/下班卡片:
|
|
|
+ - 圆形图标背景(蓝色/灰色)
|
|
|
+ - 上班打卡: 08:30 (已打卡,蓝色)
|
|
|
+ - 下班打卡: --:-- (未打卡,灰色)
|
|
|
+- 按钮: "小程序远程打卡" (蓝色,手机图标)
|
|
|
+```
|
|
|
+
|
|
|
+**3. 快捷功能入口** (原型行235-253)
|
|
|
+```
|
|
|
+- 4个彩色圆角方形(不是圆形):
|
|
|
+ - 个人信息: bg-blue-50, 蓝色图标
|
|
|
+ - 考勤记录: bg-green-50, 绿色图标
|
|
|
+ - 薪资查询: bg-purple-50, 紫色图标
|
|
|
+ - 企业信息: bg-yellow-50, 黄色图标
|
|
|
+```
|
|
|
+
|
|
|
+**4. 最新通知** (原型行255-278)
|
|
|
+```
|
|
|
+- 通知项结构:
|
|
|
+ - 彩色圆形图标(bg-blue-100/bg-green-100)
|
|
|
+ - 标题 + 副标题(不是日期)
|
|
|
+ - 示例: "薪资发放通知" + "11月薪资已发放，请查收"
|
|
|
+```
|
|
|
+
|
|
|
+## 验收标准
|
|
|
+
|
|
|
+### 个人信息卡片 (P1)
|
|
|
+- [ ] 显示3列统计: 本月出勤 | 异常记录 | 本月薪资
|
|
|
+- [ ] 添加圆形头像显示(用户姓名首字,60px,白色边框)
|
|
|
+- [ ] 添加右侧二维码按钮图标(白色半透明圆形背景)
|
|
|
+- [ ] 保持蓝色渐变背景
|
|
|
+
|
|
|
+### 打卡状态模块 (P1)
|
|
|
+- [ ] 添加模块标题"今日打卡"
|
|
|
+- [ ] 打卡状态指示器: 绿色圆点 + "已打卡"文字
|
|
|
+- [ ] 绿色圆点添加脉冲动画效果
|
|
|
+- [ ] 添加大号时间显示(格式"HH:mm", text-2xl)
|
|
|
+- [ ] 添加当前日期显示(格式"YYYY年MM月DD日 星期X")
|
|
|
+- [ ] 上班/下班卡片调整为圆形图标 + 灰色背景样式
|
|
|
+- [ ] 已打卡状态: 蓝色圆形图标 + 实心时间
|
|
|
+- [ ] 未打卡状态: 灰色圆形图标 + "--:--"
|
|
|
+- [ ] 远程打卡按钮文案更新为"小程序远程打卡"
|
|
|
+- [ ] 远程打卡按钮添加手机图标
|
|
|
+
|
|
|
+### 快捷功能入口 (P2)
|
|
|
+- [ ] 调整为彩色圆角方形背景(不是圆形图标)
|
|
|
+- [ ] 4个入口颜色: 蓝/绿/紫/黄
|
|
|
+- [ ] 保持图标和文字居中
|
|
|
+
|
|
|
+### 最新通知 (P1)
|
|
|
+- [ ] 调整为彩色圆形图标样式
|
|
|
+- [ ] 通知内容显示: 标题 + 副标题
|
|
|
+- [ ] 移除右侧红点
|
|
|
+- [ ] 保持卡片样式
|
|
|
+
|
|
|
+### 兼容性验证
|
|
|
+- [ ] 所有样式与原型保持一致
|
|
|
+- [ ] 移动端显示效果良好
|
|
|
+- [ ] 现有功能不受影响
|
|
|
+- [ ] 类型检查通过 (`pnpm typecheck`)
|
|
|
+
|
|
|
+## 任务列表
|
|
|
+
|
|
|
+### 任务1: 个人信息卡片调整 (P1)
|
|
|
+**文件:** `mini-ui-packages/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx`
|
|
|
+
|
|
|
+- [ ] 1.1 添加"异常记录"统计列(原型行191-203)
|
|
|
+- [ ] 1.2 添加圆形头像显示组件(用户姓名首字,原型行178-180)
|
|
|
+- [ ] 1.3 添加右侧二维码按钮图标(原型行186-188)
|
|
|
+- [ ] 1.4 调整3列统计布局为等宽分布
|
|
|
+
|
|
|
+### 任务2: 打卡状态模块调整 (P1)
|
|
|
+**文件:** `mini-ui-packages/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx`
|
|
|
+
|
|
|
+- [ ] 2.1 添加模块标题"今日打卡"(原型行207)
|
|
|
+- [ ] 2.2 实现打卡状态指示器(绿点 + 文字,原型行209-210)
|
|
|
+- [ ] 2.3 添加绿色圆点脉冲动画(原型行69-75 @keyframes pulse)
|
|
|
+- [ ] 2.4 添加大号时间显示(原型行212)
|
|
|
+- [ ] 2.5 添加当前日期显示(原型行213)
|
|
|
+- [ ] 2.6 调整上班/下班卡片为圆形图标样式(原型行215-228)
|
|
|
+- [ ] 2.7 更新远程打卡按钮文案为"小程序远程打卡"(原型行231)
|
|
|
+- [ ] 2.8 添加手机图标到远程打卡按钮(原型行231)
|
|
|
+
|
|
|
+### 任务3: 快捷功能入口样式调整 (P2)
|
|
|
+**文件:** `mini-ui-packages/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx`
|
|
|
+
|
|
|
+- [ ] 3.1 调整为圆角方形背景(原型行236-253)
|
|
|
+- [ ] 3.2 应用4种颜色: bg-blue-50/bg-green-50/bg-purple-50/bg-yellow-50
|
|
|
+- [ ] 3.3 保持图标和文字居中对齐
|
|
|
+
|
|
|
+### 任务4: 最新通知样式调整 (P1)
|
|
|
+**文件:** `mini-ui-packages/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx`
|
|
|
+
|
|
|
+- [ ] 4.1 添加彩色圆形图标(原型行260-262, 269-271)
|
|
|
+- [ ] 4.2 调整通知内容为标题 + 副标题格式(原型行264-266, 273-275)
|
|
|
+- [ ] 4.3 移除右侧红点
|
|
|
+- [ ] 4.4 调整图标颜色: bg-blue-100/bg-green-100
|
|
|
+
|
|
|
+### 任务5: 共享组件 - 脉冲动画点 (可选)
|
|
|
+**文件:** `mini-ui-packages/rencai-shared-ui/src/components/PulseDot.tsx`
|
|
|
+
|
|
|
+- [ ] 5.1 创建PulseDot共享组件
|
|
|
+- [ ] 5.2 实现脉冲动画效果
|
|
|
+- [ ] 5.3 支持自定义颜色和大小
|
|
|
+
|
|
|
+### 任务6: 测试与验证 (P1)
|
|
|
+- [ ] 6.1 执行类型检查 `pnpm typecheck`
|
|
|
+- [ ] 6.2 验证首页与原型样式一致性
|
|
|
+- [ ] 6.3 验证移动端显示效果
|
|
|
+- [ ] 6.4 回归测试确保现有功能不受影响
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 样式参考代码
|
|
|
+
|
|
|
+**1. 蓝色渐变背景:**
|
|
|
+```tsx
|
|
|
+style={{
|
|
|
+ background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)'
|
|
|
+}}
|
|
|
+```
|
|
|
+
|
|
|
+**2. 脉冲动画 (原型行92-105):**
|
|
|
+```css
|
|
|
+@keyframes pulse {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0.95);
|
|
|
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
|
|
+ }
|
|
|
+ 70% {
|
|
|
+ transform: scale(1);
|
|
|
+ box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(0.95);
|
|
|
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**3. 打卡状态指示器:**
|
|
|
+```tsx
|
|
|
+<View className="flex items-center justify-center mb-4">
|
|
|
+ <View className="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse" />
|
|
|
+ <Text className="text-green-500 font-medium">已打卡</Text>
|
|
|
+</View>
|
|
|
+```
|
|
|
+
|
|
|
+**4. 上班/下班卡片:**
|
|
|
+```tsx
|
|
|
+<View className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
|
|
|
+ <Text className="text-xl">→</Text>
|
|
|
+</View>
|
|
|
+<Text className="text-xs text-gray-600">上班打卡</Text>
|
|
|
+<Text className="text-sm font-semibold text-gray-800">08:30</Text>
|
|
|
+```
|
|
|
+
|
|
|
+**5. 通知图标:**
|
|
|
+```tsx
|
|
|
+<View className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
|
|
|
+ <Text className="text-blue-500 text-sm">🔔</Text>
|
|
|
+</View>
|
|
|
+```
|
|
|
+
|
|
|
+### 数据结构
|
|
|
+
|
|
|
+**个人信息卡片统计:**
|
|
|
+```tsx
|
|
|
+interface Stats {
|
|
|
+ attendanceDays: number // 本月出勤: 28
|
|
|
+ abnormalRecords: number // 异常记录: 0
|
|
|
+ monthlySalary: number // 本月薪资: 4800
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**打卡状态:**
|
|
|
+```tsx
|
|
|
+interface ClockInStatus {
|
|
|
+ status: '已打卡' | '未打卡'
|
|
|
+ clockInTime?: string // "08:30"
|
|
|
+ clockOutTime?: string // "--:--"
|
|
|
+ displayTime?: string // "09:27"
|
|
|
+ date?: string // "2023年11月25日 星期六"
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 通知数据结构
|
|
|
+
|
|
|
+```tsx
|
|
|
+interface Notification {
|
|
|
+ id: number
|
|
|
+ iconColor: 'blue' | 'green' | 'yellow' | 'red'
|
|
|
+ icon: string // emoji或图标
|
|
|
+ title: string
|
|
|
+ subtitle: string // 副标题,不是日期
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 原型行号参考
|
|
|
+
|
|
|
+| 功能模块 | 原型行号 |
|
|
|
+|---------|---------|
|
|
|
+| 顶部个人信息卡片 | 174-204 |
|
|
|
+| 打卡状态模块 | 206-233 |
|
|
|
+| 快捷功能入口 | 235-253 |
|
|
|
+| 最新通知 | 255-278 |
|
|
|
+
|
|
|
+## 文件清单
|
|
|
+
|
|
|
+### 需要修改的文件
|
|
|
+- `mini-ui-packages/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx` - 首页主要修改
|
|
|
+
|
|
|
+### 可能需要新增的文件
|
|
|
+- `mini-ui-packages/rencai-shared-ui/src/components/PulseDot.tsx` - 脉冲动画点组件(可选)
|
|
|
+
|
|
|
+## 风险与依赖
|
|
|
+
|
|
|
+### 依赖项
|
|
|
+- 依赖故事017.002完成的首页基础实现
|
|
|
+- 依赖故事017.012完成的Navbar组件统一规范
|
|
|
+
|
|
|
+### 风险缓解
|
|
|
+- 保持原型像素级一致性
|
|
|
+- 确保移动端显示效果符合预期
|
|
|
+- 每个修改点独立验证
|
|
|
+- 不影响现有功能交互逻辑
|
|
|
+
|
|
|
+## 其他页面说明
|
|
|
+
|
|
|
+**注意:** 其他页面的完整实现应该归到各自的故事中:
|
|
|
+- **个人信息页**: 故事017.003 - 个人信息功能实现 ⏳ 待开始
|
|
|
+- **考勤记录页**: 故事017.004 - 考勤记录功能实现 ⏳ 待开始
|
|
|
+- **就业信息页**: 故事017.005 - 就业信息功能实现 ⏳ 待开始
|
|
|
+- **设置页**: 故事017.006 - 设置与帮助功能实现 ⏳ 待开始
|
|
|
+
|
|
|
+本故事**仅关注首页的样式调整**,其他页面的样式对照应该在各自的故事中完成。
|
yourname