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,218 @@
+<!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; }
+.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">驻场人员端 · 设计总览</span>
+  <a class="nav__link" href="#sec-workorder">应急工单</a>
+  <a class="nav__link" href="#sec-serious">大病就医</a>
+  <a class="nav__link" href="#sec-knowledge">知识库</a>
+  <a class="nav__link" href="#sec-profile">个人中心</a>
+</nav>
+
+<!-- 应急工单 -->
+<section class="section" id="sec-workorder">
+  <div class="section__header">
+    <h2 class="section__title">应急工单</h2>
+    <span class="section__count">6 页</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 class="card__tags"><span class="tag tag--state">Tab切换</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-complete.jpg','进行中·完成处理弹窗')">
+      <div class="card__img"><img src="screenshots/work-order-detail-ongoing-complete.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-contact.jpg','进行中·联系操作人员')">
+      <div class="card__img"><img src="screenshots/work-order-detail-ongoing-contact.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-transfer.jpg','进行中·转单选择')">
+      <div class="card__img"><img src="screenshots/work-order-detail-ongoing-transfer.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.jpg','工单详情（已完成）')">
+      <div class="card__img"><img src="screenshots/work-order-detail.jpg" alt="工单详情（已完成）"></div>
+      <div class="card__label">工单详情（已完成）</div>
+    </div>
+  </div>
+</section>
+
+<div class="divider"></div>
+
+<!-- 大病就医 -->
+<section class="section" id="sec-serious">
+  <div class="section__header">
+    <h2 class="section__title">大病就医</h2>
+    <span class="section__count">6 页</span>
+  </div>
+  <div class="scroll-row">
+    <div class="card" onclick="openLightbox('screenshots/serious-illness-list.jpg','大病就医列表')">
+      <div class="card__img"><img src="screenshots/serious-illness-list.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/serious-illness-detail-pending.jpg','详情（待处理）')">
+      <div class="card__img"><img src="screenshots/serious-illness-detail-pending.jpg" alt="详情（待处理）"></div>
+      <div class="card__label">详情（待处理）</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/serious-illness-detail-pending-submit.jpg','待处理·提交挂号结果')">
+      <div class="card__img"><img src="screenshots/serious-illness-detail-pending-submit.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/serious-illness-detail-pending-transfer.jpg','待处理·转单选择')">
+      <div class="card__img"><img src="screenshots/serious-illness-detail-pending-transfer.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/serious-illness-detail-done.jpg','详情（已完成）')">
+      <div class="card__img"><img src="screenshots/serious-illness-detail-done.jpg" alt="详情（已完成）"></div>
+      <div class="card__label">详情（已完成）</div>
+    </div>
+    <div class="card" onclick="openLightbox('screenshots/serious-illness-detail-cancelled.jpg','详情（已取消）')">
+      <div class="card__img"><img src="screenshots/serious-illness-detail-cancelled.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">2 页</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 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">5 页</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/edit-profile-avatar.jpg','修改信息·头像选择')">
+      <div class="card__img"><img src="screenshots/edit-profile-avatar.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/change-pwd.jpg','修改密码')">
+      <div class="card__img"><img src="screenshots/change-pwd.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');
+}
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') closeLightbox();
+});
+</script>
+</body>
+</html>