fix: 更新文档截图和页面，新增管理员体重管理文档

2026-07-09 16:48:38 +08:00
parent 42af90e39f
commit 9b3fed3fc1
124 changed files with 2302 additions and 325 deletions
@@ -54,7 +54,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
 <!-- 顶部导航 -->
 <nav class="nav">
  <span class="nav__title">员工端健康监测 · 设计总览</span>
-  <a class="nav__link" href="../home/index.html" target="_top">← 返回员工端首页</a>
+  <a class="nav__link" href="javascript:history.back()">← 返回首页</a>
 </nav>

 <!-- 首页入口 -->
@@ -162,6 +162,7 @@ stateDiagram-v2
 - 审核状态：待审核（黄色）、审核通过（绿色）、已驳回（红色，含驳回原因）
 - 驳回后可修改重新提交
 - 审核通过后可签订承诺书
+- 特别注意：员工如参加过活动(签署过承诺书)，后续活动则自动参加(无需提交审核+签署承诺书)，承诺书使用之前的数据

 ---

@@ -0,0 +1,463 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>体重管理 - 页面设计总览</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; }
+
+.nav { position: sticky; top: 0; z-index: 100; background: #16213e; border-bottom: 1px solid #0f3460; padding: 14px 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+.nav__title { font-size: 16px; font-weight: 600; color: #4fc3f7; margin-right: 20px; white-space: nowrap; }
+.nav__link { font-size: 13px; color: #aaa; text-decoration: none; padding: 5px 12px; border-radius: 20px; transition: all .2s; white-space: nowrap; border: 1px solid transparent; }
+.nav__link:hover { background: #0f3460; color: #4fc3f7; border-color: #4fc3f7; }
+
+.section { padding: 24px 24px 8px; }
+.section__header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
+.section__title { font-size: 15px; font-weight: 600; color: #fff; }
+.section__count { font-size: 12px; color: #666; background: #2a2a4a; padding: 2px 8px; border-radius: 10px; }
+
+.scroll-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
+.scroll-row::-webkit-scrollbar { height: 6px; }
+.scroll-row::-webkit-scrollbar-track { background: transparent; }
+.scroll-row::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
+
+.card { flex-shrink: 0; width: 260px; cursor: pointer; transition: transform .2s; }
+.card:hover { transform: scale(1.02); }
+.card__img { width: 260px; height: 564px; border-radius: 12px; overflow: hidden; border: 2px solid #2a2a4a; background: #111; transition: border-color .2s; }
+.card:hover .card__img { border-color: #4fc3f7; }
+.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
+.card__label { margin-top: 8px; font-size: 12px; color: #999; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.card__tags { display: flex; justify-content: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
+.tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
+.tag--modal { background: #4a2800; color: #ffa940; }
+.tag--state { background: #002a4a; color: #4fc3f7; }
+.tag--flow { background: #1a3a1a; color: #69db7c; }
+
+.sub-title { font-size: 12px; color: #888; margin: 20px 0 8px 0; font-weight: 500; }
+
+.divider { height: 1px; background: #2a2a4a; margin: 8px 24px; }
+
+.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; cursor: zoom-out; }
+.lightbox.show { display: flex; }
+.lightbox img { max-width: 90vw; max-height: 92vh; border-radius: 8px; }
+.lightbox__close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 24px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); }
+.lightbox__name { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 13px; background: rgba(0,0,0,0.6); padding: 6px 16px; border-radius: 20px; }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <span class="nav__title">体重管理员工端APP · 设计总览</span>
+  <a class="nav__link" href="#sec-commit">目标承诺</a>
+  <a class="nav__link" href="#sec-main">体重管理主页</a>
+  <a class="nav__link" href="#sec-checkin">每日打卡</a>
+  <a class="nav__link" href="#sec-history">历史记录</a>
+  <a class="nav__link" href="#sec-advice">建议与报告</a>
+</nav>
+
+<section class="section" id="sec-commit">
+  <div class="section__header">
+    <h2 class="section__title">一、目标承诺（多步骤流程）</h2>
+    <span class="section__count">31</span>
+  </div>
+  <div class="sub-title">1. 目标承诺（goal-commitment.html）— 7 种状态</div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment.jpg','目标承诺 · 未选目标-有活动')">
+      <div class="card__img"><img src="screenshots/goal-commitment.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 未选目标-有活动</div>
+      <div class="card__tags"><span class="tag tag--state">默认状态</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment-unset-noact.jpg','目标承诺 · 未选目标-无活动')">
+      <div class="card__img"><img src="screenshots/goal-commitment-unset-noact.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 未选目标-无活动</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment-personal.jpg','目标承诺 · 已选个人目标')">
+      <div class="card__img"><img src="screenshots/goal-commitment-personal.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 已选个人目标</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment-wait.jpg','目标承诺 · 待审核')">
+      <div class="card__img"><img src="screenshots/goal-commitment-wait.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 待审核</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment-pass.jpg','目标承诺 · 审核通过')">
+      <div class="card__img"><img src="screenshots/goal-commitment-pass.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 审核通过</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment-reject.jpg','目标承诺 · 已驳回')">
+      <div class="card__img"><img src="screenshots/goal-commitment-reject.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 已驳回</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment-signed.jpg','目标承诺 · 已签署')">
+      <div class="card__img"><img src="screenshots/goal-commitment-signed.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 已签署</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-commitment-reason.jpg','目标承诺 · 驳回原因弹窗')">
+      <div class="card__img"><img src="screenshots/goal-commitment-reason.jpg" alt=""></div>
+      <div class="card__label">目标承诺 · 驳回原因弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+  </div>
+  <div class="sub-title">2. 目标管理（goal-management.html）— 7 种状态</div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/goal-management.jpg','目标管理 · 未选目标-有活动')">
+      <div class="card__img"><img src="screenshots/goal-management.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 未选目标-有活动</div>
+      <div class="card__tags"><span class="tag tag--state">默认状态</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-unset-noact.jpg','目标管理 · 未选目标-无活动')">
+      <div class="card__img"><img src="screenshots/goal-management-unset-noact.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 未选目标-无活动</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-personal.jpg','目标管理 · 已选个人目标')">
+      <div class="card__img"><img src="screenshots/goal-management-personal.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 已选个人目标</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-wait.jpg','目标管理 · 待审核')">
+      <div class="card__img"><img src="screenshots/goal-management-wait.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 待审核</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-pass.jpg','目标管理 · 审核通过')">
+      <div class="card__img"><img src="screenshots/goal-management-pass.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 审核通过</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-reject.jpg','目标管理 · 已驳回')">
+      <div class="card__img"><img src="screenshots/goal-management-reject.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 已驳回</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-signed.jpg','目标管理 · 已签署')">
+      <div class="card__img"><img src="screenshots/goal-management-signed.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 已签署</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-act-sheet.jpg','目标管理 · 活动选择弹窗')">
+      <div class="card__img"><img src="screenshots/goal-management-act-sheet.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 活动选择弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-target-sheet.jpg','目标管理 · 标尺修改弹窗')">
+      <div class="card__img"><img src="screenshots/goal-management-target-sheet.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 标尺修改弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-confirm.jpg','目标管理 · 提交确认弹窗')">
+      <div class="card__img"><img src="screenshots/goal-management-confirm.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 提交确认弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/goal-management-reason.jpg','目标管理 · 驳回原因弹窗')">
+      <div class="card__img"><img src="screenshots/goal-management-reason.jpg" alt=""></div>
+      <div class="card__label">目标管理 · 驳回原因弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+  </div>
+  <div class="sub-title">3~9. 其他页面</div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/basic-info.jpg','基本信息')">
+      <div class="card__img"><img src="screenshots/basic-info.jpg" alt=""></div>
+      <div class="card__label">基本信息</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/basic-info-height.jpg','基本信息 · 身高测量弹窗')">
+      <div class="card__img"><img src="screenshots/basic-info-height.jpg" alt=""></div>
+      <div class="card__label">基本信息 · 身高测量弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/basic-info-activity.jpg','基本信息 · 活动等级弹窗')">
+      <div class="card__img"><img src="screenshots/basic-info-activity.jpg" alt=""></div>
+      <div class="card__label">基本信息 · 活动等级弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/indicators-diseases.jpg','指标慢病 · 重点指标')">
+      <div class="card__img"><img src="screenshots/indicators-diseases.jpg" alt=""></div>
+      <div class="card__label">指标慢病 · 重点指标</div>
+      <div class="card__tags"><span class="tag tag--state">默认Tab</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/indicators-diseases-diseases.jpg','指标慢病 · 慢性疾病')">
+      <div class="card__img"><img src="screenshots/indicators-diseases-diseases.jpg" alt=""></div>
+      <div class="card__label">指标慢病 · 慢性疾病</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/indicators-diseases-measure.jpg','指标慢病 · 测量标尺弹窗')">
+      <div class="card__img"><img src="screenshots/indicators-diseases-measure.jpg" alt=""></div>
+      <div class="card__label">指标慢病 · 测量标尺弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/indicators-diseases-disease-edit.jpg','指标慢病 · 慢病修改弹窗')">
+      <div class="card__img"><img src="screenshots/indicators-diseases-disease-edit.jpg" alt=""></div>
+      <div class="card__label">指标慢病 · 慢病修改弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/contraindications.jpg','禁忌证')">
+      <div class="card__img"><img src="screenshots/contraindications.jpg" alt=""></div>
+      <div class="card__label">禁忌证</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/promise-signing.jpg','签订承诺')">
+      <div class="card__img"><img src="screenshots/promise-signing.jpg" alt=""></div>
+      <div class="card__label">签订承诺</div>
+      <div class="card__tags"><span class="tag tag--flow">横屏签名</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/promise-signing-giveup.jpg','签订承诺 · 放弃确认弹窗')">
+      <div class="card__img"><img src="screenshots/promise-signing-giveup.jpg" alt=""></div>
+      <div class="card__label">签订承诺 · 放弃确认弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/my-promise.jpg','我的承诺')">
+      <div class="card__img"><img src="screenshots/my-promise.jpg" alt=""></div>
+      <div class="card__label">我的承诺</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/activity-detail.jpg','活动详情')">
+      <div class="card__img"><img src="screenshots/activity-detail.jpg" alt=""></div>
+      <div class="card__label">活动详情</div>
+    </div>
+  </div>
+</section>
+
+<div class="divider"></div>
+
+<section class="section" id="sec-main">
+  <div class="section__header">
+    <h2 class="section__title">二、体重管理主页（核心中枢）</h2>
+    <span class="section__count">3</span>
+  </div>
+  <div class="sub-title">9. 体重管理主页（weight-main.html）— 3 种模式</div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/weight-main.jpg','体重管理主页 · 已参加活动')">
+      <div class="card__img"><img src="screenshots/weight-main.jpg" alt=""></div>
+      <div class="card__label">体重管理主页 · 已参加活动</div>
+      <div class="card__tags"><span class="tag tag--state">默认状态</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-main-personal.jpg','体重管理主页 · 已设置个人目标')">
+      <div class="card__img"><img src="screenshots/weight-main-personal.jpg" alt=""></div>
+      <div class="card__label">体重管理主页 · 已设置个人目标</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-main-none.jpg','体重管理主页 · 未参加未设置未组织')">
+      <div class="card__img"><img src="screenshots/weight-main-none.jpg" alt=""></div>
+      <div class="card__label">体重管理主页 · 未参加未设置未组织</div>
+    </div>
+  </div>
+</section>
+
+<div class="divider"></div>
+
+<section class="section" id="sec-checkin">
+  <div class="section__header">
+    <h2 class="section__title">三、每日打卡</h2>
+    <span class="section__count">15</span>
+  </div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/eat-checkin.jpg','吃打卡')">
+      <div class="card__img"><img src="screenshots/eat-checkin.jpg" alt=""></div>
+      <div class="card__label">吃打卡</div>
+      <div class="card__tags"><span class="tag tag--state">智记/自记</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/eat-checkin-portion.jpg','吃打卡 · 份量录入弹窗')">
+      <div class="card__img"><img src="screenshots/eat-checkin-portion.jpg" alt=""></div>
+      <div class="card__label">吃打卡 · 份量录入弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/eat-checkin-summary.jpg','吃打卡 · 已选汇总弹窗')">
+      <div class="card__img"><img src="screenshots/eat-checkin-summary.jpg" alt=""></div>
+      <div class="card__label">吃打卡 · 已选汇总弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/eat-checkin-confirm.jpg','吃打卡 · 确认提交弹窗')">
+      <div class="card__img"><img src="screenshots/eat-checkin-confirm.jpg" alt=""></div>
+      <div class="card__label">吃打卡 · 确认提交弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/eat-checkin-tip.jpg','吃打卡 · 提示弹窗')">
+      <div class="card__img"><img src="screenshots/eat-checkin-tip.jpg" alt=""></div>
+      <div class="card__label">吃打卡 · 提示弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/exercise-checkin.jpg','动打卡')">
+      <div class="card__img"><img src="screenshots/exercise-checkin.jpg" alt=""></div>
+      <div class="card__label">动打卡</div>
+      <div class="card__tags"><span class="tag tag--state">4种来源</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/exercise-checkin-duration.jpg','动打卡 · 时长录入弹窗')">
+      <div class="card__img"><img src="screenshots/exercise-checkin-duration.jpg" alt=""></div>
+      <div class="card__label">动打卡 · 时长录入弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/exercise-checkin-summary.jpg','动打卡 · 已选汇总弹窗')">
+      <div class="card__img"><img src="screenshots/exercise-checkin-summary.jpg" alt=""></div>
+      <div class="card__label">动打卡 · 已选汇总弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/exercise-checkin-confirm.jpg','动打卡 · 确认提交弹窗')">
+      <div class="card__img"><img src="screenshots/exercise-checkin-confirm.jpg" alt=""></div>
+      <div class="card__label">动打卡 · 确认提交弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/exercise-checkin-tip.jpg','动打卡 · 提示弹窗')">
+      <div class="card__img"><img src="screenshots/exercise-checkin-tip.jpg" alt=""></div>
+      <div class="card__label">动打卡 · 提示弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-checkin.jpg','体重打卡')">
+      <div class="card__img"><img src="screenshots/weight-checkin.jpg" alt=""></div>
+      <div class="card__label">体重打卡</div>
+      <div class="card__tags"><span class="tag tag--state">4种来源</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-checkin-value.jpg','体重打卡 · 数值录入弹窗')">
+      <div class="card__img"><img src="screenshots/weight-checkin-value.jpg" alt=""></div>
+      <div class="card__label">体重打卡 · 数值录入弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-checkin-summary.jpg','体重打卡 · 已选汇总弹窗')">
+      <div class="card__img"><img src="screenshots/weight-checkin-summary.jpg" alt=""></div>
+      <div class="card__label">体重打卡 · 已选汇总弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-checkin-confirm.jpg','体重打卡 · 确认提交弹窗')">
+      <div class="card__img"><img src="screenshots/weight-checkin-confirm.jpg" alt=""></div>
+      <div class="card__label">体重打卡 · 确认提交弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-checkin-tip.jpg','体重打卡 · 提示弹窗')">
+      <div class="card__img"><img src="screenshots/weight-checkin-tip.jpg" alt=""></div>
+      <div class="card__label">体重打卡 · 提示弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+  </div>
+</section>
+
+<div class="divider"></div>
+
+<section class="section" id="sec-history">
+  <div class="section__header">
+    <h2 class="section__title">四、历史记录</h2>
+    <span class="section__count">7</span>
+  </div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/weight-history.jpg','体重记录')">
+      <div class="card__img"><img src="screenshots/weight-history.jpg" alt=""></div>
+      <div class="card__label">体重记录</div>
+      <div class="card__tags"><span class="tag tag--state">日历+列表</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/report-detail.jpg','详细报告 · 体脂仪')">
+      <div class="card__img"><img src="screenshots/report-detail.jpg" alt=""></div>
+      <div class="card__label">详细报告 · 体脂仪</div>
+      <div class="card__tags"><span class="tag tag--state">默认设备</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/report-detail-scale.jpg','详细报告 · 体重秤')">
+      <div class="card__img"><img src="screenshots/report-detail-scale.jpg" alt=""></div>
+      <div class="card__label">详细报告 · 体重秤</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/report-detail-bluetooth.jpg','详细报告 · 蓝牙秤')">
+      <div class="card__img"><img src="screenshots/report-detail-bluetooth.jpg" alt=""></div>
+      <div class="card__label">详细报告 · 蓝牙秤</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/eat-history.jpg','摄入记录')">
+      <div class="card__img"><img src="screenshots/eat-history.jpg" alt=""></div>
+      <div class="card__label">摄入记录</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/exercise-history.jpg','消耗记录')">
+      <div class="card__img"><img src="screenshots/exercise-history.jpg" alt=""></div>
+      <div class="card__label">消耗记录</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/balance-history.jpg','吃动平衡历史')">
+      <div class="card__img"><img src="screenshots/balance-history.jpg" alt=""></div>
+      <div class="card__label">吃动平衡历史</div>
+      <div class="card__tags"><span class="tag tag--state">月历+柱状图</span></div>
+    </div>
+  </div>
+</section>
+
+<div class="divider"></div>
+
+<section class="section" id="sec-advice">
+  <div class="section__header">
+    <h2 class="section__title">五、建议与报告</h2>
+    <span class="section__count">13</span>
+  </div>
+  <div class="sub-title">21. 体重报告（weight-report.html）— 3 种模式</div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/weight-report.jpg','体重报告 · 已参加活动')">
+      <div class="card__img"><img src="screenshots/weight-report.jpg" alt=""></div>
+      <div class="card__label">体重报告 · 已参加活动</div>
+      <div class="card__tags"><span class="tag tag--state">默认状态</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-report-personal.jpg','体重报告 · 已设置个人目标')">
+      <div class="card__img"><img src="screenshots/weight-report-personal.jpg" alt=""></div>
+      <div class="card__label">体重报告 · 已设置个人目标</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-report-none.jpg','体重报告 · 未参加未设置')">
+      <div class="card__img"><img src="screenshots/weight-report-none.jpg" alt=""></div>
+      <div class="card__label">体重报告 · 未参加未设置</div>
+    </div>
+  </div>
+  <div class="sub-title">22. 排行榜（weight-ranking.html）— 3 种模式</div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/weight-ranking.jpg','排行榜 · 已参加活动')">
+      <div class="card__img"><img src="screenshots/weight-ranking.jpg" alt=""></div>
+      <div class="card__label">排行榜 · 已参加活动</div>
+      <div class="card__tags"><span class="tag tag--state">默认状态</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-ranking-personal.jpg','排行榜 · 已设置个人目标')">
+      <div class="card__img"><img src="screenshots/weight-ranking-personal.jpg" alt=""></div>
+      <div class="card__label">排行榜 · 已设置个人目标</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/weight-ranking-none.jpg','排行榜 · 未参加未设置未组织')">
+      <div class="card__img"><img src="screenshots/weight-ranking-none.jpg" alt=""></div>
+      <div class="card__label">排行榜 · 未参加未设置未组织</div>
+    </div>
+  </div>
+  <div class="sub-title">18~20. 其他页面</div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/diet-advice.jpg','膳食建议')">
+      <div class="card__img"><img src="screenshots/diet-advice.jpg" alt=""></div>
+      <div class="card__label">膳食建议</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/diet-advice-detail.jpg','膳食建议 · 餐品详情弹窗')">
+      <div class="card__img"><img src="screenshots/diet-advice-detail.jpg" alt=""></div>
+      <div class="card__label">膳食建议 · 餐品详情弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/diet-advice-dislike.jpg','膳食建议 · 不喜欢确认弹窗')">
+      <div class="card__img"><img src="screenshots/diet-advice-dislike.jpg" alt=""></div>
+      <div class="card__label">膳食建议 · 不喜欢确认弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/diet-questionnaire.jpg','膳食偏好设置')">
+      <div class="card__img"><img src="screenshots/diet-questionnaire.jpg" alt=""></div>
+      <div class="card__label">膳食偏好设置</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/diet-questionnaire-region.jpg','膳食偏好 · 地区选择弹窗')">
+      <div class="card__img"><img src="screenshots/diet-questionnaire-region.jpg" alt=""></div>
+      <div class="card__label">膳食偏好 · 地区选择弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/diet-questionnaire-avoid.jpg','膳食偏好 · 饮食禁忌弹窗')">
+      <div class="card__img"><img src="screenshots/diet-questionnaire-avoid.jpg" alt=""></div>
+      <div class="card__label">膳食偏好 · 饮食禁忌弹窗</div>
+      <div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/exercise-advice.jpg','运动建议')">
+      <div class="card__img"><img src="screenshots/exercise-advice.jpg" alt=""></div>
+      <div class="card__label">运动建议</div>
+    </div>
+  </div>
+</section>
+
+<div style="height:40px;"></div>
+
+<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+  <span class="lightbox__close">&times;</span>
+  <img id="lightbox-img" src="" alt="">
+  <div class="lightbox__name" id="lightbox-name"></div>
+</div>
+
+<script>
+function openLightbox(src, name) {
+  document.getElementById('lightbox-img').src = src;
+  document.getElementById('lightbox-name').textContent = name;
+  document.getElementById('lightbox').classList.add('show');
+}
+function closeLightbox() {
+  document.getElementById('lightbox').classList.remove('show');
+}
+</script>
+</body>
+</html>
@@ -11,49 +11,164 @@ const fs = require('fs');
 const MODULE_DIR = __dirname.replace(/\\doc$/, '');  // weight-management/
 const SCREENSHOTS_DIR = path.join(__dirname, 'screenshots');

-// 所有需要截图的页面（相对于模块目录）
+/**
+ * 页面截图配置
+ * 每项可以是 string（简单页面名）或 object：
+ *   { file: 'xxx.html', type: 'state', outName?: 'override-name' }
+ *   - type: URL 查询参数 ?type= 的值（页面通过右上角菜单切换状态）
+ *   - outName: 输出文件名（不含扩展名），默认取自 file + type
+ */
 const PAGES = [
-  'weight-main.html',
-  // 每日打卡
-  'eat-checkin.html',
-  'exercise-checkin.html',
-  'weight-checkin.html',
-  // 历史记录
-  'report-detail.html',
-  'weight-history.html',
-  'eat-history.html',
-  'exercise-history.html',
-  'balance-history.html',
-  // 建议与报告
-  'diet-advice.html',
-  'diet-questionnaire.html',
-  'exercise-advice.html',
-  'weight-report.html',
-  'weight-ranking.html',
-  // 目标承诺
-  'goal-commitment.html',
-  'goal-management.html',
+  // ===== 目标承诺（多步骤流程） =====
+  // 目标承诺 - 7 种状态（默认：unset-hasact）
+  { file: 'goal-commitment.html', type: 'unset-hasact', outName: 'goal-commitment' },
+  { file: 'goal-commitment.html', type: 'unset-noact',  outName: 'goal-commitment-unset-noact' },
+  { file: 'goal-commitment.html', type: 'personal',     outName: 'goal-commitment-personal' },
+  { file: 'goal-commitment.html', type: 'wait',         outName: 'goal-commitment-wait' },
+  { file: 'goal-commitment.html', type: 'pass',         outName: 'goal-commitment-pass' },
+  { file: 'goal-commitment.html', type: 'reject',       outName: 'goal-commitment-reject' },
+  { file: 'goal-commitment.html', type: 'signed',       outName: 'goal-commitment-signed' },
+
+  // 目标管理 - 7 种状态（默认：unset-hasact）
+  { file: 'goal-management.html', type: 'unset-hasact', outName: 'goal-management' },
+  { file: 'goal-management.html', type: 'unset-noact',  outName: 'goal-management-unset-noact' },
+  { file: 'goal-management.html', type: 'personal',     outName: 'goal-management-personal' },
+  { file: 'goal-management.html', type: 'wait',         outName: 'goal-management-wait' },
+  { file: 'goal-management.html', type: 'pass',         outName: 'goal-management-pass' },
+  { file: 'goal-management.html', type: 'reject',       outName: 'goal-management-reject' },
+  { file: 'goal-management.html', type: 'signed',       outName: 'goal-management-signed' },
+
+  // 其余目标承诺流程页面（单状态）
  'basic-info.html',
+  // 指标慢病 - 2 种 Tab（默认：重点指标；慢性疾病需 eval 切换）
  'indicators-diseases.html',
+  { file: 'indicators-diseases.html', outName: 'indicators-diseases-diseases', eval: 'switchTab("diseases")' },
+
  'contraindications.html',
  'promise-signing.html',
  'my-promise.html',
  'activity-detail.html',
+
+  // ===== 体重管理主页 - 3 种模式（默认：hasact） =====
+  { file: 'weight-main.html', type: 'hasact',   outName: 'weight-main' },
+  { file: 'weight-main.html', type: 'personal', outName: 'weight-main-personal' },
+  { file: 'weight-main.html', type: 'none',     outName: 'weight-main-none' },
+
+  // ===== 每日打卡（单状态） =====
+  'eat-checkin.html',
+  'exercise-checkin.html',
+  'weight-checkin.html',
+
+  // ===== 历史记录（单状态） =====
+  // 详细报告 - 3 种设备（默认：体脂仪 fat）
+  { file: 'report-detail.html', type: 'fat',        outName: 'report-detail' },
+  { file: 'report-detail.html', type: 'scale',      outName: 'report-detail-scale' },
+  { file: 'report-detail.html', type: 'bluetooth',  outName: 'report-detail-bluetooth' },
+  'weight-history.html',
+  'eat-history.html',
+  'exercise-history.html',
+  'balance-history.html',
+
+  // ===== 建议与报告 =====
+  // 体重报告 - 3 种模式（默认：hasact）
+  { file: 'weight-report.html', type: 'hasact',   outName: 'weight-report' },
+  { file: 'weight-report.html', type: 'personal', outName: 'weight-report-personal' },
+  { file: 'weight-report.html', type: 'none',     outName: 'weight-report-none' },
+
+  // 排行榜 - 3 种模式（默认：hasact）
+  { file: 'weight-ranking.html', type: 'hasact',   outName: 'weight-ranking' },
+  { file: 'weight-ranking.html', type: 'personal', outName: 'weight-ranking-personal' },
+  { file: 'weight-ranking.html', type: 'none',     outName: 'weight-ranking-none' },
+
+  // 其余建议与报告页面（单状态）
+  'diet-advice.html',
+  'diet-questionnaire.html',
+  'exercise-advice.html',
+
+  // ===== 弹窗截图 =====
+  // 目标承诺 - 驳回原因弹窗（需要先切换到 reject 状态）
+  { file: 'goal-commitment.html', type: 'reject', outName: 'goal-commitment-reason', eval: 'openReasonModal()' },
+
+  // 目标管理 - 4 个弹窗
+  { file: 'goal-management.html', outName: 'goal-management-act-sheet',    eval: 'openActSheet()' },
+  { file: 'goal-management.html', outName: 'goal-management-target-sheet', eval: 'openTargetSheet("targetWeight")' },
+  { file: 'goal-management.html', outName: 'goal-management-confirm',      eval: 'openConfirm()' },
+  { file: 'goal-management.html', type: 'reject', outName: 'goal-management-reason', eval: 'openRejectModal()' },
+
+  // 基本信息 - 2 个弹窗
+  { file: 'basic-info.html', outName: 'basic-info-height',   eval: 'openHeightSheet()' },
+  { file: 'basic-info.html', outName: 'basic-info-activity', eval: 'openSheet()' },
+
+  // 指标慢病 - 2 个弹窗
+  { file: 'indicators-diseases.html', outName: 'indicators-diseases-measure',     eval: 'openSheet("weight")' },
+  { file: 'indicators-diseases.html', outName: 'indicators-diseases-disease-edit', eval: 'openDiseaseModal("原发性高血压")' },
+
+  // 吃打卡 - 4 个弹窗
+  { file: 'eat-checkin.html', outName: 'eat-checkin-portion',  eval: 'selectedMeal="lunch";openGramPanel(1)' },
+  { file: 'eat-checkin.html', outName: 'eat-checkin-summary',  eval: 'selectedMeal="lunch";cart[1]=[150];cart[6]=[100];cart[7]=[120];openSummary()' },
+  { file: 'eat-checkin.html', outName: 'eat-checkin-confirm',  eval: 'selectedMeal="lunch";cart[1]=[150];cart[6]=[100];openConfirm()' },
+  { file: 'eat-checkin.html', outName: 'eat-checkin-tip',      eval: 'if(typeof showAutoMealTip==="function")showAutoMealTip();else document.getElementById("tipMask").classList.add("show")' },
+
+  // 动打卡 - 4 个弹窗
+  { file: 'exercise-checkin.html', outName: 'exercise-checkin-duration', eval: 'selectedDay="wed";openDurationPanel(1)' },
+  { file: 'exercise-checkin.html', outName: 'exercise-checkin-summary',  eval: 'cart[1]=[30];cart[2]=[45];cart[9]=[20];openSummary()' },
+  { file: 'exercise-checkin.html', outName: 'exercise-checkin-confirm',  eval: 'cart[1]=[30];cart[2]=[45];openConfirm()' },
+  { file: 'exercise-checkin.html', outName: 'exercise-checkin-tip',      eval: 'if(typeof showWearableTip==="function")showWearableTip();else document.getElementById("tipMask").classList.add("show")' },
+
+  // 体重打卡 - 4 个弹窗
+  { file: 'weight-checkin.html', outName: 'weight-checkin-value',   eval: 'selectedDay="wed";openValuePanel("weight")' },
+  { file: 'weight-checkin.html', outName: 'weight-checkin-summary', eval: 'cart["weight"]=65.5;cart["fat"]=22.3;cart["waist"]=78;openSummary()' },
+  { file: 'weight-checkin.html', outName: 'weight-checkin-confirm', eval: 'cart["weight"]=65.5;cart["fat"]=22.3;openConfirm()' },
+  { file: 'weight-checkin.html', outName: 'weight-checkin-tip',     eval: 'if(typeof showHeightScaleTip==="function")showHeightScaleTip();else document.getElementById("tipMask").classList.add("show")' },
+
+  // 膳食建议 - 3 个弹窗
+  { file: 'diet-advice.html', outName: 'diet-advice-detail',  eval: 'if(window._currentMealItems&&window._currentMealItems.length>0)openMealDetail(0)' },
+  { file: 'diet-advice.html', outName: 'diet-advice-dislike', eval: 'if(window._currentMealItems&&window._currentMealItems.length>0){openMealDetail(0);setTimeout(function(){var b=document.querySelector("[class*=dislike]");if(b)b.click()},400)}' },
+  { file: 'diet-advice.html', outName: 'diet-advice-region',  eval: 'var g=document.getElementById("guideOverlay");if(g)g.classList.add("hidden");if(typeof openRegionSheet==="function")openRegionSheet()' },
+
+  // 膳食偏好 - 2 个弹窗
+  { file: 'diet-questionnaire.html', outName: 'diet-questionnaire-region', eval: 'if(typeof openRegionSheet==="function")openRegionSheet()' },
+  { file: 'diet-questionnaire.html', outName: 'diet-questionnaire-avoid',  eval: 'if(typeof openCustomAvoidInput==="function")openCustomAvoidInput()' },
+
+  // 签订承诺 - 1 个弹窗
+  { file: 'promise-signing.html', outName: 'promise-signing-giveup', eval: 'if(typeof openGiveup==="function")openGiveup();else document.getElementById("giveupMask").classList.add("show")' },
 ];

-// 特殊页面配置
+// 特殊页面配置（按输出文件名匹配）
 const PAGE_CONFIGS = {
-  'promise-signing.html': { viewportWidth: 844, viewportHeight: 390 },
-  // 膳食建议页需要注入 localStorage 跳过引导遮罩
-  'diet-advice.html': { injectPrefs: true },
+  'promise-signing': { viewportWidth: 844, viewportHeight: 390 },
+  // 膳食建议页需要注入 localStorage 跳过引导遮罩（guide 截图除外）
+  'diet-advice':          { injectPrefs: true },
+  'diet-advice-detail':   { injectPrefs: true },
+  'diet-advice-dislike':  { injectPrefs: true },
+  'diet-advice-region':   { injectPrefs: true },
 };

-async function screenshotPage(browser, htmlFile) {
+/**
+ * 解析页面配置项，返回 { file, url, outName }
+ */
+function resolvePageConfig(item) {
+  if (typeof item === 'string') {
+    return { file: item, url: item, outName: item.replace('.html', '') };
+  }
+  const file = item.file;
+  const type = item.type;
+  const outName = item.outName || file.replace('.html', '') + (type ? '-' + type : '');
+  const url = type ? file + '?type=' + encodeURIComponent(type) : file;
+  const evalAfterLoad = item.eval || null;
+  return { file, url, outName, evalAfterLoad };
+}
+
+async function screenshotPage(browser, pageConfig) {
  const page = await browser.newPage();
-  const filePath = path.join(MODULE_DIR, htmlFile);
+  const { file, url, outName, evalAfterLoad } = pageConfig;
+  const filePath = path.join(MODULE_DIR, file);
  const fileUrl = `file:///${filePath.replace(/\\/g, '/')}`;

-  const config = PAGE_CONFIGS[htmlFile] || {};
+  // 为带参数的 URL 追加查询字符串
+  const fullUrl = url.includes('?') ? fileUrl + '?' + url.split('?')[1] : fileUrl;
+
+  const config = PAGE_CONFIGS[outName] || PAGE_CONFIGS[file.replace('.html', '')] || {};
  const viewportWidth = config.viewportWidth || 390;
  const viewportHeight = config.viewportHeight || 844;

@@ -72,7 +187,7 @@ async function screenshotPage(browser, htmlFile) {
      });
    }

-    await page.goto(fileUrl, { waitUntil: 'networkidle0', timeout: 15000 });
+    await page.goto(fullUrl, { waitUntil: 'networkidle0', timeout: 15000 });

    // 等待页面渲染完成
    await new Promise(r => setTimeout(r, 500));
@@ -124,6 +239,12 @@ async function screenshotPage(browser, htmlFile) {
    // 等待样式生效
    await new Promise(r => setTimeout(r, 300));

+    // 执行页面特定的 JS（如切换 Tab）
+    if (pageConfig.evalAfterLoad) {
+      await page.evaluate((code) => { eval(code); }, pageConfig.evalAfterLoad);
+      await new Promise(r => setTimeout(r, 200));
+    }
+
    // 获取实际内容高度
    const bodyHandle = await page.$('.phone-shell');
    const contentHeight = await page.evaluate((el) => {
@@ -134,8 +255,8 @@ async function screenshotPage(browser, htmlFile) {
    const finalHeight = Math.max(contentHeight || viewportHeight, 400);
    await page.setViewport({ width: viewportWidth, height: Math.min(finalHeight + 40, 12000), deviceScaleFactor: 1 });

-    const outName = htmlFile.replace('.html', '.jpg');
-    const outPath = path.join(SCREENSHOTS_DIR, outName);
+    const outFile = outName + '.jpg';
+    const outPath = path.join(SCREENSHOTS_DIR, outFile);

    await page.screenshot({
      path: outPath,
@@ -144,9 +265,9 @@ async function screenshotPage(browser, htmlFile) {
      fullPage: true,
    });

-    console.log(`  ✓ ${htmlFile} → ${outName} (${viewportWidth}×${finalHeight})`);
+    console.log(`  ✓ ${url} → ${outFile} (${viewportWidth}×${finalHeight})`);
  } catch (err) {
-    console.error(`  ✗ ${htmlFile}: ${err.message}`);
+    console.error(`  ✗ ${url}: ${err.message}`);
  } finally {
    await page.close();
  }
@@ -156,7 +277,7 @@ async function screenshotPage(browser, htmlFile) {
  console.log('体重管理模块 - 页面截图');
  console.log(`模块目录: ${MODULE_DIR}`);
  console.log(`输出目录: ${SCREENSHOTS_DIR}`);
-  console.log(`共 ${PAGES.length} 个页面\n`);
+  console.log(`共 ${PAGES.length} 个页面状态\n`);

  // 确保输出目录存在
  if (!fs.existsSync(SCREENSHOTS_DIR)) {
@@ -171,9 +292,11 @@ async function screenshotPage(browser, htmlFile) {

  try {
    for (let i = 0; i < PAGES.length; i++) {
-      const pageName = PAGES[i];
-      console.log(`[${i + 1}/${PAGES.length}] ${pageName}`);
-      await screenshotPage(browser, pageName);
+      const item = PAGES[i];
+      const cfg = resolvePageConfig(item);
+      const label = typeof item === 'string' ? item : `${item.file}?type=${item.type}`;
+      console.log(`[${i + 1}/${PAGES.length}] ${label}`);
+      await screenshotPage(browser, cfg);
    }
    console.log(`\n✅ 全部完成！共 ${PAGES.length} 张截图，保存在 ${SCREENSHOTS_DIR}`);
  } catch (err) {