diff --git a/20260803-优化.md b/20260803-优化.md index f6e1b17..c9c77d7 100644 --- a/20260803-优化.md +++ b/20260803-优化.md @@ -1,4 +1,4 @@ -# 20260803 优化清单 +# 20260803 优化清单（更新于 20260804） ## 一、验收测试清单（问题 1-3） @@ -96,7 +96,7 @@ 2. 增加折叠/展开功能 3. 调整信息密度，次要信息收起 - **优先级**：P2 中 -- **状态**：✅ 已完成 — 已拆分为 5 个 Tab（概览/风险提醒/月度任务/人力成本/人员分析），支持 Tab 级别和区域级别的显示设置 +- **状态**：✅ 已完成（20260803）— 已拆分为 5 个 Tab（概览/风险提醒/月度任务/人力成本/人员分析），支持 Tab 级别和区域级别的显示设置 ## 七、离职操作（问题 12-13） @@ -128,7 +128,34 @@ | 优先级 | 问题 | 原因 | 状态 | |--------|------|------|------| -| P0 紧急 | 5、13 | 功能性 bug，影响业务正确性 | 待修复 | +| P0 紧急 | 5、13 | 功能性 bug，影响业务正确性 | 问题5已完成，问题13待修复 | | P1 高 | 1、2、3、4、6、11、12 | 用户体验差或操作不完整 | 待修复 | | P2 中 | 7、9、10、14 | 功能增强和优化 | 问题10已完成 | | P3 规划 | 8 | 新功能开发，需单独规划 | 待规划 | + +--- + +## 20260804 新增修复记录 + +### 已完成项 + +| 编号 | 修复内容 | 涉及文件 | +|------|----------|----------| +| 花名册搜索 | 身份证号搜索结果被前端二次过滤清空，增加 `idCardMasked` 匹配 | `frontend/src/pages/Roster.tsx:267` | +| Header 企业名称 | TopNav 增加企业名称显示，复用 `settingsApi.org()` 查询 | `frontend/src/components/layout/TopNav.tsx` | +| 问题5 | WorkProcess 表单字段英文 key 已增加中文标签映射 | `frontend/src/pages/WorkProcess.tsx` | + +### 新增优化清单（详见 docs/20260804-优化.md） + +基于用户反馈的 23 项问题全面审查，已生成独立文档：`docs/20260804-优化.md` + +**P0 紧急（待修复）**： +- 发薪按钮无效（`window.location.hash` 跳转不兼容 BrowserRouter） +- 用工办理需姓名检索替代 UUID 输入 +- 填写界面增加直接提交按钮 +- 风险中心跳转后不自动筛选 + +**已确认无需修改**： +- 身份证号搜索（后端已实现，前端 bug 已修复） +- 多附件上传（已支持） +- 休假审批流程（已有完整模块） diff --git a/docs/20260804-优化.md b/docs/20260804-优化.md new file mode 100644 index 0000000..d53e8e7 --- /dev/null +++ b/docs/20260804-优化.md @@ -0,0 +1,375 @@ +# TurboHR 系统优化清单（20260804） + +> 基于用户反馈的 23 项问题，逐条对照系统代码进行检查，记录现状、问题及优化方案。 + +--- + +## 一、花名册模块 + +### 1.1 搜索功能（反馈 #7：无身份证号搜索） + +**现状**：后端 `roster.routes.ts:58` 已支持身份证后N位搜索（`isIdCardSearch` 逻辑：输入 ≥2 位数字时按身份证尾号匹配），前端搜索框 placeholder 已提示"搜索姓名、部门或身份证后4位"。 + +**结论**：✅ 已实现，无需修改。 + +### 1.2 身份证号显示（反馈 #5：身份证号隐藏，不便于复制） + +**现状**：`Roster.tsx:466` 显示 `e.idCardMasked`（脱敏格式 `110****1234`），完整身份证号需点进员工详情才能查看。 + +**问题**：用户需要复制完整身份证号到其他模块（如开具离职证明），操作不便。 + +**优化方案**： +- 花名册列表中身份证号列增加「点击复制」功能：点击脱敏号码自动复制完整身份证号到剪贴板，toast 提示"已复制" +- 员工详情页 BasicInfo 中身份证号也增加复制按钮 + +**涉及文件**：`frontend/src/pages/Roster.tsx:466`、`frontend/src/pages/roster/BasicInfo.tsx` + +### 1.3 显示字段不足（反馈 #6、#20：显示信息太少，缺少合同起止时间、社保状态） + +**现状**：`Roster.tsx:431-559` 表格列包含姓名、身份证号（脱敏）、部门、状态、月薪、合同类型、合同状态，但合同到期日期列（`th` 和 `td`）使用了 `hidden` CSS 类未显示。入职日期、离职日期同样隐藏。社保缴纳状态未展示。 + +**问题**：用户需点进员工详情才能看到合同起止时间和社保信息。 + +**优化方案**： +- 取消隐藏「合同到期」列，直接在花名册表格中展示合同到期日期（已有渲染逻辑，只需移除 `hidden` 类） +- 新增「社保状态」列：显示"已缴纳/未缴纳/待办理"（需后端 roster API 返回社保缴纳状态摘要） +- 取消隐藏「入职日期」列 + +**涉及文件**：`frontend/src/pages/Roster.tsx:441-446`（表头）、`540-558`（合同到期单元格）、`486`（入职日期） + +### 1.4 附件上传（反馈 #15：多条上传附件） + +**现状**：`AttachmentInfo.tsx` 和 `BasicInfo.tsx` 已支持多附件上传，类型包括身份证、银行卡、学历证书、其他，支持 PDF/JPG/PNG 等格式，最大 10MB。 + +**问题**：附件类型选项较少，缺少"职业资格证书"、"毕业证"等常见类型。 + +**优化方案**： +- 扩展附件类型：增加 `CERTIFICATE`（职业资格证书）、`CONTRACT`（合同扫描件）、`PHOTO`（员工照片）等选项 + +**涉及文件**：`frontend/src/pages/roster/AttachmentInfo.tsx:13,52`、`frontend/src/pages/roster/BasicInfo.tsx:16,49` + +### 1.5 发薪按钮无效（反馈 #11：发薪功能点击无反应） + +**现状**：`Roster.tsx:590-593` 发薪按钮使用 `window.location.hash = '#/money'` 进行跳转，这种 hash 路由方式可能与 React Router 的 BrowserRouter 不兼容，导致跳转失败。 + +**优化方案**： +- 改用 `useNavigate` hook 进行路由跳转：`navigate('/money')` +- 或直接使用 `` 组件 + +**涉及文件**：`frontend/src/pages/Roster.tsx:592` + +--- + +## 二、用工办理模块 + +### 2.1 姓名检索替代 ID 检索（反馈 #1：用员工ID和合同ID检索不便） + +**现状**：`WorkProcess.tsx:53-141` 的 `FORM_FIELDS` 中，ONBOARD/CONFIRM/CHANGE/RENEW/SUSPEND/TERMINATE/RESCIND 等流程类型使用 `employeeId`（文本输入）和 `contractId`（文本输入）作为字段，用户需要手动输入 UUID。 + +**问题**：操作人员不知道员工ID和合同ID，使用不便。 + +**优化方案**： +- 将 `employeeId` 字段类型改为 `employee-select`（自定义组件）：输入姓名时模糊搜索员工列表，选择后自动填入 ID +- 将 `contractId` 字段类型改为 `contract-select`：根据选中员工自动列出其合同供选择 +- 利用已有的 `/api/v1/employees/list` 接口（返回 id/name/department）实现搜索下拉 + +**涉及文件**：`frontend/src/pages/WorkProcess.tsx:53-141`（FORM_FIELDS 配置）、新增 `EmployeeSelect` 组件 + +### 2.2 填写界面增加提交按钮（反馈 #12：只能存草稿后再提交） + +**现状**：`WorkProcess.tsx:400-404` 创建弹窗底部只有"存草稿"按钮，用户必须先存草稿，再在详情中点击"提交办理"。 + +**优化方案**： +- 在填写信息界面增加"直接提交"按钮，调用 `createMutation` 创建后立即调用 `submitMutation` 提交 +- 保持"存草稿"按钮供用户选择 + +**涉及文件**：`frontend/src/pages/WorkProcess.tsx:400-408` + +### 2.3 查看已生成文书（反馈 #12：已提交的证明类业务无法查看生成文书） + +**现状**：`WorkProcess.tsx:489-501` 详情弹窗中显示已生成文书列表（`data.documents`），但仅展示文件名，无下载/预览链接。`previewContent` 仅在 DRAFT 状态下可预览。 + +**问题**：已提交/已完成的业务无法查看和下载生成的文书。 + +**优化方案**： +- 在文书列表中每项增加"查看"和"下载"按钮 +- 调用后端 `workProcessApi.preview(id)` 获取文书内容展示 +- 增加文书下载功能（PDF/Word 格式） + +**涉及文件**：`frontend/src/pages/WorkProcess.tsx:488-501` + +### 2.4 收入证明后续处理指引（反馈 #2：提交后找不到后续需要处理的事情） + +**现状**：收入证明提交后在"办理记录"列表中显示，但用户不清楚下一步去哪里查看文书或跟进。 + +**优化方案**： +- 提交成功后 toast 提示中增加跳转链接："已提交，点击查看办理详情" +- 在办理记录列表中，已完成的业务增加"查看文书"快捷按钮 +- 在首页工作台待办列表中自动汇总"待查看文书的办理项" + +**涉及文件**：`frontend/src/pages/WorkProcess.tsx:176-183`（createMutation onSuccess） + +### 2.5 整体逻辑与模块关联性（反馈 #3：不知道下一步做什么） + +**现状**：各模块相对独立，缺少流程引导。 + +**优化方案**： +- 在关键操作完成后增加"下一步"引导提示（如：入职登记完成 → 提示"前往签订劳动合同"） +- 首页工作台待办列表已有跨模块汇总，可强化提示 +- 各模块顶部 `PageGuide` 中增加关联模块说明 + +**涉及文件**：各模块页面 + +--- + +## 三、离职管理模块 + +### 3.1 离职证明下载（反馈 #4：离职员工无法下载离职证明、交接清单） + +**现状**：`Termination.tsx` 解聘补偿模块有 5 步向导（选择员工→解聘方式→合规检查→费用结算→工作交接→确认提交），工作交接步骤有交接清单勾选项（`DEFAULT_HANDOVER_ITEMS`），但无文书生成和下载功能。`WorkProcess.tsx` 中有 `LEAVING_CERT` 流程类型，但与解聘补偿模块未打通。 + +**问题**：离职流程完成后，无法生成和下载《解除劳动合同证明书》和《工作交接清单》。 + +**优化方案**： +- 在 Termination.tsx 第 5 步（确认提交）完成后，自动跳转到 WorkProcess 的 `LEAVING_CERT` 流程，预填员工信息 +- 或在 Termination 详情页增加"生成离职证明"和"生成交接清单"按钮 +- 交接清单支持导出 PDF（已有 jsPDF 依赖） + +**涉及文件**：`frontend/src/pages/Termination.tsx:135-142`（交接项）、提交成功后的跳转逻辑 + +### 3.2 员工端辞职申请（反馈 #23：员工端提交辞职申请并附件辞职信照片） + +**现状**：员工门户 `portal/MyLeave.tsx` 有休假申请功能，但无辞职申请入口。辞职目前只能由 HR 在花名册中发起。 + +**优化方案**： +- 在员工门户增加"辞职申请"入口 +- 表单包含：辞职原因、预计离职日期、辞职信照片上传（多张） +- 提交后 HR 端花名册自动收到通知，创建离职草稿 +- HR 确认纸质辞职信后进入正式离职流程 + +**涉及文件**：新增 `frontend/src/pages/portal/MyResignation.tsx`，修改员工门户路由 + +--- + +## 四、风险中心模块 + +### 4.1 跳转后不自动筛选（反馈 #13：点击风险提示跳转后需手动搜索） + +**现状**：`RiskCenter.tsx:27` 风险类型配置中 `CONTRACT` 类型 link 为 `/roster`，无查询参数。点击后跳转到花名册首页，不携带任何筛选条件。`Roster.tsx:74-85` 支持从 URL 参数 `employee` 自动选中员工，但风险中心未使用此机制。 + +**问题**：用户点击风险提示后需手动搜索员工，体验不如首页工作台。 + +**优化方案**： +- 风险列表项的 Link 增加查询参数：`/roster?employee=员工名&contractStatus=expired` +- 或增加 `riskType` 参数，Roster 页面读取后自动设置对应筛选条件 +- 对标 Dashboard.tsx 中工作台的风险处理逻辑（直接选择人员处理） + +**涉及文件**：`frontend/src/pages/compliance/RiskCenter.tsx:26-33,183-206` + +### 4.2 与工作台对比（反馈 #13：风险中心不如工作台便捷） + +**现状**：`Dashboard.tsx` 工作台的风险待办列表可直接勾选员工并处理（批量续签/解聘），而 `RiskCenter.tsx` 只能查看和跳转。 + +**优化方案**： +- 风险中心列表项增加快捷操作按钮（如：合同到期→"续签"/"办理离职"） +- 增加批量选择和处理功能，与工作台体验对齐 +- 风险中心作为独立模块应比工作台更强大，而非更弱 + +**涉及文件**：`frontend/src/pages/compliance/RiskCenter.tsx:177-206` + +--- + +## 五、日历模块 + +### 5.1 合同到期点击进入员工（反馈 #14：点击进入员工） + +**现状**：`Calendar.tsx:238-246` 日历事件仅显示标题，点击日期格子触发 `handleDayClick` 创建新事件，无点击事件跳转到对应员工的功能。 + +**优化方案**： +- 事件项增加点击事件：`onClick` 阻止冒泡，跳转到 `/roster?employee=员工名` +- 合同到期事件点击后跳转到花名册并自动筛选该员工 + +**涉及文件**：`frontend/src/pages/Calendar.tsx:238-246` + +### 5.2 按紧急程度分类（反馈 #14：7天紧急/15天预警/35天提醒） + +**现状**：`Calendar.tsx` 事件列表按日期排列，无紧急程度分类。`PRIORITY_DOT` 有 high/medium/low 颜色点但未按时间窗口分组。 + +**优化方案**： +- 事件列表增加分组：🔴 7天内紧急、🟡 15天预警、🔵 35天提醒、⚫ 已逾期 +- 日历格子中事件按优先级排序展示 + +**涉及文件**：`frontend/src/pages/Calendar.tsx:260-279`（事件列表区域） + +### 5.3 逾期天数统计（反馈 #14：新增逾期天数统计） + +**现状**：无逾期统计展示。 + +**优化方案**： +- 日历顶部增加统计卡片：本月到期 X 项、已逾期 Y 项、逾期总天数 Z 天 +- 逾期事件在列表中红色高亮并显示"逾期 N 天" + +**涉及文件**：`frontend/src/pages/Calendar.tsx:161-189`（顶部工具栏区域） + +--- + +## 六、社保模块 + +### 6.1 各项保险比例显示（反馈 #8：未显示各项保险比例） + +**现状**：`SocialInsurance.tsx:500-526` 社保配置 Tab 已显示各项比例（养老企业/个人、医疗企业/个人、失业企业/个人、工伤企业、生育企业）。但月度办理 Tab 中仅显示变更明细，未显示各项保险的具体比例和金额分解。 + +**问题**：用户在月度办理时看不到每项保险的缴费比例和金额明细。 + +**优化方案**： +- 月度办理结果中每条记录增加"明细展开"功能，显示养老/医疗/失业/工伤/生育各项的企业和个人缴费金额及比例 +- 利用已有的 `socialInsuranceApi.calculate(base, city)` 接口获取明细 + +**涉及文件**：`frontend/src/pages/SocialInsurance.tsx` 月度办理 Tab 区域、`frontend/src/pages/social-insurance/MonthlyRows.tsx` + +--- + +## 七、休假审批流程 + +### 7.1 审批流程可发现性（反馈 #9：没有找到休假的审批流程） + +**现状**：系统已有完整的休假审批流程： +- HR 端：`LeaveApproval.tsx` 休假审批页面，支持批准/驳回/撤回 +- 员工端：`portal/MyLeave.tsx` 员工提交休假申请 + +**问题**：用户找不到休假审批入口，可能是因为导航菜单中未明显展示。 + +**优化方案**： +- 确认侧边栏菜单中是否包含"休假审批"入口 +- 在考勤管理页面的"休假记录"Tab 中增加"前往审批"链接 +- 在首页工作台待办中自动汇总"待审批休假申请" + +**涉及文件**：导航配置、`frontend/src/pages/Attendance.tsx`（休假记录 Tab） + +--- + +## 八、考勤管理 + +### 8.1 在职人员直接编辑（反馈 #10：无法直接编辑在职人员考勤） + +**现状**：`Attendance.tsx` ConfirmTab 有批量导入和批量确认功能，但无单条记录编辑功能。`singleConfirmMutation` 仅支持确认操作。 + +**优化方案**： +- 考勤列表增加"编辑"按钮，支持修改单条考勤记录（出勤天数、加班时长、请假天数等） +- 保留批量导入功能，同时支持导入后逐条修改 + +**涉及文件**：`frontend/src/pages/Attendance.tsx` ConfirmTab + +### 8.2 按月按人导出考勤（反馈 #22） + +**现状**：无考勤导出功能。 + +**优化方案**： +- 考勤确认 Tab 增加"导出"按钮，支持按月份导出全部员工考勤表（Excel） +- 支持按单个员工导出月度考勤明细 +- 利用已有的 `exceljs` 依赖生成 Excel 文件 + +**涉及文件**：`frontend/src/pages/Attendance.tsx` ConfirmTab、后端增加导出接口 + +--- + +## 九、工资条模块 + +### 9.1 状态标记与签收跟踪（反馈 #18：增加已发送/未查看/已查看状态） + +**现状**：`PayslipTab.tsx:64-65,142-149` 仅有"已确认/未确认"两种状态，无发送和查看状态跟踪。 + +**优化方案**： +- 工资条状态扩展为：`未发送` → `已发送` → `已查看` → `已确认` +- 列表增加状态列，用不同颜色标签区分 +- 后端 Payslip 模型增加 `sentAt`、`viewedAt` 字段 +- 员工端查看工资条时自动更新 `viewedAt` + +**涉及文件**：`frontend/src/pages/money/PayslipTab.tsx`、后端 payslip 模型和路由 + +### 9.2 导出工资流水和工资表（反馈 #21） + +**现状**：`PayslipTab.tsx` 无导出功能。 + +**优化方案**： +- 增加"导出工资表"按钮：按月份导出全部工资条为 Excel +- 增加"导出工资流水"按钮：按员工导出多月工资明细（用于银行流水证明） +- 利用 `exceljs` 生成 Excel 文件 + +**涉及文件**：`frontend/src/pages/money/PayslipTab.tsx`、后端增加导出接口 + +--- + +## 十、其他建议 + +### 10.1 通讯录（反馈 #16） + +**现状**：系统无通讯录页面。 + +**优化方案**： +- 新增通讯录页面，按部门分组展示所有在职员工姓名、职务、手机号、地址 +- 支持搜索和按部门筛选 +- 支持导出通讯录 Excel + +**涉及文件**：新增 `frontend/src/pages/Directory.tsx` + +### 10.2 批量开具证明（反馈 #17） + +**现状**：`WorkProcess.tsx` 仅支持单个办理，无批量开具证明功能。 + +**优化方案**： +- 在用工办理页面增加"批量开具证明"入口 +- 选择多人和证明类型（收入证明/离职证明等） +- 批量生成文书，支持批量下载（ZIP 打包） + +**涉及文件**：`frontend/src/pages/WorkProcess.tsx` + +### 10.3 人效成本分部门（反馈 #19） + +**现状**：`Dashboard.tsx` 有"人效成本"Tab（`activeTab === 'cost'`），但具体实现需进一步检查是否支持分部门展示。 + +**优化方案**： +- 人效成本 Tab 增加部门维度筛选和对比 +- 按部门展示人数、总薪资成本、人均成本、同比变化 + +**涉及文件**：`frontend/src/pages/Dashboard.tsx` cost Tab + +--- + +## 优先级排序 + +| 优先级 | 编号 | 问题 | 影响范围 | +|--------|------|------|----------| +| P0 | 1.5 | 发薪按钮无效 | 功能不可用 | +| P0 | 2.1 | 用工办理需姓名检索 | 严重影响操作效率 | +| P0 | 2.2 | 填写界面增加提交按钮 | 操作流程繁琐 | +| P0 | 4.1 | 风险中心跳转不筛选 | 用户体验差 | +| P1 | 1.2 | 身份证号复制 | 操作不便 | +| P1 | 1.3 | 花名册显示字段不足 | 信息不充分 | +| P1 | 2.3 | 查看已生成文书 | 功能缺失 | +| P1 | 3.1 | 离职证明下载 | 功能缺失 | +| P1 | 9.1 | 工资条状态标记 | 跟踪不足 | +| P1 | 9.2 | 导出工资表 | 功能缺失 | +| P2 | 1.4 | 附件类型扩展 | 体验优化 | +| P2 | 2.4 | 收入证明后续指引 | 引导不足 | +| P2 | 2.5 | 模块关联性引导 | 体验优化 | +| P2 | 3.2 | 员工端辞职申请 | 新功能 | +| P2 | 4.2 | 风险中心快捷操作 | 体验优化 | +| P2 | 5.1-5.3 | 日历优化 | 体验优化 | +| P2 | 6.1 | 社保比例明细 | 信息不充分 | +| P2 | 7.1 | 休假审批可发现性 | 导航问题 | +| P2 | 8.1 | 考勤直接编辑 | 操作不便 | +| P2 | 8.2 | 考勤导出 | 功能缺失 | +| P3 | 10.1 | 通讯录 | 新功能 | +| P3 | 10.2 | 批量开具证明 | 新功能 | +| P3 | 10.3 | 人效成本分部门 | 体验优化 | + +--- + +## 已确认无需修改 + +| 编号 | 问题 | 原因 | +|------|------|------| +| #7 | 花名册无身份证号搜索 | 后端已实现 `isIdCardSearch` 逻辑，前端 placeholder 已提示 | +| #15 | 花名册多条上传附件 | `AttachmentInfo.tsx` 已支持多附件上传 | +| #9 | 休假审批流程 | 系统已有 `LeaveApproval.tsx` 和 `MyLeave.tsx`，需确认导航入口 | diff --git a/frontend/src/components/layout/TopNav.tsx b/frontend/src/components/layout/TopNav.tsx index 63deeb9..b643047 100644 --- a/frontend/src/components/layout/TopNav.tsx +++ b/frontend/src/components/layout/TopNav.tsx @@ -3,7 +3,7 @@ import { ChevronDown, Settings as SettingsIcon, Bell, Menu, HelpCircle, Smartpho import { useState } from 'react' import { useQuery } from '@tanstack/react-query' import { useAuthStore } from '../../store/authStore' -import { dashboardApi } from '../../lib/api-services' +import { dashboardApi, settingsApi } from '../../lib/api-services' import Breadcrumb from './Breadcrumb' import HelpModal from '../HelpModal' import PortalQRModal from '../PortalQRModal' @@ -22,6 +22,11 @@ export default function TopNav({ onMenuClick }: { onMenuClick?: () => void }) { queryFn: () => dashboardApi.data(), refetchInterval: 60000, }) + const { data: orgData } = useQuery({ + queryKey: ['org-settings'], + queryFn: () => settingsApi.org(), + staleTime: 300000, + }) const riskCount = dashboardData?.riskSummary?.pending || 0 return ( @@ -36,6 +41,12 @@ export default function TopNav({ onMenuClick }: { onMenuClick?: () => void }) { > + {orgData?.name && ( + + {orgData.name} + + )} + {orgData?.name && |} diff --git a/frontend/src/pages/Roster.tsx b/frontend/src/pages/Roster.tsx index bf7bcd1..90a843f 100644 --- a/frontend/src/pages/Roster.tsx +++ b/frontend/src/pages/Roster.tsx @@ -265,7 +265,7 @@ export default function Roster() { }) const filtered = employees?.filter((e: any) => - !search || e.name.includes(search) || e.department.includes(search) + !search || e.name.includes(search) || e.department.includes(search) || (e.idCardMasked && e.idCardMasked.includes(search)) ) || [] if (selectedId) {