diff --git a/docs/HANDOVER_FEATURE.md b/docs/HANDOVER_FEATURE.md
new file mode 100644
index 0000000..154ba0b
--- /dev/null
+++ b/docs/HANDOVER_FEATURE.md
@@ -0,0 +1,427 @@
+# 护工端交接班流程功能文档
+
+## 📋 功能概述
+
+护工端交接班流程是一个完整的工作交接解决方案，帮助护工在下班时系统地记录工作内容、传递重要信息给下一班护工，确保老人护理工作的连续性和质量。
+
+## 🎨 设计特点
+
+- **高保真原型设计**：完全按照产品设计文档实现，包含详细的视觉规范
+- **微交互动画**：丰富的动画效果提升用户体验
+- **响应式适配**：支持不同尺寸屏幕，包括横屏模式
+- **无障碍设计**：遵循无障碍设计规范，支持语音操作
+
+## 🗂️ 项目结构
+
+```
+src/
+├── pages/
+│   └── handover/                    # 交接班功能目录
+│       ├── index.vue               # 入口页面（下班提醒）
+│       ├── previous-notes.vue      # 查看上一班留言
+│       ├── work-summary.vue        # 填写本班工作总结
+│       ├── next-shift-notes.vue    # 填写下一班注意事项
+│       ├── waiting-confirm.vue     # 等待接班人确认
+│       ├── complete.vue            # 交接完成
+│       └── components/             # 共享组件
+│           ├── progress-indicator.vue        # 进度指示器
+│           ├── elder-card.vue               # 老人信息卡片
+│           ├── shift-end-reminder.vue       # 下班提醒弹窗
+│           └── remind-colleague-modal.vue   # 催促接班人弹窗
+│
+├── store/
+│   └── modules/
+│       └── handover.js             # 交接班状态管理
+│
+├── api/
+│   └── modules/
+│       └── handover.js             # 交接班 API 接口
+│
+└── styles/
+    ├── handover-design.scss        # 设计系统变量
+    └── handover-animations.scss    # 动画效果样式
+```
+
+## 🎯 功能流程
+
+### 1. 下班提醒（第1屏）
+
+**触发时机**：当前时间接近班次结束时间前15分钟
+
+**功能**：
+- 自动弹出提醒弹窗
+- 显示下班时间
+- 提供"开始交接班"和"稍后再说"选项
+- 稍后再说后15分钟再次提醒
+
+**组件**：`shift-end-reminder.vue`
+
+### 2. 查看上一班留言（第2屏）
+
+**路由**：`/handover/previous-notes`
+
+**功能**：
+- 显示上一班护工的基本信息
+- 展示重点关注老人列表（按紧急程度分类）
+  - 🔴 危险红：紧急/异常情况
+  - 🟡 警告橙：需要关注的情况
+  - 🔵 蓝色：一般提醒
+- 显示待完成任务列表
+- 支持点击卡片查看详细信息
+
+**数据结构**：
+```javascript
+{
+  caregiver: '李小花',
+  timeRange: '06:00-14:00',
+  focusElders: [
+    {
+      id: 1,
+      room: '101房',
+      name: '张淑华奶奶',
+      level: 'danger',  // 'danger' | 'warning' | 'normal'
+      issue: '血压异常',
+      description: '详细描述...',
+      reminder: '提醒事项...'
+    }
+  ],
+  todos: [
+    {
+      id: 1,
+      content: '101房 17:00 测量血压',
+      note: '未完成，请接手处理'
+    }
+  ]
+}
+```
+
+### 3. 填写本班工作总结（第3屏）
+
+**路由**：`/handover/work-summary`
+
+**功能**：
+- 展示本班工作统计数据
+  - 总任务数、护理任务、用餐任务、监测任务
+  - 任务完成率
+- 填写重点工作记录
+  - 支持文本输入
+  - 支持语音输入（长按语音按钮）
+  - 字数限制：500字
+- 快捷标签功能
+  - 预设标签：血压正常、食欲改善、情绪稳定等
+  - 支持自定义标签
+  - 点击标签自动插入到文本框
+- 照片记录
+  - 最多上传9张照片
+  - 支持拍照和从相册选择
+  - 可删除已上传的照片
+
+**验证**：
+- 必须填写工作记录（至少1个字符）才能进入下一步
+
+### 4. 填写下一班注意事项（第4屏）
+
+**路由**：`/handover/next-shift-notes`
+
+**功能**：
+- 选择需要特别关注的老人
+  - 勾选老人后展开详细信息
+  - 可添加提醒事项
+  - 支持添加其他老人
+- 填写补充说明
+  - 支持文本和语音输入
+  - 字数限制：500字
+- 显示接班人信息
+  - 姓名、班次、时间、电话
+  - 在线状态显示
+- 提交交接班记录
+
+**验证**：
+- 必须至少勾选一位需要关注的老人
+- 接班人必须在线才能提交
+
+### 5. 等待接班人确认（第5屏）
+
+**路由**：`/handover/waiting-confirm`
+
+**功能**：
+- 显示等待状态
+  - 沙漏旋转动画
+  - 进度转圈动画
+- 显示接班人信息和在线状态
+- 展示已发送的通知
+  - 微信通知
+  - 短信提醒
+  - APP推送
+- 显示预计等待时间
+- 提供催促功能
+  - 点击"催一下"按钮
+  - 30秒内不可重复催促
+  - 超过5分钟未确认显示"联系管理员"
+
+**自动流程**：
+- 3秒后（演示用）自动跳转到完成页面
+- 实际应该等待接班人确认后跳转
+
+### 6. 交接完成（第6屏）
+
+**路由**：`/handover/complete`
+
+**功能**：
+- 显示完成状态（✅ 动画）
+- 展示今日工作统计
+  - 工作时长
+  - 完成任务数和完成率
+  - 服务评价
+  - 今日亮点
+- 展示今日收益预览
+  - 基础工时费
+  - 绩效奖金
+  - 服务提成
+  - 预计总收入
+  - 发放日期提示
+- 操作按钮
+  - 查看详细报告
+  - 确定下班（打卡）
+  - 分享今日工作
+
+### 7. 催促接班人弹窗（第7屏）
+
+**组件**：`remind-colleague-modal.vue`
+
+**触发时机**：
+- 在等待确认页面点击"催一下"
+- 等待超过3分钟自动弹出
+
+**功能**：
+- 提供多种催促方式
+  - 📱 发送微信消息
+  - 📞 直接拨打电话
+  - 👔 联系管理员
+- 再等等选项
+
+## 🎨 设计系统
+
+### 颜色系统
+
+```scss
+// 主色调
+$handover-primary: #3B82F6;        // 主蓝色
+$handover-primary-dark: #2563EB;   // 深蓝色
+$handover-primary-deep: #1E40AF;   // 更深蓝色
+
+// 辅助色
+$handover-success: #10B981;        // 成功绿
+$handover-warning: #F59E0B;        // 警告橙
+$handover-danger: #EF4444;         // 危险红
+
+// 中性色
+$handover-gray-900 ~ $handover-gray-50  // 灰度阶梯
+```
+
+### 字体系统
+
+```scss
+// 字号
+$handover-font-size-2xl: 24px;     // 超大标题
+$handover-font-size-xl: 20px;      // 大标题
+$handover-font-size-lg: 18px;      // 页面标题
+$handover-font-size-md: 16px;      // 章节标题
+$handover-font-size-base: 14px;    // 正文
+$handover-font-size-sm: 13px;      // 辅助信息
+$handover-font-size-xs: 12px;      // 小字
+
+// 字重
+$handover-font-weight-regular: 400;
+$handover-font-weight-medium: 500;
+$handover-font-weight-semibold: 600;
+$handover-font-weight-bold: 700;
+```
+
+### 间距系统
+
+```scss
+$handover-spacing-2xs: 4px;
+$handover-spacing-xs: 8px;
+$handover-spacing-sm: 12px;
+$handover-spacing-md: 16px;
+$handover-spacing-lg: 20px;
+$handover-spacing-xl: 24px;
+$handover-spacing-2xl: 32px;
+```
+
+## 🔧 状态管理
+
+### Pinia Store
+
+**位置**：`src/store/modules/handover.js`
+
+**State**：
+```javascript
+{
+  currentShift: {},           // 当前班次信息
+  previousNotes: {},          // 上一班留言
+  workSummary: {},           // 本班工作总结
+  nextShiftNotes: {},        // 下一班注意事项
+  successor: {},             // 接班人信息
+  handoverStatus: {},        // 交接班状态
+  reminderSettings: {}       // 提醒设置
+}
+```
+
+**Getters**：
+- `canStartHandover`：是否可以开始交接班
+- `shouldShowReminder`：是否需要显示下班提醒
+- `focusElderCount`：重点关注老人数量
+- `todoCount`：待完成任务数量
+- `handoverProgress`：交接班进度百分比
+
+**Actions**：
+- `initHandover()`：初始化交接班数据
+- `loadPreviousNotes()`：加载上一班留言
+- `updateWorkSummary(data)`：更新工作总结
+- `updateNextShiftNotes(data)`：更新下一班注意事项
+- `submitHandover()`：提交交接班记录
+- `confirmHandover()`：接班人确认
+- `resetHandover()`：重置交接班状态
+
+## 🌐 API 接口
+
+**位置**：`src/api/modules/handover.js`
+
+### 接口列表
+
+| 接口名称 | 方法 | 路径 | 说明 |
+|---------|------|------|------|
+| getCurrentShift | GET | /handover/current-shift | 获取当前班次信息 |
+| getPreviousNotes | GET | /handover/previous-notes | 获取上一班留言 |
+| getFocusElders | GET | /handover/focus-elders | 获取重点关注老人列表 |
+| getTodoList | GET | /handover/todos | 获取待完成任务列表 |
+| getWorkStatistics | GET | /handover/work-statistics | 获取本班工作统计 |
+| saveWorkSummary | POST | /handover/work-summary | 保存工作总结 |
+| uploadPhoto | POST | /handover/upload-photo | 上传照片 |
+| getSuccessorInfo | GET | /handover/successor | 获取接班人信息 |
+| saveNextShiftNotes | POST | /handover/next-shift-notes | 保存下一班注意事项 |
+| submitHandover | POST | /handover/submit | 提交交接班记录 |
+| checkSuccessorOnline | GET | /handover/check-online/:id | 检查接班人是否在线 |
+| remindSuccessor | POST | /handover/remind-successor | 催促接班人确认 |
+| getHandoverHistory | GET | /handover/history | 获取交接班历史记录 |
+| getTodayReport | GET | /handover/today-report | 获取今日工作统计报告 |
+| getTodayEarnings | GET | /handover/today-earnings | 获取今日收益预览 |
+| confirmClockOut | POST | /handover/clock-out | 确认下班打卡 |
+
+## 🎭 动画效果
+
+**位置**：`src/styles/handover-animations.scss`
+
+### 可用动画类
+
+- **页面转场**：`.page-enter`, `.page-exit`
+- **按钮反馈**：`.button-press`
+- **加载状态**：`.loading-spin`, `.skeleton`, `.pulse`
+- **淡入淡出**：`.fade-in`, `.fade-out`, `.fade-in-up`, `.fade-in-down`
+- **缩放动画**：`.scale-in`, `.scale-pop`
+- **抖动动画**：`.shake`
+- **弹跳动画**：`.bounce`
+- **滑动动画**：`.slide-in-left`, `.slide-in-right`
+- **特殊动画**：`.bell-ring`, `.hourglass-rotate`, `.breathe`
+
+### 使用示例
+
+```vue
+<view class="fade-in-up animation-delay-2">
+  内容
+</view>
+```
+
+## 🚀 开发指南
+
+### 1. 安装依赖
+
+```bash
+pnpm install
+```
+
+### 2. 运行开发服务器
+
+```bash
+# H5
+pnpm dev:h5
+
+# 微信小程序
+pnpm dev:mp-weixin
+
+# App
+pnpm dev:app
+```
+
+### 3. 访问交接班功能
+
+在应用中导航到 `/handover` 路径，或者在首页添加入口按钮。
+
+### 4. 模拟数据
+
+目前使用的是模拟数据，可以在以下位置修改：
+
+- **Store**：`src/store/modules/handover.js` 中的 `loadPreviousNotes()` 方法
+- **页面组件**：各个页面的 `ref` 数据
+
+### 5. 对接后端 API
+
+1. 修改 `src/api/request.js` 配置 API 基础URL
+2. 实现 `src/api/modules/handover.js` 中的接口
+3. 在 Store 的 actions 中调用 API 接口
+4. 处理错误和加载状态
+
+## 📱 响应式适配
+
+### 屏幕尺寸
+
+- **小屏手机** (≤375px)：缩小间距和字号
+- **标准手机** (375-414px)：标准尺寸
+- **大屏手机** (≥414px)：适当增加间距
+- **平板** (≥768px)：采用两栏布局
+
+### 横屏适配
+
+横屏时：
+- 导航栏高度缩小至48px
+- 内容区域采用左右分栏
+- 左侧：老人列表(40%)
+- 右侧：详细信息(60%)
+
+## ♿ 无障碍设计
+
+- **文字可读性**：最小字号12px，行高至少1.5倍
+- **色彩对比度**：正文对比度 ≥ 4.5:1
+- **触控区域**：按钮最小尺寸 44×44px
+- **语音操作**：支持语音输入作为备选方案
+
+## 🐛 已知问题
+
+1. **语音输入功能**：目前是模拟实现，需要集成实际的语音识别服务
+2. **照片上传**：需要配置实际的文件上传服务器
+3. **推送通知**：需要集成推送服务（如极光推送、uni-push等）
+4. **实时在线状态**：需要 WebSocket 或轮询实现
+
+## 🔮 后续优化
+
+1. **离线支持**：添加离线数据缓存
+2. **数据同步**：实现离线数据同步机制
+3. **更多语言**：支持多语言国际化
+4. **主题切换**：支持暗色模式
+5. **性能优化**：图片懒加载、虚拟列表等
+6. **测试覆盖**：添加单元测试和 E2E 测试
+
+## 📄 许可证
+
+MIT License
+
+## 👥 贡献者
+
+- Claude (AI Assistant)
+- [您的团队成员]
+
+## 📞 联系方式
+
+如有问题或建议，请联系项目负责人。
diff --git a/src/api/modules/handover.js b/src/api/modules/handover.js
new file mode 100644
index 0000000..8167e0c
--- /dev/null
+++ b/src/api/modules/handover.js
@@ -0,0 +1,254 @@
+/**
+ * 交接班相关 API 接口
+ */
+import request from '../request'
+
+/**
+ * 获取当前班次信息
+ */
+export function getCurrentShift() {
+  return request({
+    url: '/handover/current-shift',
+    method: 'GET'
+  })
+}
+
+/**
+ * 获取上一班留言
+ */
+export function getPreviousNotes() {
+  return request({
+    url: '/handover/previous-notes',
+    method: 'GET'
+  })
+}
+
+/**
+ * 获取重点关注老人列表
+ */
+export function getFocusElders() {
+  return request({
+    url: '/handover/focus-elders',
+    method: 'GET'
+  })
+}
+
+/**
+ * 获取待完成任务列表
+ */
+export function getTodoList() {
+  return request({
+    url: '/handover/todos',
+    method: 'GET'
+  })
+}
+
+/**
+ * 获取本班工作统计
+ */
+export function getWorkStatistics() {
+  return request({
+    url: '/handover/work-statistics',
+    method: 'GET'
+  })
+}
+
+/**
+ * 保存工作总结
+ * @param {Object} data - 工作总结数据
+ * @param {String} data.workRecord - 工作记录文本
+ * @param {Array} data.selectedTags - 选中的标签
+ * @param {Array} data.photos - 照片列表
+ */
+export function saveWorkSummary(data) {
+  return request({
+    url: '/handover/work-summary',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 上传照片
+ * @param {File} file - 照片文件
+ */
+export function uploadPhoto(file) {
+  const formData = new FormData()
+  formData.append('file', file)
+
+  return request({
+    url: '/handover/upload-photo',
+    method: 'POST',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+/**
+ * 获取接班人信息
+ */
+export function getSuccessorInfo() {
+  return request({
+    url: '/handover/successor',
+    method: 'GET'
+  })
+}
+
+/**
+ * 保存下一班注意事项
+ * @param {Object} data - 注意事项数据
+ * @param {Array} data.focusElders - 重点关注老人列表
+ * @param {String} data.supplementNote - 补充说明
+ * @param {Array} data.attachments - 附件列表
+ */
+export function saveNextShiftNotes(data) {
+  return request({
+    url: '/handover/next-shift-notes',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 提交交接班记录
+ * @param {Object} data - 交接班完整数据
+ */
+export function submitHandover(data) {
+  return request({
+    url: '/handover/submit',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 检查接班人是否在线
+ * @param {String} successorId - 接班人ID
+ */
+export function checkSuccessorOnline(successorId) {
+  return request({
+    url: `/handover/check-online/${successorId}`,
+    method: 'GET'
+  })
+}
+
+/**
+ * 催促接班人确认
+ * @param {String} successorId - 接班人ID
+ * @param {String} method - 催促方式: 'wechat', 'sms', 'phone', 'admin'
+ */
+export function remindSuccessor(successorId, method) {
+  return request({
+    url: '/handover/remind-successor',
+    method: 'POST',
+    data: {
+      successorId,
+      method
+    }
+  })
+}
+
+/**
+ * 获取交接班历史记录
+ * @param {Object} params - 查询参数
+ * @param {Number} params.page - 页码
+ * @param {Number} params.pageSize - 每页数量
+ * @param {String} params.startDate - 开始日期
+ * @param {String} params.endDate - 结束日期
+ */
+export function getHandoverHistory(params) {
+  return request({
+    url: '/handover/history',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * 获取交接班详情
+ * @param {String} handoverId - 交接班记录ID
+ */
+export function getHandoverDetail(handoverId) {
+  return request({
+    url: `/handover/detail/${handoverId}`,
+    method: 'GET'
+  })
+}
+
+/**
+ * 获取今日工作统计报告
+ */
+export function getTodayReport() {
+  return request({
+    url: '/handover/today-report',
+    method: 'GET'
+  })
+}
+
+/**
+ * 获取今日收益预览
+ */
+export function getTodayEarnings() {
+  return request({
+    url: '/handover/today-earnings',
+    method: 'GET'
+  })
+}
+
+/**
+ * 确认下班打卡
+ */
+export function confirmClockOut() {
+  return request({
+    url: '/handover/clock-out',
+    method: 'POST'
+  })
+}
+
+/**
+ * 获取快捷标签列表
+ */
+export function getQuickTags() {
+  return request({
+    url: '/handover/quick-tags',
+    method: 'GET'
+  })
+}
+
+/**
+ * 添加自定义标签
+ * @param {String} tagName - 标签名称
+ */
+export function addCustomTag(tagName) {
+  return request({
+    url: '/handover/custom-tag',
+    method: 'POST',
+    data: {
+      tagName
+    }
+  })
+}
+
+export default {
+  getCurrentShift,
+  getPreviousNotes,
+  getFocusElders,
+  getTodoList,
+  getWorkStatistics,
+  saveWorkSummary,
+  uploadPhoto,
+  getSuccessorInfo,
+  saveNextShiftNotes,
+  submitHandover,
+  checkSuccessorOnline,
+  remindSuccessor,
+  getHandoverHistory,
+  getHandoverDetail,
+  getTodayReport,
+  getTodayEarnings,
+  confirmClockOut,
+  getQuickTags,
+  addCustomTag
+}
diff --git a/src/pages.json b/src/pages.json
index 52d1e3a..e8724ba 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -93,6 +93,65 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/handover",
+      "pages": [
+        {
+          "path": "index",
+          "aliasPath": "/handover",
+          "name": "handover",
+          "style": {
+            "navigationStyle": "custom",
+            "navigationBarTitleText": "交接班"
+          }
+        },
+        {
+          "path": "previous-notes",
+          "aliasPath": "/handover/previous-notes",
+          "name": "handover-previous-notes",
+          "style": {
+            "navigationStyle": "custom",
+            "navigationBarTitleText": "查看上一班留言"
+          }
+        },
+        {
+          "path": "work-summary",
+          "aliasPath": "/handover/work-summary",
+          "name": "handover-work-summary",
+          "style": {
+            "navigationStyle": "custom",
+            "navigationBarTitleText": "本班工作总结"
+          }
+        },
+        {
+          "path": "next-shift-notes",
+          "aliasPath": "/handover/next-shift-notes",
+          "name": "handover-next-shift-notes",
+          "style": {
+            "navigationStyle": "custom",
+            "navigationBarTitleText": "下一班注意事项"
+          }
+        },
+        {
+          "path": "waiting-confirm",
+          "aliasPath": "/handover/waiting-confirm",
+          "name": "handover-waiting-confirm",
+          "style": {
+            "navigationStyle": "custom",
+            "navigationBarTitleText": "等待确认"
+          }
+        },
+        {
+          "path": "complete",
+          "aliasPath": "/handover/complete",
+          "name": "handover-complete",
+          "style": {
+            "navigationStyle": "custom",
+            "navigationBarTitleText": "交接完成"
+          }
+        }
+      ]
     }
   ],
   "tabBar": {
diff --git a/src/pages/handover/complete.vue b/src/pages/handover/complete.vue
new file mode 100644
index 0000000..0b7e9b9
--- /dev/null
+++ b/src/pages/handover/complete.vue
@@ -0,0 +1,457 @@
+<template>
+  <view class="handover-complete">
+    <!-- 完成图标 -->
+    <view class="success-icon-wrapper">
+      <text class="success-icon">✅</text>
+    </view>
+
+    <text class="complete-title">交接完成！</text>
+    <text class="complete-desc">{{ successor.name }}已确认接班，您可以下班了</text>
+    <text class="complete-note">辛苦了！👏</text>
+
+    <!-- 今日工作统计 -->
+    <view class="statistics-section">
+      <view class="section-header">
+        <text class="section-icon">📊</text>
+        <text class="section-title">今日工作统计</text>
+      </view>
+
+      <view class="stat-item">
+        <text class="stat-icon">⏰</text>
+        <view class="stat-content">
+          <text class="stat-label">工作时长</text>
+          <text class="stat-value">{{ statistics.workHours }}</text>
+        </view>
+      </view>
+
+      <view class="stat-item">
+        <text class="stat-icon">✅</text>
+        <view class="stat-content">
+          <text class="stat-label">完成任务</text>
+          <text class="stat-value">{{ statistics.completedTasks }}</text>
+        </view>
+      </view>
+
+      <view class="stat-item">
+        <text class="stat-icon">⭐</text>
+        <view class="stat-content">
+          <text class="stat-label">服务评价</text>
+          <text class="stat-value">{{ statistics.rating }}</text>
+          <text class="stat-note">{{ statistics.reviews }}</text>
+        </view>
+      </view>
+
+      <view class="highlight-section">
+        <text class="highlight-icon">🏆</text>
+        <text class="highlight-title">今日亮点</text>
+        <view
+          v-for="(item, index) in statistics.highlights"
+          :key="index"
+          class="highlight-item"
+        >
+          <text class="bullet">•</text>
+          <text class="highlight-text">{{ item }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 今日收益预览 -->
+    <view class="earning-section">
+      <view class="section-header">
+        <text class="section-icon">💰</text>
+        <text class="section-title">今日收益预览</text>
+      </view>
+
+      <view class="earning-item">
+        <text class="earning-label">基础工时费:</text>
+        <text class="earning-value">¥{{ earnings.base }}</text>
+      </view>
+      <view class="earning-item">
+        <text class="earning-label">绩效奖金:</text>
+        <text class="earning-value">¥{{ earnings.bonus }}</text>
+      </view>
+      <view class="earning-item">
+        <text class="earning-label">服务提成:</text>
+        <text class="earning-value">¥{{ earnings.commission }}</text>
+      </view>
+      <view class="earning-divider"></view>
+      <view class="earning-item total">
+        <text class="earning-label">预计收入:</text>
+        <text class="earning-value">¥{{ earnings.total }}</text>
+      </view>
+
+      <view class="earning-note">
+        <text class="note-icon">💡</text>
+        <text class="note-text">将在本月15日发放工资</text>
+      </view>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="action-buttons">
+      <button class="secondary-button" @click="handleViewReport">
+        查看详细报告
+      </button>
+      <button class="primary-button" @click="handleConfirmLeave">
+        确定下班 ✓
+      </button>
+      <view class="share-link" @click="handleShare">
+        [分享今日工作]
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from '@/hooks/useRouter'
+
+const router = useRouter()
+
+// 接班人
+const successor = ref({
+  name: '王小明'
+})
+
+// 工作统计
+const statistics = ref({
+  workHours: '8小时15分钟',
+  completedTasks: '15项 (100%完成率)',
+  rating: '平均 4.8分',
+  reviews: '★★★★★ (12条好评)',
+  highlights: [
+    '101房张奶奶血压控制良好',
+    '102房王爷爷食欲明显改善',
+    '103房李奶奶情绪转好'
+  ]
+})
+
+// 收益信息
+const earnings = ref({
+  base: '180.00',
+  bonus: '45.00',
+  commission: '28.00',
+  total: '253.00'
+})
+
+const handleViewReport = () => {
+  uni.showToast({
+    title: '详细报告功能开发中',
+    icon: 'none'
+  })
+}
+
+const handleConfirmLeave = () => {
+  uni.showModal({
+    title: '确认下班',
+    content: '确定要打卡下班吗？',
+    success: (res) => {
+      if (res.confirm) {
+        // 打卡下班
+        uni.showToast({
+          title: '下班打卡成功',
+          icon: 'success'
+        })
+
+        setTimeout(() => {
+          // 返回首页或其他页面
+          router.replace('/pages/index/index')
+        }, 1500)
+      }
+    }
+  })
+}
+
+const handleShare = () => {
+  uni.showToast({
+    title: '分享功能开发中',
+    icon: 'none'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.handover-complete {
+  min-height: 100vh;
+  background-color: $handover-bg-page;
+  padding: 80rpx $handover-page-padding $handover-page-padding;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.success-icon-wrapper {
+  margin-bottom: $handover-spacing-lg;
+
+  .success-icon {
+    font-size: 160rpx;
+    display: inline-block;
+    animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+}
+
+@keyframes successPop {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.complete-title {
+  font-size: $handover-font-size-xl;
+  font-weight: $handover-font-weight-bold;
+  color: $handover-gray-900;
+  margin-bottom: $handover-spacing-sm;
+}
+
+.complete-desc {
+  font-size: $handover-font-size-md;
+  color: $handover-gray-600;
+  text-align: center;
+  margin-bottom: $handover-spacing-2xs;
+}
+
+.complete-note {
+  font-size: $handover-font-size-base;
+  color: $handover-gray-600;
+  margin-bottom: $handover-spacing-xl;
+}
+
+.statistics-section,
+.earning-section {
+  width: 100%;
+  background: linear-gradient(135deg, $handover-primary-lighter 0%, $handover-primary-light 100%);
+  border-radius: $handover-radius-lg;
+  padding: $handover-spacing-lg;
+  margin-bottom: $handover-spacing-md;
+  animation: fadeInUp 0.5s ease forwards;
+  animation-delay: 0.2s;
+  opacity: 0;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-md;
+
+    .section-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .section-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stat-item {
+  display: flex;
+  align-items: flex-start;
+  gap: $handover-spacing-sm;
+  margin-bottom: $handover-spacing-md;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .stat-icon {
+    font-size: $handover-font-size-lg;
+  }
+
+  .stat-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: $handover-spacing-2xs;
+
+    .stat-label {
+      font-size: $handover-font-size-base;
+      color: $handover-gray-700;
+    }
+
+    .stat-value {
+      font-size: $handover-font-size-lg;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-primary;
+    }
+
+    .stat-note {
+      font-size: $handover-font-size-sm;
+      color: $handover-gray-600;
+    }
+  }
+}
+
+.highlight-section {
+  margin-top: $handover-spacing-md;
+  padding-top: $handover-spacing-md;
+  border-top: 1px solid rgba($handover-primary, 0.2);
+
+  .highlight-icon {
+    font-size: $handover-font-size-lg;
+  }
+
+  .highlight-title {
+    font-size: $handover-font-size-base;
+    font-weight: $handover-font-weight-semibold;
+    color: $handover-gray-900;
+    margin-left: $handover-spacing-xs;
+  }
+
+  .highlight-item {
+    display: flex;
+    align-items: flex-start;
+    gap: $handover-spacing-xs;
+    margin-top: $handover-spacing-sm;
+
+    .bullet {
+      font-size: $handover-font-size-base;
+      color: $handover-primary;
+      line-height: $handover-line-height-normal;
+    }
+
+    .highlight-text {
+      flex: 1;
+      font-size: $handover-font-size-base;
+      color: $handover-gray-700;
+      line-height: $handover-line-height-normal;
+    }
+  }
+}
+
+.earning-section {
+  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
+  animation-delay: 0.3s;
+
+  .earning-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $handover-spacing-sm;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .earning-label {
+      font-size: $handover-font-size-base;
+      color: $handover-gray-700;
+    }
+
+    .earning-value {
+      font-size: $handover-font-size-lg;
+      font-weight: $handover-font-weight-semibold;
+      color: darken($handover-success, 10%);
+      font-variant-numeric: tabular-nums;
+    }
+
+    &.total {
+      .earning-value {
+        font-size: $handover-font-size-xl;
+        font-weight: $handover-font-weight-bold;
+      }
+    }
+  }
+
+  .earning-divider {
+    height: 1px;
+    background-color: rgba($handover-warning, 0.3);
+    margin: $handover-spacing-sm 0;
+  }
+
+  .earning-note {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-2xs;
+    margin-top: $handover-spacing-md;
+    padding: $handover-spacing-sm;
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: $handover-radius-sm;
+
+    .note-icon {
+      font-size: $handover-font-size-base;
+    }
+
+    .note-text {
+      font-size: $handover-font-size-sm;
+      color: $handover-gray-600;
+    }
+  }
+}
+
+.action-buttons {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: $handover-spacing-sm;
+  margin-top: $handover-spacing-lg;
+  animation: fadeInUp 0.5s ease forwards;
+  animation-delay: 0.4s;
+  opacity: 0;
+
+  .secondary-button {
+    width: 100%;
+    height: $handover-button-height-md;
+    background-color: $handover-bg-card;
+    border: 2px solid $handover-primary;
+    color: $handover-primary;
+    font-size: $handover-font-size-base;
+    font-weight: $handover-font-weight-semibold;
+    border-radius: $handover-radius-md;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+      background-color: $handover-primary-lighter;
+      transform: scale(0.98);
+    }
+  }
+
+  .primary-button {
+    width: 100%;
+    height: $handover-button-height-lg;
+    background-color: $handover-primary;
+    color: #FFFFFF;
+    font-size: $handover-font-size-md;
+    font-weight: $handover-font-weight-semibold;
+    border-radius: $handover-radius-md;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+
+    &:active {
+      background-color: $handover-primary-dark;
+      transform: scale(0.98);
+    }
+  }
+
+  .share-link {
+    text-align: center;
+    font-size: $handover-font-size-sm;
+    color: $handover-gray-500;
+    text-decoration: underline;
+    padding: $handover-spacing-sm 0;
+  }
+}
+</style>
diff --git a/src/pages/handover/components/elder-card.vue b/src/pages/handover/components/elder-card.vue
new file mode 100644
index 0000000..4dd7324
--- /dev/null
+++ b/src/pages/handover/components/elder-card.vue
@@ -0,0 +1,164 @@
+<template>
+  <view
+    class="elder-card"
+    :class="levelClass"
+  >
+    <view class="card-border"></view>
+
+    <view class="card-header">
+      <view class="elder-info">
+        <text class="level-dot" :class="levelClass"></text>
+        <text class="elder-name">{{ elder.room }} {{ elder.name }}</text>
+      </view>
+    </view>
+
+    <view class="card-body">
+      <view class="issue-section">
+        <text class="issue-title">{{ elder.issue }}</text>
+        <text class="issue-desc">{{ elder.description }}</text>
+      </view>
+
+      <view v-if="elder.reminder" class="reminder-section">
+        <text class="reminder-icon">📌</text>
+        <text class="reminder-text">{{ elder.reminder }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, defineProps } from 'vue'
+
+const props = defineProps({
+  elder: {
+    type: Object,
+    required: true
+  }
+})
+
+const levelClass = computed(() => {
+  return `level-${props.elder.level}`
+})
+</script>
+
+<style lang="scss" scoped>
+.elder-card {
+  position: relative;
+  background-color: $handover-bg-card;
+  border-radius: $handover-radius-sm;
+  padding: $handover-spacing-sm;
+  margin-bottom: $handover-spacing-xs;
+  overflow: hidden;
+
+  &.level-danger {
+    background-color: $handover-danger-light;
+
+    .card-border {
+      background-color: $handover-danger;
+    }
+
+    .level-dot {
+      background-color: $handover-danger;
+    }
+  }
+
+  &.level-warning {
+    background-color: $handover-warning-light;
+
+    .card-border {
+      background-color: $handover-warning;
+    }
+
+    .level-dot {
+      background-color: $handover-warning;
+    }
+  }
+
+  &.level-normal {
+    background-color: $handover-primary-lighter;
+
+    .card-border {
+      background-color: $handover-primary;
+    }
+
+    .level-dot {
+      background-color: $handover-primary;
+    }
+  }
+}
+
+.card-border {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 8rpx;
+}
+
+.card-header {
+  margin-bottom: $handover-spacing-xs;
+
+  .elder-info {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+
+    .level-dot {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+    }
+
+    .elder-name {
+      font-size: $handover-font-size-base;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+  }
+}
+
+.card-body {
+  padding-left: 24rpx;
+}
+
+.issue-section {
+  margin-bottom: $handover-spacing-sm;
+
+  .issue-title {
+    display: block;
+    font-size: $handover-font-size-base;
+    font-weight: $handover-font-weight-medium;
+    color: $handover-gray-900;
+    margin-bottom: $handover-spacing-2xs;
+  }
+
+  .issue-desc {
+    display: block;
+    font-size: $handover-font-size-sm;
+    color: $handover-gray-700;
+    line-height: $handover-line-height-normal;
+    white-space: pre-line;
+  }
+}
+
+.reminder-section {
+  display: flex;
+  align-items: flex-start;
+  gap: $handover-spacing-2xs;
+  padding: $handover-spacing-xs;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: $handover-radius-xs;
+
+  .reminder-icon {
+    font-size: $handover-font-size-base;
+    color: $handover-primary;
+  }
+
+  .reminder-text {
+    flex: 1;
+    font-size: $handover-font-size-sm;
+    color: $handover-primary;
+    line-height: $handover-line-height-normal;
+  }
+}
+</style>
diff --git a/src/pages/handover/components/progress-indicator.vue b/src/pages/handover/components/progress-indicator.vue
new file mode 100644
index 0000000..4812e0d
--- /dev/null
+++ b/src/pages/handover/components/progress-indicator.vue
@@ -0,0 +1,126 @@
+<template>
+  <view class="progress-indicator">
+    <view
+      v-for="(step, index) in steps"
+      :key="index"
+      class="step-wrapper"
+    >
+      <view class="step-content">
+        <view
+          class="step-dot"
+          :class="{
+            active: index <= current,
+            completed: index < current
+          }"
+        >
+          <text v-if="index < current" class="check-icon">✓</text>
+        </view>
+        <text
+          class="step-label"
+          :class="{ active: index <= current }"
+        >
+          {{ step }}
+        </text>
+      </view>
+
+      <view
+        v-if="index < steps.length - 1"
+        class="step-line"
+        :class="{ active: index < current }"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  current: {
+    type: Number,
+    default: 0
+  }
+})
+
+const steps = ['上班\n留言', '本班\n总结', '下班\n交接']
+</script>
+
+<style lang="scss" scoped>
+.progress-indicator {
+  display: flex;
+  align-items: center;
+  padding: $handover-spacing-md $handover-page-padding;
+  background-color: $handover-bg-card;
+}
+
+.step-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+
+  &:last-child {
+    flex: 0;
+  }
+}
+
+.step-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $handover-spacing-2xs;
+}
+
+.step-dot {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  background-color: $handover-gray-200;
+  border: 2px solid $handover-gray-200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+
+  &.active {
+    background-color: $handover-primary;
+    border-color: $handover-primary;
+  }
+
+  &.completed {
+    background-color: $handover-primary;
+    border-color: $handover-primary;
+  }
+
+  .check-icon {
+    color: #FFFFFF;
+    font-size: 20rpx;
+    font-weight: $handover-font-weight-bold;
+  }
+}
+
+.step-label {
+  font-size: $handover-font-size-xs;
+  color: $handover-gray-500;
+  text-align: center;
+  white-space: pre-line;
+  line-height: 1.3;
+  transition: color 0.3s ease;
+
+  &.active {
+    color: $handover-primary;
+    font-weight: $handover-font-weight-medium;
+  }
+}
+
+.step-line {
+  flex: 1;
+  height: 2px;
+  background-color: $handover-gray-200;
+  margin: 0 $handover-spacing-xs;
+  transition: background-color 0.3s ease;
+
+  &.active {
+    background-color: $handover-primary;
+  }
+}
+</style>
diff --git a/src/pages/handover/components/remind-colleague-modal.vue b/src/pages/handover/components/remind-colleague-modal.vue
new file mode 100644
index 0000000..46f46e9
--- /dev/null
+++ b/src/pages/handover/components/remind-colleague-modal.vue
@@ -0,0 +1,203 @@
+<template>
+  <view class="remind-colleague-modal">
+    <!-- 遮罩层 -->
+    <view class="modal-mask" @click="handleClose"></view>
+
+    <!-- 提醒卡片 -->
+    <view class="remind-card">
+      <!-- 警告图标 -->
+      <view class="icon-wrapper">
+        <text class="warning-icon">⚠️</text>
+      </view>
+
+      <text class="remind-title">提醒接班人</text>
+
+      <text class="remind-desc">{{ successor.name }}还没有确认接班</text>
+
+      <text class="remind-note">您可以选择:</text>
+
+      <!-- 操作选项 -->
+      <view class="action-list">
+        <view class="action-item" @click="handleSendWechat">
+          <text class="action-icon">📱</text>
+          <text class="action-text">发送微信消息</text>
+        </view>
+
+        <view class="action-item" @click="handleCall">
+          <text class="action-icon">📞</text>
+          <text class="action-text">直接拨打电话</text>
+        </view>
+
+        <view class="action-item" @click="handleContactAdmin">
+          <text class="action-icon">👔</text>
+          <text class="action-text">联系管理员</text>
+        </view>
+      </view>
+
+      <!-- 取消按钮 -->
+      <view class="cancel-button" @click="handleClose">
+        再等等
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  successor: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const handleClose = () => {
+  emit('close')
+}
+
+const handleSendWechat = () => {
+  uni.showToast({
+    title: '正在打开微信...',
+    icon: 'none'
+  })
+  // TODO: 实际应该打开微信并填充内容
+  setTimeout(() => {
+    handleClose()
+  }, 1000)
+}
+
+const handleCall = () => {
+  uni.makePhoneCall({
+    phoneNumber: '13800000000' // TODO: 使用实际电话号码
+  })
+  handleClose()
+}
+
+const handleContactAdmin = () => {
+  uni.showToast({
+    title: '已通知管理员',
+    icon: 'success'
+  })
+  setTimeout(() => {
+    handleClose()
+  }, 1500)
+}
+</script>
+
+<style lang="scss" scoped>
+.remind-colleague-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $handover-z-popup;
+}
+
+.modal-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $handover-bg-mask;
+}
+
+.remind-card {
+  position: relative;
+  width: 640rpx;
+  background-color: $handover-bg-card;
+  border-radius: $handover-radius-lg;
+  padding: 48rpx;
+  box-shadow: $handover-shadow-2xl;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: cardEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes cardEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.icon-wrapper {
+  margin-bottom: $handover-spacing-md;
+
+  .warning-icon {
+    font-size: 96rpx;
+    display: inline-block;
+  }
+}
+
+.remind-title {
+  font-size: $handover-font-size-lg;
+  font-weight: $handover-font-weight-semibold;
+  color: $handover-gray-900;
+  margin-bottom: $handover-spacing-sm;
+}
+
+.remind-desc {
+  font-size: $handover-font-size-base;
+  color: $handover-gray-600;
+  margin-bottom: $handover-spacing-lg;
+  text-align: center;
+}
+
+.remind-note {
+  font-size: $handover-font-size-base;
+  color: $handover-gray-600;
+  margin-bottom: $handover-spacing-md;
+}
+
+.action-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: $handover-spacing-xs;
+  margin-bottom: $handover-spacing-lg;
+
+  .action-item {
+    width: 100%;
+    height: 96rpx;
+    background-color: $handover-bg-card;
+    border: 1px solid $handover-gray-200;
+    border-radius: $handover-radius-sm;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $handover-spacing-xs;
+
+    &:active {
+      background-color: $handover-gray-50;
+    }
+
+    .action-icon {
+      font-size: 40rpx;
+    }
+
+    .action-text {
+      font-size: $handover-font-size-base;
+      color: $handover-gray-700;
+    }
+  }
+}
+
+.cancel-button {
+  font-size: $handover-font-size-base;
+  color: $handover-gray-500;
+  padding: $handover-spacing-sm;
+}
+</style>
diff --git a/src/pages/handover/components/shift-end-reminder.vue b/src/pages/handover/components/shift-end-reminder.vue
new file mode 100644
index 0000000..d70777d
--- /dev/null
+++ b/src/pages/handover/components/shift-end-reminder.vue
@@ -0,0 +1,180 @@
+<template>
+  <view class="shift-end-reminder">
+    <!-- 遮罩层 -->
+    <view class="modal-mask" @click.stop></view>
+
+    <!-- 提醒卡片 -->
+    <view class="reminder-card">
+      <!-- 铃铛图标 -->
+      <view class="bell-wrapper">
+        <text class="bell-icon">🔔</text>
+      </view>
+
+      <text class="reminder-title">您今天的班次即将结束</text>
+
+      <view class="reminder-info">
+        <text class="info-icon">⏰</text>
+        <text class="info-text">{{ shiftEndTime }} 是您的下班时间</text>
+      </view>
+
+      <text class="reminder-note">请完成交接班记录后再下班</text>
+
+      <!-- 开始交接按钮 -->
+      <button class="start-button" @click="handleStart">
+        开始交接班 →
+      </button>
+
+      <!-- 稍后再说 -->
+      <view class="later-button" @click="handleLater">
+        稍后再说
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineEmits, defineProps } from 'vue'
+
+const props = defineProps({
+  shiftEndTime: {
+    type: String,
+    default: '17:30'
+  }
+})
+
+const emit = defineEmits(['start', 'later'])
+
+const handleStart = () => {
+  emit('start')
+}
+
+const handleLater = () => {
+  emit('later')
+}
+</script>
+
+<style lang="scss" scoped>
+.shift-end-reminder {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $handover-z-modal;
+}
+
+.modal-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $handover-bg-mask;
+}
+
+.reminder-card {
+  position: relative;
+  width: 640rpx;
+  background-color: $handover-bg-card;
+  border-radius: $handover-radius-lg;
+  padding: 48rpx;
+  box-shadow: $handover-shadow-2xl;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: cardEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes cardEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.bell-wrapper {
+  margin-bottom: $handover-spacing-lg;
+
+  .bell-icon {
+    font-size: 96rpx;
+    color: $handover-warning;
+    display: inline-block;
+    animation: bellRing 1s ease-in-out infinite;
+  }
+}
+
+@keyframes bellRing {
+  0%, 100% {
+    transform: rotate(-15deg);
+  }
+  50% {
+    transform: rotate(15deg);
+  }
+}
+
+.reminder-title {
+  font-size: $handover-font-size-lg;
+  font-weight: $handover-font-weight-semibold;
+  color: $handover-gray-900;
+  margin-bottom: $handover-spacing-lg;
+  text-align: center;
+}
+
+.reminder-info {
+  display: flex;
+  align-items: center;
+  gap: $handover-spacing-xs;
+  margin-bottom: $handover-spacing-sm;
+
+  .info-icon {
+    font-size: $handover-font-size-lg;
+  }
+
+  .info-text {
+    font-size: $handover-font-size-base;
+    color: $handover-gray-600;
+  }
+}
+
+.reminder-note {
+  font-size: $handover-font-size-base;
+  color: $handover-gray-600;
+  margin-bottom: $handover-spacing-xl;
+  text-align: center;
+}
+
+.start-button {
+  width: 100%;
+  height: 96rpx;
+  background-color: $handover-primary;
+  color: #FFFFFF;
+  font-size: $handover-font-size-md;
+  font-weight: $handover-font-weight-semibold;
+  border-radius: $handover-radius-sm;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  margin-bottom: $handover-spacing-md;
+
+  &:active {
+    background-color: $handover-primary-dark;
+    transform: scale(0.95);
+    box-shadow: $handover-shadow-button;
+  }
+}
+
+.later-button {
+  font-size: $handover-font-size-base;
+  color: $handover-gray-500;
+  text-decoration: underline;
+  padding: $handover-spacing-sm;
+}
+</style>
diff --git a/src/pages/handover/index.vue b/src/pages/handover/index.vue
new file mode 100644
index 0000000..88ac562
--- /dev/null
+++ b/src/pages/handover/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <view class="handover-index">
+    <!-- 下班提醒弹窗 -->
+    <shift-end-reminder
+      v-if="showReminder"
+      @start="handleStartHandover"
+      @later="handleLater"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from '@/hooks/useRouter'
+import ShiftEndReminder from './components/shift-end-reminder.vue'
+
+const router = useRouter()
+const showReminder = ref(false)
+
+onMounted(() => {
+  // 检查是否需要显示下班提醒
+  checkShiftEndTime()
+})
+
+const checkShiftEndTime = () => {
+  // TODO: 实际应该根据班次时间判断
+  // 这里先直接显示弹窗用于演示
+  showReminder.value = true
+}
+
+const handleStartHandover = () => {
+  // 开始交接班，跳转到查看上一班留言页面
+  router.push('/pages/handover/previous-notes')
+}
+
+const handleLater = () => {
+  // 稍后再说
+  showReminder.value = false
+  // TODO: 15分钟后再次提醒
+  uni.showToast({
+    title: '15分钟后将再次提醒',
+    icon: 'none'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.handover-index {
+  min-height: 100vh;
+  background-color: $handover-bg-page;
+}
+</style>
diff --git a/src/pages/handover/next-shift-notes.vue b/src/pages/handover/next-shift-notes.vue
new file mode 100644
index 0000000..d4e7208
--- /dev/null
+++ b/src/pages/handover/next-shift-notes.vue
@@ -0,0 +1,635 @@
+<template>
+  <view class="handover-next-shift-notes">
+    <!-- 导航栏 -->
+    <view class="nav-bar">
+      <view class="nav-left" @click="handleBack">
+        <text class="icon">←</text>
+        <text class="nav-title">交接班</text>
+      </view>
+      <view class="nav-right">
+        <text class="menu-icon">☰</text>
+      </view>
+    </view>
+
+    <!-- 进度指示器 -->
+    <progress-indicator :current="2" />
+
+    <!-- 内容区域 -->
+    <scroll-view scroll-y class="content-scroll">
+      <!-- 需要特别关注的老人 -->
+      <view class="focus-section">
+        <view class="section-header">
+          <text class="section-icon">🎯</text>
+          <text class="section-title">需要特别关注的老人</text>
+        </view>
+
+        <view
+          v-for="elder in focusElders"
+          :key="elder.id"
+          class="elder-item"
+          :class="{ expanded: elder.expanded }"
+        >
+          <view class="elder-header" @click="toggleElder(elder)">
+            <text class="checkbox" :class="{ checked: elder.checked }">
+              {{ elder.checked ? '☑️' : '☐' }}
+            </text>
+            <view class="elder-info">
+              <view class="elder-name-row">
+                <text class="elder-name">{{ elder.room }} {{ elder.name }}</text>
+                <text class="expand-icon">{{ elder.expanded ? '详情 ∧' : '详情 >' }}</text>
+              </view>
+              <view class="elder-issue">
+                <text class="issue-icon">{{ elder.issueIcon }}</text>
+                <text class="issue-text">{{ elder.issue }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view v-if="elder.expanded" class="elder-detail">
+            <view class="detail-section">
+              <text class="detail-title">提醒事项:</text>
+              <view
+                v-for="(item, index) in elder.reminders"
+                :key="index"
+                class="reminder-item"
+              >
+                <text class="bullet">•</text>
+                <text class="reminder-text">{{ item }}</text>
+              </view>
+            </view>
+
+            <view class="add-reminder" @click="handleAddReminder(elder)">
+              📋 [添加提醒事项]
+            </view>
+          </view>
+        </view>
+
+        <view class="add-elder-btn">
+          [+ 添加其他需要关注的老人]
+        </view>
+      </view>
+
+      <!-- 补充说明 -->
+      <view class="supplement-section">
+        <view class="section-header">
+          <text class="section-icon">💬</text>
+          <text class="section-title">补充说明</text>
+        </view>
+
+        <view class="text-input-wrapper">
+          <textarea
+            v-model="supplementNote"
+            class="supplement-textarea"
+            placeholder="长按语音输入或点击键盘输入"
+            :maxlength="500"
+            :show-confirm-bar="false"
+          />
+          <view class="char-count">{{ supplementNote.length }}/500</view>
+        </view>
+
+        <!-- 工具栏 -->
+        <view class="toolbar">
+          <view class="tool-button" @click="handleVoiceInput">
+            <text class="tool-icon">🎤</text>
+            <text class="tool-label">语音</text>
+          </view>
+          <view class="tool-button" @click="handleKeyboardInput">
+            <text class="tool-icon">⌨️</text>
+            <text class="tool-label">键盘</text>
+          </view>
+          <view class="tool-button" @click="handleAttachment">
+            <text class="tool-icon">📎</text>
+            <text class="tool-label">附件</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 接班人信息 -->
+      <view class="successor-section">
+        <view class="section-header">
+          <text class="section-icon">👤</text>
+          <text class="section-title">接班人信息</text>
+        </view>
+
+        <view class="successor-card">
+          <view class="successor-avatar">
+            <text class="avatar-text">王</text>
+          </view>
+          <view class="successor-info">
+            <text class="successor-name">{{ successor.name }}</text>
+            <text class="successor-shift">{{ successor.shift }}</text>
+            <text class="successor-time">{{ successor.time }}</text>
+            <text class="successor-phone">📞 {{ successor.phone }}</text>
+          </view>
+        </view>
+
+        <view class="successor-status online">
+          <text class="status-dot"></text>
+          <text class="status-text">{{ successor.name }}已在线，可以开始交接</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮 -->
+    <view class="bottom-action">
+      <button
+        class="primary-button"
+        :class="{ disabled: !canSubmit }"
+        :disabled="!canSubmit"
+        @click="handleSubmit"
+      >
+        提交交接班记录 ✓
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter } from '@/hooks/useRouter'
+import ProgressIndicator from './components/progress-indicator.vue'
+
+const router = useRouter()
+
+// 需要关注的老人
+const focusElders = ref([
+  {
+    id: 1,
+    room: '101房',
+    name: '张淑华奶奶',
+    checked: true,
+    expanded: false,
+    issueIcon: '💊',
+    issue: '晚上8点需要再测一次血压',
+    reminders: [
+      '测量后记录数据',
+      '如果≥145/90需通知医生',
+      '提醒老人按时吃降压药'
+    ]
+  },
+  {
+    id: 2,
+    room: '102房',
+    name: '王建国爷爷',
+    checked: true,
+    expanded: false,
+    issueIcon: '🍜',
+    issue: '晚餐需要特别照顾',
+    reminders: [
+      '准备软食和流质',
+      '喂食要慢，防止呛咳',
+      '观察食量并记录'
+    ]
+  },
+  {
+    id: 3,
+    room: '103房',
+    name: '李秀英奶奶',
+    checked: false,
+    expanded: false,
+    issueIcon: '😊',
+    issue: '情绪已稳定，正常照顾即可',
+    reminders: []
+  }
+])
+
+// 补充说明
+const supplementNote = ref('今天天气转凉，提醒老人们晚上加衣保暖。另外明天有健康讲座，可以鼓励大家参加。')
+
+// 接班人信息
+const successor = ref({
+  name: '王小明',
+  shift: '晚班护工',
+  time: '18:00-次日06:00',
+  phone: '138-xxxx-5678',
+  online: true
+})
+
+// 是否可以提交
+const canSubmit = computed(() => {
+  const hasCheckedElder = focusElders.value.some(e => e.checked)
+  return hasCheckedElder && successor.value.online
+})
+
+const handleBack = () => {
+  uni.navigateBack()
+}
+
+const toggleElder = (elder) => {
+  elder.expanded = !elder.expanded
+  elder.checked = !elder.checked
+}
+
+const handleAddReminder = (elder) => {
+  uni.showToast({
+    title: '添加提醒事项功能开发中',
+    icon: 'none'
+  })
+}
+
+const handleVoiceInput = () => {
+  uni.showToast({
+    title: '语音输入功能开发中',
+    icon: 'none'
+  })
+}
+
+const handleKeyboardInput = () => {
+  uni.showToast({
+    title: '请在文本框中输入',
+    icon: 'none'
+  })
+}
+
+const handleAttachment = () => {
+  uni.showToast({
+    title: '附件功能开发中',
+    icon: 'none'
+  })
+}
+
+const handleSubmit = () => {
+  if (!canSubmit.value) return
+
+  uni.showModal({
+    title: '确认提交',
+    content: '确定要提交交接班记录吗？',
+    success: (res) => {
+      if (res.confirm) {
+        // 提交交接班记录
+        router.push('/pages/handover/waiting-confirm')
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.handover-next-shift-notes {
+  min-height: 100vh;
+  background-color: $handover-bg-page;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-bar {
+  height: $handover-navbar-height;
+  background-color: $handover-bg-card;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $handover-page-padding;
+  box-shadow: $handover-shadow-xs;
+
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+
+    .icon {
+      font-size: $handover-font-size-lg;
+      color: $handover-primary;
+    }
+
+    .nav-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-medium;
+      color: $handover-gray-900;
+    }
+  }
+
+  .nav-right {
+    .menu-icon {
+      font-size: $handover-font-size-xl;
+      color: $handover-gray-500;
+    }
+  }
+}
+
+.content-scroll {
+  flex: 1;
+  padding: $handover-page-padding;
+  padding-bottom: 100px;
+}
+
+.focus-section,
+.supplement-section,
+.successor-section {
+  margin-bottom: $handover-spacing-lg;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-sm;
+
+    .section-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .section-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+  }
+}
+
+.elder-item {
+  background-color: $handover-bg-card;
+  border-radius: $handover-radius-md;
+  padding: $handover-spacing-sm;
+  margin-bottom: $handover-spacing-sm;
+  overflow: hidden;
+
+  .elder-header {
+    display: flex;
+    align-items: flex-start;
+    gap: $handover-spacing-sm;
+
+    .checkbox {
+      font-size: 48rpx;
+      color: $handover-gray-300;
+      margin-top: 4rpx;
+
+      &.checked {
+        color: $handover-primary;
+      }
+    }
+
+    .elder-info {
+      flex: 1;
+
+      .elder-name-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: $handover-spacing-2xs;
+
+        .elder-name {
+          font-size: $handover-font-size-base;
+          font-weight: $handover-font-weight-medium;
+          color: $handover-gray-900;
+        }
+
+        .expand-icon {
+          font-size: $handover-font-size-sm;
+          color: $handover-primary;
+        }
+      }
+
+      .elder-issue {
+        display: flex;
+        align-items: center;
+        gap: $handover-spacing-2xs;
+
+        .issue-icon {
+          font-size: $handover-font-size-base;
+        }
+
+        .issue-text {
+          font-size: $handover-font-size-sm;
+          color: $handover-gray-600;
+        }
+      }
+    }
+  }
+
+  .elder-detail {
+    margin-top: $handover-spacing-sm;
+    padding-top: $handover-spacing-sm;
+    border-top: 1px solid $handover-gray-200;
+
+    .detail-section {
+      background-color: $handover-bg-page;
+      border-radius: $handover-radius-sm;
+      padding: $handover-spacing-sm;
+      margin-bottom: $handover-spacing-sm;
+
+      .detail-title {
+        font-size: $handover-font-size-sm;
+        font-weight: $handover-font-weight-medium;
+        color: $handover-gray-700;
+        margin-bottom: $handover-spacing-2xs;
+      }
+
+      .reminder-item {
+        display: flex;
+        align-items: flex-start;
+        gap: $handover-spacing-2xs;
+        margin-bottom: $handover-spacing-2xs;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .bullet {
+          font-size: $handover-font-size-sm;
+          color: $handover-gray-500;
+          line-height: $handover-line-height-normal;
+        }
+
+        .reminder-text {
+          flex: 1;
+          font-size: $handover-font-size-sm;
+          color: $handover-gray-700;
+          line-height: $handover-line-height-normal;
+        }
+      }
+    }
+
+    .add-reminder {
+      font-size: $handover-font-size-sm;
+      color: $handover-primary;
+      text-align: center;
+    }
+  }
+}
+
+.add-elder-btn {
+  border: 1px dashed $handover-gray-300;
+  border-radius: $handover-radius-md;
+  padding: $handover-spacing-md;
+  text-align: center;
+  font-size: $handover-font-size-base;
+  color: $handover-gray-500;
+}
+
+.text-input-wrapper {
+  position: relative;
+  margin-bottom: $handover-spacing-sm;
+
+  .supplement-textarea {
+    width: 100%;
+    min-height: 240rpx;
+    background-color: $handover-bg-card;
+    border: 1px solid $handover-gray-200;
+    border-radius: $handover-radius-sm;
+    padding: $handover-spacing-sm;
+    font-size: $handover-font-size-base;
+    color: $handover-gray-900;
+    line-height: $handover-line-height-relaxed;
+  }
+
+  .char-count {
+    position: absolute;
+    bottom: 8px;
+    right: 12px;
+    font-size: $handover-font-size-xs;
+    color: $handover-gray-400;
+  }
+}
+
+.toolbar {
+  display: flex;
+  gap: $handover-spacing-2xs;
+
+  .tool-button {
+    flex: 1;
+    height: 88rpx;
+    background-color: $handover-bg-card;
+    border: 1px solid $handover-gray-200;
+    border-radius: $handover-radius-sm;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $handover-spacing-2xs;
+
+    &:active {
+      background-color: $handover-gray-50;
+    }
+
+    .tool-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .tool-label {
+      font-size: $handover-font-size-xs;
+      color: $handover-gray-600;
+    }
+  }
+}
+
+.successor-card {
+  background-color: $handover-bg-card;
+  border-radius: $handover-radius-md;
+  padding: $handover-spacing-sm;
+  display: flex;
+  align-items: center;
+  gap: $handover-spacing-sm;
+  margin-bottom: $handover-spacing-sm;
+
+  .successor-avatar {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    background-color: $handover-primary-light;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .avatar-text {
+      font-size: $handover-font-size-xl;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-primary;
+    }
+  }
+
+  .successor-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: $handover-spacing-2xs;
+
+    .successor-name {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+
+    .successor-shift {
+      font-size: $handover-font-size-sm;
+      color: $handover-gray-600;
+    }
+
+    .successor-time {
+      font-size: $handover-font-size-sm;
+      color: $handover-gray-500;
+    }
+
+    .successor-phone {
+      font-size: $handover-font-size-sm;
+      color: $handover-gray-600;
+    }
+  }
+}
+
+.successor-status {
+  display: flex;
+  align-items: center;
+  gap: $handover-spacing-xs;
+  padding: $handover-spacing-sm;
+  border-radius: $handover-radius-sm;
+
+  &.online {
+    background-color: $handover-success-light;
+
+    .status-dot {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+      background-color: $handover-success;
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .status-text {
+      font-size: $handover-font-size-sm;
+      color: $handover-success;
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.bottom-action {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: $handover-page-padding;
+  background-color: $handover-bg-card;
+  box-shadow: $handover-shadow-lg;
+
+  .primary-button {
+    width: 100%;
+    height: $handover-button-height-lg;
+    background-color: $handover-success;
+    color: #FFFFFF;
+    font-size: $handover-font-size-md;
+    font-weight: $handover-font-weight-semibold;
+    border-radius: $handover-radius-md;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+
+    &:active:not(.disabled) {
+      background-color: darken($handover-success, 10%);
+      transform: scale(0.98);
+    }
+
+    &.disabled {
+      background-color: $handover-gray-300;
+      color: $handover-gray-500;
+    }
+  }
+}
+</style>
diff --git a/src/pages/handover/previous-notes.vue b/src/pages/handover/previous-notes.vue
new file mode 100644
index 0000000..23d7df1
--- /dev/null
+++ b/src/pages/handover/previous-notes.vue
@@ -0,0 +1,352 @@
+<template>
+  <view class="handover-previous-notes">
+    <!-- 导航栏 -->
+    <view class="nav-bar">
+      <view class="nav-left" @click="handleBack">
+        <text class="icon">←</text>
+        <text class="nav-title">交接班</text>
+      </view>
+      <view class="nav-right">
+        <text class="menu-icon">☰</text>
+      </view>
+    </view>
+
+    <!-- 进度指示器 -->
+    <progress-indicator :current="0" />
+
+    <!-- 内容区域 -->
+    <scroll-view scroll-y class="content-scroll">
+      <!-- 上一班留言标题 -->
+      <view class="section-header">
+        <text class="section-icon">📋</text>
+        <text class="section-title">上一班留言</text>
+      </view>
+
+      <!-- 班次信息 -->
+      <view class="shift-info-card">
+        <view class="shift-info-item">
+          <text class="icon">👤</text>
+          <text class="label">早班 {{ previousShift.caregiver }}</text>
+        </view>
+        <view class="shift-info-item">
+          <text class="icon">⏰</text>
+          <text class="label">{{ previousShift.timeRange }}</text>
+        </view>
+      </view>
+
+      <!-- 重点关注老人 -->
+      <view class="focus-section">
+        <view class="focus-header">
+          <text class="focus-icon">⚠️</text>
+          <text class="focus-title">重点关注 ({{ focusElders.length }}位老人)</text>
+        </view>
+
+        <elder-card
+          v-for="elder in focusElders"
+          :key="elder.id"
+          :elder="elder"
+        />
+      </view>
+
+      <!-- 待完成任务 -->
+      <view class="todo-section">
+        <view class="todo-header">
+          <text class="todo-icon">📝</text>
+          <text class="todo-title">待完成任务 ({{ todos.length }}项)</text>
+        </view>
+
+        <view class="todo-list">
+          <view
+            v-for="todo in todos"
+            :key="todo.id"
+            class="todo-item"
+          >
+            <text class="checkbox">☐</text>
+            <view class="todo-content">
+              <text class="todo-text">{{ todo.content }}</text>
+              <text class="todo-note">{{ todo.note }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮 -->
+    <view class="bottom-action">
+      <button class="primary-button" @click="handleNext">
+        知道了，下一步 →
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from '@/hooks/useRouter'
+import ProgressIndicator from './components/progress-indicator.vue'
+import ElderCard from './components/elder-card.vue'
+
+const router = useRouter()
+
+// 上一班信息
+const previousShift = ref({
+  caregiver: '李小花',
+  timeRange: '06:00-14:00'
+})
+
+// 重点关注老人
+const focusElders = ref([
+  {
+    id: 1,
+    room: '101房',
+    name: '张淑华奶奶',
+    level: 'danger',
+    issue: '血压异常',
+    description: '早上测量 158/95 mmHg\n已通知值班医生，医生建议加强监测',
+    reminder: '下午17:00需再次测量血压'
+  },
+  {
+    id: 2,
+    room: '102房',
+    name: '王建国爷爷',
+    level: 'warning',
+    issue: '食欲不佳',
+    description: '午餐只吃了一半(约40%)',
+    reminder: '晚餐需特别关注，喂食协助'
+  },
+  {
+    id: 3,
+    room: '103房',
+    name: '李秀英奶奶',
+    level: 'warning',
+    issue: '情绪低落',
+    description: '上午不愿参加活动，在房间发呆',
+    reminder: '建议多陪伴聊天，了解原因'
+  }
+])
+
+// 待完成任务
+const todos = ref([
+  {
+    id: 1,
+    content: '101房 17:00 测量血压',
+    note: '未完成，请接手处理'
+  },
+  {
+    id: 2,
+    content: '103房 晚餐特别照顾',
+    note: '注意观察食欲和情绪'
+  }
+])
+
+const handleBack = () => {
+  uni.navigateBack()
+}
+
+const handleNext = () => {
+  router.push('/pages/handover/work-summary')
+}
+</script>
+
+<style lang="scss" scoped>
+.handover-previous-notes {
+  min-height: 100vh;
+  background-color: $handover-bg-page;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-bar {
+  height: $handover-navbar-height;
+  background-color: $handover-bg-card;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $handover-page-padding;
+  box-shadow: $handover-shadow-xs;
+
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+
+    .icon {
+      font-size: $handover-font-size-lg;
+      color: $handover-primary;
+    }
+
+    .nav-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-medium;
+      color: $handover-gray-900;
+    }
+  }
+
+  .nav-right {
+    .menu-icon {
+      font-size: $handover-font-size-xl;
+      color: $handover-gray-500;
+    }
+  }
+}
+
+.content-scroll {
+  flex: 1;
+  padding: $handover-page-padding;
+  padding-bottom: 80px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: $handover-spacing-xs;
+  margin-bottom: $handover-spacing-md;
+
+  .section-icon {
+    font-size: $handover-font-size-lg;
+  }
+
+  .section-title {
+    font-size: $handover-font-size-md;
+    font-weight: $handover-font-weight-semibold;
+    color: $handover-gray-900;
+  }
+}
+
+.shift-info-card {
+  background-color: $handover-bg-card;
+  border-radius: $handover-radius-md;
+  padding: $handover-content-padding;
+  margin-bottom: $handover-card-gap;
+
+  .shift-info-item {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-xs;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .icon {
+      font-size: $handover-font-size-base;
+    }
+
+    .label {
+      font-size: $handover-font-size-base;
+      color: $handover-gray-600;
+    }
+  }
+}
+
+.focus-section {
+  margin-bottom: $handover-spacing-lg;
+
+  .focus-header {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-sm;
+
+    .focus-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .focus-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+  }
+}
+
+.todo-section {
+  .todo-header {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-sm;
+
+    .todo-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .todo-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+  }
+
+  .todo-list {
+    background-color: $handover-bg-card;
+    border-radius: $handover-radius-md;
+    padding: $handover-content-padding;
+
+    .todo-item {
+      display: flex;
+      align-items: flex-start;
+      gap: $handover-spacing-sm;
+      margin-bottom: $handover-spacing-md;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .checkbox {
+        font-size: $handover-font-size-lg;
+        color: $handover-primary;
+        margin-top: 2px;
+      }
+
+      .todo-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: $handover-spacing-2xs;
+
+        .todo-text {
+          font-size: $handover-font-size-base;
+          color: $handover-gray-900;
+          line-height: $handover-line-height-normal;
+        }
+
+        .todo-note {
+          font-size: $handover-font-size-sm;
+          color: $handover-gray-500;
+        }
+      }
+    }
+  }
+}
+
+.bottom-action {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: $handover-page-padding;
+  background-color: $handover-bg-card;
+  box-shadow: $handover-shadow-lg;
+
+  .primary-button {
+    width: 100%;
+    height: $handover-button-height-lg;
+    background-color: $handover-primary;
+    color: #FFFFFF;
+    font-size: $handover-font-size-md;
+    font-weight: $handover-font-weight-semibold;
+    border-radius: $handover-radius-md;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+
+    &:active {
+      background-color: $handover-primary-dark;
+      transform: scale(0.98);
+    }
+  }
+}
+</style>
diff --git a/src/pages/handover/waiting-confirm.vue b/src/pages/handover/waiting-confirm.vue
new file mode 100644
index 0000000..d4a760b
--- /dev/null
+++ b/src/pages/handover/waiting-confirm.vue
@@ -0,0 +1,360 @@
+<template>
+  <view class="handover-waiting-confirm">
+    <!-- 遮罩层 -->
+    <view class="modal-mask"></view>
+
+    <!-- 等待确认卡片 -->
+    <view class="waiting-card">
+      <!-- 沙漏图标 -->
+      <view class="icon-wrapper">
+        <text class="hourglass-icon" :class="{ rotating: isWaiting }">⏳</text>
+      </view>
+
+      <text class="waiting-title">等待确认中...</text>
+
+      <text class="waiting-desc">已向{{ successor.name }}发送交接班记录</text>
+
+      <!-- 接班人信息 -->
+      <view class="successor-info">
+        <view class="successor-avatar">
+          <text class="avatar-text">{{ successor.name.charAt(0) }}</text>
+        </view>
+        <text class="successor-name">{{ successor.name }}</text>
+        <text class="successor-role">{{ successor.role }}</text>
+        <view class="online-status">
+          <text class="status-dot"></text>
+          <text class="status-text">在线</text>
+        </view>
+      </view>
+
+      <!-- 通知状态 -->
+      <view class="notification-status">
+        <text class="status-title">系统已自动发送:</text>
+        <view
+          v-for="(item, index) in notifications"
+          :key="index"
+          class="notification-item"
+          :style="{ animationDelay: `${index * 0.3}s` }"
+        >
+          <text class="check-icon">✓</text>
+          <text class="notification-text">{{ item }}</text>
+        </view>
+      </view>
+
+      <!-- 预计等待时间 -->
+      <view class="wait-time">
+        <text class="wait-time-text">预计等待时间: < 2分钟</text>
+      </view>
+
+      <!-- 催一下按钮 -->
+      <view
+        class="remind-button"
+        :class="{ disabled: remindDisabled }"
+        @click="handleRemind"
+      >
+        催一下
+      </view>
+
+      <!-- 进度转圈 -->
+      <view class="loading-ring"></view>
+    </view>
+
+    <!-- 催促弹窗 -->
+    <remind-colleague-modal
+      v-if="showRemindModal"
+      :successor="successor"
+      @close="showRemindModal = false"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from '@/hooks/useRouter'
+import RemindColleagueModal from './components/remind-colleague-modal.vue'
+
+const router = useRouter()
+
+const isWaiting = ref(true)
+const remindDisabled = ref(false)
+const showRemindModal = ref(false)
+
+// 接班人信息
+const successor = ref({
+  name: '王小明',
+  role: '晚班护工'
+})
+
+// 通知列表
+const notifications = ref([
+  '微信通知',
+  '短信提醒',
+  'APP推送'
+])
+
+let waitTimer = null
+
+onMounted(() => {
+  // 模拟等待确认，3秒后自动跳转
+  waitTimer = setTimeout(() => {
+    handleConfirmed()
+  }, 3000)
+})
+
+onUnmounted(() => {
+  if (waitTimer) {
+    clearTimeout(waitTimer)
+  }
+})
+
+const handleRemind = () => {
+  if (remindDisabled.value) return
+
+  showRemindModal.value = true
+  remindDisabled.value = true
+
+  // 30秒后恢复可催促
+  setTimeout(() => {
+    remindDisabled.value = false
+  }, 30000)
+}
+
+const handleConfirmed = () => {
+  // 跳转到完成页面
+  router.replace('/pages/handover/complete')
+}
+</script>
+
+<style lang="scss" scoped>
+.handover-waiting-confirm {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $handover-z-modal;
+}
+
+.modal-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $handover-bg-mask;
+}
+
+.waiting-card {
+  position: relative;
+  width: 640rpx;
+  background-color: $handover-bg-card;
+  border-radius: $handover-radius-lg;
+  padding: 48rpx;
+  box-shadow: $handover-shadow-2xl;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: cardEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes cardEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.icon-wrapper {
+  margin-bottom: $handover-spacing-md;
+
+  .hourglass-icon {
+    font-size: 96rpx;
+    display: inline-block;
+
+    &.rotating {
+      animation: rotate 2s linear infinite;
+    }
+  }
+}
+
+@keyframes rotate {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+}
+
+.waiting-title {
+  font-size: $handover-font-size-lg;
+  font-weight: $handover-font-weight-semibold;
+  color: $handover-gray-900;
+  margin-bottom: $handover-spacing-sm;
+}
+
+.waiting-desc {
+  font-size: $handover-font-size-base;
+  color: $handover-gray-600;
+  margin-bottom: $handover-spacing-lg;
+}
+
+.successor-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: $handover-spacing-lg;
+
+  .successor-avatar {
+    width: 128rpx;
+    height: 128rpx;
+    border-radius: 50%;
+    background-color: $handover-primary-light;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: $handover-spacing-sm;
+
+    .avatar-text {
+      font-size: 48rpx;
+      font-weight: $handover-font-weight-bold;
+      color: $handover-primary;
+    }
+  }
+
+  .successor-name {
+    font-size: $handover-font-size-md;
+    font-weight: $handover-font-weight-semibold;
+    color: $handover-gray-900;
+    margin-bottom: $handover-spacing-2xs;
+  }
+
+  .successor-role {
+    font-size: $handover-font-size-sm;
+    color: $handover-gray-600;
+    margin-bottom: $handover-spacing-sm;
+  }
+
+  .online-status {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-2xs;
+
+    .status-dot {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+      background-color: $handover-success;
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .status-text {
+      font-size: $handover-font-size-xs;
+      color: $handover-success;
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.notification-status {
+  width: 100%;
+  margin-bottom: $handover-spacing-lg;
+
+  .status-title {
+    display: block;
+    font-size: $handover-font-size-sm;
+    color: $handover-gray-600;
+    margin-bottom: $handover-spacing-xs;
+    text-align: center;
+  }
+
+  .notification-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-2xs;
+    animation: fadeInUp 0.5s ease forwards;
+    opacity: 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .check-icon {
+      color: $handover-success;
+      font-size: $handover-font-size-base;
+      font-weight: $handover-font-weight-bold;
+    }
+
+    .notification-text {
+      font-size: $handover-font-size-sm;
+      color: $handover-success;
+    }
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.wait-time {
+  margin-bottom: $handover-spacing-md;
+
+  .wait-time-text {
+    font-size: $handover-font-size-xs;
+    color: $handover-warning;
+  }
+}
+
+.remind-button {
+  font-size: $handover-font-size-base;
+  color: $handover-primary;
+  text-decoration: underline;
+  cursor: pointer;
+  margin-bottom: $handover-spacing-lg;
+
+  &.disabled {
+    color: $handover-gray-400;
+    text-decoration: none;
+    pointer-events: none;
+  }
+}
+
+.loading-ring {
+  width: 48rpx;
+  height: 48rpx;
+  border: 3px solid $handover-primary-light;
+  border-top-color: $handover-primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/pages/handover/work-summary.vue b/src/pages/handover/work-summary.vue
new file mode 100644
index 0000000..3dec1c9
--- /dev/null
+++ b/src/pages/handover/work-summary.vue
@@ -0,0 +1,611 @@
+<template>
+  <view class="handover-work-summary">
+    <!-- 导航栏 -->
+    <view class="nav-bar">
+      <view class="nav-left" @click="handleBack">
+        <text class="icon">←</text>
+        <text class="nav-title">交接班</text>
+      </view>
+      <view class="nav-right">
+        <text class="menu-icon">☰</text>
+      </view>
+    </view>
+
+    <!-- 进度指示器 -->
+    <progress-indicator :current="1" />
+
+    <!-- 内容区域 -->
+    <scroll-view scroll-y class="content-scroll">
+      <!-- 工作统计 -->
+      <view class="statistics-card">
+        <view class="stats-header">
+          <text class="stats-icon">📊</text>
+          <text class="stats-title">本班工作统计</text>
+        </view>
+
+        <view class="stats-grid">
+          <view class="stat-item">
+            <text class="stat-number">{{ statistics.total }}</text>
+            <text class="stat-label">总任务</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-number">{{ statistics.care }}</text>
+            <text class="stat-label">护理</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-number">{{ statistics.meal }}</text>
+            <text class="stat-label">用餐</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-number">{{ statistics.monitor }}</text>
+            <text class="stat-label">监测</text>
+          </view>
+        </view>
+
+        <view class="stats-badge">
+          <text class="badge-icon">✅</text>
+          <text class="badge-text">{{ statistics.completion }}% 任务完成率</text>
+        </view>
+        <text class="stats-note">今天表现很棒！</text>
+      </view>
+
+      <!-- 重点工作记录 -->
+      <view class="work-record-section">
+        <view class="section-header">
+          <text class="section-icon">📝</text>
+          <text class="section-title">重点工作记录</text>
+        </view>
+
+        <view class="text-input-wrapper">
+          <textarea
+            v-model="workRecord"
+            class="work-textarea"
+            placeholder="长按语音输入或点击键盘输入"
+            :maxlength="500"
+            :show-confirm-bar="false"
+          />
+          <view class="char-count">{{ workRecord.length }}/500</view>
+        </view>
+
+        <!-- 工具栏 -->
+        <view class="toolbar">
+          <view class="tool-button" @click="handleVoiceInput">
+            <text class="tool-icon">🎤</text>
+            <text class="tool-label">语音</text>
+          </view>
+          <view class="tool-button" @click="handleKeyboardInput">
+            <text class="tool-icon">⌨️</text>
+            <text class="tool-label">键盘</text>
+          </view>
+          <view class="tool-button" @click="handleTakePhoto">
+            <text class="tool-icon">📷</text>
+            <text class="tool-label">拍照</text>
+          </view>
+        </view>
+
+        <view class="input-tip">
+          <text class="tip-icon">💡</text>
+          <text class="tip-text">说说今天的重点工作和需要交代的事项</text>
+        </view>
+      </view>
+
+      <!-- 快捷标签 -->
+      <view class="tag-section">
+        <view class="section-header">
+          <text class="section-icon">🏷️</text>
+          <text class="section-title">快捷标签 (点击插入)</text>
+        </view>
+
+        <view class="tag-list">
+          <view
+            v-for="tag in quickTags"
+            :key="tag"
+            class="tag-item"
+            :class="{ active: selectedTags.includes(tag) }"
+            @click="handleTagClick(tag)"
+          >
+            {{ tag }}
+          </view>
+          <view class="tag-item tag-add">
+            + 自定义
+          </view>
+        </view>
+      </view>
+
+      <!-- 照片记录 -->
+      <view class="photo-section">
+        <view class="section-header">
+          <text class="section-icon">📸</text>
+          <text class="section-title">照片记录 ({{ photos.length }}/9)</text>
+        </view>
+
+        <view class="photo-grid">
+          <view
+            v-for="(photo, index) in photos"
+            :key="index"
+            class="photo-item"
+          >
+            <image :src="photo" class="photo-image" mode="aspectFill" />
+            <view class="photo-delete" @click="handleDeletePhoto(index)">
+              <text class="delete-icon">×</text>
+            </view>
+          </view>
+          <view
+            v-if="photos.length < 9"
+            class="photo-item photo-add"
+            @click="handleAddPhoto"
+          >
+            <text class="add-icon">+</text>
+            <text class="add-label">添加</text>
+          </view>
+        </view>
+
+        <view class="photo-tip">
+          <text class="tip-icon">💡</text>
+          <text class="tip-text">可以拍摄老人状态、餐食等照片</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮 -->
+    <view class="bottom-action">
+      <button
+        class="primary-button"
+        :class="{ disabled: !canNext }"
+        :disabled="!canNext"
+        @click="handleNext"
+      >
+        下一步：交接给接班人 →
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter } from '@/hooks/useRouter'
+import ProgressIndicator from './components/progress-indicator.vue'
+
+const router = useRouter()
+
+// 工作统计
+const statistics = ref({
+  total: 15,
+  care: 8,
+  meal: 5,
+  monitor: 2,
+  completion: 100
+})
+
+// 工作记录
+const workRecord = ref('101房张奶奶下午血压已恢复正常140/85，医生说继续观察...\n\n102房王爷爷晚餐吃了一碗粥，胃口比中午好转，还喝了半碗汤...')
+
+// 快捷标签
+const quickTags = ref([
+  '血压正常',
+  '食欲改善',
+  '情绪稳定',
+  '需要关注',
+  '已通知医生',
+  '家属满意'
+])
+
+// 选中的标签
+const selectedTags = ref([])
+
+// 照片列表
+const photos = ref([])
+
+// 是否可以进入下一步
+const canNext = computed(() => {
+  return workRecord.value.trim().length > 0
+})
+
+const handleBack = () => {
+  uni.navigateBack()
+}
+
+const handleVoiceInput = () => {
+  uni.showToast({
+    title: '语音输入功能开发中',
+    icon: 'none'
+  })
+}
+
+const handleKeyboardInput = () => {
+  // 聚焦文本框
+  uni.showToast({
+    title: '请在文本框中输入',
+    icon: 'none'
+  })
+}
+
+const handleTakePhoto = () => {
+  uni.chooseImage({
+    count: 9 - photos.value.length,
+    sizeType: ['compressed'],
+    sourceType: ['camera', 'album'],
+    success: (res) => {
+      photos.value.push(...res.tempFilePaths)
+    }
+  })
+}
+
+const handleTagClick = (tag) => {
+  const index = selectedTags.value.indexOf(tag)
+  if (index > -1) {
+    selectedTags.value.splice(index, 1)
+  } else {
+    selectedTags.value.push(tag)
+  }
+
+  // 插入到文本框
+  workRecord.value += `\n#${tag}`
+}
+
+const handleAddPhoto = () => {
+  handleTakePhoto()
+}
+
+const handleDeletePhoto = (index) => {
+  photos.value.splice(index, 1)
+}
+
+const handleNext = () => {
+  if (!canNext.value) return
+  router.push('/pages/handover/next-shift-notes')
+}
+</script>
+
+<style lang="scss" scoped>
+.handover-work-summary {
+  min-height: 100vh;
+  background-color: $handover-bg-page;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-bar {
+  height: $handover-navbar-height;
+  background-color: $handover-bg-card;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $handover-page-padding;
+  box-shadow: $handover-shadow-xs;
+
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+
+    .icon {
+      font-size: $handover-font-size-lg;
+      color: $handover-primary;
+    }
+
+    .nav-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-medium;
+      color: $handover-gray-900;
+    }
+  }
+
+  .nav-right {
+    .menu-icon {
+      font-size: $handover-font-size-xl;
+      color: $handover-gray-500;
+    }
+  }
+}
+
+.content-scroll {
+  flex: 1;
+  padding: $handover-page-padding;
+  padding-bottom: 100px;
+}
+
+.statistics-card {
+  background: linear-gradient(135deg, $handover-primary-lighter 0%, $handover-primary-light 100%);
+  border-radius: $handover-radius-lg;
+  padding: $handover-spacing-lg;
+  margin-bottom: $handover-spacing-md;
+
+  .stats-header {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-md;
+
+    .stats-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .stats-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $handover-spacing-md;
+    margin-bottom: $handover-spacing-md;
+
+    .stat-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .stat-number {
+        font-size: $handover-font-size-2xl;
+        font-weight: $handover-font-weight-bold;
+        color: $handover-primary;
+        line-height: 1.2;
+      }
+
+      .stat-label {
+        font-size: $handover-font-size-xs;
+        color: $handover-gray-600;
+        margin-top: $handover-spacing-2xs;
+      }
+    }
+  }
+
+  .stats-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $handover-spacing-2xs;
+    margin-bottom: $handover-spacing-2xs;
+
+    .badge-icon {
+      font-size: $handover-font-size-base;
+    }
+
+    .badge-text {
+      font-size: $handover-font-size-sm;
+      font-weight: $handover-font-weight-medium;
+      color: $handover-success;
+    }
+  }
+
+  .stats-note {
+    text-align: center;
+    font-size: $handover-font-size-sm;
+    color: $handover-gray-600;
+  }
+}
+
+.work-record-section,
+.tag-section,
+.photo-section {
+  margin-bottom: $handover-spacing-lg;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: $handover-spacing-xs;
+    margin-bottom: $handover-spacing-sm;
+
+    .section-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .section-title {
+      font-size: $handover-font-size-md;
+      font-weight: $handover-font-weight-semibold;
+      color: $handover-gray-900;
+    }
+  }
+}
+
+.text-input-wrapper {
+  position: relative;
+  margin-bottom: $handover-spacing-sm;
+
+  .work-textarea {
+    width: 100%;
+    min-height: 240rpx;
+    background-color: $handover-bg-card;
+    border: 1px solid $handover-gray-200;
+    border-radius: $handover-radius-sm;
+    padding: $handover-spacing-sm;
+    font-size: $handover-font-size-base;
+    color: $handover-gray-900;
+    line-height: $handover-line-height-relaxed;
+  }
+
+  .char-count {
+    position: absolute;
+    bottom: 8px;
+    right: 12px;
+    font-size: $handover-font-size-xs;
+    color: $handover-gray-400;
+  }
+}
+
+.toolbar {
+  display: flex;
+  gap: $handover-spacing-2xs;
+  margin-bottom: $handover-spacing-sm;
+
+  .tool-button {
+    flex: 1;
+    height: 88rpx;
+    background-color: $handover-bg-card;
+    border: 1px solid $handover-gray-200;
+    border-radius: $handover-radius-sm;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $handover-spacing-2xs;
+
+    &:active {
+      background-color: $handover-gray-50;
+    }
+
+    .tool-icon {
+      font-size: $handover-font-size-lg;
+    }
+
+    .tool-label {
+      font-size: $handover-font-size-xs;
+      color: $handover-gray-600;
+    }
+  }
+}
+
+.input-tip,
+.photo-tip {
+  display: flex;
+  align-items: center;
+  gap: $handover-spacing-2xs;
+
+  .tip-icon {
+    font-size: $handover-font-size-base;
+  }
+
+  .tip-text {
+    font-size: $handover-font-size-xs;
+    color: $handover-gray-400;
+  }
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $handover-spacing-xs;
+
+  .tag-item {
+    padding: $handover-spacing-xs $handover-spacing-sm;
+    background-color: $handover-bg-input;
+    border-radius: $handover-radius-full;
+    font-size: $handover-font-size-sm;
+    color: $handover-gray-700;
+
+    &:active {
+      background-color: $handover-gray-200;
+    }
+
+    &.active {
+      background-color: $handover-primary;
+      color: #FFFFFF;
+    }
+
+    &.tag-add {
+      background-color: transparent;
+      border: 1px dashed $handover-gray-300;
+      color: $handover-gray-500;
+    }
+  }
+}
+
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $handover-spacing-xs;
+  margin-bottom: $handover-spacing-sm;
+
+  .photo-item {
+    position: relative;
+    width: 100%;
+    padding-bottom: 100%;
+    border-radius: $handover-radius-sm;
+    overflow: hidden;
+
+    .photo-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .photo-delete {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 40rpx;
+      height: 40rpx;
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .delete-icon {
+        color: #FFFFFF;
+        font-size: 36rpx;
+        line-height: 1;
+      }
+    }
+
+    &.photo-add {
+      border: 1px dashed $handover-gray-300;
+      background-color: $handover-bg-input;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      padding-bottom: 100%;
+
+      .add-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -60%);
+        font-size: 48rpx;
+        color: $handover-gray-400;
+      }
+
+      .add-label {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 20%);
+        font-size: $handover-font-size-xs;
+        color: $handover-gray-400;
+      }
+    }
+  }
+}
+
+.bottom-action {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: $handover-page-padding;
+  background-color: $handover-bg-card;
+  box-shadow: $handover-shadow-lg;
+
+  .primary-button {
+    width: 100%;
+    height: $handover-button-height-lg;
+    background-color: $handover-primary;
+    color: #FFFFFF;
+    font-size: $handover-font-size-md;
+    font-weight: $handover-font-weight-semibold;
+    border-radius: $handover-radius-md;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+
+    &:active:not(.disabled) {
+      background-color: $handover-primary-dark;
+      transform: scale(0.98);
+    }
+
+    &.disabled {
+      background-color: $handover-gray-300;
+      color: $handover-gray-500;
+    }
+  }
+}
+</style>
diff --git a/src/store/modules/handover.js b/src/store/modules/handover.js
new file mode 100644
index 0000000..6c4b77f
--- /dev/null
+++ b/src/store/modules/handover.js
@@ -0,0 +1,244 @@
+import { defineStore } from 'pinia'
+
+export const useHandoverStore = defineStore('handover', {
+  state: () => ({
+    // 当前班次信息
+    currentShift: {
+      id: null,
+      caregiver: '',
+      startTime: '',
+      endTime: '',
+      shiftType: '' // 'morning', 'afternoon', 'evening', 'night'
+    },
+
+    // 上一班留言
+    previousNotes: {
+      caregiver: '',
+      timeRange: '',
+      focusElders: [],
+      todos: []
+    },
+
+    // 本班工作总结
+    workSummary: {
+      statistics: {
+        total: 0,
+        care: 0,
+        meal: 0,
+        monitor: 0,
+        completion: 0
+      },
+      workRecord: '',
+      selectedTags: [],
+      photos: []
+    },
+
+    // 下一班注意事项
+    nextShiftNotes: {
+      focusElders: [],
+      supplementNote: '',
+      attachments: []
+    },
+
+    // 接班人信息
+    successor: {
+      id: null,
+      name: '',
+      role: '',
+      shift: '',
+      time: '',
+      phone: '',
+      online: false
+    },
+
+    // 交接班状态
+    handoverStatus: {
+      step: 0, // 0: 未开始, 1: 查看留言, 2: 填写总结, 3: 填写注意事项, 4: 等待确认, 5: 已完成
+      submitted: false,
+      confirmed: false,
+      completedAt: null
+    },
+
+    // 提醒设置
+    reminderSettings: {
+      enabled: true,
+      reminderTime: 15, // 提前15分钟提醒
+      repeatInterval: 15 // 15分钟后再次提醒
+    }
+  }),
+
+  getters: {
+    // 是否可以开始交接班
+    canStartHandover: (state) => {
+      return state.currentShift.id && !state.handoverStatus.submitted
+    },
+
+    // 是否需要显示下班提醒
+    shouldShowReminder: (state) => {
+      if (!state.reminderSettings.enabled) return false
+      if (state.handoverStatus.submitted) return false
+
+      // TODO: 根据当前时间和班次结束时间判断
+      return true
+    },
+
+    // 重点关注老人数量
+    focusElderCount: (state) => {
+      return state.previousNotes.focusElders.filter(e => e.level !== 'normal').length
+    },
+
+    // 待完成任务数量
+    todoCount: (state) => {
+      return state.previousNotes.todos.length
+    },
+
+    // 交接班进度百分比
+    handoverProgress: (state) => {
+      return Math.round((state.handoverStatus.step / 5) * 100)
+    }
+  },
+
+  actions: {
+    // 初始化交接班数据
+    async initHandover() {
+      // TODO: 从API加载数据
+      console.log('初始化交接班数据')
+    },
+
+    // 加载上一班留言
+    async loadPreviousNotes() {
+      // TODO: 从API加载上一班留言
+      // 模拟数据
+      this.previousNotes = {
+        caregiver: '李小花',
+        timeRange: '06:00-14:00',
+        focusElders: [
+          {
+            id: 1,
+            room: '101房',
+            name: '张淑华奶奶',
+            level: 'danger',
+            issue: '血压异常',
+            description: '早上测量 158/95 mmHg\n已通知值班医生，医生建议加强监测',
+            reminder: '下午17:00需再次测量血压'
+          },
+          {
+            id: 2,
+            room: '102房',
+            name: '王建国爷爷',
+            level: 'warning',
+            issue: '食欲不佳',
+            description: '午餐只吃了一半(约40%)',
+            reminder: '晚餐需特别关注，喂食协助'
+          },
+          {
+            id: 3,
+            room: '103房',
+            name: '李秀英奶奶',
+            level: 'warning',
+            issue: '情绪低落',
+            description: '上午不愿参加活动，在房间发呆',
+            reminder: '建议多陪伴聊天，了解原因'
+          }
+        ],
+        todos: [
+          {
+            id: 1,
+            content: '101房 17:00 测量血压',
+            note: '未完成，请接手处理'
+          },
+          {
+            id: 2,
+            content: '103房 晚餐特别照顾',
+            note: '注意观察食欲和情绪'
+          }
+        ]
+      }
+    },
+
+    // 更新工作总结
+    updateWorkSummary(data) {
+      this.workSummary = {
+        ...this.workSummary,
+        ...data
+      }
+    },
+
+    // 更新下一班注意事项
+    updateNextShiftNotes(data) {
+      this.nextShiftNotes = {
+        ...this.nextShiftNotes,
+        ...data
+      }
+    },
+
+    // 提交交接班记录
+    async submitHandover() {
+      try {
+        // TODO: 调用API提交
+        console.log('提交交接班记录')
+
+        this.handoverStatus.submitted = true
+        this.handoverStatus.step = 4
+
+        return true
+      } catch (error) {
+        console.error('提交交接班记录失败:', error)
+        return false
+      }
+    },
+
+    // 接班人确认
+    confirmHandover() {
+      this.handoverStatus.confirmed = true
+      this.handoverStatus.step = 5
+      this.handoverStatus.completedAt = new Date().toISOString()
+    },
+
+    // 重置交接班状态
+    resetHandover() {
+      this.handoverStatus = {
+        step: 0,
+        submitted: false,
+        confirmed: false,
+        completedAt: null
+      }
+      this.workSummary = {
+        statistics: {
+          total: 0,
+          care: 0,
+          meal: 0,
+          monitor: 0,
+          completion: 0
+        },
+        workRecord: '',
+        selectedTags: [],
+        photos: []
+      }
+      this.nextShiftNotes = {
+        focusElders: [],
+        supplementNote: '',
+        attachments: []
+      }
+    },
+
+    // 更新交接班步骤
+    updateStep(step) {
+      this.handoverStatus.step = step
+    }
+  },
+
+  // 持久化配置
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        key: 'handover-store',
+        storage: uni.getStorageSync ? {
+          getItem: (key) => uni.getStorageSync(key),
+          setItem: (key, value) => uni.setStorageSync(key, value)
+        } : undefined
+      }
+    ]
+  }
+})
diff --git a/src/styles/handover-animations.scss b/src/styles/handover-animations.scss
new file mode 100644
index 0000000..0dabf88
--- /dev/null
+++ b/src/styles/handover-animations.scss
@@ -0,0 +1,494 @@
+/**
+ * 护工端交接班流程 - 微交互动画效果
+ * Micro-interactions and Animations for Handover Process
+ */
+
+/* ============================================
+   1. 页面转场动画 (Page Transitions)
+   ============================================ */
+
+/* 页面进入 */
+.page-enter {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.page-enter-active {
+  transform: translateX(0);
+  opacity: 1;
+  transition: all $handover-duration-slow $handover-ease-in-out;
+}
+
+/* 页面退出 */
+.page-exit {
+  transform: translateX(0);
+}
+
+.page-exit-active {
+  transform: translateX(-30%);
+  opacity: 0.5;
+  transition: all $handover-duration-slow $handover-ease-in-out;
+}
+
+/* ============================================
+   2. 按钮按压反馈 (Button Press Feedback)
+   ============================================ */
+
+.button-press {
+  transition: transform $handover-duration-fast ease;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.button-primary {
+  &:active {
+    background-color: $handover-primary-dark;
+    box-shadow: $handover-shadow-button;
+  }
+}
+
+/* ============================================
+   3. 语音输入动画 (Voice Input Animation)
+   ============================================ */
+
+.voice-recording {
+  display: flex;
+  align-items: center;
+  gap: $handover-spacing-2xs;
+}
+
+.voice-wave {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+
+  span {
+    width: 6rpx;
+    background-color: $handover-primary;
+    border-radius: 3rpx;
+    animation: wave 0.8s ease-in-out infinite;
+
+    &:nth-child(1) {
+      animation-delay: 0s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: 0.1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(4) {
+      animation-delay: 0.3s;
+    }
+
+    &:nth-child(5) {
+      animation-delay: 0.4s;
+    }
+  }
+}
+
+@keyframes wave {
+  0%, 100% {
+    height: 40rpx;
+  }
+  50% {
+    height: 80rpx;
+  }
+}
+
+/* ============================================
+   4. 复选框勾选动画 (Checkbox Check Animation)
+   ============================================ */
+
+.checkbox {
+  position: relative;
+  display: inline-block;
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: none;
+  }
+
+  &.checked::after {
+    display: block;
+    animation: check $handover-duration-slow ease;
+  }
+}
+
+@keyframes check {
+  0% {
+    transform: scale(0) rotate(-45deg);
+  }
+  50% {
+    transform: scale(1.2) rotate(-45deg);
+  }
+  100% {
+    transform: scale(1) rotate(-45deg);
+  }
+}
+
+/* ============================================
+   5. 加载状态 (Loading States)
+   ============================================ */
+
+/* 旋转加载 */
+.loading-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 骨架屏脉冲 */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    $handover-gray-100 25%,
+    $handover-gray-50 50%,
+    $handover-gray-100 75%
+  );
+  background-size: 200% 100%;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* 脉冲效果 */
+.pulse {
+  animation: pulseOpacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulseOpacity {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ============================================
+   6. 淡入淡出动画 (Fade Animations)
+   ============================================ */
+
+.fade-in {
+  animation: fadeIn $handover-duration-slow ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-out {
+  animation: fadeOut $handover-duration-slow ease;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* 从下淡入 */
+.fade-in-up {
+  animation: fadeInUp 0.5s ease forwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 从上淡入 */
+.fade-in-down {
+  animation: fadeInDown 0.5s ease forwards;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================
+   7. 缩放动画 (Scale Animations)
+   ============================================ */
+
+.scale-in {
+  animation: scaleIn $handover-duration-slow ease;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.scale-pop {
+  animation: scalePop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes scalePop {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   8. 抖动动画 (Shake Animation)
+   ============================================ */
+
+.shake {
+  animation: shake 0.5s ease;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-10px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(10px);
+  }
+}
+
+/* ============================================
+   9. 弹跳动画 (Bounce Animation)
+   ============================================ */
+
+.bounce {
+  animation: bounce 1s ease infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+/* ============================================
+   10. 滑动动画 (Slide Animations)
+   ============================================ */
+
+.slide-in-left {
+  animation: slideInLeft $handover-duration-slow ease;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.slide-in-right {
+  animation: slideInRight $handover-duration-slow ease;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.slide-out-left {
+  animation: slideOutLeft $handover-duration-slow ease;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+.slide-out-right {
+  animation: slideOutRight $handover-duration-slow ease;
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* ============================================
+   11. 特殊动画 (Special Animations)
+   ============================================ */
+
+/* 铃铛摇摆 */
+.bell-ring {
+  animation: bellRing 1s ease-in-out infinite;
+}
+
+@keyframes bellRing {
+  0%, 100% {
+    transform: rotate(-15deg);
+  }
+  50% {
+    transform: rotate(15deg);
+  }
+}
+
+/* 沙漏旋转 */
+.hourglass-rotate {
+  animation: hourglassRotate 2s linear infinite;
+}
+
+@keyframes hourglassRotate {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+}
+
+/* 呼吸效果 */
+.breathe {
+  animation: breathe 2s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* 闪烁效果 */
+.blink {
+  animation: blink 1s ease-in-out infinite;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ============================================
+   12. 工具类 (Utility Classes)
+   ============================================ */
+
+.animated {
+  animation-duration: $handover-duration-slow;
+  animation-fill-mode: both;
+}
+
+.animated-fast {
+  animation-duration: $handover-duration-fast;
+}
+
+.animated-slow {
+  animation-duration: $handover-duration-slower;
+}
+
+.animation-delay-1 {
+  animation-delay: 0.1s;
+}
+
+.animation-delay-2 {
+  animation-delay: 0.2s;
+}
+
+.animation-delay-3 {
+  animation-delay: 0.3s;
+}
+
+.animation-delay-4 {
+  animation-delay: 0.4s;
+}
+
+.animation-delay-5 {
+  animation-delay: 0.5s;
+}
+
+/* ============================================
+   13. 过渡效果 (Transitions)
+   ============================================ */
+
+.transition-all {
+  transition: all $handover-duration-normal $handover-ease-in-out;
+}
+
+.transition-colors {
+  transition: background-color $handover-duration-normal $handover-ease-in-out,
+              color $handover-duration-normal $handover-ease-in-out;
+}
+
+.transition-transform {
+  transition: transform $handover-duration-normal $handover-ease-in-out;
+}
+
+.transition-opacity {
+  transition: opacity $handover-duration-normal $handover-ease-in-out;
+}
diff --git a/src/styles/handover-design.scss b/src/styles/handover-design.scss
new file mode 100644
index 0000000..ebc3420
--- /dev/null
+++ b/src/styles/handover-design.scss
@@ -0,0 +1,220 @@
+/**
+ * 护工端交接班流程 - 设计系统配置
+ * Design System for Caregiver Handover Process
+ */
+
+/* ============================================
+   1. 品牌色彩系统 (Brand Color System)
+   ============================================ */
+
+/* 主色调（品牌色） */
+$handover-primary: #3B82F6;        /* 主蓝色 - 主要按钮、标题 */
+$handover-primary-dark: #2563EB;   /* 深蓝色 - 按钮按下态 */
+$handover-primary-deep: #1E40AF;   /* 深蓝色 - 已读状态、次要文字 */
+$handover-primary-light: #DBEAFE;  /* 浅蓝色 - 背景 */
+$handover-primary-lighter: #EFF6FF;/* 更浅蓝色 - 卡片背景 */
+
+/* 辅助色 */
+$handover-success: #10B981;        /* 成功绿 - 完成状态、正常数据 */
+$handover-success-light: #D1FAE5;  /* 浅绿色 - 成功背景 */
+$handover-warning: #F59E0B;        /* 警告橙 - 需关注、待处理 */
+$handover-warning-light: #FEF3C7;  /* 浅黄色 - 警告背景 */
+$handover-danger: #EF4444;         /* 危险红 - 紧急、异常 */
+$handover-danger-light: #FEE2E2;   /* 浅红色 - 危险背景 */
+
+/* 中性色 */
+$handover-gray-900: #111827;       /* 最深灰 - 标题文字 */
+$handover-gray-800: #1F2937;       /* 深灰 - 正文文字 */
+$handover-gray-700: #374151;       /* 灰色 - 按钮文字 */
+$handover-gray-600: #4B5563;       /* 中灰 - 辅助文字 */
+$handover-gray-500: #6B7280;       /* 中性灰 - 普通文字、图标 */
+$handover-gray-400: #9CA3AF;       /* 浅灰 - 提示文字 */
+$handover-gray-300: #D1D5DB;       /* 更浅灰 - 边框 */
+$handover-gray-200: #E5E7EB;       /* 分割线 */
+$handover-gray-100: #F3F4F6;       /* 输入框背景 */
+$handover-gray-50: #F9FAFB;        /* 页面背景 */
+
+/* 背景色 */
+$handover-bg-page: #F9FAFB;        /* 页面背景 */
+$handover-bg-card: #FFFFFF;        /* 卡片背景 */
+$handover-bg-input: #F3F4F6;       /* 输入框背景 */
+$handover-bg-divider: #E5E7EB;     /* 分割线 */
+$handover-bg-mask: rgba(0, 0, 0, 0.4); /* 遮罩层 */
+
+/* ============================================
+   2. 字体规范 (Typography System)
+   ============================================ */
+
+/* 字体家族 */
+$handover-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', 'Roboto', sans-serif;
+
+/* 字号体系 */
+$handover-font-size-2xl: 24px;     /* 超大标题 */
+$handover-font-size-xl: 20px;      /* 大标题 */
+$handover-font-size-lg: 18px;      /* 页面标题 */
+$handover-font-size-md: 16px;      /* 章节标题 */
+$handover-font-size-base: 14px;    /* 正文 */
+$handover-font-size-sm: 13px;      /* 辅助信息 */
+$handover-font-size-xs: 12px;      /* 小字 */
+$handover-font-size-2xs: 11px;     /* 极小字 */
+
+/* 字重 */
+$handover-font-weight-regular: 400;
+$handover-font-weight-medium: 500;
+$handover-font-weight-semibold: 600;
+$handover-font-weight-bold: 700;
+
+/* 行高 */
+$handover-line-height-tight: 1.25;
+$handover-line-height-normal: 1.5;
+$handover-line-height-relaxed: 1.6;
+$handover-line-height-loose: 1.75;
+
+/* ============================================
+   3. 间距系统 (Spacing System)
+   ============================================ */
+
+/* 基础间距 */
+$handover-spacing-2xs: 4px;
+$handover-spacing-xs: 8px;
+$handover-spacing-sm: 12px;
+$handover-spacing-md: 16px;
+$handover-spacing-lg: 20px;
+$handover-spacing-xl: 24px;
+$handover-spacing-2xl: 32px;
+
+/* 页面间距 */
+$handover-page-padding: 16px;      /* 页面边距 */
+$handover-card-gap: 12px;          /* 卡片间距 */
+$handover-element-gap: 8px;        /* 元素间距 */
+$handover-content-padding: 16px;   /* 内容内边距 */
+
+/* 按钮内边距 */
+$handover-button-padding-x: 24px;
+$handover-button-padding-y: 12px;
+
+/* ============================================
+   4. 圆角系统 (Border Radius System)
+   ============================================ */
+
+$handover-radius-xs: 4px;
+$handover-radius-sm: 8px;
+$handover-radius-md: 12px;
+$handover-radius-lg: 16px;
+$handover-radius-xl: 20px;
+$handover-radius-full: 9999px;     /* 完全圆角 */
+
+/* ============================================
+   5. 阴影系统 (Shadow System)
+   ============================================ */
+
+$handover-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+$handover-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+$handover-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
+$handover-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
+$handover-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
+$handover-shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.15);
+
+/* 按钮阴影 */
+$handover-shadow-button: 0 2px 8px rgba(37, 99, 235, 0.3);
+
+/* ============================================
+   6. 动画时长 (Animation Duration)
+   ============================================ */
+
+$handover-duration-fast: 0.1s;
+$handover-duration-normal: 0.2s;
+$handover-duration-slow: 0.3s;
+$handover-duration-slower: 0.5s;
+
+/* 动画缓动函数 */
+$handover-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+$handover-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
+$handover-ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+/* ============================================
+   7. Z-Index 层级系统 (Z-Index System)
+   ============================================ */
+
+$handover-z-base: 1;
+$handover-z-sticky: 10;
+$handover-z-fixed: 100;
+$handover-z-modal: 1000;
+$handover-z-popup: 2000;
+$handover-z-toast: 3000;
+
+/* ============================================
+   8. 尺寸系统 (Size System)
+   ============================================ */
+
+/* 导航栏 */
+$handover-navbar-height: 56px;
+$handover-navbar-height-small: 48px;
+
+/* 按钮高度 */
+$handover-button-height-sm: 44px;
+$handover-button-height-md: 48px;
+$handover-button-height-lg: 52px;
+
+/* 输入框高度 */
+$handover-input-height-sm: 36px;
+$handover-input-height-md: 44px;
+$handover-input-height-lg: 48px;
+
+/* 图标尺寸 */
+$handover-icon-xs: 16px;
+$handover-icon-sm: 20px;
+$handover-icon-md: 24px;
+$handover-icon-lg: 32px;
+$handover-icon-xl: 48px;
+$handover-icon-2xl: 64px;
+$handover-icon-3xl: 80px;
+
+/* 头像尺寸 */
+$handover-avatar-sm: 32px;
+$handover-avatar-md: 48px;
+$handover-avatar-lg: 64px;
+
+/* 复选框尺寸 */
+$handover-checkbox-size: 20px;
+$handover-checkbox-size-lg: 24px;
+
+/* ============================================
+   9. CSS 变量定义 (CSS Variables)
+   ============================================ */
+
+:root {
+  /* 品牌色 */
+  --handover-primary: #{$handover-primary};
+  --handover-primary-dark: #{$handover-primary-dark};
+  --handover-primary-deep: #{$handover-primary-deep};
+  --handover-primary-light: #{$handover-primary-light};
+  --handover-primary-lighter: #{$handover-primary-lighter};
+
+  /* 辅助色 */
+  --handover-success: #{$handover-success};
+  --handover-success-light: #{$handover-success-light};
+  --handover-warning: #{$handover-warning};
+  --handover-warning-light: #{$handover-warning-light};
+  --handover-danger: #{$handover-danger};
+  --handover-danger-light: #{$handover-danger-light};
+
+  /* 中性色 */
+  --handover-gray-900: #{$handover-gray-900};
+  --handover-gray-800: #{$handover-gray-800};
+  --handover-gray-700: #{$handover-gray-700};
+  --handover-gray-600: #{$handover-gray-600};
+  --handover-gray-500: #{$handover-gray-500};
+  --handover-gray-400: #{$handover-gray-400};
+  --handover-gray-300: #{$handover-gray-300};
+  --handover-gray-200: #{$handover-gray-200};
+  --handover-gray-100: #{$handover-gray-100};
+  --handover-gray-50: #{$handover-gray-50};
+
+  /* 背景色 */
+  --handover-bg-page: #{$handover-bg-page};
+  --handover-bg-card: #{$handover-bg-card};
+  --handover-bg-input: #{$handover-bg-input};
+  --handover-bg-divider: #{$handover-bg-divider};
+  --handover-bg-mask: #{$handover-bg-mask};
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index de224a9..2d16b96 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,5 @@
 @import './reset.scss';
 @import './variable.scss';
 @import './global.scss';
+@import './handover-design.scss';
+@import './handover-animations.scss';
diff --git a/unocss.config.js b/unocss.config.js
index 411a425..e008e15 100644
--- a/unocss.config.js
+++ b/unocss.config.js
@@ -52,7 +52,25 @@ export default defineConfig({
   theme: {
     colors: {
       /** 主题色，用法如: text-primary */
-      primary: 'var(--wot-color-theme,#0957DE)'
+      primary: 'var(--wot-color-theme,#0957DE)',
+      /** 交接班主题色 */
+      'handover-primary': '#3B82F6',
+      'handover-primary-dark': '#2563EB',
+      'handover-success': '#10B981',
+      'handover-warning': '#F59E0B',
+      'handover-danger': '#EF4444',
+      'handover-gray': {
+        50: '#F9FAFB',
+        100: '#F3F4F6',
+        200: '#E5E7EB',
+        300: '#D1D5DB',
+        400: '#9CA3AF',
+        500: '#6B7280',
+        600: '#4B5563',
+        700: '#374151',
+        800: '#1F2937',
+        900: '#111827'
+      }
     },
     fontSize: {
       /** 提供更小号的字体，用法如：text-2xs */