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-home-5-options/00-contact-sheet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 KiB

BIN
docs/Benchmark/generated-guide-home-5-options/01-01-map-first.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 235 KiB

48
docs/Benchmark/generated-guide-home-5-options/01-01-map-first.svg Normal file
View File

@@ -0,0 +1,48 @@
<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844"><defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCFDFD"/><stop offset="1" stop-color="#F4F6F7"/></linearGradient>
<linearGradient id="mapBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".48" stop-color="#EEF5F7"/><stop offset="1" stop-color="#DFE9EE"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".68" stop-color="#EEF4F6"/><stop offset="1" stop-color="#D8E4EA"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#CFDAE1"/><stop offset="1" stop-color="#A9B9C3"/></linearGradient>
<linearGradient id="greenSoft" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EAF5ED"/><stop offset="1" stop-color="#CCE6D6"/></linearGradient>
<linearGradient id="water" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#DFF1F8"/><stop offset="1" stop-color="#B7D9EA"/></linearGradient>
<radialGradient id="glow" cx="50%" cy="50%" r="70%"><stop offset="0" stop-color="#2C854F" stop-opacity=".22"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<filter id="shadow" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#0B1820" flood-opacity=".13"/></filter>
<filter id="soft" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#0B1820" flood-opacity=".12"/></filter>
<filter id="tiny" x="-30%" y="-30%" width="170%" height="180%"><feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#0B1820" flood-opacity=".11"/></filter>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.blue{fill:#1B6EC0}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;fill-opacity:.9;stroke:#D9D9D9;stroke-width:1}.glass{fill:#fff;fill-opacity:.78;stroke:#D9D9D9;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.68;stroke:#AEBEC7;stroke-width:.7}.garden{fill:url(#greenSoft);stroke:#C7E1D0;stroke-width:1}.water{fill:url(#water);opacity:.55}.label{fill:#fff;stroke:#D9D9D9;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/>
<clipPath id="clipA"><rect x="14" y="96" width="362" height="650" rx="22"/></clipPath>
<rect x="14" y="96" width="362" height="650" rx="22" fill="url(#mapBg)" stroke="#D9D9D9" filter="url(#shadow)"/>
<g clip-path="url(#clipA)" opacity="1">
<circle cx="296.36" cy="200" r="123.08000000000001" fill="#2C854F" opacity=".055"/>
<circle cx="86.4" cy="590" r="137.56" fill="#1B6EC0" opacity=".045"/>
<path d="M-26 213 L436 128.5" stroke="#BFD8E4" stroke-width="14" opacity=".36"/><path d="M-26 226 L436 141.5" stroke="#fff" stroke-width="6" opacity=".65"/>
<path d="M-36 668 L446 577" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-26 674.5 L436 583.5" stroke="#fff" stroke-width="6" opacity=".68"/>
<g transform="translate(21.240000000000002 122) scale(0.98) rotate(-18 181 273)" filter="url(#soft)">
<rect x="126" y="62" width="184" height="82" class="wall" transform="translate(10 14)"/><rect x="126" y="62" width="184" height="82" class="roof"/><rect x="151" y="80" width="128" height="50" class="garden"/>
<rect x="48" y="156" width="202" height="112" class="wall" transform="translate(10 14)"/><rect x="48" y="156" width="202" height="112" class="roof"/><rect x="73" y="181" width="148" height="62" fill="#FAFCFD" stroke="#E2E9ED"/>
<rect x="266" y="166" width="166" height="102" class="wall" transform="translate(10 14)"/><rect x="266" y="166" width="166" height="102" class="roof"/><rect x="292" y="186" width="112" height="62" class="garden"/>
<path d="M181 244 Q228 184 276 244 L276 426 L181 426 Z" fill="#F8FBFC" stroke="#CBD7DE" stroke-width="1.3"/><path d="M200 266 Q228 230 255 266 L255 402 L200 402 Z" fill="#EDF4F7" stroke="#D5E0E6"/>
<rect x="132" y="306" width="154" height="126" class="wall" transform="translate(10 14)"/><rect x="132" y="306" width="154" height="126" class="roof"/><rect x="158" y="330" width="104" height="78" fill="#fff" stroke="#E2E9ED"/>
<rect x="296" y="330" width="172" height="112" class="wall" transform="translate(10 14)"/><rect x="296" y="330" width="172" height="112" class="roof"/><rect x="322" y="352" width="116" height="68" class="garden"/>
<rect x="42" y="434" width="196" height="104" class="wall" transform="translate(10 14)"/><rect x="42" y="434" width="196" height="104" class="roof"/><rect x="66" y="456" width="148" height="56" fill="#fff" stroke="#E2E9ED"/>
<rect x="178" y="448" width="54" height="220" fill="#FFFFFF" stroke="#D4DEE4"/><rect x="242" y="444" width="40" height="220" fill="#FFFFFF" stroke="#D4DEE4"/>
<g stroke="#C8D5DD" stroke-width="1" opacity=".75"><path d="M190 478 h28 M190 512 h28 M190 546 h28 M190 580 h28 M254 478 h18 M254 512 h18 M254 546 h18 M254 580 h18"/></g>
</g>
<g opacity=".24" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M271.02 265 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M280.07 271.5 l-18 10 l20 3 l-10 15 M292.74 271.5 l8 16 l18 8"/></g>
<g filter="url(#tiny)" class="font">
<rect x="71.92" y="258.5" width="112" height="48" rx="11" class="label"/><text x="127.92" y="278.5" text-anchor="middle" font-size="13">地球演化厅</text><text x="127.92" y="295.5" text-anchor="middle" font-size="12">1F-03</text>
<rect x="220.33999999999997" y="323.5" width="118" height="52" rx="11" class="label"/><text x="279.34" y="345.5" text-anchor="middle" font-size="14" font-weight="700">恐龙化石展厅</text><text x="279.34" y="363.5" text-anchor="middle" font-size="13">1F-02</text>
<circle cx="260.16" cy="313.75" r="32" fill="url(#glow)"/><path d="M260.16 278 C242.06 278 231.2 297.5 231.2 323.5 C231.2 362.5 260.16 395 260.16 395 C260.16 395 289.12 362.5 289.12 323.5 C289.12 297.5 278.26 278 260.16 278 Z" fill="#2C854F"/><circle cx="260.16" cy="317" r="9" fill="#fff"/>
<rect x="46.58" y="551" width="126" height="48" rx="11" class="label"/><text x="109.58" y="571" text-anchor="middle" font-size="13">矿物与岩石厅</text><text x="109.58" y="588" text-anchor="middle" font-size="12">1F-04</text>
</g></g>
<g filter="url(#soft)"><rect x="22" y="96" width="346" height="50" rx="16" class="glass"/><text x="42" y="126" class="font muted" font-size="14">搜索地点</text><circle cx="34" cy="121" r="7" fill="none" stroke="#565A5E" stroke-width="2"/><path d="M40 127 l7 7" stroke="#565A5E" stroke-width="2" stroke-linecap="round"/></g>
<g filter="url(#soft)"><rect x="214" y="26" width="72" height="36" rx="18" fill="#fff" stroke="#D9D9D9"/><text x="250" y="50" text-anchor="middle" class="font green heavy" font-size="18">讲解</text></g><g filter="url(#soft)"><rect x="298" y="26" width="72" height="36" rx="18" fill="#fff" stroke="#D9D9D9"/><text x="334" y="50" text-anchor="middle" class="font green heavy" font-size="18">来馆</text></g>
<g filter="url(#tiny)"><rect x="28" y="158" width="62" height="46" rx="14" fill="#fff" fill-opacity="0.9" stroke="#D9D9D9"/><text x="59" y="179" text-anchor="middle" class="font green heavy" font-size="17">□</text><text x="59" y="194" text-anchor="middle" class="font black bold" font-size="10">图例</text></g><g filter="url(#tiny)"><rect x="100" y="158" width="62" height="46" rx="14" fill="#fff" fill-opacity="0.9" stroke="#D9D9D9"/><text x="131" y="179" text-anchor="middle" class="font green heavy" font-size="17">WC</text><text x="131" y="194" text-anchor="middle" class="font black bold" font-size="10">设施</text></g>
<g filter="url(#tiny)"><rect x="326" y="310" width="40" height="132" rx="14" class="glass"/><text x="346" y="339" text-anchor="middle" class="font text" font-size="15">2F</text><line x1="334" y1="353" x2="358" y2="353" class="line"/><rect x="326" y="354" width="40" height="40" rx="9" fill="#000"/><text x="346" y="380" text-anchor="middle" class="font lime heavy" font-size="17">1F</text><line x1="334" y1="394" x2="358" y2="394" class="line"/><text x="346" y="422" text-anchor="middle" class="font text" font-size="15">B1</text></g>
<g filter="url(#tiny)"><rect x="326" y="640" width="40" height="40" rx="13" class="glass"/><text x="346" y="666" text-anchor="middle" class="font text" font-size="18">⌖</text></g>
<g filter="url(#soft)"><rect x="24" y="770" width="342" height="54" rx="27" fill="#000" stroke="#000"/><text x="195" y="803" text-anchor="middle" class="font lime heavy" font-size="18">开始馆内导览</text></g>
<text x="18" y="54" class="font black heavy" font-size="34">导览</text><text x="18" y="75" class="font muted" font-size="11">地图优先型</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
docs/Benchmark/generated-guide-home-5-options/02-02-immersive-rail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 KiB

