dingding_hrm/docs/routes.md

路由与页面结构

本文约定原生前端页面路由、页面职责和组件归属。

页面路由

MVP 不使用前端路由框架。Gin 对以下路径都返回同一个 web/index.html，页面 JS 根据 location.pathname 渲染对应视图。

路由	页面	MVP 说明
/	仪表盘	展示站点概览、同步状态和快速入口
/sites	站点配置	管理站点 app_key / app_secret
/departments	部门浏览	站点切换、部门树、部门成员
/users	人员搜索	搜索筛选、分页表格、导出
/logs	同步日志	查看同步记录和错误信息

页面职责

仪表盘

• 展示每个站点的部门数、人员数、最后同步时间和状态。
• 提供同步按钮。
• 提供进入部门浏览、人员搜索、站点配置的入口。

站点配置

• 展示站点列表。
• 新增、编辑、删除站点。
• app_secret 输入后保存，但列表不明文展示。

部门浏览

• 左侧展示部门树。
• 右侧展示当前部门下人员。
• 支持站点切换。
• 空部门、加载失败、未同步状态需要有明确提示。

人员搜索

• 支持站点切换。
• 支持关键词、部门、状态筛选。
• 支持分页。
• 支持导出当前筛选结果。

同步日志

• 按站点和状态筛选日志。
• 展示开始时间、结束时间、类型、状态、错误信息。

前端文件建议

web/
├── index.html
└── assets/
    ├── style.css
    ├── app.js
    ├── api.js
    ├── state.js
    ├── dashboard.js
    ├── sites.js
    ├── departments.js
    ├── users.js
    └── logs.js

组件建议

这里的组件是 JS 函数或小模块，不是框架组件。

模块	归属	说明
renderShell	全局	页面框架、导航、站点选择入口
apiFetch	全局	封装 fetch、JSON 解析和错误展示
renderDashboard	仪表盘	渲染站点统计和同步按钮
renderSiteForm	站点配置	新增 / 编辑站点
renderDeptTree	部门浏览	将平铺部门列表组装为树
renderUserTable	部门 / 人员页	渲染分页人员表格
renderLogs	同步日志	渲染日志列表

导航规则

• 顶部导航固定展示：仪表盘、站点配置、部门浏览、人员搜索、同步日志。
• 站点选择应尽量保留在 URL 查询参数中，例如 ?site_id=1。
• 人员页筛选条件应保留在 URL 查询参数中，方便刷新后恢复。
• API 失败时在页面内展示错误，不静默失败。