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