49
docs/Benchmark/generated-guide-home-5-options/02-02-immersive-rail.svg Normal file
View File

@@ -0,0 +1,49 @@
<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844"><defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCFDFD"/><stop offset="1" stop-color="#F4F6F7"/></linearGradient>
<linearGradient id="mapBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".48" stop-color="#EEF5F7"/><stop offset="1" stop-color="#DFE9EE"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".68" stop-color="#EEF4F6"/><stop offset="1" stop-color="#D8E4EA"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#CFDAE1"/><stop offset="1" stop-color="#A9B9C3"/></linearGradient>
<linearGradient id="greenSoft" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EAF5ED"/><stop offset="1" stop-color="#CCE6D6"/></linearGradient>
<linearGradient id="water" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#DFF1F8"/><stop offset="1" stop-color="#B7D9EA"/></linearGradient>
<radialGradient id="glow" cx="50%" cy="50%" r="70%"><stop offset="0" stop-color="#2C854F" stop-opacity=".22"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<filter id="shadow" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#0B1820" flood-opacity=".13"/></filter>
<filter id="soft" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#0B1820" flood-opacity=".12"/></filter>
<filter id="tiny" x="-30%" y="-30%" width="170%" height="180%"><feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#0B1820" flood-opacity=".11"/></filter>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.blue{fill:#1B6EC0}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;fill-opacity:.9;stroke:#D9D9D9;stroke-width:1}.glass{fill:#fff;fill-opacity:.78;stroke:#D9D9D9;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.68;stroke:#AEBEC7;stroke-width:.7}.garden{fill:url(#greenSoft);stroke:#C7E1D0;stroke-width:1}.water{fill:url(#water);opacity:.55}.label{fill:#fff;stroke:#D9D9D9;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/>
<clipPath id="clipB"><rect x="0" y="90" width="390" height="754" rx="22"/></clipPath>
<rect x="0" y="90" width="390" height="754" rx="22" fill="url(#mapBg)" stroke="#D9D9D9" filter="url(#shadow)"/>
<g clip-path="url(#clipB)" opacity="1">
<circle cx="304.2" cy="210.64" r="132.60000000000002" fill="#2C854F" opacity=".055"/>
<circle cx="78" cy="663.04" r="148.2" fill="#1B6EC0" opacity=".045"/>
<path d="M-40 225.72 L450 127.7" stroke="#BFD8E4" stroke-width="14" opacity=".36"/><path d="M-40 240.8 L450 142.78" stroke="#fff" stroke-width="6" opacity=".65"/>
<path d="M-50 753.52 L460 647.96" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-40 761.0600000000001 L450 655.5" stroke="#fff" stroke-width="6" opacity=".68"/>
<g transform="translate(7.8 120.16) scale(1.08) rotate(-18 195 316.68)" filter="url(#soft)">
<rect x="126" y="62" width="184" height="82" class="wall" transform="translate(10 14)"/><rect x="126" y="62" width="184" height="82" class="roof"/><rect x="151" y="80" width="128" height="50" class="garden"/>
<rect x="48" y="156" width="202" height="112" class="wall" transform="translate(10 14)"/><rect x="48" y="156" width="202" height="112" class="roof"/><rect x="73" y="181" width="148" height="62" fill="#FAFCFD" stroke="#E2E9ED"/>
<rect x="266" y="166" width="166" height="102" class="wall" transform="translate(10 14)"/><rect x="266" y="166" width="166" height="102" class="roof"/><rect x="292" y="186" width="112" height="62" class="garden"/>
<path d="M181 244 Q228 184 276 244 L276 426 L181 426 Z" fill="#F8FBFC" stroke="#CBD7DE" stroke-width="1.3"/><path d="M200 266 Q228 230 255 266 L255 402 L200 402 Z" fill="#EDF4F7" stroke="#D5E0E6"/>
<rect x="132" y="306" width="154" height="126" class="wall" transform="translate(10 14)"/><rect x="132" y="306" width="154" height="126" class="roof"/><rect x="158" y="330" width="104" height="78" fill="#fff" stroke="#E2E9ED"/>
<rect x="296" y="330" width="172" height="112" class="wall" transform="translate(10 14)"/><rect x="296" y="330" width="172" height="112" class="roof"/><rect x="322" y="352" width="116" height="68" class="garden"/>
<rect x="42" y="434" width="196" height="104" class="wall" transform="translate(10 14)"/><rect x="42" y="434" width="196" height="104" class="roof"/><rect x="66" y="456" width="148" height="56" fill="#fff" stroke="#E2E9ED"/>
<rect x="178" y="448" width="54" height="220" fill="#FFFFFF" stroke="#D4DEE4"/><rect x="242" y="444" width="40" height="220" fill="#FFFFFF" stroke="#D4DEE4"/>
<g stroke="#C8D5DD" stroke-width="1" opacity=".75"><path d="M190 478 h28 M190 512 h28 M190 546 h28 M190 580 h28 M254 478 h18 M254 512 h18 M254 546 h18 M254 580 h18"/></g>
</g>
<g opacity=".24" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M276.9 286.04 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M286.65 293.58000000000004 l-18 10 l20 3 l-10 15 M300.3 293.58000000000004 l8 16 l18 8"/></g>
<g filter="url(#tiny)" class="font">
<rect x="62.4" y="278.5" width="112" height="48" rx="11" class="label"/><text x="118.4" y="298.5" text-anchor="middle" font-size="13">地球演化厅</text><text x="118.4" y="315.5" text-anchor="middle" font-size="12">1F-03</text>
<rect x="222.29999999999998" y="353.9" width="118" height="52" rx="11" class="label"/><text x="281.29999999999995" y="375.9" text-anchor="middle" font-size="14" font-weight="700">恐龙化石展厅</text><text x="281.29999999999995" y="393.9" text-anchor="middle" font-size="13">1F-02</text>
<circle cx="265.20000000000005" cy="342.59000000000003" r="32" fill="url(#glow)"/><path d="M265.20000000000005 301.12 C245.7 301.12 234 323.74 234 353.9 C234 399.14 265.20000000000005 436.84000000000003 265.20000000000005 436.84000000000003 C265.20000000000005 436.84000000000003 296.4 399.14 296.4 353.9 C296.4 323.74 284.7 301.12 265.20000000000005 301.12 Z" fill="#2C854F"/><circle cx="265.20000000000005" cy="346.36" r="9" fill="#fff"/>
<rect x="35.1" y="617.8" width="126" height="48" rx="11" class="label"/><text x="98.1" y="637.8" text-anchor="middle" font-size="13">矿物与岩石厅</text><text x="98.1" y="654.8" text-anchor="middle" font-size="12">1F-04</text>
</g></g>
<rect x="0" y="90" width="390" height="754" fill="none" stroke="#E3E6E8"/>
<g filter="url(#soft)"><rect x="226" y="24" width="68" height="38" rx="19" fill="#000"/><text x="260" y="49" text-anchor="middle" class="font lime heavy" font-size="17">讲解</text><rect x="304" y="24" width="68" height="38" rx="19" fill="#fff" stroke="#D9D9D9"/><text x="338" y="49" text-anchor="middle" class="font green heavy" font-size="17">来馆</text></g>
<g filter="url(#soft)"><rect x="24" y="105" width="236" height="42" rx="21" class="glass"/><circle cx="45" cy="126" r="7" fill="none" stroke="#565A5E" stroke-width="2"/><path d="M51 132 l7 7" stroke="#565A5E" stroke-width="2" stroke-linecap="round"/><text x="70" y="132" class="font muted" font-size="13">搜索展厅或设施</text></g>
<g filter="url(#soft)"><rect x="306" y="158" width="60" height="150" rx="18" fill="#fff" fill-opacity=".88" stroke="#D9D9D9"/><text x="336" y="190" text-anchor="middle" class="font green heavy" font-size="20">▶</text><text x="336" y="210" text-anchor="middle" class="font black bold" font-size="11">讲解</text><line x1="318" y1="232" x2="354" y2="232" class="line"/><text x="336" y="263" text-anchor="middle" class="font green heavy" font-size="20">↗</text><text x="336" y="283" text-anchor="middle" class="font black bold" font-size="11">来馆</text></g>
<g filter="url(#tiny)"><rect x="326" y="340" width="40" height="132" rx="14" class="glass"/><text x="346" y="369" text-anchor="middle" class="font text" font-size="15">2F</text><line x1="334" y1="383" x2="358" y2="383" class="line"/><rect x="326" y="384" width="40" height="40" rx="9" fill="#000"/><text x="346" y="410" text-anchor="middle" class="font lime heavy" font-size="17">1F</text><line x1="334" y1="424" x2="358" y2="424" class="line"/><text x="346" y="452" text-anchor="middle" class="font text" font-size="15">B1</text></g>
<g filter="url(#tiny)"><rect x="24" y="702" width="140" height="34" rx="17" class="glass"/><text x="94" y="724" text-anchor="middle" class="font text" font-size="12">1F 三维地图</text></g>
<g filter="url(#soft)"><rect x="24" y="770" width="342" height="54" rx="27" fill="#000" stroke="#000"/><text x="195" y="803" text-anchor="middle" class="font lime heavy" font-size="18">开始导览</text></g>
<text x="18" y="54" class="font black heavy" font-size="34">导览</text><text x="18" y="75" class="font muted" font-size="11">沉浸任务轨</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
docs/Benchmark/generated-guide-home-5-options/03-03-bottom-dock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

