project-108-1782399955861 UI audit
审阅时间：2026-06-26
范围：登录页、主页、图书目录、图书详情、公告列表、公告新增弹窗、我的借阅、我的预约，以及 390px 手机宽度下的目录/表格页面。后台服务仅作为接口服务未做管理端 UI 审阅。
截图证据
01-login-desktop.png- 登录页，整体健康，但左右信息密度不均。02-home-desktop.png- 主页，主问题是轮播图内容与图书系统不匹配。03-books-desktop.png- 图书目录，卡片形态可用，但数据和图片像测试素材。04-book-detail-desktop.png- 图书详情，结构清楚，但字段缺失和操作状态说明不足。05-announcements-desktop.png- 公告列表，字段暴露数据库/枚举口径。06-announcement-form-desktop.png- 新增公告弹窗，系统字段应自动生成，状态字段应控件化。07-my-borrows-desktop.png- 我的借阅，空状态弱，页面仍是后台表结构。08-my-reservations-desktop.png- 我的预约，和借阅页问题类似。09-books-mobile.png- 手机宽度下目录页，导航溢出。10-reservations-mobile-viewport.png- 手机宽度下预约表格，桌面表格未做移动端重排。
主要优先级
- P0：替换主页轮播素材，使用图书馆、书架、借阅场景或系统真实业务图；当前卡车图会严重干扰用户理解。
- P0：前台页面不要直接暴露表名、ID、数据库枚举和 null 说明，例如“公告表管理”“状态：active-有效...”“实际归还日期（null表示未还）”。
- P0：修移动端导航和表格。导航需要折叠菜单或横向滚动提示，借阅/预约这类多列表格在移动端应改成记录卡片。
- P1：把“我的借阅/我的预约”从管理表格改成读者任务页，突出书名、状态、到期时间、操作入口；不要出现“新增”按钮。
- P1：空状态需要有下一步，例如“暂无借阅记录，去图书目录看看”。
- P1：公告列表应做成公告阅读列表，显示标题、摘要、发布时间、发布状态标签；新增/编辑/删除应留在后台管理端。
- P1：详情页补充业务信息：馆藏状态、可借数量、位置、ISBN、简介；借书/预约按钮要有禁用态和成功/失败反馈。
- P2：统一按钮和状态文案。把 0/1、borrowed/returned/overdue、active/fulfilled/cancelled/expired 映射成中文标签。
- P2：表单字段按用户任务重组。公告新增只保留标题、内容、发布时间、发布状态；创建者、创建时间、更新时间自动处理。
- P2：补充可访问性细节：轮播左右按钮需要可读名称，关闭按钮文案本地化，图片需要有准确 alt 文本，焦点态需键盘验证。
证据限制
本次没有提交借书、预约、删除、保存等会改变数据的动作；可访问性结论主要来自截图和 DOM 快照，仍需键盘导航、屏幕阅读器、颜色对比度工具进一步验证。