feat: 四端设计总览生成、截图补全与模板工具链完善

- 新增 operator/onsite/professional/employee-app 四端 design-overview.html - 补全约 30 张弹窗/状态截图，重拍长图（fullPage） - 新增 design-overview-template.html 模板与 design-overview skill - index.html 注册设计总览入口、修复 md-viewer 路径 - 删除已迁移的 md-viewer.html 和本地服务器方案文档 - 更新 package.json 依赖与项目背景文档 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-26 18:01:16 +08:00
parent 6e05f10396
commit 263b625015
53 changed files with 1454 additions and 668 deletions
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>健康应急APP专业人员端 - 页面设计总览</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; }
+.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; }
+
+/* 分隔线 */
+.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-workbench">工作台</a>
+  <a class="nav__link" href="#sec-knowledge">知识库</a>
+  <a class="nav__link" href="#sec-profile">我的</a>
+</nav>
+
+<!-- 工作台 -->
+<section class="section" id="sec-workbench">
+  <div class="section__header">
+    <h2 class="section__title">工作台</h2>
+    <span class="section__count">17 页面形态</span>
+  </div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/index.jpg','工单列表-进行中')">
+      <div class="card__img"><img src="screenshots/index.jpg" alt=""></div>
+      <div class="card__label">工单列表-进行中</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/index-done.jpg','工单列表-已结束')">
+      <div class="card__img"><img src="screenshots/index-done.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/emergency-chat-ongoing.jpg','应急聊天-进行中')">
+      <div class="card__img"><img src="screenshots/emergency-chat-ongoing.jpg" alt=""></div>
+      <div class="card__label">应急聊天-进行中</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/emergency-chat-ongoing-info.jpg','应急聊天-患者信息展开')">
+      <div class="card__img"><img src="screenshots/emergency-chat-ongoing-info.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/emergency-chat-ongoing-voice.jpg','应急聊天-语音模式')">
+      <div class="card__img"><img src="screenshots/emergency-chat-ongoing-voice.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/emergency-chat-ongoing-media.jpg','应急聊天-媒体面板')">
+      <div class="card__img"><img src="screenshots/emergency-chat-ongoing-media.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/emergency-chat-ongoing-confirm.jpg','应急聊天-结束确认')">
+      <div class="card__img"><img src="screenshots/emergency-chat-ongoing-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/emergency-chat-done.jpg','应急聊天-已结束')">
+      <div class="card__img"><img src="screenshots/emergency-chat-done.jpg" alt=""></div>
+      <div class="card__label">应急聊天-已结束</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/emergency-chat-done-info.jpg','应急聊天已结束-信息展开')">
+      <div class="card__img"><img src="screenshots/emergency-chat-done-info.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/work-order-detail.jpg','工单详情-已完成')">
+      <div class="card__img"><img src="screenshots/work-order-detail.jpg" alt=""></div>
+      <div class="card__label">工单详情-已完成</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/work-order-detail-edit.jpg','工单详情-编辑意见弹窗')">
+      <div class="card__img"><img src="screenshots/work-order-detail-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/work-order-detail-ongoing.jpg','工单详情-进行中')">
+      <div class="card__img"><img src="screenshots/work-order-detail-ongoing.jpg" alt=""></div>
+      <div class="card__label">工单详情-进行中</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/work-order-detail-ongoing-edit.jpg','工单详情进行中-编辑弹窗')">
+      <div class="card__img"><img src="screenshots/work-order-detail-ongoing-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/work-order-detail-ongoing-confirm.jpg','工单详情进行中-结束确认')">
+      <div class="card__img"><img src="screenshots/work-order-detail-ongoing-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/patient-location.jpg','患者定位')">
+      <div class="card__img"><img src="screenshots/patient-location.jpg" alt=""></div>
+      <div class="card__label">患者定位</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/patient-location-card.jpg','患者定位-资源卡片')">
+      <div class="card__img"><img src="screenshots/patient-location-card.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/rescue-opinion.jpg','救助意见')">
+      <div class="card__img"><img src="screenshots/rescue-opinion.jpg" alt=""></div>
+      <div class="card__label">救助意见</div>
+    </div>
+  </div>
+</section>
+
+<div class="divider"></div>
+
+<!-- 知识库 -->
+<section class="section" id="sec-knowledge">
+  <div class="section__header">
+    <h2 class="section__title">知识库</h2>
+    <span class="section__count">3 页面形态</span>
+  </div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/knowledge-index.jpg','知识库-文章列表')">
+      <div class="card__img"><img src="screenshots/knowledge-index.jpg" alt=""></div>
+      <div class="card__label">知识库-文章列表</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/knowledge-index-rule.jpg','知识库-规章制度')">
+      <div class="card__img"><img src="screenshots/knowledge-index-rule.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/knowledge-article-detail.jpg','知识详情')">
+      <div class="card__img"><img src="screenshots/knowledge-article-detail.jpg" alt=""></div>
+      <div class="card__label">知识详情</div>
+    </div>
+  </div>
+</section>
+
+<div class="divider"></div>
+
+<!-- 我的 -->
+<section class="section" id="sec-profile">
+  <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/profile-index.jpg','个人中心')">
+      <div class="card__img"><img src="screenshots/profile-index.jpg" alt=""></div>
+      <div class="card__label">个人中心</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/profile-index-logout.jpg','个人中心-退出确认')">
+      <div class="card__img"><img src="screenshots/profile-index-logout.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/edit-profile.jpg','修改个人信息')">
+      <div class="card__img"><img src="screenshots/edit-profile.jpg" alt=""></div>
+      <div class="card__label">修改个人信息</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/profile-edit-sheet.jpg','修改信息-头像选择')">
+      <div class="card__img"><img src="screenshots/profile-edit-sheet.jpg" alt=""></div>
+      <div class="card__label">修改信息-头像选择</div>
+      <div class="card__tags"><span class="tag tag--modal">ActionSheet</span></div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/change-pwd.jpg','修改密码')">
+      <div class="card__img"><img src="screenshots/change-pwd.jpg" alt=""></div>
+      <div class="card__label">修改密码</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/profile-change-pwd-modal.jpg','修改密码-成功确认')">
+      <div class="card__img"><img src="screenshots/profile-change-pwd-modal.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/duty-schedule.jpg','值班信息')">
+      <div class="card__img"><img src="screenshots/duty-schedule.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>