46
docs/Benchmark/generated-guide-home-5-options/03-03-bottom-dock.svg Normal file
View File

@@ -0,0 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844"><defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCFDFD"/><stop offset="1" stop-color="#F4F6F7"/></linearGradient>
<linearGradient id="mapBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".48" stop-color="#EEF5F7"/><stop offset="1" stop-color="#DFE9EE"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".68" stop-color="#EEF4F6"/><stop offset="1" stop-color="#D8E4EA"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#CFDAE1"/><stop offset="1" stop-color="#A9B9C3"/></linearGradient>
<linearGradient id="greenSoft" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EAF5ED"/><stop offset="1" stop-color="#CCE6D6"/></linearGradient>
<linearGradient id="water" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#DFF1F8"/><stop offset="1" stop-color="#B7D9EA"/></linearGradient>
<radialGradient id="glow" cx="50%" cy="50%" r="70%"><stop offset="0" stop-color="#2C854F" stop-opacity=".22"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<filter id="shadow" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#0B1820" flood-opacity=".13"/></filter>
<filter id="soft" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#0B1820" flood-opacity=".12"/></filter>
<filter id="tiny" x="-30%" y="-30%" width="170%" height="180%"><feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#0B1820" flood-opacity=".11"/></filter>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.blue{fill:#1B6EC0}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;fill-opacity:.9;stroke:#D9D9D9;stroke-width:1}.glass{fill:#fff;fill-opacity:.78;stroke:#D9D9D9;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.68;stroke:#AEBEC7;stroke-width:.7}.garden{fill:url(#greenSoft);stroke:#C7E1D0;stroke-width:1}.water{fill:url(#water);opacity:.55}.label{fill:#fff;stroke:#D9D9D9;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/>
<clipPath id="clipC"><rect x="14" y="118" width="362" height="548" rx="22"/></clipPath>
<rect x="14" y="118" width="362" height="548" rx="22" fill="url(#mapBg)" stroke="#D9D9D9" filter="url(#shadow)"/>
<g clip-path="url(#clipC)" opacity="1">
<circle cx="296.36" cy="205.68" r="123.08000000000001" fill="#2C854F" opacity=".055"/>
<circle cx="86.4" cy="534.48" r="137.56" fill="#1B6EC0" opacity=".045"/>
<path d="M-26 216.64 L436 145.4" stroke="#BFD8E4" stroke-width="14" opacity=".36"/><path d="M-26 227.60000000000002 L436 156.36" stroke="#fff" stroke-width="6" opacity=".65"/>
<path d="M-36 600.24 L446 523.52" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-26 605.72 L436 529" stroke="#fff" stroke-width="6" opacity=".68"/>
<g transform="translate(21.240000000000002 139.92000000000002) scale(0.94) rotate(-18 181 230.16)" filter="url(#soft)">
<rect x="126" y="62" width="184" height="82" class="wall" transform="translate(10 14)"/><rect x="126" y="62" width="184" height="82" class="roof"/><rect x="151" y="80" width="128" height="50" class="garden"/>
<rect x="48" y="156" width="202" height="112" class="wall" transform="translate(10 14)"/><rect x="48" y="156" width="202" height="112" class="roof"/><rect x="73" y="181" width="148" height="62" fill="#FAFCFD" stroke="#E2E9ED"/>
<rect x="266" y="166" width="166" height="102" class="wall" transform="translate(10 14)"/><rect x="266" y="166" width="166" height="102" class="roof"/><rect x="292" y="186" width="112" height="62" class="garden"/>
<path d="M181 244 Q228 184 276 244 L276 426 L181 426 Z" fill="#F8FBFC" stroke="#CBD7DE" stroke-width="1.3"/><path d="M200 266 Q228 230 255 266 L255 402 L200 402 Z" fill="#EDF4F7" stroke="#D5E0E6"/>
<rect x="132" y="306" width="154" height="126" class="wall" transform="translate(10 14)"/><rect x="132" y="306" width="154" height="126" class="roof"/><rect x="158" y="330" width="104" height="78" fill="#fff" stroke="#E2E9ED"/>
<rect x="296" y="330" width="172" height="112" class="wall" transform="translate(10 14)"/><rect x="296" y="330" width="172" height="112" class="roof"/><rect x="322" y="352" width="116" height="68" class="garden"/>
<rect x="42" y="434" width="196" height="104" class="wall" transform="translate(10 14)"/><rect x="42" y="434" width="196" height="104" class="roof"/><rect x="66" y="456" width="148" height="56" fill="#fff" stroke="#E2E9ED"/>
<rect x="178" y="448" width="54" height="220" fill="#FFFFFF" stroke="#D4DEE4"/><rect x="242" y="444" width="40" height="220" fill="#FFFFFF" stroke="#D4DEE4"/>
<g stroke="#C8D5DD" stroke-width="1" opacity=".75"><path d="M190 478 h28 M190 512 h28 M190 546 h28 M190 580 h28 M254 478 h18 M254 512 h18 M254 546 h18 M254 580 h18"/></g>
</g>
<g opacity=".24" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M271.02 260.48 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M280.07 265.96000000000004 l-18 10 l20 3 l-10 15 M292.74 265.96000000000004 l8 16 l18 8"/></g>
<g filter="url(#tiny)" class="font">
<rect x="71.92" y="255" width="112" height="48" rx="11" class="label"/><text x="127.92" y="275" text-anchor="middle" font-size="13">地球演化厅</text><text x="127.92" y="292" text-anchor="middle" font-size="12">1F-03</text>
<rect x="220.33999999999997" y="309.79999999999995" width="118" height="52" rx="11" class="label"/><text x="279.34" y="331.79999999999995" text-anchor="middle" font-size="14" font-weight="700">恐龙化石展厅</text><text x="279.34" y="349.79999999999995" text-anchor="middle" font-size="13">1F-02</text>
<circle cx="260.16" cy="301.58000000000004" r="32" fill="url(#glow)"/><path d="M260.16 271.44000000000005 C242.06 271.44000000000005 231.2 287.88 231.2 309.79999999999995 C231.2 342.67999999999995 260.16 370.08000000000004 260.16 370.08000000000004 C260.16 370.08000000000004 289.12 342.67999999999995 289.12 309.79999999999995 C289.12 287.88 278.26 271.44000000000005 260.16 271.44000000000005 Z" fill="#2C854F"/><circle cx="260.16" cy="304.32000000000005" r="9" fill="#fff"/>
<rect x="46.58" y="501.59999999999997" width="126" height="48" rx="11" class="label"/><text x="109.58" y="521.5999999999999" text-anchor="middle" font-size="13">矿物与岩石厅</text><text x="109.58" y="538.5999999999999" text-anchor="middle" font-size="12">1F-04</text>
</g></g>
<g filter="url(#soft)"><rect x="22" y="92" width="346" height="44" rx="14" class="glass"/><circle cx="44" cy="114" r="7" fill="none" stroke="#565A5E" stroke-width="2"/><path d="M50 120 l7 7" stroke="#565A5E" stroke-width="2" stroke-linecap="round"/><text x="70" y="120" class="font muted" font-size="14">搜索展厅、设施</text><text x="337" y="121" text-anchor="middle" class="font green heavy" font-size="15">1F</text></g>
<g filter="url(#tiny)"><rect x="326" y="290" width="40" height="132" rx="14" class="glass"/><text x="346" y="319" text-anchor="middle" class="font text" font-size="15">2F</text><line x1="334" y1="333" x2="358" y2="333" class="line"/><rect x="326" y="334" width="40" height="40" rx="9" fill="#000"/><text x="346" y="360" text-anchor="middle" class="font lime heavy" font-size="17">1F</text><line x1="334" y1="374" x2="358" y2="374" class="line"/><text x="346" y="402" text-anchor="middle" class="font text" font-size="15">B1</text></g>
<g filter="url(#tiny)"><rect x="26" y="608" width="104" height="34" rx="17" class="glass"/><text x="78" y="630" text-anchor="middle" class="font text" font-size="12">查看图例</text><rect x="140" y="608" width="104" height="34" rx="17" class="glass"/><text x="192" y="630" text-anchor="middle" class="font text" font-size="12">设施筛选</text></g>
<g filter="url(#shadow)"><rect x="18" y="690" width="354" height="130" rx="22" fill="#fff" stroke="#D9D9D9"/><text x="36" y="722" class="font black heavy" font-size="20">准备开始导览</text><text x="36" y="746" class="font muted" font-size="12">选择讲解或来馆，也可以直接进入馆内导览</text><g filter="url(#tiny)"><rect x="36" y="760" width="62" height="46" rx="14" fill="#fff" fill-opacity="0.9" stroke="#D9D9D9"/><text x="67" y="781" text-anchor="middle" class="font green heavy" font-size="17">▶</text><text x="67" y="796" text-anchor="middle" class="font black bold" font-size="10">讲解</text></g><g filter="url(#tiny)"><rect x="118" y="760" width="62" height="46" rx="14" fill="#fff" fill-opacity="0.9" stroke="#D9D9D9"/><text x="149" y="781" text-anchor="middle" class="font green heavy" font-size="17">↗</text><text x="149" y="796" text-anchor="middle" class="font black bold" font-size="10">来馆</text></g><rect x="210" y="760" width="138" height="46" rx="13" fill="#000"/><text x="279" y="790" text-anchor="middle" class="font lime heavy" font-size="17">开始导览</text></g>
<text x="18" y="54" class="font black heavy" font-size="34">导览</text><text x="18" y="75" class="font muted" font-size="11">底部任务 Dock</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
docs/Benchmark/generated-guide-home-5-options/04-04-poi-focus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

