fix: 优化PRD截图体积,PNG转JPEG并缩小预览尺寸

- 截图格式从PNG转为JPEG(质量80%),设备缩放1x,总体积从3.9MB降至916KB
- md-viewer.html图片最大宽度从375px调整为280px
- 项目背景.md同步更新截图规范参数
- PRD.md中25处图片引用从.png改为.jpg

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
2026-04-14 16:13:36 +08:00
co-authored by Claude Opus 4.6
parent 42de3bae30
commit 212c220dcf
53 changed files with 30 additions and 30 deletions
+25 -25
View File
@@ -83,7 +83,7 @@ stateDiagram-v2
### 2.1 模块首页(index.html
![页面截图](screenshots/index.png)
![页面截图](screenshots/index.jpg)
**功能说明**
@@ -108,7 +108,7 @@ stateDiagram-v2
### 2.2 找专家(find-expert.html
![页面截图](screenshots/find-expert.png)
![页面截图](screenshots/find-expert.jpg)
**功能说明**
@@ -139,7 +139,7 @@ stateDiagram-v2
### 2.3 综合搜索(search.html
![页面截图](screenshots/search.png)
![页面截图](screenshots/search.jpg)
**功能说明**
@@ -170,7 +170,7 @@ stateDiagram-v2
---
### 2.4 专家列表(expert-list.html
![页面截图](screenshots/expert-list.png)
![页面截图](screenshots/expert-list.jpg)
**功能说明**
@@ -199,7 +199,7 @@ stateDiagram-v2
### 2.5 医院详情(hospital-detail.html
![页面截图](screenshots/hospital-detail.png)
![页面截图](screenshots/hospital-detail.jpg)
**功能说明**
@@ -224,7 +224,7 @@ stateDiagram-v2
### 2.6 专家主页(expert-profile.html
![页面截图](screenshots/expert-profile.png)
![页面截图](screenshots/expert-profile.jpg)
**功能说明**
@@ -249,7 +249,7 @@ stateDiagram-v2
### 2.7 用户评价列表(expert-reviews.html
![页面截图](screenshots/expert-reviews.png)
![页面截图](screenshots/expert-reviews.jpg)
**功能说明**
@@ -290,7 +290,7 @@ stateDiagram-v2
---
### 3.2 选择咨询人(select-person.html
![页面截图](screenshots/select-person.png)
![页面截图](screenshots/select-person.jpg)
**功能说明**
@@ -318,7 +318,7 @@ stateDiagram-v2
### 3.3 新增健康档案(add-health-record.html
![页面截图](screenshots/add-health-record.png)
![页面截图](screenshots/add-health-record.jpg)
**功能说明**
@@ -358,7 +358,7 @@ stateDiagram-v2
### 3.4 图文咨询聊天(text-chat.html
![页面截图](screenshots/text-chat.png)
![页面截图](screenshots/text-chat.jpg)
**功能说明**
@@ -384,7 +384,7 @@ stateDiagram-v2
### 3.5 选择体检报告弹窗(select-report-dialog.html
![页面截图](screenshots/select-report-dialog.png)
![页面截图](screenshots/select-report-dialog.jpg)
**功能说明**
@@ -405,7 +405,7 @@ stateDiagram-v2
### 3.6 结束咨询确认弹窗(end-consult-dialog.html
![页面截图](screenshots/end-consult-dialog.png)
![页面截图](screenshots/end-consult-dialog.jpg)
**功能说明**
@@ -421,7 +421,7 @@ stateDiagram-v2
### 3.7 图文咨询历史对话(text-chat-history.html
![页面截图](screenshots/text-chat-history.png)
![页面截图](screenshots/text-chat-history.jpg)
**功能说明**
@@ -446,7 +446,7 @@ stateDiagram-v2
### 4.1 视频咨询预约(video-booking.html
![页面截图](screenshots/video-booking.png)
![页面截图](screenshots/video-booking.jpg)
**功能说明**
@@ -471,7 +471,7 @@ stateDiagram-v2
### 4.2 预约成功(video-success.html
![页面截图](screenshots/video-success.png)
![页面截图](screenshots/video-success.jpg)
**功能说明**
@@ -492,7 +492,7 @@ stateDiagram-v2
### 4.3 视频咨询详情 - 待确认(video-detail-confirming.html
![页面截图](screenshots/video-detail-confirming.png)
![页面截图](screenshots/video-detail-confirming.jpg)
**功能说明**
@@ -516,7 +516,7 @@ stateDiagram-v2
### 4.4 视频咨询详情 - 待开始(video-detail-pending.html
![页面截图](screenshots/video-detail-pending.png)
![页面截图](screenshots/video-detail-pending.jpg)
**功能说明**
@@ -539,7 +539,7 @@ stateDiagram-v2
### 4.5 视频咨询详情 - 已完成(video-detail-done.html
![页面截图](screenshots/video-detail-done.png)
![页面截图](screenshots/video-detail-done.jpg)
**功能说明**
@@ -562,7 +562,7 @@ stateDiagram-v2
### 4.6 视频咨询详情 - 已取消(video-detail-cancelled.html
![页面截图](screenshots/video-detail-cancelled.png)
![页面截图](screenshots/video-detail-cancelled.jpg)
**功能说明**
@@ -584,7 +584,7 @@ stateDiagram-v2
### 4.7 视频咨询详情 - 已拒绝(video-detail-rejected.html
![页面截图](screenshots/video-detail-rejected.png)
![页面截图](screenshots/video-detail-rejected.jpg)
**功能说明**
@@ -607,7 +607,7 @@ stateDiagram-v2
### 5.1 评价医生(rate-doctor.html
![页面截图](screenshots/rate-doctor.png)
![页面截图](screenshots/rate-doctor.jpg)
**功能说明**
@@ -641,7 +641,7 @@ stateDiagram-v2
### 5.2 我的咨询(my-records.html
![页面截图](screenshots/my-records.png)
![页面截图](screenshots/my-records.jpg)
**功能说明**
@@ -670,7 +670,7 @@ stateDiagram-v2
### 5.3 咨询详情(record-detail.html
![页面截图](screenshots/record-detail.png)
![页面截图](screenshots/record-detail.jpg)
**功能说明**
@@ -699,7 +699,7 @@ stateDiagram-v2
### 6.1 AI 小助手聊天(assistant-chat.html
![页面截图](screenshots/assistant-chat.png)
![页面截图](screenshots/assistant-chat.jpg)
**功能说明**
@@ -721,7 +721,7 @@ AI 智能问诊聊天界面。头部展示机器人头像和"健康小助手"。
### 6.2 小助手历史对话(assistant-chat-history.html
![页面截图](screenshots/assistant-chat-history.png)
![页面截图](screenshots/assistant-chat-history.jpg)
**功能说明**
Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 318 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 290 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 342 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

