lyf/frontend-miniapp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: sync latest project updates
Some checks failed
CI / verify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
lyf
2026-07-03 14:42:38 +08:00
parent 8b2c36677e
commit 8fed715235
106 changed files with 6030 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/Benchmark/generated-guide-designs-h5-home-map-focus/01-h5-home-3d-map-focus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

109
docs/Benchmark/generated-guide-designs-h5-home-map-focus/01-h5-home-3d-map-focus.svg Normal file
View File

@@ -0,0 +1,109 @@
<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#000000" flood-opacity="0.10"/></filter>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="4" stdDeviation="5" flood-color="#000000" flood-opacity="0.09"/></filter>
<linearGradient id="mapBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="0.54" stop-color="#EEF3F5"/><stop offset="1" stop-color="#F9FAFB"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#E7EEF2"/></linearGradient>
<linearGradient id="side" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#CBD5DC"/><stop offset="1" stop-color="#AEBBC4"/></linearGradient>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif}.black{fill:#000}.body{fill:#3F3F3F}.muted{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.line{stroke:#D9D9D9}.panel{fill:#fff;fill-opacity:.88;stroke:#D9D9D9;stroke-width:1}.poi{fill:#fff;stroke:#D9D9D9;stroke-width:1;filter:url(#soft)}.wall{fill:url(#wall);stroke:#D7E0E5;stroke-width:1.6}.side{fill:url(#side);opacity:.65}.garden{fill:#DCEDE2;stroke:#CBE2D3;stroke-width:1}.water{fill:#DDEDF6;stroke:#CFE2EE;stroke-width:1}.bold{font-weight:700}.heavy{font-weight:800}
</style>
</defs>
<rect width="390" height="844" fill="#F9FAFB"/>
<text x="18" y="58" class="font black heavy" font-size="34">导览</text>
<text x="306" y="54" class="font green bold" font-size="17">来馆</text>
<path d="M358 41 l8 8 l-8 8" fill="none" stroke="#2C854F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="14" y="92" width="362" height="660" rx="18" fill="url(#mapBg)" stroke="#D9D9D9" filter="url(#shadow)"/>
<ellipse cx="292" cy="186" rx="86" ry="72" fill="#2C854F" opacity=".07"/>
<ellipse cx="100" cy="612" rx="90" ry="86" fill="#1B6EC0" opacity=".06"/>
<g transform="translate(-16 112) rotate(-18 200 290)">
<rect x="42" y="418" width="320" height="14" class="water"/>
<rect x="53" y="86" width="312" height="12" class="water"/>
<rect x="142" y="48" width="128" height="54" class="garden"/>
<rect x="246" y="140" width="120" height="78" class="garden"/>
<rect x="265" y="300" width="122" height="74" class="garden"/>
<g opacity=".96">
<rect x="122" y="44" width="184" height="82" class="side" transform="translate(9 12)"/>
<rect x="122" y="44" width="184" height="82" class="wall"/>
<rect x="48" y="150" width="200" height="112" class="side" transform="translate(9 12)"/>
<rect x="48" y="150" width="200" height="112" class="wall"/>
<rect x="264" y="158" width="166" height="102" class="side" transform="translate(9 12)"/>
<rect x="264" y="158" width="166" height="102" class="wall"/>
<rect x="126" y="290" width="154" height="126" class="side" transform="translate(9 12)"/>
<rect x="126" y="290" width="154" height="126" class="wall"/>
<rect x="294" y="318" width="172" height="112" class="side" transform="translate(9 12)"/>
<rect x="294" y="318" width="172" height="112" class="wall"/>
<rect x="40" y="418" width="196" height="104" class="side" transform="translate(9 12)"/>
<rect x="40" y="418" width="196" height="104" class="wall"/>
<path d="M178 226 Q222 165 268 226 L268 412 L178 412 Z" fill="#F7FAFB" stroke="#D4DDE3" stroke-width="1.6"/>
<rect x="170" y="426" width="54" height="210" fill="#FFFFFF" stroke="#D9E0E5" stroke-width="1.4"/>
<rect x="234" y="424" width="40" height="210" fill="#FFFFFF" stroke="#D9E0E5" stroke-width="1.4"/>
</g>
</g>
<g filter="url(#soft)">
<rect x="24" y="103" width="342" height="42" rx="12" class="panel"/>
<circle cx="44" cy="124" r="8" fill="none" stroke="#565A5E" stroke-width="2"/>
<line x1="51" y1="131" x2="58" y2="138" stroke="#565A5E" stroke-width="2" stroke-linecap="round"/>
<text x="72" y="130" class="font muted" font-size="14">搜索展厅、设施或地点</text>
<path d="M338 116 a7 7 0 0 1 14 0 v8 a7 7 0 0 1 -14 0z M345 134 v8 M339 142 h12" fill="none" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round"/>
</g>
<g filter="url(#soft)">
<rect x="24" y="154" width="119" height="34" rx="10" fill="#fff" fill-opacity=".82" stroke="#D9D9D9"/>
<rect x="27" y="157" width="56" height="28" rx="8" fill="#000"/>
<text x="43" y="176" class="font lime bold" font-size="14">地图</text>
<text x="103" y="176" class="font body" font-size="14">列表</text>
</g>
<g filter="url(#soft)">
<rect x="24" y="204" width="72" height="34" rx="10" class="panel"/>
<rect x="37" y="214" width="7" height="7" fill="none" stroke="#3F3F3F" stroke-width="1.8"/><rect x="49" y="214" width="7" height="7" fill="none" stroke="#3F3F3F" stroke-width="1.8"/><rect x="37" y="226" width="7" height="7" fill="none" stroke="#3F3F3F" stroke-width="1.8"/><rect x="49" y="226" width="7" height="7" fill="none" stroke="#3F3F3F" stroke-width="1.8"/>
<text x="65" y="226" class="font body bold" font-size="13">图例</text>
</g>
<g filter="url(#soft)">
<g transform="translate(25 250)"><rect width="37" height="37" rx="12" class="panel"/><text x="18.5" y="24" text-anchor="middle" class="font green bold" font-size="18">i</text><text x="18.5" y="55" text-anchor="middle" class="font black bold" font-size="10">服务台</text></g>
<g transform="translate(104 250)"><rect width="37" height="37" rx="12" class="panel"/><text x="18.5" y="24" text-anchor="middle" class="font green bold" font-size="17">⇧</text><text x="18.5" y="55" text-anchor="middle" class="font black bold" font-size="10">电梯</text></g>
<g transform="translate(183 250)"><rect width="37" height="37" rx="12" class="panel"/><text x="18.5" y="24" text-anchor="middle" class="font green bold" font-size="17">≈</text><text x="18.5" y="55" text-anchor="middle" class="font black bold" font-size="10">扶梯</text></g>
<g transform="translate(262 250)"><rect width="37" height="37" rx="12" class="panel"/><text x="18.5" y="23" text-anchor="middle" class="font green bold" font-size="12">WC</text><text x="18.5" y="55" text-anchor="middle" class="font black bold" font-size="10">洗手间</text></g>
<g transform="translate(329 250)"><rect width="37" height="37" rx="12" class="panel"/><text x="18.5" y="24" text-anchor="middle" class="font green bold" font-size="18">↗</text><text x="18.5" y="55" text-anchor="middle" class="font black bold" font-size="10">出入口</text></g>
</g>
<g filter="url(#soft)">
<rect x="206" y="337" width="120" height="52" rx="10" class="poi"/>
<text x="266" y="358" text-anchor="middle" class="font black bold" font-size="15">恐龙化石展厅</text>
<text x="266" y="377" text-anchor="middle" class="font black" font-size="14">1F-02</text>
<path d="M268 285 C250 285 239 298 239 314 C239 337 268 357 268 357 C268 357 297 337 297 314 C297 298 286 285 268 285 Z" fill="#2C854F"/>
<circle cx="268" cy="312" r="10" fill="#fff"/>
</g>
<g class="font" filter="url(#soft)">
<rect x="73" y="311" width="108" height="48" rx="10" class="poi"/><text x="127" y="331" text-anchor="middle" font-size="13">地球演化厅</text><text x="127" y="348" text-anchor="middle" font-size="12">1F-03</text>
<rect x="238" y="482" width="118" height="48" rx="10" class="poi"/><text x="297" y="502" text-anchor="middle" font-size="13">生命起源区</text><text x="297" y="519" text-anchor="middle" font-size="12">1F-05</text>
<rect x="46" y="561" width="126" height="48" rx="10" class="poi"/><text x="109" y="581" text-anchor="middle" font-size="13">矿物与岩石厅</text><text x="109" y="598" text-anchor="middle" font-size="12">1F-04</text>
<rect x="253" y="638" width="88" height="48" rx="10" class="poi"/><text x="297" y="658" text-anchor="middle" font-size="13">1号展厅</text><text x="297" y="675" text-anchor="middle" font-size="12">1F-01</text>
<text x="174" y="657" text-anchor="middle" class="green bold" font-size="18">↑</text><text x="174" y="678" text-anchor="middle" class="black" font-size="13">主入口</text>
</g>
<g filter="url(#soft)">
<rect x="323" y="304" width="43" height="168" rx="13" class="panel"/>
<text x="344.5" y="330" text-anchor="middle" class="font body" font-size="16">3F</text><line x1="328" y1="346" x2="361" y2="346" class="line"/>
<text x="344.5" y="372" text-anchor="middle" class="font body" font-size="16">2F</text><line x1="328" y1="388" x2="361" y2="388" class="line"/>
<rect x="323" y="388" width="43" height="42" rx="8" fill="#000"/><text x="344.5" y="416" text-anchor="middle" class="font lime heavy" font-size="18">1F</text>
<line x1="328" y1="430" x2="361" y2="430" class="line"/><text x="344.5" y="456" text-anchor="middle" class="font body" font-size="16">B1</text>
</g>
<g filter="url(#soft)">
<rect x="328" y="606" width="38" height="38" rx="12" class="panel"/><text x="347" y="631" text-anchor="middle" class="font body" font-size="18">⌖</text>
<rect x="328" y="653" width="38" height="38" rx="12" class="panel"/><text x="347" y="678" text-anchor="middle" class="font body" font-size="20">＋</text>
<rect x="328" y="700" width="38" height="38" rx="12" class="panel"/><text x="347" y="725" text-anchor="middle" class="font body" font-size="20">－</text>
</g>
<rect x="28" y="676" width="176" height="28" rx="14" class="panel" filter="url(#soft)"/>
<text x="116" y="695" text-anchor="middle" class="font body" font-size="12">当前展示 1F 馆内三维地图</text>
<rect x="18" y="766" width="354" height="54" rx="10" fill="#000" filter="url(#shadow)"/>
<text x="195" y="801" text-anchor="middle" class="font lime heavy" font-size="22">开始导览</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

35
docs/Benchmark/generated-guide-designs-h5-home-map-focus/README.md Normal file
View File

@@ -0,0 +1,35 @@
# H5 导览首页精简设计稿
本目录为新版 H5 导览首页的精简设计稿，仅表达功能逻辑和页面结构，不作为最终视觉规范。
## 文件
- `01-h5-home-3d-map-focus.png`：H5 首页设计稿，重点突出馆内三维地图。
- `01-h5-home-3d-map-focus.svg`：用于复查和二次调整的可编辑源稿。
## 设计逻辑
- 平台定位为纯 H5 页面：无手机状态栏、无微信小程序胶囊、无小程序标题栏。
- 首页核心目标是进入馆内导览，因此三维地图占据首屏主体区域。
- 搜索、地图/列表切换、图例、设施入口、楼层切换、定位和缩放控件均以地图浮层形式出现，减少对地图主区域的挤占。
- 底部只保留主要操作「开始导览」，不加入收藏、推荐、我的等扩展功能。
- 右上角保留「来馆」入口，对应馆外/到馆路线入口。
## 参考依据
- 用户提供的首页参考图：保留其信息架构，包括标题、来馆、地图/列表、搜索、设施入口、楼层和开始导览。
- `深圳自然博物馆小程序+设计规范0519`：参考背景色、主按钮色、按钮文字色、标签绿色、分割线和基础边距。
## 本项目落地对应
- 首页入口：`src/pages/index/index.vue`
- 导览地图容器：`src/components/navigation/GuideMapShell.vue`
- 地图渲染区域：`src/components/map/SgsMapRenderer.vue`
- 后续路线规划面板：`src/components/navigation/RoutePlannerPanel.vue`
## 需要确认
- H5 首页是否默认展示地图模式，列表是否作为次级 tab 保留。
- 「开始导览」点击后是进入路线规划、当前位置预览，还是直接进入模拟导览。
- 设施入口是否只保留服务台、电梯、扶梯、洗手间、出入口这 5 类。
- 楼层列表是否固定为 `3F / 2F / 1F / B1`，或需要从 SDK/后台动态读取。