46
docs/Benchmark/generated-guide-home-5-options/04-04-poi-focus.svg Normal file
View File

@@ -0,0 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844"><defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCFDFD"/><stop offset="1" stop-color="#F4F6F7"/></linearGradient>
<linearGradient id="mapBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".48" stop-color="#EEF5F7"/><stop offset="1" stop-color="#DFE9EE"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".68" stop-color="#EEF4F6"/><stop offset="1" stop-color="#D8E4EA"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#CFDAE1"/><stop offset="1" stop-color="#A9B9C3"/></linearGradient>
<linearGradient id="greenSoft" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EAF5ED"/><stop offset="1" stop-color="#CCE6D6"/></linearGradient>
<linearGradient id="water" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#DFF1F8"/><stop offset="1" stop-color="#B7D9EA"/></linearGradient>
<radialGradient id="glow" cx="50%" cy="50%" r="70%"><stop offset="0" stop-color="#2C854F" stop-opacity=".22"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<filter id="shadow" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#0B1820" flood-opacity=".13"/></filter>
<filter id="soft" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#0B1820" flood-opacity=".12"/></filter>
<filter id="tiny" x="-30%" y="-30%" width="170%" height="180%"><feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#0B1820" flood-opacity=".11"/></filter>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.blue{fill:#1B6EC0}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;fill-opacity:.9;stroke:#D9D9D9;stroke-width:1}.glass{fill:#fff;fill-opacity:.78;stroke:#D9D9D9;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.68;stroke:#AEBEC7;stroke-width:.7}.garden{fill:url(#greenSoft);stroke:#C7E1D0;stroke-width:1}.water{fill:url(#water);opacity:.55}.label{fill:#fff;stroke:#D9D9D9;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/>
<clipPath id="clipD"><rect x="14" y="102" width="362" height="612" rx="22"/></clipPath>
<rect x="14" y="102" width="362" height="612" rx="22" fill="url(#mapBg)" stroke="#D9D9D9" filter="url(#shadow)"/>
<g clip-path="url(#clipD)" opacity="1">
<circle cx="296.36" cy="199.92000000000002" r="123.08000000000001" fill="#2C854F" opacity=".055"/>
<circle cx="86.4" cy="567.12" r="137.56" fill="#1B6EC0" opacity=".045"/>
<path d="M-26 212.16 L436 132.6" stroke="#BFD8E4" stroke-width="14" opacity=".36"/><path d="M-26 224.4 L436 144.84" stroke="#fff" stroke-width="6" opacity=".65"/>
<path d="M-36 640.5600000000001 L446 554.88" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-26 646.6800000000001 L436 561" stroke="#fff" stroke-width="6" opacity=".68"/>
<g transform="translate(21.240000000000002 126.48) scale(1.02) rotate(-18 181 257.03999999999996)" filter="url(#soft)">
<rect x="126" y="62" width="184" height="82" class="wall" transform="translate(10 14)"/><rect x="126" y="62" width="184" height="82" class="roof"/><rect x="151" y="80" width="128" height="50" class="garden"/>
<rect x="48" y="156" width="202" height="112" class="wall" transform="translate(10 14)"/><rect x="48" y="156" width="202" height="112" class="roof"/><rect x="73" y="181" width="148" height="62" fill="#FAFCFD" stroke="#E2E9ED"/>
<rect x="266" y="166" width="166" height="102" class="wall" transform="translate(10 14)"/><rect x="266" y="166" width="166" height="102" class="roof"/><rect x="292" y="186" width="112" height="62" class="garden"/>
<path d="M181 244 Q228 184 276 244 L276 426 L181 426 Z" fill="#F8FBFC" stroke="#CBD7DE" stroke-width="1.3"/><path d="M200 266 Q228 230 255 266 L255 402 L200 402 Z" fill="#EDF4F7" stroke="#D5E0E6"/>
<rect x="132" y="306" width="154" height="126" class="wall" transform="translate(10 14)"/><rect x="132" y="306" width="154" height="126" class="roof"/><rect x="158" y="330" width="104" height="78" fill="#fff" stroke="#E2E9ED"/>
<rect x="296" y="330" width="172" height="112" class="wall" transform="translate(10 14)"/><rect x="296" y="330" width="172" height="112" class="roof"/><rect x="322" y="352" width="116" height="68" class="garden"/>
<rect x="42" y="434" width="196" height="104" class="wall" transform="translate(10 14)"/><rect x="42" y="434" width="196" height="104" class="roof"/><rect x="66" y="456" width="148" height="56" fill="#fff" stroke="#E2E9ED"/>
<rect x="178" y="448" width="54" height="220" fill="#FFFFFF" stroke="#D4DEE4"/><rect x="242" y="444" width="40" height="220" fill="#FFFFFF" stroke="#D4DEE4"/>
<g stroke="#C8D5DD" stroke-width="1" opacity=".75"><path d="M190 478 h28 M190 512 h28 M190 546 h28 M190 580 h28 M254 478 h18 M254 512 h18 M254 546 h18 M254 580 h18"/></g>
</g>
<g opacity=".24" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M271.02 261.12 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M280.07 267.24 l-18 10 l20 3 l-10 15 M292.74 267.24 l8 16 l18 8"/></g>
<g filter="url(#tiny)" class="font">
<rect x="71.92" y="255" width="112" height="48" rx="11" class="label"/><text x="127.92" y="275" text-anchor="middle" font-size="13">地球演化厅</text><text x="127.92" y="292" text-anchor="middle" font-size="12">1F-03</text>
<rect x="220.33999999999997" y="316.2" width="118" height="52" rx="11" class="label"/><text x="279.34" y="338.2" text-anchor="middle" font-size="14" font-weight="700">恐龙化石展厅</text><text x="279.34" y="356.2" text-anchor="middle" font-size="13">1F-02</text>
<circle cx="260.16" cy="307.02" r="32" fill="url(#glow)"/><path d="M260.16 273.36 C242.06 273.36 231.2 291.72 231.2 316.2 C231.2 352.91999999999996 260.16 383.52000000000004 260.16 383.52000000000004 C260.16 383.52000000000004 289.12 352.91999999999996 289.12 316.2 C289.12 291.72 278.26 273.36 260.16 273.36 Z" fill="#2C854F"/><circle cx="260.16" cy="310.08000000000004" r="9" fill="#fff"/>
<rect x="46.58" y="530.4" width="126" height="48" rx="11" class="label"/><text x="109.58" y="550.4" text-anchor="middle" font-size="13">矿物与岩石厅</text><text x="109.58" y="567.4" text-anchor="middle" font-size="12">1F-04</text>
</g></g>
<g filter="url(#soft)"><rect x="24" y="105" width="225" height="40" rx="20" class="glass"/><text x="48" y="130" class="font muted" font-size="13">搜索</text><circle cx="39" cy="124" r="6" fill="none" stroke="#565A5E" stroke-width="2"/><path d="M44 129 l6 6" stroke="#565A5E" stroke-width="2" stroke-linecap="round"/></g>
<g filter="url(#tiny)"><rect x="260" y="105" width="50" height="40" rx="13" fill="#000"/><text x="285" y="130" text-anchor="middle" class="font lime heavy" font-size="14">地图</text><rect x="318" y="105" width="48" height="40" rx="13" class="glass"/><text x="342" y="130" text-anchor="middle" class="font text" font-size="14">1F</text></g>
<g filter="url(#shadow)"><rect x="26" y="642" width="338" height="74" rx="18" fill="#fff" stroke="#D9D9D9"/><text x="44" y="671" class="font black heavy" font-size="18">恐龙化石展厅</text><text x="44" y="694" class="font muted" font-size="12">1F-02 · 已在三维地图中定位</text><rect x="250" y="660" width="94" height="40" rx="12" fill="#000"/><text x="297" y="686" text-anchor="middle" class="font lime heavy" font-size="15">开始导览</text></g>
<g filter="url(#soft)"><rect x="24" y="735" width="164" height="58" rx="16" fill="#fff" stroke="#D9D9D9"/><text x="48" y="760" class="font green heavy" font-size="18">▶ 讲解</text><text x="48" y="778" class="font muted" font-size="11">听展厅内容</text><rect x="202" y="735" width="164" height="58" rx="16" fill="#fff" stroke="#D9D9D9"/><text x="226" y="760" class="font green heavy" font-size="18">↗ 来馆</text><text x="226" y="778" class="font muted" font-size="11">查看到馆方式</text></g>
<text x="18" y="54" class="font black heavy" font-size="34">导览</text><text x="18" y="75" class="font muted" font-size="11">点位聚焦型</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
docs/Benchmark/generated-guide-home-5-options/05-05-ultra-minimal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 191 KiB

