# 钉钉模块 - UI 交互规范

> **版本**: v1.0  
> **最后更新**: 2026-03-17  
> **维护者**: FFOA 前端团队

---

## 文档摘要

| 字段 | 内容 |
|------|------|
| 模块 | 钉钉模块 |
| 文档类型 | UI 交互规范 |
| 页面范围 | `/organization/dingtalk` 及年假子页面 |
| 设计目标 | 支持同步运营、审批修复和年假洞察 |

---

## 页面清单

| 页面 | 路径 | 说明 | 权限 |
|------|------|------|------|
| 钉钉数据同步页 | `/organization/dingtalk` | 钉钉同步任务和审批撤销修复 | `organization:sync` |
| 钉钉假期余额总览 | `/organization/dingtalk/annual-leave/quotas` | 查看各员工各假期类型余额 | `organization:sync` |
| 钉钉年假释放计划 | `/organization/dingtalk/annual-leave/release-plan` | 查看并重算本地年假释放计划 | `organization:sync` |

## 钉钉数据同步页

### 页面目标

- 展示同步总览、任务卡片、审批撤销修复和执行记录
- 提供年假相关快捷入口

### 交互要求

1. 页面顶部展示概览卡片
2. 概览区下方展示两个快捷入口：
   - `假期余额总览`
   - `年假释放计划`
3. 审批撤销修复面板位于任务卡片区与执行记录之间
4. 审批撤销修复支持：
   - 同步类型
   - 开始日期
   - 结束日期
   - 员工搜索下拉
   - 审批号输入
   - `预览匹配记录`
   - `执行撤销`

## 假期余额总览页

### 页面目标

- 按员工查看当前钉钉系统中的所有假期类型余额
- 支持进入年假计划参数弹窗与假期详情抽屉

### 筛选项

- 员工姓名关键字
- 员工 `userId`
- 是否隐藏余额为 0 的假期

### 内容区

1. 顶部统计卡：员工数量、假期类型数量、非零余额记录数
2. 顶部状态区：展示最近一次快照刷新时间
3. 原生表格：
   - 每位员工一行
   - 固定左侧列：员工姓名、`userId`、员工编号
   - 右侧动态列：每种假期类型一列

### 交互规则

1. 页面初始加载只读取本地快照
2. 提供“刷新快照”按钮
3. 点击员工姓名，打开年假计划参数弹窗
4. 点击某个员工某个假期类型的余额单元格，打开详情抽屉
5. 年假计划参数弹窗当前只维护：
   - `adjustmentDays`
   - `notCountDays`
6. 当前前端保存动作固定为保存并重算

## 年假释放计划页

### 页面目标

- 按员工查看本地数据库中的年假释放计划矩阵

### 筛选项

- 年份，默认当前年
- 员工姓名关键字
- 员工 `userId`
- `仅看未来未释放`

### 内容区

1. 顶部统计卡：计划人数、计划条数、未来待释放天数、今日释放人数
2. 原生表格：
   - 每位员工每个年度一行
   - 固定左侧列：员工姓名、状态、总计划天数
   - 右侧动态列：`第 1 天` 到 `第 N 天`
3. 无计划员工仍保留在结果中

### 交互规则

1. 默认只展示 `正常` 员工
2. 页面当前不提供“显示顾问 / 停薪留职 / 已离职”筛选
3. 点击员工姓名，打开年假计划参数弹窗
4. 提供“更新中间表”按钮，仅重算本地年假释放计划
5. 提供执行释放与导出能力
6. 表格区域支持横向滚动、底部自定义滚动条和左侧固定列