故事017.013: 首页(Dashboard)样式对照原型调整

元信息

史诗: 017 - 人才小程序功能实现
优先级: P1 - 用户体验改进
状态: Ready for Review
创建日期: 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个入口颜色: 蓝/绿/紫/黄
保持图标和文字居中

兼容性验证

所有样式与原型保持一致
移动端显示效果良好
现有功能不受影响
类型检查通过 (pnpm typecheck)
底部预留TabBar高度(pb-20)，确保滚动到底部

任务列表

任务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 回归测试确保现有功能不受影响
6.5 修复底部padding，预留TabBar高度避免内容被遮挡

Dev Notes

样式参考代码

1. 蓝色渐变背景:

style={{
  background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)'
}}

2. 脉冲动画 (原型行92-105):

@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. 打卡状态指示器:

<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. 上班/下班卡片:

<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. 通知图标:

<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>

数据结构

个人信息卡片统计:

interface Stats {
  attendanceDays: number  // 本月出勤: 28
  abnormalRecords: number // 异常记录: 0
  monthlySalary: number   // 本月薪资: 4800
}

打卡状态:

interface ClockInStatus {
  status: '已打卡' | '未打卡'
  clockInTime?: string   // "08:30"
  clockOutTime?: string  // "--:--"
  displayTime?: string   // "09:27"
  date?: string          // "2023年11月25日 星期六"
}

通知数据结构

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 - 设置与帮助功能实现 ⏳ 待开始

本故事仅关注首页的样式调整,其他页面的样式对照应该在各自的故事中完成。

Dev Agent Record

Agent Model Used

Model: claude-sonnet

Debug Log References

None

Completion Notes

个人信息卡片: 成功添加3列统计布局（本月出勤、异常记录、本月薪资），添加圆形头像显示（用户姓名首字），添加右侧二维码按钮图标
打卡状态模块: 成功添加"今日打卡"标题，实现打卡状态指示器（绿点+文字+脉冲动画），添加大号时间显示和当前日期显示，调整上班/下班卡片为圆形图标样式，更新远程打卡按钮文案和图标
快捷功能入口: 成功调整为圆角方形背景，应用4种颜色（蓝/绿/紫/黄）
最新通知: 成功添加彩色圆形图标，调整为标题+副标题格式，移除右侧红点
脉冲动画: 使用Taro内置animate-pulse类实现，无需额外创建共享组件
类型检查: rencai-dashboard-ui包无新增类型错误（原有错误与本次修改无关）
图标调整: 更换考勤记录和薪资查询图标为项目内已有图标（document-text、chart-bar），薪资通知图标更换为check-circle
布局修复: 统计数据列使用flex flex-col items-center实现垂直对齐，底部padding改为pb-20预留TabBar空间

File List

mini-ui-packages/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx - 修改

Change Log

2025-12-26: 实现首页样式对照原型调整
- 添加个人信息卡片3列统计、圆形头像、二维码按钮
- 添加打卡状态模块标题、状态指示器、时间日期显示、圆形图标卡片
- 调整快捷功能入口为圆角方形背景，应用4种颜色
- 调整最新通知为彩色圆形图标+标题+副标题格式
- 更新数据结构（ClockInData、Notification）支持新样式需求
- 添加时间格式化工具函数（formatCurrentTime、formatCurrentDate）
- 更换图标为项目内已有图标（document-text、chart-bar、check-circle）
- 修复统计数据列和底部padding布局问题

Status

Ready for Review

017.013.story.md 12 KB

Історія Запис

故事017.013: 首页(Dashboard)样式对照原型调整

元信息

故事描述

背景

原型详细对照

验收标准

个人信息卡片 (P1)

打卡状态模块 (P1)

快捷功能入口 (P2)

最新通知 (P1)

兼容性验证

任务列表

任务1: 个人信息卡片调整 (P1)

任务2: 打卡状态模块调整 (P1)

任务3: 快捷功能入口样式调整 (P2)

任务4: 最新通知样式调整 (P1)

任务5: 共享组件 - 脉冲动画点 (可选)

任务6: 测试与验证 (P1)

Dev Notes

样式参考代码

数据结构

通知数据结构

原型行号参考

文件清单

需要修改的文件

可能需要新增的文件

风险与依赖

依赖项

风险缓解

其他页面说明

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes

File List

Change Log

Status

017.013.story.md 12 KB Історія Запис

故事017.013: 首页(Dashboard)样式对照原型调整

元信息

故事描述

背景

原型详细对照

验收标准

个人信息卡片 (P1)

打卡状态模块 (P1)

快捷功能入口 (P2)

最新通知 (P1)

兼容性验证

任务列表

任务1: 个人信息卡片调整 (P1)

任务2: 打卡状态模块调整 (P1)

任务3: 快捷功能入口样式调整 (P2)

任务4: 最新通知样式调整 (P1)

任务5: 共享组件 - 脉冲动画点 (可选)

任务6: 测试与验证 (P1)

Dev Notes

样式参考代码

数据结构

通知数据结构

原型行号参考

文件清单

需要修改的文件

可能需要新增的文件

风险与依赖

依赖项

风险缓解

其他页面说明

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes

File List

Change Log

Status

017.013.story.md 12 KB

Історія Запис