yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 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>
This commit is contained in:
冯普
2026-05-26 18:01:16 +08:00
co-authored by Claude Opus 4.6
parent 6e05f10396
commit 263b625015
53 changed files with 1454 additions and 668 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/emergency-medical/doc/design-overview.html
+288
View File
@@ -0,0 +1,288 @@
<!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; }
/* 子标题 */
.sub-title { font-size: 12px; color: #666; margin: 12px 0 8px 4px; padding-left: 24px; }
/* 分隔线 */
.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-entry">入口</a>
<a class="nav__link" href="#sec-map">资源地图</a>
<a class="nav__link" href="#sec-detail">资源详情</a>
<a class="nav__link" href="#sec-help">应急求助</a>
<a class="nav__link" href="#sec-video">急救教学</a>
<a class="nav__link" href="#sec-appt">大病就医预约</a>
</nav>
<!-- ===== 1. 入口与总览 ===== -->
<section class="section" id="sec-entry">
<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/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/emergency-contacts.jpg','紧急联系人')">
<div class="card__img"><img src="screenshots/emergency-contacts.jpg" alt=""></div>
<div class="card__label">紧急联系人</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ===== 2. 应急资源地图 ===== -->
<section class="section" id="sec-map">
<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/resource-map.jpg','油田医院地图')">
<div class="card__img"><img src="screenshots/resource-map.jpg" alt=""></div>
<div class="card__label">油田医院地图（默认）</div>
</div>
<div class="card" onclick="openLightbox('screenshots/resource-map-clinic.jpg','医疗点地图')">
<div class="card__img"><img src="screenshots/resource-map-clinic.jpg" alt=""></div>
<div class="card__label">医疗点地图</div>
</div>
<div class="card" onclick="openLightbox('screenshots/resource-map-aed.jpg','AED地图')">
<div class="card__img"><img src="screenshots/resource-map-aed.jpg" alt=""></div>
<div class="card__label">AED 地图</div>
</div>
<div class="card" onclick="openLightbox('screenshots/resource-map-ambulance.jpg','救护车地图')">
<div class="card__img"><img src="screenshots/resource-map-ambulance.jpg" alt=""></div>
<div class="card__label">救护车地图</div>
</div>
<div class="card" onclick="openLightbox('screenshots/resource-map-kit.jpg','急救包地图')">
<div class="card__img"><img src="screenshots/resource-map-kit.jpg" alt=""></div>
<div class="card__label">急救包地图</div>
</div>
<div class="card" onclick="openLightbox('screenshots/resource-map-simulate.jpg','模拟急救面板')">
<div class="card__img"><img src="screenshots/resource-map-simulate.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>
<!-- ===== 3. 资源详情 ===== -->
<section class="section" id="sec-detail">
<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/hospital-detail.jpg','油田医院详情')">
<div class="card__img"><img src="screenshots/hospital-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/clinic-detail.jpg','医疗点详情')">
<div class="card__img"><img src="screenshots/clinic-detail.jpg" alt=""></div>
<div class="card__label">医疗点详情</div>
</div>
<div class="card" onclick="openLightbox('screenshots/aed-detail.jpg','AED详情')">
<div class="card__img"><img src="screenshots/aed-detail.jpg" alt=""></div>
<div class="card__label">AED 详情</div>
</div>
<div class="card" onclick="openLightbox('screenshots/ambulance-detail.jpg','救护车详情')">
<div class="card__img"><img src="screenshots/ambulance-detail.jpg" alt=""></div>
<div class="card__label">救护车详情</div>
</div>
<div class="card" onclick="openLightbox('screenshots/first-aid-kit-detail.jpg','急救包详情')">
<div class="card__img"><img src="screenshots/first-aid-kit-detail.jpg" alt=""></div>
<div class="card__label">急救包详情</div>
</div>
<div class="card" onclick="openLightbox('screenshots/emergency-tips.jpg','急救提示书')">
<div class="card__img"><img src="screenshots/emergency-tips.jpg" alt=""></div>
<div class="card__label">急救提示书</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ===== 4. 应急求助 ===== -->
<section class="section" id="sec-help">
<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/emergency-chat.jpg','应急视频对话')">
<div class="card__img"><img src="screenshots/emergency-chat.jpg" alt=""></div>
<div class="card__label">应急视频对话（文字模式）</div>
</div>
<div class="card" onclick="openLightbox('screenshots/emergency-chat-voice.jpg','语音输入模式')">
<div class="card__img"><img src="screenshots/emergency-chat-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-plus.jpg','加号菜单展开')">
<div class="card__img"><img src="screenshots/emergency-chat-plus.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-modal.jpg','结束应急确认弹窗')">
<div class="card__img"><img src="screenshots/emergency-chat-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/help-records.jpg','应急求助记录')">
<div class="card__img"><img src="screenshots/help-records.jpg" alt=""></div>
<div class="card__label">应急求助记录</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ===== 5. 急救教学 ===== -->
<section class="section" id="sec-video">
<div class="section__header">
<h2 class="section__title">急救教学</h2>
<span class="section__count">1</span>
</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/first-aid-videos.jpg','急救教学视频')">
<div class="card__img"><img src="screenshots/first-aid-videos.jpg" alt=""></div>
<div class="card__label">急救教学视频列表</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ===== 6. 大病就医预约 ===== -->
<section class="section" id="sec-appt">
<div class="section__header">
<h2 class="section__title">大病就医预约</h2>
<span class="section__count">11</span>
</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/appointment-list.jpg','预约列表·待确认')">
<div class="card__img"><img src="screenshots/appointment-list.jpg" alt=""></div>
<div class="card__label">列表 · 待确认</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-list-confirmed.jpg','预约列表·已确认')">
<div class="card__img"><img src="screenshots/appointment-list-confirmed.jpg" alt=""></div>
<div class="card__label">列表 · 已确认</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-list-done.jpg','预约列表·已完成')">
<div class="card__img"><img src="screenshots/appointment-list-done.jpg" alt=""></div>
<div class="card__label">列表 · 已完成</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-list-cancelled.jpg','预约列表·已取消')">
<div class="card__img"><img src="screenshots/appointment-list-cancelled.jpg" alt=""></div>
<div class="card__label">列表 · 已取消</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-form.jpg','发起预约表单')">
<div class="card__img"><img src="screenshots/appointment-form.jpg" alt=""></div>
<div class="card__label">发起预约表单</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-detail-pending.jpg','预约详情·待确认')">
<div class="card__img"><img src="screenshots/appointment-detail-pending.jpg" alt=""></div>
<div class="card__label">详情 · 待确认</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-detail-pending-modal.jpg','取消预约弹窗(待确认)')">
<div class="card__img"><img src="screenshots/appointment-detail-pending-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/appointment-detail-confirmed.jpg','预约详情·已确认')">
<div class="card__img"><img src="screenshots/appointment-detail-confirmed.jpg" alt=""></div>
<div class="card__label">详情 · 已确认</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-detail-confirmed-modal.jpg','取消预约弹窗(已确认)')">
<div class="card__img"><img src="screenshots/appointment-detail-confirmed-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/appointment-detail-done.jpg','预约详情·已完成')">
<div class="card__img"><img src="screenshots/appointment-detail-done.jpg" alt=""></div>
<div class="card__label">详情 · 已完成</div>
</div>
<div class="card" onclick="openLightbox('screenshots/appointment-detail-cancelled.jpg','预约详情·已取消')">
<div class="card__img"><img src="screenshots/appointment-detail-cancelled.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>
employee-app/emergency-medical/doc/screenshots/appointment-detail-confirmed-modal.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

employee-app/emergency-medical/doc/screenshots/appointment-detail-pending-modal.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

employee-app/emergency-medical/doc/screenshots/emergency-chat-modal.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

employee-app/emergency-medical/doc/screenshots/emergency-chat-plus.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

employee-app/emergency-medical/doc/screenshots/emergency-chat-voice.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

employee-app/emergency-medical/doc/screenshots/resource-map-simulate.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB