4.1 KiB
4.1 KiB
医生端与管理员端 UI 统一设计
目标
在不改变现有业务流程、接口协议和导航结构的前提下,使医生端与管理员端的全部现有页面统一到患者端当前的视觉语言,并在修改过程中进行源码级逻辑检查。
范围
- 覆盖
health_app/lib/pages/doctor/下全部现有页面。 - 覆盖
health_app/lib/pages/admin/下全部现有页面。 - 覆盖医生端和管理员端侧边栏及其直接使用的共用展示组件。
- 复用患者端已有的
AppColors、主题、卡片阴影、圆角、渐变和页面背景。 - 检查前端状态处理、异步调用、空数据、错误反馈、导航和字段映射中的明显逻辑错误。
- 检查后端与医生端、管理员端直接相关的鉴权、数据归属、参数验证和异常处理。
不在范围内
- 不新增医生端或管理员端业务功能。
- 不修改 API 协议、数据库结构或现有权限规则,除非发现明确的高风险缺陷并经用户另行确认。
- 不重做患者端。
- 不截图、不做视觉回归平台、不进行真机测试或发布。
- 不为了视觉统一进行无关的大规模重构。
视觉方案
页面骨架
- 页面使用患者端的浅灰背景和统一安全区处理。
- 顶部标题栏保持轻量、透明或白色表面,标题、返回和菜单图标统一使用患者端文字颜色。
- 页面内容统一使用 16 像素水平边距;主要区块之间保持稳定的 12–16 像素间距。
卡片与操作
- 内容容器统一为白色圆角卡片,使用
AppColors.borderLight和轻阴影。 - 主操作使用患者端紫蓝主渐变;次操作使用浅色表面和边框;危险操作使用现有错误色。
- 列表项、统计卡片、筛选控件、表单和弹窗使用同一套圆角、文字层级和状态色。
- 医疗业务的警告、成功、待处理和异常状态继续保持语义颜色,不用装饰色覆盖含义。
状态反馈
- 加载状态保留明确进度反馈,避免空白页面。
- 空状态说明当前没有数据,并保留用户可执行的下一步操作(如果原流程已有操作)。
- 错误状态显示可理解的中文信息和重试入口(如果原页面已有重载能力)。
- 长文本和动态数据使用弹性布局与省略处理,降低窄屏溢出风险。
组件边界
- 优先使用现有
AppColors和AppTheme,不建立第二套颜色系统。 - 仅在多个医生端和管理员端页面确实重复时,新增小型共用展示组件,例如页面标题、区块卡片、状态占位和标签。
- 共用组件只负责展示与交互外观,不持有业务状态、不直接调用服务。
- 页面继续通过现有 Riverpod Provider 和 Service 获取数据,避免视觉改造改变数据流。
逻辑检查原则
- UI 改造过程中检查
mounted、重复提交、加载状态复位、空集合、空字段、分页/筛选和导航返回后的刷新。 - 检查医生与管理员 API 是否要求正确角色,并验证用户或患者数据归属。
- 明确的低风险页面错误可随 UI 修改修正;涉及鉴权、删除、隐私、医疗数据或接口行为的缺陷先记录并向用户说明,不擅自改变规则。
- 已知的全局上线风险单独列入最终检查报告,不与本次视觉修改混在一起扩大范围。
验证
- 运行
flutter analyze。 - 运行受修改页面影响的现有相关测试;不新增复杂测试框架。
- 运行一次 Android 编译验证,确认 Flutter 与原生依赖能完成编译。
- 不运行截图测试、真机测试、iOS 构建或发布流程。
- 最终说明修改过的页面、发现的逻辑问题、验证结果和仍需人工确认的事项。
完成标准
- 医生端和管理员端全部现有页面在颜色、卡片、间距、按钮、文字层级和状态反馈上与患者端一致。
- 原有页面入口、导航、数据加载和操作流程不被视觉改造改变。
- 修改代码通过静态分析、相关测试和一次 Android 编译验证。
- 逻辑检查结果按严重程度清晰列出,高风险业务问题没有未经确认的行为变更。