40
docs/Benchmark/generated-guide-home-5-options/05-05-ultra-minimal.svg Normal file
View File

@@ -0,0 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844"><defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCFDFD"/><stop offset="1" stop-color="#F4F6F7"/></linearGradient>
<linearGradient id="mapBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".48" stop-color="#EEF5F7"/><stop offset="1" stop-color="#DFE9EE"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".68" stop-color="#EEF4F6"/><stop offset="1" stop-color="#D8E4EA"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#CFDAE1"/><stop offset="1" stop-color="#A9B9C3"/></linearGradient>
<linearGradient id="greenSoft" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EAF5ED"/><stop offset="1" stop-color="#CCE6D6"/></linearGradient>
<linearGradient id="water" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#DFF1F8"/><stop offset="1" stop-color="#B7D9EA"/></linearGradient>
<radialGradient id="glow" cx="50%" cy="50%" r="70%"><stop offset="0" stop-color="#2C854F" stop-opacity=".22"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<filter id="shadow" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#0B1820" flood-opacity=".13"/></filter>
<filter id="soft" x="-25%" y="-25%" width="160%" height="170%"><feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#0B1820" flood-opacity=".12"/></filter>
<filter id="tiny" x="-30%" y="-30%" width="170%" height="180%"><feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#0B1820" flood-opacity=".11"/></filter>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.blue{fill:#1B6EC0}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;fill-opacity:.9;stroke:#D9D9D9;stroke-width:1}.glass{fill:#fff;fill-opacity:.78;stroke:#D9D9D9;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.68;stroke:#AEBEC7;stroke-width:.7}.garden{fill:url(#greenSoft);stroke:#C7E1D0;stroke-width:1}.water{fill:url(#water);opacity:.55}.label{fill:#fff;stroke:#D9D9D9;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/>
<text x="18" y="108" class="font black heavy" font-size="22">深圳自然博物馆</text><text x="18" y="132" class="font muted" font-size="13">馆内三维导览</text>
<clipPath id="clipE"><rect x="26" y="150" width="338" height="470" rx="28"/></clipPath>
<rect x="26" y="150" width="338" height="470" rx="28" fill="url(#mapBg)" stroke="#D9D9D9" filter="url(#shadow)"/>
<g clip-path="url(#clipE)" opacity="1">
<circle cx="289.64" cy="225.2" r="114.92" fill="#2C854F" opacity=".055"/>
<circle cx="93.60000000000001" cy="507.2" r="128.44" fill="#1B6EC0" opacity=".045"/>
<path d="M-14 234.6 L424 173.5" stroke="#BFD8E4" stroke-width="14" opacity=".36"/><path d="M-14 244 L424 182.9" stroke="#fff" stroke-width="6" opacity=".65"/>
<path d="M-24 563.6 L434 497.8" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-14 568.3 L424 502.5" stroke="#fff" stroke-width="6" opacity=".68"/>
<g transform="translate(32.76 168.8) scale(0.86) rotate(-18 169 197.4)" filter="url(#soft)">
<rect x="126" y="62" width="184" height="82" class="wall" transform="translate(10 14)"/><rect x="126" y="62" width="184" height="82" class="roof"/><rect x="151" y="80" width="128" height="50" class="garden"/>
<rect x="48" y="156" width="202" height="112" class="wall" transform="translate(10 14)"/><rect x="48" y="156" width="202" height="112" class="roof"/><rect x="73" y="181" width="148" height="62" fill="#FAFCFD" stroke="#E2E9ED"/>
<rect x="266" y="166" width="166" height="102" class="wall" transform="translate(10 14)"/><rect x="266" y="166" width="166" height="102" class="roof"/><rect x="292" y="186" width="112" height="62" class="garden"/>
<path d="M181 244 Q228 184 276 244 L276 426 L181 426 Z" fill="#F8FBFC" stroke="#CBD7DE" stroke-width="1.3"/><path d="M200 266 Q228 230 255 266 L255 402 L200 402 Z" fill="#EDF4F7" stroke="#D5E0E6"/>
<rect x="132" y="306" width="154" height="126" class="wall" transform="translate(10 14)"/><rect x="132" y="306" width="154" height="126" class="roof"/><rect x="158" y="330" width="104" height="78" fill="#fff" stroke="#E2E9ED"/>
<rect x="296" y="330" width="172" height="112" class="wall" transform="translate(10 14)"/><rect x="296" y="330" width="172" height="112" class="roof"/><rect x="322" y="352" width="116" height="68" class="garden"/>
<rect x="42" y="434" width="196" height="104" class="wall" transform="translate(10 14)"/><rect x="42" y="434" width="196" height="104" class="roof"/><rect x="66" y="456" width="148" height="56" fill="#fff" stroke="#E2E9ED"/>
<rect x="178" y="448" width="54" height="220" fill="#FFFFFF" stroke="#D4DEE4"/><rect x="242" y="444" width="40" height="220" fill="#FFFFFF" stroke="#D4DEE4"/>
<g stroke="#C8D5DD" stroke-width="1" opacity=".75"><path d="M190 478 h28 M190 512 h28 M190 546 h28 M190 580 h28 M254 478 h18 M254 512 h18 M254 546 h18 M254 580 h18"/></g>
</g>
<g opacity=".24" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M265.98 272.2 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M274.43 276.9 l-18 10 l20 3 l-10 15 M286.26 276.9 l8 16 l18 8"/></g></g>
<g filter="url(#soft)"><rect x="52" y="503" width="286" height="70" rx="18" fill="#fff" stroke="#D9D9D9"/><text x="195" y="530" text-anchor="middle" class="font black heavy" font-size="18">三维地图已就绪</text><text x="195" y="554" text-anchor="middle" class="font muted" font-size="12">查看展厅位置、楼层与服务设施</text></g>
<g filter="url(#tiny)"><rect x="286" y="168" width="52" height="36" rx="14" class="glass"/><text x="312" y="191" text-anchor="middle" class="font green heavy" font-size="14">1F</text><rect x="286" y="212" width="52" height="36" rx="14" class="glass"/><text x="312" y="235" text-anchor="middle" class="font text" font-size="14">⌖</text></g>
<g filter="url(#shadow)"><rect x="18" y="660" width="354" height="160" rx="24" fill="#fff" stroke="#D9D9D9"/><text x="42" y="696" class="font black heavy" font-size="21">你想先做什么？</text><rect x="42" y="718" width="140" height="54" rx="15" fill="#000"/><text x="112" y="752" text-anchor="middle" class="font lime heavy" font-size="18">开始导览</text><rect x="196" y="718" width="68" height="54" rx="15" fill="#fff" stroke="#D9D9D9"/><text x="230" y="741" text-anchor="middle" class="font green heavy" font-size="17">▶</text><text x="230" y="758" text-anchor="middle" class="font black bold" font-size="10">讲解</text><rect x="280" y="718" width="68" height="54" rx="15" fill="#fff" stroke="#D9D9D9"/><text x="314" y="741" text-anchor="middle" class="font green heavy" font-size="18">↗</text><text x="314" y="758" text-anchor="middle" class="font black bold" font-size="10">来馆</text></g>
<text x="18" y="54" class="font black heavy" font-size="34">导览</text><text x="18" y="75" class="font muted" font-size="11">极简主视觉</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

