# TBOSS OA 模块 — 全量 UI 设计 > 版本：v1.0 | 日期：2026-06-04 | 基于 PRD / Database / Strategy 文档 > > **架构前提**：用户/组织/客户数据来自 ERP（通过 .NET API）、审批引擎复用 ERP、消息复用 .NET 服务端、OA 权限独立 ACL。 > 页面中标注「经理」「财务」「管理员」的区块为对应角色专属增量功能，基础内容对所有角色可见。 --- ## 0. 页面跳转关系总图 ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ Appshell — 底部三 Tab │ │ / → IndexedStack + GoRouter │ └─────────────────────────────────────────────────────────────────────────────┘ │ │ │ ▼ ▼ ▼ ┌─────────┐ ┌─────────┐ ┌─────────────┐ │ /messages │ │ /home │ │ /profile │ │ 消息通知 │ │ 工作台 │ │ 个人中心 │ └────┬─────┘ └────┬─────┘ └──────┬──────┘ │ │ │ │ 点击消息卡片 │ 轮播图点击 │ 语言设置 / 关于 │ 按 BizType 路由 │ → 公告详情/外部链接 │ ▼ │ │ ┌─────────────────┐ │ 金刚区·发起 │ │ 审批待办 → 详情页 │ │ → /expense-apply/apply │ │ 审批结果 → 详情页 │ │ → /expense/apply │ │ 撤回通知 → 消息列表│ │ → /vehicle/apply │ │ 系统公告 → 公告详情│ │ → /overtime/apply │ │ 过期提醒 → 详情页 │ │ → /announcement/create│ └─────────────────┘ │ (管理员额外) │ │ │ │ 金刚区·记录 │ │ → /expense-apply/list │ │ → /expense/list │ │ → /overtime/list │ │ → /vehicle/list │ │ → /outing-log/list │ │ → /announcement/list │ │ │ │ 金刚区·报表 │ │ → /report/expense-apply │ │ → /report/expense │ │ → /report/overtime │ │ → /report/vehicle │ │ → /report/outing-log │ │ │ │ 看板卡片 │ │ → 对应列表/报表/消息 │ └────────────────────────┘ ┌──────────────────────────────────────────────────────────────────────────────┐ │ 表单 → 列表 → 详情 主链路 │ │ │ │ ┌────────────┐ 存草稿/提交 ┌────────────┐ 点击卡片 ┌──────────┐ │ │ │ 表单页 │ ───────────────→ │ 列表页 │ ────────────→ │ 详情页 │ │ │ │ (apply/ │ │ (list) │ │ (detail/ │ │ │ │ create) │ ←─────────────── │ │ ←──────────── │ :id) │ │ │ └────────────┘ 左滑编辑/删除 └────────────┘ 返回 └──────────┘ │ │ ↑ ↑ │ │ │ │ │ │ │ 经理: 左滑一键同意 │ │ │ │ │ │ 用车: 左滑确认还车 │ │ │ │ │ │ │ │ │ │ rejected 重新编辑 ───┘ draft → 编辑跳表单 │ │ │ pending → 撤回申请 │ │ └── draft 编辑回填 ──────────────────────→ approved → 还车/核销 │ │ │ │ 事前申请: /expense-apply/apply → /expense-apply/list → /expense-apply/detail │ │ 费用报销: /expense/apply → /expense/list → /expense/detail │ │ 加班申请: /overtime/apply → /overtime/list → /overtime/detail │ │ 用车申请: /vehicle/apply → /vehicle/list → /vehicle/detail │ │ 外勤日志: /outing-log/create → /outing-log/list → /outing-log/detail │ │ │ │ 特殊链路： │ │ · 报销表单可「导入事前申请」→ 半屏多选已通过的申请 → 自动带入项目/科目 │ │ · 用车 approved 后 → 详情页底部「还车登记」→ Status=returned │ │ · 报销 approved+unpaid → 财务进详情页 → 三字查验 → 打款归档 │ └──────────────────────────────────────────────────────────────────────────────┘ ┌──────────────────────────────────────────────────────────────────────────────┐ │ 公告 & 权限 独立链路 │ │ │ │ 管理员: │ │ /home 金刚区 → /announcement/create → 存草稿/预览/发布 │ │ /profile → /admin/permissions → 搜索员工 → 抽屉编辑权限 → 保存+审计日志 │ │ │ │ 全员: │ │ /announcement/list ──点击──→ /announcement/detail/:id │ │ ↑ │ │ │ │ ├ 停留≥2s → 自动标记已读 │ │ │ ├ 管理员: 已读/未读统计 + DING 催办 │ │ └──── 返回列表(红点消失) ───┘ │ └──────────────────────────────────────────────────────────────────────────────┘ ┌──────────────────────────────────────────────────────────────────────────────┐ │ 报表 独立链路 │ │ │ │ /home 金刚区·报表 ─┬─ /report/expense-apply-detail 事前申请明细报表 │ │ ├─ /report/expense-detail 费用报销明细报表 │ │ ├─ /report/overtime-detail 加班明细报表 │ │ ├─ /report/vehicle-detail 用车明细报表 │ │ └─ /report/outing-log-detail 外勤日志明细报表 │ │ │ │ 每页: 时间筛选 + 专属筛选 → 数值卡片 + fl_chart 趋势图 │ │ 经理: 柱状图点击 → 下方明细列表联动过滤 → 可穿透跳详情页 │ │ 财务/管理员: 底部明细列表 + Excel 导出 │ └──────────────────────────────────────────────────────────────────────────────┘ 角色路由速查： 员工 → 轮播图 + 金刚区 + 个人快捷看板(本月报销+本月单据) 经理 → 员工版 + 待审批红色角标 + 快捷看板升级为部门范围 + 下属审批切换 财务 → 员工版 + 财务看盘(全公司:已支付/待付款/异常退回) + 核销入口 管理员 → 员工版 + 金刚区额外「发布公告」+ 全公司财务看盘 + 权限管理入口 ``` --- ## 1. 框架、导航及权限模块（5 页） #### 页面 1：Appshell 底部导航 (`/`) | 区域 | 组件 | 说明 | |------|------|------| | 底部导航 | TDTabBar | 三个 Tab：消息、工作台、我的 | | 主内容区 | IndexedStack + GoRouter | 路由驱动的视图容器，保持各 Tab 页面状态 | | 消息角标 | TDBadge | 未读消息数，进入时拉取 + 30s 轮询或 Push 刷新。数据来源 .NET 消息模块 API | | 交互 | 行为 | |------|------| | 点击 Tab | 路由切换，图标变 `#00ABF3` | | 重复点击当前 Tab | 列表页 ScrollToTop，非列表无行为 | --- #### 页面 2：消息通知聚合页 (`/messages`) ##### 页面结构 | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"消息通知"，右侧"全部已读"按钮（仅未读>0 时显示） | | 列表 | TDListView | 下拉刷新 / 上拉加载 | | 数据来源 | — | .NET 消息模块 API（非本地 Message 表） | ##### 消息类型 | 类型 | 图标 | 示例标题 | 点击行为 | |------|------|---------|---------| | 审批待办 | 📋 | "张三提交了差旅报销，待审批" | 进入详情页，底部展审批操作栏 | | 审批结果 | ✅/❌ | "您的差旅报销已通过" / "已被拒绝" | 进入详情页查看结果 | | 撤回通知 | ↩ | "张三撤回了差旅报销" | 消息列表（单据已不可审批） | | 系统公告 | 📢 | "【通知公告】2026年端午放假安排" | 进入公告详情页 | | 过期提醒 | ⏰ | "您的差旅申请已过期，预算已释放" | 进入对应详情页 | ##### 消息卡片 | 元素 | 组件 | 说明 | |------|------|------| | 图标 | Icon | 按消息类型展示不同图标 | | 标题 | Text | 消息大标题 | | 摘要 | Text | 摘要文本，单行截断 | | 时间 | Text | 发送时间，格式 MM-DD HH:mm | | 未读标记 | TDBadge | 未读消息显示红点 | ##### 卡片交互 | 操作 | 组件 | 行为 | |------|------|------| | 左滑 | TDSwipeAction | `[标记已读]`（蓝）+ `[删除]`（红）。已读消息不可左滑 | | 标记已读 | — | 调 .NET 消息 API，成功→红点淡出+卡片透明度↓ | | 删除 | TDDialog | 确认弹窗→卡片收起+调 API 删除 | ##### 推送通道 | 消息类别 | 通道 | |---------|------| | 审批类 | App Push + 站内消息 | | 公告类 | 站内消息 | | DING 催办 | App Push（高优先级，无视免打扰） | --- #### 页面 3：工作台 (`/home`) ##### 角色判定 | 权限 | 工作台版本 | 优先级 | |------|---------|:--:| | 有 `oa.admin.*` | 管理员版 | 1 | | 无 admin，有 `oa.expense.mark_paid` | 财务版 | 2 | | 无上述，有 `oa.*.approve` 或 `oa.*.view_dept` | 经理版 | 3 | | 其他 | 员工版 | 4 | > 高优先级叠加低优先级的基础区块。权限数据来源：`OaUserPermission` 本地表。 ##### 所有角色共有 | 区域 | 组件 | 说明 | |------|------|------| | 轮播图 | TDesign `Swiper` | 3s 自动切换，循环播放。点击有 LinkUrl→跳转，无→全屏预览双指缩放。数据来源 `SysBanner`（OA 本地） | | 金刚区 | TDGrid（4 列） | 三区域：**发起** 事前申请/费用报销/用车申请/加班申请；**记录** 申请记录/报销记录/加班记录/用车记录 + 外勤日志/公司公告；**报表** 事前申请报表/费用报销报表/加班报表/用车报表 + 外勤日志报表 | ##### 员工版 | 区域 | 组件 | 说明 | |------|------|------| | 快捷看板-卡片1 | TDCard | 本月累计报销（本人已付款总额 ¥），点击→报销记录列表 | | 快捷看板-卡片2 | TDCard | 本月已提单据（本人提交总数 笔），点击→申请记录列表 | | 数据来源 | — | .NET 服务端预计算，缓存 5min，下拉强制刷新 | ##### 经理/老板版 | 区域 | 组件 | 说明 | |------|------|------| | 待审批卡片 | TDCard + TDBadge | 红色角标显示待办数，数据来源 .NET → ERP，点击→消息列表 | | 快捷看板升级 | TDCard ×3 | 数据范围升级为本部门：本月累计报销(部门) / 本月已提单据(部门) / 部门在途单据 | ##### 财务版 | 区域 | 组件 | 说明 | |------|------|------| | 财务看盘 | TDCard ×3 | 替代快捷看板，全公司数据：本月已支付总额 / 待付款总额 / 本周异常退回 | | 数据来源 | — | .NET 全公司聚合查询，缓存 5min | ##### 管理员版 | 区域 | 组件 | 说明 | |------|------|------| | 金刚区增量 | TDGrid | 发起区域额外显示"发布公告"入口 | | 快捷看板 | TDCard ×3 | 与财务版相同，全公司数据 | --- #### 页面 3.1：个人中心 (`/profile`) ##### 页面结构 | 区域 | 组件 | 说明 | |------|------|------| | 头像 | TDAvatar | 点击更换，数据来源 `GET /api/user/{erpUserId}` | | 用户信息 | Text | 姓名 / 部门 / 岗位，同上 | | 功能列表 | TDListView | 分组样式 | ##### 功能列表 | 功能 | 行为 | |------|------| | 语言设置 | 底部弹出 TDActionSheet：简体中文 / 繁體中文 / English。选择后立即生效，写入本地存储，下次启动保持 | | 关于 | 版本号 / 用户协议 / 隐私政策 | ##### 交互 | 操作 | 行为 | |------|------| | 点击头像 | 唤起相册/相机 → 裁剪(1:1,≤2MB) → `PUT /api/user/avatar` → 全局刷新。失败 Toast"头像上传失败" | | 登录态 | 宿主 App 统一管理。监听宿主登出→清本地缓存。API 401→MethodChannel 通知宿主重登录 | --- #### 页面 3.2：权限管理 (`/admin/permissions`)【管理员专属】 | 区域 | 组件 | 说明 | |------|------|------| | 搜索栏 | TDSearchBar | 按姓名/工号模糊搜索，300ms 防抖，来源 `GET /api/user/search` | | 员工列表 | TDListView | 每页 20 条，默认按部门+姓名排序。每张卡片展示：头像、姓名、工号、部门、当前权限标签（TDTag） | **抽屉内容**（TDDrawer，点击员工卡片右侧滑出）： | 区域 | 组件 | 说明 | |------|------|------| | 快捷套餐 | TDButton ×4 | 员工（apply+view_own+create）/ 审批人（员工权限+approve+view_dept+comment）/ 财务（view_all+mark_paid+export）/ 管理员（全部）。点击后自动勾选对应权限点 | | 权限点列表 | TDCheckbox 分组 | 按模块分组（报销/事前/加班/用车/外勤/公告/报表/管理），逐项勾选。无角色用户默认等同"员工" | | 确认保存 | TDButton | `PUT /api/oa/user-permissions` → 写入 OaPermissionChangeLog（Before/After 快照 JSON）→ Toast"权限已更新"。失败→Toast 红 | | 变更记录 | 折叠区 | TDTimeline 展示最近 20 条 OaPermissionChangeLog：操作时间、操作人、变更摘要（如"添加了财务人员角色"） | | 自保护 | — | 无法取消自己的 admin 角色→Toast；至少保留一名管理员→后端拒绝 | --- ## 2. 费用控制与报销模块（6 页） #### 页面 4：事前申请表单 (`/expense-apply/apply`) ##### 基本信息区 | 字段 | 组件 | 说明 | |------|------|------| | 申请人 | TDInput（只读） | 当前登录用户姓名，`GET /api/user/{erpUserId}` | | 所属部门 | TDInput（只读） | 同上 | | 申请日期 | TDInput（只读） | 当前日期 `DateTime.now()`，格式 YYYY-MM-DD | | 紧急程度 | TDRadioGroup | 普通 / 紧急 / 特急，默认普通 | | 费用类型 | TDCheckboxGroup（多选） | 至少勾选一项，如"差旅费"+"办公费"，对应 DB `ExpenseTypes` 逗号分隔存储 | | 预估含税 | TDSwitch | 默认关，对应 DB `IsTaxIncluded` | | 费用事由 | TDTextarea | 必填，≤200 字，对应 DB `Purpose` | | 有效期至 | TDDatePicker | 可选，不填则永不过期，对应 DB `ValidUntil` | ##### 关联管控区 | 字段 | 组件 | 说明 | |------|------|------| | 关联项目 | TDCascader | .NET → ERP ProjectService，选定后加载科目 | | 预算科目 | TDPicker | .NET → ERP SubjectService，选定后加载余额 | | 可用余额 | 只读文本 | 项目+科目选定后异步展示"¥XXXX.xx"。超预算时金额变红+警告，不阻止提交 | | 关联合同号 | TDInput | 选填，对应 DB `ReferenceNo` | ##### 费用类型专用字段（按 ExpenseTypes 动态展示） | 勾选类型 | 显示字段 | |---------|---------| | 差旅费 | 预计开始日期 / 预计结束日期 / 是否过夜（TDSwitch）/ 交通工具（TDPicker：飞机/高铁/火车/自驾） | | 招待费 | 招待对象单位 / 招待层级（TDPicker：普通/重要/VIP）/ 外部人数 / 内部陪同人数 / 地点。校验：陪同人数 ≤ 外部人数 | | 会议费 | 预计开始日期 / 预计结束日期 / 会议地点 | | 其他类型 | 无专用字段，通用字段已覆盖 | > 以上字段数据库全部 NULL 允许，应用层按 ExpenseTypes 动态校验必填。 ##### 预估明细区 | 字段 | 组件 | 说明 | |------|------|------| | 费用类别 | TDPicker | SysCostCategory 叶子节点，下拉受 ExpenseTypes 联动过滤 | | 数量 | TDInput（数字） | >0 | | 单位 | TDPicker | 张 / 间 / 人 / 天 / 套 / 个，默认"张" | | 单价 | TDInput（数字） | >0 | | 单项金额 | 只读 | 自动计算 = 数量 × 单价 | | 明细说明 | TDInput | 选填 | | [+ 添加] | 按钮 | 平滑展开新明细卡片 | | ✕ 删除 | 图标按钮 | 气泡确认→折叠消失 | | — | — | — | | **预估总金额** | 只读（大字） | 所有明细行单项金额自动汇总为"¥XX,XXX.XX"，对应 DB `EstimatedAmount`。若超预算→金额变红 + 警告"您的申请金额已超支，提交后将自动触发高管特批流程" | ##### 附件上传区 | 属性 | 说明 | |------|------| | 组件 | TDesign `TDUpload` | | 数量 | 最多 9 张，满 9 隐藏上传入口 | | 类型 | 图片 ≤10MB / PDF ≤20MB | | 来源 | 相册 / 相机 / 文件选择器 | | 展示 | 网格缩略图，右上角删除按钮 | | 预览 | 点击缩略图→黑底全屏（双指缩放 0.5x~3x），PDF→原生查看器 | | 存储 | `Attachment (BizType='expense_apply')` | ##### 底部操作栏 | 按钮 | 颜色 | 可见条件 | 行为 | |------|------|---------|------| | `[重置]` | 灰 | 编辑已有草稿时 | 确认弹窗→清空至初始状态 | | `[存为草稿]` | 浅蓝 | 始终 | 不校验，保存所有已填内容（含空字段） | | `[提交审批]` | `#00ABF3` | 始终 | 触发全局校验，失败不提交，超预算不阻止 | ##### 校验规则 | 校验项 | 规则 | |--------|------| | 费用类型 | 至少勾选一项 | | 费用事由 | 必填，≤200 字 | | 项目 / 科目 | 必选（ERP 有数据时） | | 预估明细 | 至少一行（数量>0，单价>0） | | 差旅类 | 开始/结束日期必填，结束≥开始 | | 招待类 | 单位/层级/外部人数必填，陪同≤外部人数 | | 会议类 | 开始/结束日期必填，地点必填 | > 不通过时 ScrollTo 报错字段（300ms）+ 红闪 2s + TDMessage 红色横幅。 ##### 页间流转 | 操作 | API | 成功 | 失败 | |------|-----|------|------| | 存草稿 | `PUT /api/oa/expense-apply/draft` | Toast 绿"已保存为草稿" → 跳列表（激活"草稿"Tab） | Toast 红"保存失败，请稍后重试" | | 提交审批 | `POST /api/oa/expense-apply/submit` | .NET 创建 ERP 审批实例 → 返回 ApprovalInstanceId → Toast"已提交，等待审批" → 跳列表 | 同上 | | 返回（有修改） | — | TDDialog"当前内容尚未保存，是否退出？"→ 继续编辑 / 放弃并退出 | — | --- #### 页面 5：费用报销表单 (`/expense/apply`) ##### 新建方式 | 方式 | 操作 | 说明 | |------|------|------| | 导入申请 | 点击顶部蓝色快捷链「导入已通过的事前申请」| 半屏抽屉多选 approved+有额度的申请，每条填导入金额。项目/科目/成本中心自动带入，额度实时校验。空→TDEmpty | | 直接新建 | 不导入，手动填写 | 手动选择项目→科目→查预算，链式操作与页面 4 相同 | ##### 基本信息区 | 字段 | 组件 | 说明 | |------|------|------| | 报销事由 | TDTextarea | 必填，对应 DB `Purpose` | | 成本中心 | TDPicker | .NET → ERP CostCenterService，可选。ERP 无数据时隐藏 | | 报销总金额 | 只读 | 明细累加上浮动画显示，对应 DB `TotalAmount` | | 项目 / 科目 | 只读或手动 | 导入时自动带入；直接新建时手动选择（TDCascader，同页面 4） | ##### 收款账户区 | 字段 | 组件 | 说明 | |------|------|------| | 开户行 | TDInput+下拉联想 | `GET /api/dict/banks`，可自由输入 | | 户名 | TDInput | 默认当前用户姓名，可修改 | | 账号 | TDInput | 校验 16-19 位数字 | ##### 报销明细区 | 字段 | 组件 | 说明 | |------|------|------| | 发生日期 | TDDatePicker | 年月日，对应 DB `ExpenseDate` | | 费用类别 | TDPicker | SysCostCategory 叶子节点，对应 DB `ExpenseType` | | 费用描述 | TDInput | 摘要说明，对应 DB `ExpenseDesc` | | 币种 | TDPicker | 默认 CNY。选外币时自动从 .NET→ERP ExchangeRateService 填汇率 | | 原币金额 | TDInput（数字） | 不含税金额，对应 DB `Amount` | | 税额 | TDInput（数字） | 进项税额，对应 DB `TaxAmount` | | 价税合计 | 只读 | 自动计算 = 金额+税额，对应 DB `TotalAmount` | | 本币金额 | 只读 | 自动计算 = 价税合计×汇率，对应 DB `BaseAmount` | | 发票类型 | TDPicker | 增值税专票(special) / 普票(general) / 无发票(none) | | 发票号码 | TDInput | 专票/普票时必填，无发票时可空 | | 发票代码 | TDInput | 同上 | | 税率 | TDPicker | 6% / 9% / 13%，对应 DB `TaxRate` | | [+ 添加] | 按钮 | 平滑展开新明细卡片 | | ✕ 删除 | 图标按钮 | 气泡确认→折叠消失 | > 无发票场景：单笔≤200 元小额零星可选 `none`，此时发票号和代码可空。明细金额自动汇总至主表 `TotalAmount`。 ##### 附件上传区 | 属性 | 说明 | |------|------| | 组件 | TDesign `TDUpload` | | 数量 | 最多 9 张 | | 大小 | ≤10MB | | 绑定 | 可绑定到具体明细行（`Attachment.DetailId`） | | 存储 | `Attachment (BizType='expense')` | | 交互 | 同页面 4 | ##### 底部操作栏 | 按钮 | 颜色 | 可见条件 | 行为 | |------|------|---------|------| | `[重置]` | 灰 | 编辑已有草稿时 | 确认弹窗→清空至初始状态 | | `[存为草稿]` | 浅蓝 | 始终 | 不校验，保存已填内容 | | `[提交审批]` | `#00ABF3` | 始终 | 触发全局校验，失败不提交，超预算不阻止 | ##### 校验规则 | 校验项 | 规则 | |--------|------| | 报销事由 | 必填 | | 项目 / 科目 | 直接新建时必选（ERP 有数据时） | | 导入金额 | 每条>0，∑≤对应申请剩余可报额度 | | 收款银行/户名/账号 | 必填，账号 16-19 位数字 | | 报销明细 | 至少一行（金额>0，费用类别必选） | | 发票信息 | 发票类型必选，专票/普票时发票号必填 | > 不通过时 ScrollTo 报错字段+红闪+TDMessage。 ##### 页间流转 | 操作 | API | 成功 | 失败 | |------|-----|------|------| | 存草稿 | `PUT /api/oa/expense/draft` | Toast 绿"已保存为草稿" → 跳列表（激活"草稿"Tab） | Toast 红 | | 提交审批 | `POST /api/oa/expense/submit` | .NET 创建 ERP 审批实例 + 冻结预算 + 写入 ExpenseApplicationMapping → Toast"已提交" → 跳列表 | Toast 红 | | 返回（有修改） | — | TDDialog"是否退出？"→ 继续编辑 / 放弃 | — | --- #### 页面 6：事前申请列表 (`/expense-apply/list`) ##### 页面结构 | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"申请记录" | | 筛选栏 | DateRangeFilter + FilterDropdown ×2 | TabBar 下方：日期范围选择器 + 费用类型（差旅/招待/办公/会议）+ 紧急程度（普通/紧急/特急）。筛选条件变化时重新拉取数据 | | 状态筛选 | TDTabBar | Tab：全部 / 草稿 / 审批中 / 已通过 / 已拒绝 / 已撤回。默认选中"全部" | | 列表 | TDListView | 下拉刷新（page=1）/ 上拉加载（page++）。数据来源 OA 本地 ExpenseApplication 表，审批状态通过 .NET→ERP 实时查询 | | 空状态 | TDEmpty | 文案随 Tab 变化："暂无草稿""暂无审批中的单据"等 | ##### 列表卡片 | 元素 | 组件 | 说明 | |------|------|------| | 编号 | Text | 单据编号 BXSQ-YYYYMMDD-XXX | | 摘要 | Text | 事由摘要，单行截断 | | 金额 | Text | 预估金额，粗体高亮 | | 日期 | Text | 提单日期 YYYY-MM-DD | | 类型标签 | TDTag | 费用类型标签（如"差旅"+"办公"） | | 状态 | StatusTag | 灰-草稿 / 橙-审批中 / 绿-已通过 / 红-已拒绝 / 灰-已撤回 | ##### 卡片交互 | 状态/角色 | 操作 | 行为 | |----------|------|------| | 任意 | 点击 | → 详情页 `/expense-apply/detail/:id` | | 本人 draft | 左滑 | `[编辑]`（TDSwipeAction 蓝）+ `[删除]`（红）。编辑→跳表单回填；删除→TDDialog 确认→软删除 | | 本人 rejected | 左滑 | `[编辑]`（TDSwipeAction 蓝），跳表单回填 | | 他人/其他 | 左滑无反应 | — | ##### 经理增量 | 区域 | 组件 | 说明 | |------|------|------| | 范围切换 | TDChip ×2 | TDTabBar 上方：`我的发起` / `下属审批`，选中高亮 `#00ABF3` | | 下属卡片-申请人 | Text | 额外显示"申请人姓名 — 部门" | | 下属 pending | TDSwipeAction | 左滑 `[一键同意]`（绿），就地审批 | > 数据来源：`GET /api/oa/approval/subordinates` → OA 业务表 JOIN ERP 审批状态。 --- #### 页面 7：费用报销列表 (`/expense/list`) ##### 页面结构 | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"报销记录" | | 筛选栏 | DateRangeFilter | TabBar 下方：日期范围选择器。筛选条件变化时重新拉取数据 | | 状态筛选 | TDTabBar | Tab：全部 / 草稿 / 审批中 / 已通过 / 待付款 / 已付款 / 已拒绝 / 已撤回 | | 列表 | TDListView | 同页面 6。数据来源 OA 本地 Expense 表 | | 空状态 | TDEmpty | 同页面 6 | ##### 列表卡片 | 元素 | 组件 | 说明 | |------|------|------| | 编号 | Text | 单据编号 BX-YYYYMMDD-XXX | | 摘要 | Text | 事由摘要 | | 金额 | Text | 报销金额，粗体高亮 | | 日期 | Text | 提单日期 | | 状态 | StatusTag | 同页面 6 | | 付款状态 | TDTag | 黄-待付款 / 蓝-已付款 | > 卡片交互同页面 6（左滑编辑/删除规则一致）。 ##### 财务增量 | 区域 | 组件 | 说明 | |------|------|------| | 数据范围 | — | 默认全公司（不限制 ApplicantId） | | 核销入口 | — | 点击卡片→详情页完成核销。列表页不提供快捷付款 | ##### 经理增量 与页面 6 相同：TDTabBar 上方 `TDChip` 范围切换 + `TDSwipeAction` 一键同意。 --- #### 页面 8：事前申请详情 (`/expense-apply/detail/:id`) | 区域 | 组件 | 说明 | |------|------|------| | 状态横幅 | StatusBanner | 审批中（⏳ 橙，显示当前审批人）/ 已通过（✅ 绿）/ 已拒绝（❌ 红）/ 已撤回（↩ 灰）。审批状态通过 ERP 实时查询 | | 基本信息 | TDDescription | key-value 双栏：申请人 / 部门 / 日期 / 紧急程度 / 费用类型（TDTag 多选标签）/ 含税标记 / 有效期至 / 关联合同号 | | 使用状态 | TDTag | 未使用（绿）/ 部分使用（黄）/ 已用完（灰），对应 DB `UsageStatus` | | 关联项目 | TDDescription | 项目名称 / 预算科目 / 预估总金额（¥） | | 明细列表 | TDTable | 每行：类别 / 数量×单价 / 单位 / 单项金额 / 说明。>5 行默认折叠，`[展开全部]` 按钮展开 | | 附件 | TDUpload | 支撑材料宫格，点击缩略图→全屏预览（双指缩放）。来源于 Attachment (BizType='expense_apply') | | 审批时间线 | TDTimeline | 纵向时间线，首节点"发起人已提交"（拼装 CreateTime+申请人），后续节点来自 .NET→ERP。若 withdrawn→末尾追加灰色撤回节点 | | 底部 | 见下方操作表 | 员工/经理/管理员角色操作 | ##### 页面 8 操作表 **员工** | 状态 | 按钮 | 行为 | |------|------|------| | draft | `[编辑]` `[提交审批]` | 编辑→跳表单回填；提交→校验→调 ERP | | pending | `[撤回申请]` | TDDialog→`POST /api/oa/approval/withdraw`→Status='withdrawn' | | rejected | `[重新编辑并发起]` | 跳表单编辑态，提交后更新原记录 | | approved | 无 | 等待报销引用 | | withdrawn | 无 | 仅查看 | **经理**（pending+当前审批人=该经理）：`[同意]`（主色）/ `[拒绝]`（白底红字，≥5字理由）。风控看板：申请人同类单据数+预算进度条。 **管理员**（所有状态）：`[强制终止]`（红底白字）+ `[查看审批链]`（含旧实例）。 > 通用交互：时间线节点点击→当前用户待审批可弹出审批操作。审批人头像/姓名点击→TDDialog。 --- #### 页面 9：费用报销详情 (`/expense/detail/:id`) | 区域 | 组件 | 说明 | |------|------|------| | 状态横幅 | StatusBanner | 审批状态（同页面 8）+ 付款状态 TDTag：待付款（黄）/ 已付款（蓝） | | 基本信息 | TDDescription | 申请人 / 部门 / 日期 / 事由 / 成本中心 / 项目 / 科目 / 报销总金额（¥） | | 收款信息 | TDDescription | 开户行 / 户名 / 账号（详情页完整展示，列表页脱敏展示后 4 位 `****0123`） | | 申请来源 | TDList | 若导入：列出关联申请编号 + 每张导入金额；若直接新建：不展示 | | 明细列表 | TDTable | 每行：日期 / 类别 / 描述 / 原币金额+币种 / 税额 / 价税合计 / 本币金额+汇率 / 发票类型/号/码/税率。>5 行折叠 | | 附件 | TDUpload | 发票影像宫格，可绑定明细行。来源于 Attachment (BizType='expense') | | 审批时间线 | TDTimeline | 同页面 8 | | 财务查验区 | TDCheckbox ×3 | 仅财务可见：验真 / 税号一致 / 类目合规。全勾→解锁打款按钮。对应 DB `IsInvoiceVerified/IsTaxIdMatched/IsCategoryCompliant` | | 底部 | 见本页下方操作表 | 员工/经理/管理员/财务角色 | ##### 页面 9 操作表 **员工** | 状态 | 按钮 | 行为 | |------|------|------| | draft | `[编辑]` `[提交审批]` | 编辑→跳表单回填；提交→校验→调 ERP | | pending | `[撤回申请]` | TDDialog→`POST /api/oa/approval/withdraw`→Status='withdrawn' | | rejected | `[重新编辑并发起]` | 跳表单编辑态，提交后更新原记录 | | approved | 无 | 等待财务打款 | | withdrawn | 无 | 仅查看 | **经理**（pending+当前审批人=该经理）：`[同意]`（主色）/ `[拒绝]`（白底红字，≥5字理由）。风控看板：申请人同类单据数+预算进度条。 **管理员**（所有状态）：`[强制终止]`（红底白字）+ `[查看审批链]`（含旧实例）。 > 通用交互：时间线节点点击→当前用户待审批可弹出审批操作。审批人头像/姓名点击→TDDialog。 **财务**（Status=approved + PaymentStatus=unpaid） | 操作 | 行为 | |------|------| | 三项合规复选框 | 验真 / 税号一致 / 类目合规。未全勾→`[确认打款]` 灰色锁定 | | `[确认打款并归档]` | 全勾后激活→滑出凭证表单（电汇流水号+记账凭证号必填）→PaymentStatus='paid' | | `[退回修改]` | 选择退回节点（员工重填/经理重审）→状态倒流 | | 归档后 | 按钮替换为 `[下一笔待付款]`；无则 Toast"全部待付款单据已处理完毕" | --- ## 3. 勤务考勤、用车调度与外勤外务模块（9 页） #### 页面 10：加班申请表单 (`/overtime/apply`) ##### 基本信息区 | 字段 | 组件 | 说明 | |------|------|------| | 加班类型 | TDPicker | 工作日 / 休息日 / 法定节假日，默认"工作日"。节假日标注费率（300%） | | 补偿方式 | TDRadio | 转调休 / 结算加班费 / 混合模式。默认"转调休" | | 混合比例 | TDSlider | 10%~90%，步长 10%，仅补偿方式=混合时显示。右侧实时文字："30% 转调休 + 70% 结算加班费" | | 开始时间 | TDDatePicker | 年月日时分，必填 | | 结束时间 | TDDatePicker | 年月日时分，必填。校验：必须晚于开始时间 | | 净工时 | 只读大字卡片 | 自动计算 = (结束-开始) - 午餐(12:00-13:00) - 晚餐(18:00-18:30)。≤0→变红+提交按钮置灰 | | 加班原因 | TDTextarea | 必填 | ##### 底部操作栏 | 按钮 | 行为 | |------|------| | `[存为草稿]` | 不校验，保存已填内容 | | `[提交审批]` | 触发校验（必填项+净工时>0），通过后 `POST /api/oa/overtime/submit` → ERP 创建审批实例 | ##### 校验规则 | 校验项 | 规则 | |--------|------| | 开始/结束时间 | 必填，结束>开始 | | 净工时 | 必须>0 | | 加班原因 | 必填 | > 不通过时 ScrollTo+红闪+TDMessage。 --- #### 页面 11：加班申请列表 (`/overtime/list`) | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"加班记录" | | 筛选栏 | DateRangeFilter + FilterDropdown | TabBar 下方：日期范围选择器 + 加班类型（工作日/休息日/节假日） | | 状态筛选 | TDTabBar | 全部 / 草稿 / 审批中 / 已通过 / 已拒绝 / 已撤回 | | 列表 | TDListView | 下拉刷新/上拉加载，数据来源 OA 本地 Overtime 表，审批状态通过 ERP 实时查询 | ##### 列表卡片 | 元素 | 组件 | 说明 | |------|------|------| | 编号 | Text | JB-YYYYMMDD-XXX | | 类型标签 | TDTag | 工作日/休息日/节假日 | | 净工时 | Text | 粗体高亮 X.Xh | | 补偿方式 | Text | 加班费 / 转调休 / "X%调休+Y%结算" | | 日期 | Text | 提单日期 | | 状态 | StatusTag | 同页面 6 | ##### 卡片交互 | 状态/角色 | 操作 | 行为 | |----------|------|------| | 任意 | 点击 | → 详情页 `/overtime/detail/:id` | | 本人 draft | 左滑 | `[编辑]` `[删除]`（同页面 6） | | 本人 rejected | 左滑 | `[编辑]` | | 他人/其他 | 左滑无反应 | — | > **经理增量**：TDChip 范围切换（`我的发起` / `下属审批`）+ TDSwipeAction `[一键同意]`。同页面 6。 --- #### 页面 12：加班申请详情 (`/overtime/detail/:id`) | 区域 | 组件 | 说明 | |------|------|------| | 状态横幅 | StatusBanner | 同页面 8 | | 基本信息 | TDDescription | 申请人/部门/加班类型/补偿方式/混合比例/开始时间/结束时间/净工时/原因 | | 审批时间线 | TDTimeline | 同页面 8 | | 底部操作栏 | 同页面 8 | 员工端各状态操作。**经理端**（pending 审批人=本人）：同意/拒绝。**管理员端**：强制终止+查看审批链 | --- #### 页面 13：用车申请表单 (`/vehicle/apply`) ##### 基本信息区 | 字段 | 组件 | 说明 | |------|------|------| | 车牌号 | TDPicker | OA 本地 SysVehicle 车池（仅显示空闲+使用中车辆）。冲突车辆标红，无可用→TDEmpty | | 用车事由 | TDInput | 必填 | | 用车目的 | TDPicker | 客户接待 / 商务出行 / 公务 | | 始发地 | TDInput | 原生定位自动填入，可修改 | | 目的地 | TDInput + 地图图标 | 点击地图图标→MethodChannel 唤醒原生地图选点，回填地址+经纬度 | | 出车时间 | TDDatePicker | 年月日时分，必填 | | 还车时间 | TDDatePicker | 年月日时分，必填。校验：必须晚于出车时间 | | 同行人数 | TDInput（数字） | 默认 1，输入 0 自动调整为 1 | | 同行人 | TDChip + MethodChannel | 点击[+]→原生通讯录多选→胶囊标签展示，x 剔除 | ##### 排期冲突检测 | 触发条件 | 行为 | |---------|------| | 车牌+出车/还车时间选定后 | 异步调 .NET → OA 本地 Vehicle 表校验时段重叠 | | 冲突 | 红色警告"该时段车辆已被预订"，提交按钮锁死。提示"请选择其他车辆或调整时间" | | 无冲突 | 可正常提交 | ##### 底部操作栏 与页面 4 相同：`[存为草稿]` + `[提交审批]`，提交调 `POST /api/oa/vehicle/submit`。 ##### 校验规则 | 校验项 | 规则 | |--------|------| | 车牌号 | 必选 | | 事由/目的 | 必填 | | 出车/还车时间 | 必填，还车>出车 | | 排期冲突 | 无冲突方可提交 | --- #### 页面 14：用车申请列表 (`/vehicle/list`) | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"用车记录" | | 筛选栏 | DateRangeFilter + FilterDropdown | TabBar 下方：日期范围选择器 + 用车目的（客户接待/商务出行/公务） | | 状态筛选 | TDTabBar | 全部 / 草稿 / 审批中 / 已通过 / 已拒绝 / 已撤回 / 已还车 | | 列表 | TDListView | 数据来源 OA 本地 Vehicle 表 | ##### 列表卡片 | 元素 | 组件 | 说明 | |------|------|------| | 编号 | Text | YC-YYYYMMDD-XXX | | 车牌 | Text | 粗体高亮 | | 行程 | Text | 始发地 → 目的地 | | 时间 | Text | 出车时间 MM-DD HH:mm | | 用途标签 | TDTag | 接待/商务/公务 | | 状态 | StatusTag | 同页面 6，额外含 returned（已还车-蓝） | ##### 卡片交互 | 状态/角色 | 操作 | 行为 | |----------|------|------| | 任意 | 点击 | → 详情页 `/vehicle/detail/:id` | | 本人 draft/rejected | 左滑 | `[编辑]` `[删除]`（同页面 6） | | 本人 approved | 左滑 | `[确认还车]`，拉起半屏核销抽屉 | | 已还车 | 左滑无反应 | — | > 经理增量：TDChip 范围切换 + TDSwipeAction 一键同意（同页面 6）。 --- #### 页面 15：用车申请详情 (`/vehicle/detail/:id`) | 区域 | 组件 | 说明 | |------|------|------| | 状态横幅 | StatusBanner | 同页面 8，额外含 returned（已还车-蓝） | | 基本信息 | TDDescription | 申请人/部门/车牌/目的/事由/始发地→目的地/出车时间/还车时间/同行人数/同行人列表 | | 地图 | 静态地图 | 始发地+目的地标记，点击→MethodChannel 唤醒原生地图导航 | | 审批时间线 | TDTimeline | 同页面 8 | | 底部操作栏 | 同页面 8 | 员工端各状态操作 | ##### 还车登记（仅 approved 状态） | 字段 | 组件 | 说明 | |------|------|------| | 实还时间 | TDDatePicker | 年月日时分。若早于 EndTime→灰字提示"提前还车"；若晚于→红字"已超出原计划还车时间" | | 出车前里程 | TDInput（数字） | 必填 | | 还车后里程 | TDInput（数字） | 必填，校验≥出车前里程。不通过→红色提示+提交按钮置灰 | | 实际费用金额 | TDInput（数字） | 路桥费/停车费等实际费用总额（元），对应 DB `ActualCost` | | 费用备注 | TDInput | 费用明细补充说明，对应 DB `CostRemark` | | 确认提交 | 按钮 | TDDialog"提交后里程和费用不可再修改"→确认→Status='returned'→页面刷新+底部灰字"已还车归档于 YYYY-MM-DD HH:mm" | > **经理端**（pending 审批人=本人）：详情页底部同意/拒绝操作栏。**管理员端**：强制终止+查看审批链。 --- #### 页面 16：外勤日志创建 (`/outing-log/create`) ##### 页面结构 | 区域 | 组件 | 说明 | |------|------|------| | GPS 定位区 | MethodChannel → 只读文本 | 页面初始化强制请求高精度 GPS，逆地理编码地址只读不可修改。绿色盾牌安全图标。精度>100m→黄色警告。失败→TDEmpty"无法获取当前位置"+提交按钮置灰 | | 客户名称 | TDInput + 联想 | `GET /api/customer/search?q=` 联想匹配 ERP 客户池。无匹配→自由文本，提交时 .NET 自动创建 ERP 客户 | | 客户联系人 | TDPicker | 选填，选定客户后加载该客户的联系人列表（来源 ERP 客户主数据），对应 DB `ContactId` | | 工作总结 | TDTextarea | 必填 | | 后续计划 | TDInput | 选填 | ##### 现场拍照 | 属性 | 说明 | |------|------| | 方式 | 跳过相册，MethodChannel 直接唤起原生相机 | | 水印 | 服务器授时 + GPS 经纬度，自动渲染 | | 数量 | 最少 1 张，最多 9 张 | | 存储 | Attachment (BizType='outing_log')，FileType='sign_in_photo' | | 校验 | <1 张→提交按钮置灰+红提示"请至少拍摄一张现场照片"。相机权限被拒→TDDialog+前往设置 | ##### 底部操作栏 | 按钮 | 行为 | |------|------| | `[存为草稿]` | GPS/CustomerId 可为空，保存已填内容 | | `[提交]` | 校验 GPS 已定位 + 客户名已填 + 照片≥1。提交调 `PUT /api/oa/outing-log/submit` | --- #### 页面 17：外勤日志列表 (`/outing-log/list`) | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"外勤记录" | | 筛选栏 | DateRangeFilter | TabBar 下方：日期范围选择器 | | 筛选 | TDTabBar | 全部 / 草稿 / 已完成 | | 列表 | TDListView | 按 CreateTime 倒序，数据来源 OA 本地 OutingLog 表 | ##### 列表卡片 | 元素 | 组件 | 说明 | |------|------|------| | 编号 | Text | VST-YYYYMMDD-XXX | | 客户名 | Text | 粗体高亮 | | 地址 | Text | 签到地址截断一行 | | 摘要 | Text | 工作总结截取 50 字 | | 日期 | Text | YYYY-MM-DD | | 状态 | StatusTag | 草稿（灰）/ 已完成（绿） | | 新点评标记 | TDBadge | 橙色，条件：`Comment.CreateTime > COALESCE(LastViewedTime,'1900-01-01')` 且评论者≠本人 | ##### 卡片交互 | 状态/角色 | 操作 | 行为 | |----------|------|------| | 任意 | 点击 | → 详情页 `/outing-log/detail/:id` | | 本人 draft | 左滑 | `[编辑]` `[删除]` | | completed | 左滑无反应 | — | > 经理增量：TDChip 范围切换（同页面 6），卡片追加业务员姓名。 --- #### 页面 18：外勤日志详情 (`/outing-log/detail/:id`) | 区域 | 组件 | 说明 | |------|------|------| | 微缩地图 | 静态地图 | 点击→MethodChannel 唤醒原生导航 | | 基本信息 | TDDescription | 业务员/部门/客户名/签到地址/签到时间 | | 工作总结 | Text | 完整正文 | | 后续计划 | Text | 后续推进计划 | | 照片墙 | TDUpload | 带防伪水印照片，点击全屏预览 | | 点评区 | TDList | 按时间升序气泡样式展示。员工端只读 | | 底部（经理） | TDRate + TDInput | 星级评分 1-5 星 + 文字点评 + 发送按钮 | ##### 页面交互 | 操作 | 行为 | |------|------| | 进入详情 | 无感 `PUT /api/oa/outing-log/:id/view`，更新 LastViewedTime，列表"新点评"红点消失 | | 经理点评 | 【经理专属】点选星级+输入文字→发送→气泡追加。写入 OutingLogComment，同步更新 OutingLog.UpdateTime | --- ## 4. 行政公告模块（3 页） #### 页面 19：公告列表 (`/announcement/list`) ##### 页面结构 | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"公司公告" | | 类型筛选 | TDTabBar | 全部 / 通知公告 / 人事与制度 / 放假与活动。管理员额外显示"我的草稿"Tab | | 列表 | TDListView | 排序：置顶优先→未过期按发布时间倒序→已过期置灰。数据来源 OA 本地 Announcement 表 | | 空状态 | TDEmpty | "暂无行政公告" | ##### 列表卡片 | 元素 | 组件 | 说明 | |------|------|------| | 标题 | Text | 粗体 | | 类型标签 | TDTag | 通知/制度/活动 | | 部门 | Text | 发布部门（调 `GET /api/user/{publisherId}`） | | 时间 | Text | MM-DD HH:mm | | 未读标记 | TDBadge | 红点，AnnouncementReadLog.IsRead=0 时显示 | | 已过期 | Text | 卡片整体置灰 + 标题末尾标注"已过期" | > 不支持搜索。点击卡片→详情页。返回列表后红点消失。 --- #### 页面 20：公告详情 (`/announcement/detail/:id`) ##### 页面结构 | 区域 | 组件 | 说明 | |------|------|------| | 标题 | Text | 大标题，红头文件样式 | | 发布信息 | Text | 发布部门 / 发布时间 | | 正文 | WebView | HTML/Markdown 渲染 | | 附件 | TDList | 点击→原生下载管理器打开。空→整区隐藏。来源 Attachment (BizType='announcement') | | 已过期横幅 | TDBanner | 红色"该公告已于 YYYY-MM-DD HH:mm 过期" | ##### 页面交互 | 操作 | 行为 | |------|------| | 停留≥2s | 无感 `POST /api/oa/announcement/:id/read`，AnnouncementReadLog.IsRead=1 | | <2s 返回 | 不发送已读请求，红点保留 | | 返回列表 | 已读公告红点消失 | ##### 管理员增量 | 区域 | 组件 | 说明 | |------|------|------| | 已读/未读统计 | TDChip ×2 | `[已读 N 人]`（绿）/ `[未读 N 人]`（灰）。点击展开员工列表（头像+部门） | | DING 催办 | TDButton | 点击→震动反馈→封装未读 UserIds→MethodChannel 强推 Push。Toast"已向 N 名未读员工发送催办通知"。更新 `IsUrged=1` | --- #### 页面 21：公告发布 (`/announcement/create`)【管理员专属】 | 区域 | 组件 | 说明 | |------|------|------| | 导航栏 | TDNavbar | 标题"发布公告"，右侧 `[预览]` 按钮 | | 标题 | TDInput | 必填 | | 分类 | TDPicker | notice(通知)/policy(制度)/activity(活动) | | 正文 | TDRichText | 加粗/斜体/下划线/列表/图片/链接/字号 H1-H3 | | 附件 | TDUpload | 最多 5 个，PDF/图片/Word/Excel，单文件≤20MB | | 置顶 | TDSwitch | 默认关闭，对应 DB `IsTop` | | 有效期 | TDDatePicker | 可选，不填永不过期，对应 DB `ExpiryDate` | | 接收范围 | TDDrawer | 点击→右侧滑出：①全员（默认）②按部门（部门树多选，TDCheckbox）③按指定用户（员工搜索多选）。底部实时统计覆盖人数。对应 DB `PrivateLevel` + `AnnouncementTarget` | | 按钮 | 行为 | |------|------| | `[存为草稿]` | Status='draft'，仅创建者+管理员可见 | | `[预览]` | TDDialog 全屏模拟详情页效果 | | `[发布]` | TDDialog 确认→Status='published'→异步写入 AnnouncementReadLog→Toast | --- ## 5. 报表模块（5 页） > 入口：工作台金刚区报表区域（5 个独立入口）。每个报表独立页面，独立路由，独立加载数据。筛选条件在页面顶部，下方为数值卡片 + 趋势图（fl_chart）。角色数据范围：员工=本人、经理=本部门、财务/管理员=全公司。预置时间段缓存 5min，自定义时间段实时查询。 --- #### 页面 22：事前申请明细报表 (`/report/expense-apply-detail`) **页面结构** | 区域 | 组件 | 说明 | |------|------|------| | 时间筛选 | TDChip + TDDatePicker | 快捷按钮（本月/本季/本年）+ 自定义起止日期 | | 状态筛选 | TDPicker | 全部 / 已通过 / 已拒绝 / 已撤回 | | 数值卡片 | TDCard ×4 | 累计申请总额（年初至今）/ 当月笔数 / 已通过笔数 / 已通过金额。仅展示不可点击，空→¥0.00 | | 趋势图 | fl_chart 双折线 | 近 12 月申请金额 vs 已通过金额对比。长按→tooltip（日期+数值），水平滑动 | | 数据来源 | — | OA 本地 ExpenseApplication 表，.NET 按角色+时间聚合 | **角色差异** | 角色 | 图表类型 | 明细列表 | 导出 | |------|---------|:--:|:--:| | 员工 | 个人双折线 | ❌ | ❌ | | 经理 | 部门横向对比柱状图（每人两根柱：申请/已通过） | ✅ | ❌ | | 财务/管理员 | 全公司趋势图 | ✅ | ✅ Excel | --- #### 页面 23：费用报销明细报表 (`/report/expense-detail`) **页面结构** | 区域 | 组件 | 说明 | |------|------|------| | 时间筛选 | TDChip + TDDatePicker | 同页面 22 | | 状态筛选 | TDPicker ×2 | 审批状态（全部/已通过/已拒绝）+ 付款状态（全部/待付款/已付款） | | 数值卡片 | TDCard ×4 | 累计核销总额（年初至今）/ 当月笔数 / 待审批笔数 / 待付款笔数 | | 趋势图 | fl_chart 双折线 | 近 12 月报销金额 vs 审批通过金额对比 | | 数据来源 | — | OA 本地 Expense 表，审批状态通过 ERP 实时查询 | **角色差异** | 角色 | 图表类型 | 明细列表 | 导出 | |------|---------|:--:|:--:| | 员工 | 个人双折线 | ❌ | ❌ | | 经理 | 部门横向对比柱状图 | ✅ | ❌ | | 财务/管理员 | 全公司趋势图 | ✅ | ✅ Excel | --- #### 页面 24：加班明细报表 (`/report/overtime-detail`) **页面结构** | 区域 | 组件 | 说明 | |------|------|------| | 时间筛选 | TDChip + TDDatePicker | 同页面 22 | | 加班类型 | TDPicker | 全部 / 工作日 / 休息日 / 节假日 | | 数值卡片 | TDCard ×4 | 当月净工时（h）/ 当月次数 / 累计调休小时 / 加班费结算次数 | | 趋势图 | fl_chart 堆叠柱状图 | 近 12 月加班工时，按类型（工作日/休息日/节假日）分色堆叠 | | 数据来源 | — | OA 本地 Overtime 表 | **角色差异** | 角色 | 图表类型 | 明细列表 | 导出 | |------|---------|:--:|:--:| | 员工 | 个人堆叠柱状图 | ❌ | ❌ | | 经理 | 部门横向对比柱状图（每人汇总工时） | ✅ | ❌ | | 财务/管理员 | 全公司趋势图 | ✅ | ✅ Excel | --- #### 页面 25：用车明细报表 (`/report/vehicle-detail`) **页面结构** | 区域 | 组件 | 说明 | |------|------|------| | 时间筛选 | TDChip + TDDatePicker | 同页面 22 | | 车辆筛选 | TDPicker | 全部 / 按车牌筛选 | | 用途筛选 | TDPicker | 全部 / 接待 / 商务 / 公务 | | 数值卡片 | TDCard ×4 | 当月次数 / 累计里程（km）/ 路桥停车费 / 未还车数量 | | 趋势图 | fl_chart 双轴折线 | 近 12 月用车次数（左轴）vs 累计费用（右轴） | | 数据来源 | — | OA 本地 Vehicle 表 | **角色差异** | 角色 | 图表类型 | 明细列表 | 导出 | |------|---------|:--:|:--:| | 员工 | 个人双轴折线 | ❌ | ❌ | | 经理 | 部门横向对比柱状图（每人次数/费用） | ✅ | ❌ | | 财务/管理员 | 全公司双轴折线 | ✅ | ✅ Excel | --- #### 页面 26：外勤日志明细报表 (`/report/outing-log-detail`) **页面结构** | 区域 | 组件 | 说明 | |------|------|------| | 时间筛选 | TDChip + TDDatePicker | 同页面 22 | | 客户筛选 | TDSearchBar | 输入客户名模糊搜索 | | 数值卡片 | TDCard ×4 | 当月拜访次数 / 拜访客户数（去重）/ 平均评分（⭐）/ 未点评日志数 | | 趋势图 | fl_chart 双轴折线 | 近 12 月拜访次数（左轴）vs 平均评分（右轴） | | 数据来源 | — | OA 本地 OutingLog 表 LEFT JOIN OutingLogComment | **角色差异** | 角色 | 图表类型 | 明细列表 | 导出 | |------|---------|:--:|:--:| | 员工 | 个人双轴折线 | ❌ | ❌ | | 经理 | 部门横向对比柱状图（每人次数/评分） | ✅ | ❌ | | 财务/管理员 | 全公司双轴折线 | ✅ | ✅ Excel | > **经理版交互增强**：点击柱状图柱体→下方列表联动过滤该员工本月单据→可穿透跳转对应详情页。适用于页面 22~26 所有报表。 --- ## 6. 全局设计规范 #### 6.1 色彩体系 | Token | 值 | 用途 | |-------|------|------| | `--primary` | `#00ABF3` | 主按钮/激活态/高亮 Chip/链接 | | `--primary-light` | `#E6F7FD` | 主色浅底 | | `--primary-active` | `#0089C4` | 主色按压态 | | `--success` | `#00A870` | 已通过/同意/金额正面 | | `--warning` | `#E37318` | 审批中/超支警告/排期冲突 | | `--danger` | `#D54941` | 已拒绝/拒绝/删除/强制终止 | | `--text-primary` | `#1A1A1A` | 标题/关键金额 | | `--text-secondary` | `#666666` | 摘要/辅助说明/时间戳 | | `--text-placeholder` | `#BFBFBF` | 占位符/禁用文字 | | `--bg-page` | `#F5F5F5` | 页面背景 | | `--bg-card` | `#FFFFFF` | 卡片/表单底色 | | `--border` | `#E7E7E7` | 分割线/描边/输入框边框 | | `--status-gray` | `#999999` | 草稿/已撤回/已过期 | | `--bg-disabled` | `#EEEEEE` | 禁用按钮/输入框背景 | | `--text-disabled` | `#BFBFBF` | 禁用态文字（复用 `--text-placeholder`） | #### 6.2 字号层级 | Token | 字号 | 行高 | 用途 | |-------|------|------|------| | `--fs-title` | 18sp | 26px | 导航栏标题/详情大标题 | | `--fs-subtitle` | 16sp | 24px | 卡片标题/表单分组/金额大字/按钮 | | `--fs-body` | 14sp | 22px | 正文/列表摘要/输入框/Chip | | `--fs-caption` | 12sp | 18px | 辅助说明/时间戳/状态标签/红点数 | #### 6.3 间距系统 | Token | 值 | 用途 | |-------|------|------| | `--space-xs` | 4px | 图标与文字间距/Chip 内边距 | | `--space-sm` | 8px | 列表项内 padding/表单行间距 | | `--space-md` | 16px | 卡片内边距/页面左右边距 | | `--space-lg` | 24px | 表单分组间距/卡片间距 | | `--space-xl` | 32px | 页面顶部/底部留白 | #### 6.4 空状态 | 场景 | 文案 | |------|------| | 消息列表为空 | "暂无消息通知" | | 申请列表为空 | "暂无记录，点击下方按钮发起申请" | | 审批列表为空 | "暂无待审批单据" | | 报销明细为空 | "暂无报销明细，请先添加费用明细" | | 照片墙为空 | "暂无附件" | | 搜索无结果 | "未找到匹配的员工，试试其他关键词" | | 公告列表为空 | "暂无行政公告" | | 报表无数据 | "所选时间范围内暂无数据" | | 导入事前申请为空 | "暂无可用的事前申请，请确认已有审批通过的申请" | | 下属审批为空 | "暂无下属提交的审批单据" | | 附件上传已满 | "上传数量已达上限" | | 车辆池为空 | "暂无可用车辆，请联系管理员添加" | #### 6.5 加载态 | 场景 | 方式 | |------|------| | 页面首次加载 | TDSkeleton 骨架屏（最长 8s 超时转网络异常态） | | 下拉刷新 | RefreshIndicator | | 上拉加载更多 | 底部菊花 + "加载中..." | | 按钮提交中 | 按钮替换为 TDLoading 小菊花 + 禁用态 | | 附件上传中 | 缩略图叠加半透明蒙层 + 中心菊花 | | 一键导出中 | 圆形悬浮按钮旋转 + "导出中..." | #### 6.6 网络异常态 | 场景 | 处理 | |------|------| | 列表加载失败 | TDEmpty + 断网图标 + `[点击重试]` | | 提交失败 | TDToast（红）"提交失败，请稍后重试" | | 接口超时（>15s） | TDEmpty + 时钟图标 + `[点击重试]`"请求超时" | | 服务端 500 | TDToast"服务器繁忙，请稍后重试" | | 401 未授权 | 静默触发宿主登录流程 | #### 6.7 并发冲突 | 场景 | 处理 | |------|------| | 编辑草稿时单据已被他人提交 | `CONCURRENCY_CONFLICT`→TDDialog"已被修改或删除"→返回列表刷新 | | 审批时单据已被他人处理 | `APPROVAL_CONFLICT`→详情页自动刷新+Toast"状态已更新" | #### 6.8 全局交互 - **横竖屏**：仅支持竖屏 - **键盘**：聚焦时页面上移；金额类弹数字键盘；文本类弹默认键盘 - **返回手势**：iOS 边缘右滑；Android 系统返回键；表单有未保存修改时拦截确认 - **Deep Link**：`tboss://oa/{path}` → GoRouter 路由 - **字体缩放**：sp 单位，最小 11sp，导航栏标题不溢出 - **下拉刷新**：列表页顶部下拉触发 `RefreshIndicator`，重置 page=1 重新加载，刷新完成后短暂展示"已更新"提示 #### 6.9 圆角规范 | Token | 值 | 用途 | |-------|------|------| | `--radius-sm` | 4px | Chip / Tag / 小按钮 / 输入框 | | `--radius-md` | 8px | 卡片 / 大按钮 / 列表项 | | `--radius-lg` | 12px | 对话框 / 抽屉 / 底部弹出面板 | | `--radius-round` | 999px | 胶囊按钮 / 头像 / 状态圆点 | #### 6.10 阴影层级 | Token | 值 | 用途 | |-------|------|------| | `--shadow-none` | `none` | 平面/无阴影 | | `--shadow-card` | `0 2px 8px rgba(0,0,0,0.08)` | 卡片/列表项 | | `--shadow-fab` | `0 4px 16px rgba(0,0,0,0.12)` | 悬浮按钮/底部操作栏/导航栏 | | `--shadow-drawer` | `-4px 0 20px rgba(0,0,0,0.15)` | 右侧抽屉/半屏面板 | #### 6.11 动画时间规范 | Token | 值 | 用途 | |-------|------|------| | `--duration-fast` | 150ms | 按压反馈/hover 响应/Tag 关闭 | | `--duration-normal` | 300ms | 页面过渡/图表数据刷新/ScrollTo 滚动/红闪消失 | | `--duration-slow` | 500ms | 抽屉滑出/卡片展开收起/淡入淡出 | | `--easing-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | 标准缓动曲线，用于所有过渡动画 | > **应用示例**：图表刷新间隔统一用 `--duration-normal`（300ms）；表单校验失败红闪 2s 后淡出用 `--duration-slow`；按钮按下态用 `--duration-fast`；骨架屏超时阈值 8s（见 §6.5）。 #### 6.12 导航栏标题清单 | 页面 | 路由 | 标题 | |------|------|------| | 1 | `/` | —（Appshell） | | 2 | `/messages` | "消息通知" | | 3 | `/home` | "工作台" | | 3.1 | `/profile` | "我的" | | 3.2 | `/admin/permissions` | "权限管理" | | 4 | `/expense-apply/apply` | "事前申请" | | 5 | `/expense/apply` | "费用报销" | | 6 | `/expense-apply/list` | "申请记录" | | 7 | `/expense/list` | "报销记录" | | 8 | `/expense-apply/detail/:id` | "申请详情" | | 9 | `/expense/detail/:id` | "报销详情" | | 10 | `/overtime/apply` | "加班申请" | | 11 | `/overtime/list` | "加班记录" | | 12 | `/overtime/detail/:id` | "加班详情" | | 13 | `/vehicle/apply` | "用车申请" | | 14 | `/vehicle/list` | "用车记录" | | 15 | `/vehicle/detail/:id` | "用车详情" | | 16 | `/outing-log/create` | "外勤日志" | | 17 | `/outing-log/list` | "外勤记录" | | 18 | `/outing-log/detail/:id` | "日志详情" | | 19 | `/announcement/list` | "公司公告" | | 20 | `/announcement/detail/:id` | "公告详情" | | 21 | `/announcement/create` | "发布公告" | | 22 | `/report/expense-apply-detail` | "事前申请明细报表" | | 23 | `/report/expense-detail` | "费用报销明细报表" | | 24 | `/report/overtime-detail` | "加班明细报表" | | 25 | `/report/vehicle-detail` | "用车明细报表" | | 26 | `/report/outing-log-detail` | "外勤日志明细报表" | --- > **文档版本**：v1.0 | 日期：2026-06-04