+1 -1
View File
@@ -47,7 +47,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica
.content blockquote p { color: var(--text-secondary); margin: 0; }
.content strong { color: var(--text-primary); }
.content hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.content img { max-width: 375px; height: auto; border-radius: 8px; border: 1px solid var(--border); margin: 8px 0; }
.content img { max-width: 280px; height: auto; border-radius: 8px; border: 1px solid var(--border); margin: 8px 0; }
</style>
</head>
<body>
+4 -4
View File
@@ -396,17 +396,17 @@ window.location.href = '../health-consult/consult-list.html';
**截图生成方式:**
- 使用 Playwright 对 HTML 原型文件进行无头浏览器截图
- APP 端截取 `.phone-shell` 元素,视口 460×920,设备缩放 2x
- APP 端截取 `.phone-shell` 元素,视口 460×920,设备缩放 1x
- Web 端截取完整页面,视口 1440×900,设备缩放 1x
- 输出格式:PNG
- 输出格式:JPEG(质量 80%),兼顾清晰度与文件体积
**截图存放:**
- 统一存放在模块的 `doc/screenshots/` 目录下
- 文件名与原型 HTML 文件名一致(去掉 `.html` 后缀),如 `find-expert.png`
- 文件名与原型 HTML 文件名一致(去掉 `.html` 后缀),如 `find-expert.jpg`
- 内嵌于其他页面的弹窗无需单独截图,在页面清单中标注即可
**PRD 中引用方式:**
- 在每个页面/弹窗的三级标题下方紧跟插入:`![页面截图](screenshots/xxx.png)`
- 在每个页面/弹窗的三级标题下方紧跟插入:`![页面截图](screenshots/xxx.jpg)`
- 使用相对路径(基于 `doc/` 目录),md-viewer.html 会自动补全为完整路径
**截图更新时机:**