44
docs/Benchmark/generated-guide-home-5-options/README.md Normal file
View File

@@ -0,0 +1,44 @@
# H5 导览首页 5 套设计方向
本目录提供 5 套 H5 首页高保真方向稿，用于选择信息架构和首页主体验证。设计重点为：三维组件、`讲解`入口、`来馆`入口。其他功能仅作为弱辅助控件出现。
## 文件
- `00-contact-sheet.png`：5 套方案总览图。
- `01-01-map-first.png`：方案一，地图画布 + 顶部双入口。
- `02-02-immersive-rail.png`：方案二，沉浸三维 + 右侧任务轨。
- `03-03-bottom-dock.png`：方案三，三维首页 + 底部三任务 Dock。
- `04-04-poi-focus.png`：方案四，点位聚焦 + 双入口卡片。
- `05-05-ultra-minimal.png`：方案五，极简三维主视觉。
每套 PNG 均配有同名 SVG 源稿，方便后续继续调整。
## 方案说明
### 方案一：地图画布 + 顶部双入口
三维地图占据主屏，`讲解`和`来馆`作为顶部轻量胶囊入口。适合保留传统导览首页结构，同时弱化其他功能。
### 方案二：沉浸三维 + 右侧任务轨
三维地图更沉浸，`讲解`和`来馆`在右侧任务轨中出现，强调地图操作感。适合希望首页更像地图工具的方向。
### 方案三：三维首页 + 底部三任务 Dock
三维地图在上，底部集中承接 `讲解`、`来馆`、`开始导览`。适合把首页主任务集中到下方操作区的方向。
### 方案四：点位聚焦 + 双入口卡片
默认突出一个展厅点位，底部提供 `讲解`和`来馆`两个卡片入口。适合首页默认带展厅推荐点位或当前位置点位的方向。
### 方案五：极简三维主视觉
最大幅度减少功能组件，只保留三维地图主视觉和底部核心任务选择。适合追求首页干净、低学习成本的方向。
## 需要确认
- 首页是否需要默认展示搜索入口，还是仅保留三维地图和任务入口。
- `讲解`入口是进入讲解列表，还是进入当前展厅讲解。
- `来馆`入口是外部导航、路线说明，还是馆外地图页。
- `开始导览`是否仍作为首页主按钮保留，或被三维地图点击/点位点击替代。
- 楼层、定位、图例、设施筛选是否必须首屏可见，还是可以收纳到地图工具菜单中。