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

140
docs/Benchmark/home-redesign-options/README.md Normal file
View File

@@ -0,0 +1,140 @@
# 导览首页精简版 5 套方案
本目录提供 5 套移动端 H5 导览首页设计稿，画布比例为 390x844。设计目标是把首页收敛为三个核心模块：
- 三维组件：馆内 3D 或馆外地图主区域。
- 讲解入口：进入展厅 / 展品讲解内容。
- 来馆入口：进入到馆 / 馆外参考位置。
这些图片只表达首页布局、入口层级和交互逻辑，不承诺真实馆内导航、路线规划或到达判断能力。
## 输出文件
- `option-1.png`：地图画布 + 顶部双入口
- `option-2.png`：沉浸三维 + 右侧任务轨
- `option-3.png`：三维首页 + 底部任务面板
- `option-4.png`：馆内三维 / 来馆并列预览
- `option-5.png`：讲解优先浮层
- `interaction-middle-map-operating.png`：从首页进入点位搜索前的三维地图操作态
- `options-overview.png`：5 套方案总览，便于快速横向比较
## 生成说明
已按 `imagegen` skill 先读取项目材料和设计约束，并使用默认内置 `image_gen` 模式生成 5 张高保真 PNG。生成后的图片已从 `$CODEX_HOME/generated_images/...` 复制到本目录，文件名为 `option-1.png` 至 `option-5.png`。未修改 `src` 下业务代码。
## 现有首页功能点对照
从 `src/pages/index/index.vue` 和 `GuideMapShell.vue` 读取到的现有能力包括：
- `GuideMapShell` 承载馆内 3D、馆外地图、搜索、模式切换、楼层、缩放、更多入口、POI 点击等。
- 首页当前有 `guide` / `explain` 顶部 tab。
- `来馆` 当前在更多菜单和 `OutdoorNavigationPanel` 中承接。
- POI 卡片包含查看位置、从这里出发、去这里、相关讲解。
- 路线规划面板已有起终点、交换、路线预览、模拟导览等结构，但正式馆内路线能力仍受门禁约束。
本次 5 套方案的共同取舍：
- 搜索：不作为首页核心组件展示，除方案一 / 二保留极弱入口外，其余收纳或移除。
- 楼层：只保留最小当前楼层提示或收纳，不展开完整楼层列表。
- 缩放 / 更多 / 工具按钮：默认隐藏，收纳到地图菜单或地图手势中。
- POI 卡片：不作为首页默认模块，只在用户点选地图后出现。
- 路线规划：不放在首页主入口，不承诺真实导航能力。
- 顶部 tab：弱化为直接的 `讲解` 入口，而不是占用首屏的复杂导航。
## 方案对比
### 方案一：地图画布 + 顶部双入口
- 三维组件：约占屏幕 75%，从标题下方延伸到底部主按钮上方。
- 讲解入口：顶部右侧胶囊按钮。
- 来馆入口：顶部右侧胶囊按钮，与讲解并列。
- 次要功能：保留极简 `馆内3D / 馆外` 切换和当前楼层提示；搜索、缩放、更多、路线规划不展开。
- 设计意图：最接近现有首页结构，改造成本较低，用户容易理解。
- 优点：稳定、清晰、落地阻力小。
- 缺点：仍然保留了一些地图工具感，不是最极简。
### 方案二：沉浸三维 + 右侧任务轨
- 三维组件：接近全屏，地图从顶部内容区一直延伸到底部。
- 讲解入口：右侧悬浮任务轨中的上半按钮，同时顶部也有弱入口。
- 来馆入口：右侧悬浮任务轨中的下半按钮，同时顶部也有弱入口。
- 次要功能：只保留 `馆内3D / 馆外` 极简切换；搜索、楼层、缩放、更多收纳到地图菜单。
- 设计意图：让首页更像一个沉浸式三维地图工具。
- 优点：三维组件存在感最强。
- 缺点：右侧任务轨需要验证是否遮挡地图主体。
### 方案三：三维首页 + 底部任务面板
- 三维组件：约占屏幕 60%，上半屏为地图主区域。
- 讲解入口：底部任务面板中的小卡片。
- 来馆入口：底部任务面板中的小卡片。
- 次要功能：地图上只保留当前模式和楼层提示；搜索、完整楼层、更多、路线规划全部收纳。
- 设计意图：把首页决策集中到底部，适合单手操作。
- 优点：任务入口非常明确，适合普通用户。
- 缺点：三维地图占比低于方案一 / 二。
### 方案四：馆内三维 / 来馆并列预览
- 三维组件：上半屏为馆内 3D 主区域，约占屏幕 45%。
- 讲解入口：顶部文字入口 + 底部讲解卡片。
- 来馆入口：下半屏独立来馆卡片，配馆外地图预览。
- 次要功能：搜索、楼层、缩放、更多完全移除；只保留三维和来馆两个空间入口。
- 设计意图：把“馆内”和“来馆”拆成两个明确任务区。
- 优点：来馆入口最突出，适合到馆前用户。
- 缺点：三维组件主导性弱一些。
### 方案五：讲解优先浮层
- 三维组件：作为全屏背景主视觉，承托首页空间感。
- 讲解入口：顶部前置大卡片中的主按钮。
- 来馆入口：顶部前置大卡片中的次按钮。
- 次要功能：搜索、楼层、路线规划明确收纳，不在首页展开。
- 设计意图：适合把首页定位为内容导览入口，而三维地图作为空间背景。
- 优点：首页最简洁，讲解入口最强。
- 缺点：如果产品希望三维地图可操作感更强，这套会偏内容入口。
## 推荐排序
1. 方案一：推荐作为第一落地方向。它保留三维地图主导地位，同时把 `讲解` 和 `来馆` 清晰前置，和现有组件结构最容易对接。
2. 方案三：适合强调首页任务选择和单手操作，产品表达最稳。
3. 方案二：视觉冲击和三维沉浸感最好，但需要进一步验证遮挡和触控区域。
4. 方案四：适合来馆任务权重很高的版本，但首页会更像入口聚合页。
5. 方案五：最极简，适合内容讲解优先策略；若导览首页必须突出地图操作，则优先级较低。
最终选择仍建议由产品确认首页主任务权重：如果“看地图”优先，选方案一或二；如果“选任务”优先，选方案三；如果“到馆”优先，选方案四；如果“听讲解”优先，选方案五。
## 首页到点位搜索的中间操作页
`interaction-middle-map-operating.png` 用于补全“首页沉浸态”和“点位搜索页”之间的交互断点。
### 页面定位
这个页面不是首页，也不是点位搜索页，而是用户点击首页 `开始浏览` / `进入三维` 后进入的三维地图操作态。它的作用是：
- 让三维地图从展示态进入可操作态。
- 允许用户拖动、缩放、点选地图。
- 通过底部 `查找点位` 按钮进入点位搜索页。
- 通过 `设施` / `楼层` 进入轻量筛选，不在首页直接堆功能。
### 推荐交互链路
```text
导览首页
├─ 点击「讲解」→ 讲解内容入口
├─ 点击「来馆」→ 来馆 / 馆外参考入口
└─ 点击「开始浏览」或「进入三维」
→ interaction-middle-map-operating.png（三维地图操作态）
├─ 拖动 / 缩放地图 → 浏览空间
├─ 点击地图点位 → 展示点位预览卡
├─ 点击「查找点位」→ 点位搜索页
├─ 点击「设施」→ 展开服务设施筛选
└─ 点击「楼层」→ 展开楼层选择
```
### 与点位搜索页的关系
点位搜索页承接的是中间页底部 `查找点位` 的结果。进入点位搜索后，用户可以搜索地点、点击服务台 / 电梯 / 扶梯 / 洗手间 / 母婴室 / 出入口等分类，或切换楼层查看点位列表。点击任一点位后，建议返回三维地图操作态，并在地图上聚焦该点位。
### 能力边界
中间页只表达“浏览地图、查看位置、查找点位”的能力，不表达正式路线规划或实时导航。点位卡建议使用 `查看详情`、`查看位置`、`相关讲解` 等文案，避免使用 `开始导航`。

BIN
docs/Benchmark/home-redesign-options/interaction-middle-map-operating.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
docs/Benchmark/home-redesign-options/option-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

40
docs/Benchmark/home-redesign-options/option-1.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="0.42" stop-color="#F1F6F8"/><stop offset="1" stop-color="#E2ECF0"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="0.66" stop-color="#EFF4F6"/><stop offset="1" stop-color="#DCE7EC"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#D3DEE4"/><stop offset="1" stop-color="#AEBEC8"/></linearGradient>
<linearGradient id="garden" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#E8F4EB"/><stop offset="1" stop-color="#CDE8D7"/></linearGradient>
<linearGradient id="outdoor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F5F8F2"/><stop offset="1" stop-color="#E5EEE7"/></linearGradient>
<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>
<radialGradient id="pinGlow" cx="50%" cy="60%" r="60%"><stop offset="0" stop-color="#2C854F" stop-opacity=".24"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#696962}.disabled{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;stroke:#E5E5E5;stroke-width:1}.glass{fill:#fff;fill-opacity:.84;stroke:#E5E5E5;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.66;stroke:#AEBEC8;stroke-width:.7}.garden{fill:url(#garden);stroke:#C7E1D0;stroke-width:1}.label{fill:#fff;stroke:#DEDEDE;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}.title{font-size:34px;font-weight:800}.h2{font-size:22px;font-weight:800}.h3{font-size:18px;font-weight:800}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/><text x="18" y="58" class="font black title">导览</text><text x="18" y="78" class="font disabled" font-size="11">三维地图工作台</text>
<g filter="url(#soft)"><rect x="214" y="24" width="70" height="40" rx="20" fill="#FFFFFF" stroke="#E5E5E5"/><text x="249" y="50" text-anchor="middle" class="font green heavy" font-size="16">▶ 讲解</text></g><g filter="url(#soft)"><rect x="296" y="24" width="72" height="40" rx="20" fill="#FFFFFF" stroke="#E5E5E5"/><text x="332" y="50" text-anchor="middle" class="font green heavy" font-size="16">↗ 来馆</text></g>
<clipPath id="c1"><rect x="14" y="96" width="362" height="636" rx="22"/></clipPath>
<rect x="14" y="96" width="362" height="636" rx="22" fill="url(#mapBg)" stroke="#E5E5E5" filter="url(#shadow)"/>
<g clip-path="url(#c1)">
<circle cx="296.36" cy="197.76" r="115.84" fill="#2C854F" opacity=".055"/><circle cx="79.16" cy="592.08" r="130.32" fill="#1B6EC0" opacity=".045"/>
<path d="M-26 223.2 L426 140.52" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-16 235.92 L418 153.24" stroke="#fff" stroke-width="6" opacity=".72"/>
<path d="M-26 642.96 L426 553.92" stroke="#BFD8E4" stroke-width="14" opacity=".32"/><path d="M-16 655.68 L418 566.64" stroke="#fff" stroke-width="6" opacity=".72"/>
<g transform="translate(24.86 127.8) scale(0.92) rotate(-18 190 300)" 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=".72"><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=".22" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M263.78 274.08000000000004 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M274.64 286.79999999999995 l-16 9 l18 3 l-8 13"/></g>
<g filter="url(#soft)"><ellipse cx="252.92000000000002" cy="318.79999999999995" rx="30" ry="13" fill="url(#pinGlow)"/><path d="M252.92000000000002 286.79999999999995 C234.92000000000002 286.79999999999995 222.92000000000002 299.79999999999995 222.92000000000002 316.79999999999995 C222.92000000000002 340.79999999999995 252.92000000000002 361.79999999999995 252.92000000000002 361.79999999999995 C252.92000000000002 361.79999999999995 282.92 340.79999999999995 282.92 316.79999999999995 C282.92 299.79999999999995 270.92 286.79999999999995 252.92000000000002 286.79999999999995 Z" fill="#2C854F"/><circle cx="252.92000000000002" cy="315.79999999999995" r="9" fill="#fff"/></g>
<g filter="url(#tiny)" class="font"><rect x="187.76" y="369.48" width="124" height="50" rx="12" class="label"/><text x="249.76" y="391.48" text-anchor="middle" class="black bold" font-size="14">恐龙化石展厅</text><text x="249.76" y="408.48" text-anchor="middle" class="black" font-size="12">1F-02</text><rect x="57.44" y="267.72" width="112" height="46" rx="11" class="label"/><text x="113.44" y="286.72" text-anchor="middle" class="black" font-size="12">地球演化厅</text><text x="113.44" y="302.72" text-anchor="middle" class="black" font-size="11">1F-03</text></g>
</g>
<g filter="url(#tiny)"><rect x="28" y="112" width="58" height="30" rx="15" fill="#000" stroke="#E5E5E5"/><text x="57" y="132" text-anchor="middle" class="font lime bold" font-size="12">馆内3D</text></g><g filter="url(#tiny)"><rect x="92" y="112" width="42" height="30" rx="15" fill="#fff" stroke="#E5E5E5"/><text x="113" y="132" text-anchor="middle" class="font muted bold" font-size="12">馆外</text></g>
<g filter="url(#tiny)"><rect x="322" y="305" width="44" height="94" rx="14" class="glass"/><text x="344" y="336" text-anchor="middle" class="font text" font-size="14">2F</text><rect x="322" y="350" width="44" height="42" rx="9" fill="#000"/><text x="344" y="377" text-anchor="middle" class="font lime heavy" font-size="17">1F</text></g>
<g filter="url(#soft)"><rect x="24" y="762" width="342" height="40" rx="20" fill="#000000" stroke="#000000"/><text x="195" y="788" text-anchor="middle" class="font lime heavy" font-size="16">进入三维导览</text></g><rect x="142" y="826" width="106" height="4" rx="2" fill="#000" opacity=".12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
docs/Benchmark/home-redesign-options/option-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

42
docs/Benchmark/home-redesign-options/option-2.svg Normal file
View File

@@ -0,0 +1,42 @@
<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="0.42" stop-color="#F1F6F8"/><stop offset="1" stop-color="#E2ECF0"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="0.66" stop-color="#EFF4F6"/><stop offset="1" stop-color="#DCE7EC"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#D3DEE4"/><stop offset="1" stop-color="#AEBEC8"/></linearGradient>
<linearGradient id="garden" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#E8F4EB"/><stop offset="1" stop-color="#CDE8D7"/></linearGradient>
<linearGradient id="outdoor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F5F8F2"/><stop offset="1" stop-color="#E5EEE7"/></linearGradient>
<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>
<radialGradient id="pinGlow" cx="50%" cy="60%" r="60%"><stop offset="0" stop-color="#2C854F" stop-opacity=".24"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#696962}.disabled{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;stroke:#E5E5E5;stroke-width:1}.glass{fill:#fff;fill-opacity:.84;stroke:#E5E5E5;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.66;stroke:#AEBEC8;stroke-width:.7}.garden{fill:url(#garden);stroke:#C7E1D0;stroke-width:1}.label{fill:#fff;stroke:#DEDEDE;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}.title{font-size:34px;font-weight:800}.h2{font-size:22px;font-weight:800}.h3{font-size:18px;font-weight:800}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/><clipPath id="c2"><rect x="0" y="84" width="390" height="760" rx="22"/></clipPath>
<rect x="0" y="84" width="390" height="760" rx="22" fill="url(#mapBg)" stroke="#E5E5E5" filter="url(#shadow)"/>
<g clip-path="url(#c2)">
<circle cx="304.2" cy="205.60000000000002" r="124.8" fill="#2C854F" opacity=".055"/><circle cx="70.2" cy="676.8000000000001" r="140.4" fill="#1B6EC0" opacity=".045"/>
<path d="M-40 236 L440 137.2" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-30 251.2 L432 152.39999999999998" stroke="#fff" stroke-width="6" opacity=".72"/>
<path d="M-40 737.6 L440 631.1999999999999" stroke="#BFD8E4" stroke-width="14" opacity=".32"/><path d="M-30 752.8 L432 646.4" stroke="#fff" stroke-width="6" opacity=".72"/>
<g transform="translate(11.7 122) scale(1.02) rotate(-18 190 300)" 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=".72"><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=".22" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M269.09999999999997 296.8 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M280.8 312 l-16 9 l18 3 l-8 13"/></g>
<g filter="url(#soft)"><ellipse cx="257.40000000000003" cy="344" rx="30" ry="13" fill="url(#pinGlow)"/><path d="M257.40000000000003 312 C239.40000000000003 312 227.40000000000003 325 227.40000000000003 342 C227.40000000000003 366 257.40000000000003 387 257.40000000000003 387 C257.40000000000003 387 287.40000000000003 366 287.40000000000003 342 C287.40000000000003 325 275.40000000000003 312 257.40000000000003 312 Z" fill="#2C854F"/><circle cx="257.40000000000003" cy="341" r="9" fill="#fff"/></g>
<g filter="url(#tiny)" class="font"><rect x="187.2" y="410.8" width="124" height="50" rx="12" class="label"/><text x="249.2" y="432.8" text-anchor="middle" class="black bold" font-size="14">恐龙化石展厅</text><text x="249.2" y="449.8" text-anchor="middle" class="black" font-size="12">1F-02</text><rect x="46.8" y="289.20000000000005" width="112" height="46" rx="11" class="label"/><text x="102.8" y="308.20000000000005" text-anchor="middle" class="black" font-size="12">地球演化厅</text><text x="102.8" y="324.20000000000005" text-anchor="middle" class="black" font-size="11">1F-03</text></g>
</g>
<rect x="0" y="84" width="390" height="760" fill="none" stroke="#E5E5E5"/>
<text x="18" y="56" class="font black title">导览</text><text x="18" y="76" class="font disabled" font-size="11">沉浸三维组件</text>
<g filter="url(#soft)"><rect x="238" y="22" width="132" height="44" rx="22" fill="#FFFFFF" stroke="#E5E5E5"/><text x="270" y="50" text-anchor="middle" class="font green heavy" font-size="15">讲解</text><line x1="304" y1="32" x2="304" y2="56" stroke="#E5E5E5"/><text x="337" y="50" text-anchor="middle" class="font green heavy" font-size="15">来馆</text></g>
<g filter="url(#soft)"><rect x="306" y="164" width="58" height="150" rx="18" fill="#fff" stroke="#E5E5E5"/><text x="335" y="198" text-anchor="middle" class="font green heavy" font-size="20">▶</text><text x="335" y="217" text-anchor="middle" class="font black bold" font-size="11">讲解</text><line x1="318" y1="238" x2="352" y2="238" stroke="#E5E5E5"/><text x="335" y="270" text-anchor="middle" class="font green heavy" font-size="20">↗</text><text x="335" y="289" text-anchor="middle" class="font black bold" font-size="11">来馆</text></g>
<g filter="url(#tiny)"><rect x="24" y="110" width="58" height="30" rx="15" fill="#000" stroke="#E5E5E5"/><text x="53" y="130" text-anchor="middle" class="font lime bold" font-size="12">馆内3D</text></g><g filter="url(#tiny)"><rect x="90" y="110" width="42" height="30" rx="15" fill="#fff" stroke="#E5E5E5"/><text x="111" y="130" text-anchor="middle" class="font muted bold" font-size="12">馆外</text></g>
<g filter="url(#tiny)"><rect x="28" y="704" width="146" height="30" rx="15" class="glass"/><text x="101" y="724" text-anchor="middle" class="font muted" font-size="12">次要功能收纳至地图菜单</text></g>
<g filter="url(#soft)"><rect x="24" y="768" width="342" height="40" rx="20" fill="#000000" stroke="#000000"/><text x="195" y="794" text-anchor="middle" class="font lime heavy" font-size="16">开始浏览</text></g><rect x="142" y="826" width="106" height="4" rx="2" fill="#000" opacity=".12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
docs/Benchmark/home-redesign-options/option-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

40
docs/Benchmark/home-redesign-options/option-3.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="0.42" stop-color="#F1F6F8"/><stop offset="1" stop-color="#E2ECF0"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="0.66" stop-color="#EFF4F6"/><stop offset="1" stop-color="#DCE7EC"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#D3DEE4"/><stop offset="1" stop-color="#AEBEC8"/></linearGradient>
<linearGradient id="garden" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#E8F4EB"/><stop offset="1" stop-color="#CDE8D7"/></linearGradient>
<linearGradient id="outdoor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F5F8F2"/><stop offset="1" stop-color="#E5EEE7"/></linearGradient>
<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>
<radialGradient id="pinGlow" cx="50%" cy="60%" r="60%"><stop offset="0" stop-color="#2C854F" stop-opacity=".24"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#696962}.disabled{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;stroke:#E5E5E5;stroke-width:1}.glass{fill:#fff;fill-opacity:.84;stroke:#E5E5E5;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.66;stroke:#AEBEC8;stroke-width:.7}.garden{fill:url(#garden);stroke:#C7E1D0;stroke-width:1}.label{fill:#fff;stroke:#DEDEDE;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}.title{font-size:34px;font-weight:800}.h2{font-size:22px;font-weight:800}.h3{font-size:18px;font-weight:800}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/><text x="18" y="58" class="font black title">导览</text><text x="18" y="78" class="font disabled" font-size="11">任务入口集中</text>
<clipPath id="c3"><rect x="14" y="104" width="362" height="506" rx="22"/></clipPath>
<rect x="14" y="104" width="362" height="506" rx="22" fill="url(#mapBg)" stroke="#E5E5E5" filter="url(#shadow)"/>
<g clip-path="url(#c3)">
<circle cx="296.36" cy="184.96" r="115.84" fill="#2C854F" opacity=".055"/><circle cx="79.16" cy="498.68" r="130.32" fill="#1B6EC0" opacity=".045"/>
<path d="M-26 205.2 L426 139.42000000000002" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-16 215.32 L418 149.54" stroke="#fff" stroke-width="6" opacity=".72"/>
<path d="M-26 539.16 L426 468.32" stroke="#BFD8E4" stroke-width="14" opacity=".32"/><path d="M-16 549.28 L418 478.44" stroke="#fff" stroke-width="6" opacity=".72"/>
<g transform="translate(24.86 129.3) scale(0.82) rotate(-18 190 300)" 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=".72"><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=".22" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M263.78 245.68 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M274.64 255.79999999999998 l-16 9 l18 3 l-8 13"/></g>
<g filter="url(#soft)"><ellipse cx="252.92000000000002" cy="287.79999999999995" rx="30" ry="13" fill="url(#pinGlow)"/><path d="M252.92000000000002 255.79999999999998 C234.92000000000002 255.79999999999998 222.92000000000002 268.79999999999995 222.92000000000002 285.79999999999995 C222.92000000000002 309.79999999999995 252.92000000000002 330.79999999999995 252.92000000000002 330.79999999999995 C252.92000000000002 330.79999999999995 282.92 309.79999999999995 282.92 285.79999999999995 C282.92 268.79999999999995 270.92 255.79999999999998 252.92000000000002 255.79999999999998 Z" fill="#2C854F"/><circle cx="252.92000000000002" cy="284.79999999999995" r="9" fill="#fff"/></g>
<g filter="url(#tiny)" class="font"><rect x="187.76" y="321.58" width="124" height="50" rx="12" class="label"/><text x="249.76" y="343.58" text-anchor="middle" class="black bold" font-size="14">恐龙化石展厅</text><text x="249.76" y="360.58" text-anchor="middle" class="black" font-size="12">1F-02</text><rect x="57.44" y="240.62" width="112" height="46" rx="11" class="label"/><text x="113.44" y="259.62" text-anchor="middle" class="black" font-size="12">地球演化厅</text><text x="113.44" y="275.62" text-anchor="middle" class="black" font-size="11">1F-03</text></g>
</g>
<g filter="url(#tiny)"><rect x="28" y="120" width="42" height="30" rx="15" fill="#000" stroke="#E5E5E5"/><text x="49" y="140" text-anchor="middle" class="font lime bold" font-size="12">3D</text></g><g filter="url(#tiny)"><rect x="78" y="120" width="42" height="30" rx="15" fill="#fff" stroke="#E5E5E5"/><text x="99" y="140" text-anchor="middle" class="font muted bold" font-size="12">馆外</text></g>
<g filter="url(#tiny)"><rect x="322" y="278" width="44" height="42" rx="12" class="glass"/><text x="344" y="305" text-anchor="middle" class="font text bold" font-size="14">1F</text></g>
<g filter="url(#shadow)"><rect x="18" y="636" width="354" height="184" rx="24" fill="#FFFFFF" stroke="#E5E5E5"/><text x="42" y="674" class="font black heavy" font-size="22">你想先做什么？</text><text x="42" y="700" class="font muted" font-size="13">三维地图作为首页主体，入口集中到底部</text><rect x="42" y="726" width="140" height="54" rx="15" fill="#000"/><text x="112" y="760" text-anchor="middle" class="font lime heavy" font-size="18">浏览三维</text><rect x="198" y="726" width="68" height="54" rx="15" fill="#fff" stroke="#E5E5E5"/><text x="232" y="748" text-anchor="middle" class="font green heavy" font-size="17">▶</text><text x="232" y="765" text-anchor="middle" class="font black bold" font-size="10">讲解</text><rect x="280" y="726" width="68" height="54" rx="15" fill="#fff" stroke="#E5E5E5"/><text x="314" y="748" text-anchor="middle" class="font green heavy" font-size="18">↗</text><text x="314" y="765" text-anchor="middle" class="font black bold" font-size="10">来馆</text></g>
<rect x="142" y="826" width="106" height="4" rx="2" fill="#000" opacity=".12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
docs/Benchmark/home-redesign-options/option-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

52
docs/Benchmark/home-redesign-options/option-4.svg Normal file
View File

@@ -0,0 +1,52 @@
<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="0.42" stop-color="#F1F6F8"/><stop offset="1" stop-color="#E2ECF0"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="0.66" stop-color="#EFF4F6"/><stop offset="1" stop-color="#DCE7EC"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#D3DEE4"/><stop offset="1" stop-color="#AEBEC8"/></linearGradient>
<linearGradient id="garden" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#E8F4EB"/><stop offset="1" stop-color="#CDE8D7"/></linearGradient>
<linearGradient id="outdoor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F5F8F2"/><stop offset="1" stop-color="#E5EEE7"/></linearGradient>
<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>
<radialGradient id="pinGlow" cx="50%" cy="60%" r="60%"><stop offset="0" stop-color="#2C854F" stop-opacity=".24"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#696962}.disabled{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;stroke:#E5E5E5;stroke-width:1}.glass{fill:#fff;fill-opacity:.84;stroke:#E5E5E5;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.66;stroke:#AEBEC8;stroke-width:.7}.garden{fill:url(#garden);stroke:#C7E1D0;stroke-width:1}.label{fill:#fff;stroke:#DEDEDE;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}.title{font-size:34px;font-weight:800}.h2{font-size:22px;font-weight:800}.h3{font-size:18px;font-weight:800}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/><text x="18" y="58" class="font black title">导览</text><text x="18" y="78" class="font disabled" font-size="11">馆内 / 来馆并列预览</text>
<text x="292" y="51" class="font green heavy" font-size="16">讲解 ›</text>
<clipPath id="c4a"><rect x="18" y="102" width="354" height="380" rx="22"/></clipPath>
<rect x="18" y="102" width="354" height="380" rx="22" fill="url(#mapBg)" stroke="#E5E5E5" filter="url(#shadow)"/>
<g clip-path="url(#c4a)">
<circle cx="294.12" cy="162.8" r="113.28" fill="#2C854F" opacity=".055"/><circle cx="81.72" cy="398.40000000000003" r="127.44" fill="#1B6EC0" opacity=".045"/>
<path d="M-22 178 L422 128.6" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-12 185.6 L414 136.2" stroke="#fff" stroke-width="6" opacity=".72"/>
<path d="M-22 428.8 L422 375.59999999999997" stroke="#BFD8E4" stroke-width="14" opacity=".32"/><path d="M-12 436.4 L414 383.2" stroke="#fff" stroke-width="6" opacity=".72"/>
<g transform="translate(28.619999999999997 121) scale(0.68) rotate(-18 190 300)" 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=".72"><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=".22" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M262.26 208.4 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M272.88 216 l-16 9 l18 3 l-8 13"/></g>
<g filter="url(#soft)"><ellipse cx="251.64000000000001" cy="247.46666666666667" rx="29.5" ry="12.783333333333333" fill="url(#pinGlow)"/><path d="M251.64000000000001 216 C233.94000000000003 216 222.14000000000001 228.78333333333333 222.14000000000001 245.5 C222.14000000000001 269.1 251.64000000000001 289.75 251.64000000000001 289.75 C251.64000000000001 289.75 281.14 269.1 281.14 245.5 C281.14 228.78333333333333 269.34000000000003 216 251.64000000000001 216 Z" fill="#2C854F"/><circle cx="251.64000000000001" cy="244.51666666666665" r="8.85" fill="#fff"/></g>
</g>
<g filter="url(#soft)"><rect x="42" y="390" width="154" height="58" rx="16" fill="#fff" stroke="#E5E5E5"/><text x="62" y="416" class="font black heavy" font-size="17">馆内三维</text><text x="62" y="436" class="font muted" font-size="12">馆内地图主区域</text><rect x="226" y="398" width="112" height="42" rx="12" fill="#000"/><text x="282" y="425" text-anchor="middle" class="font lime heavy" font-size="15">进入三维</text></g>
<clipPath id="c4b"><rect x="18" y="514" width="168" height="190" rx="18"/></clipPath>
<rect x="18" y="514" width="168" height="190" rx="18" fill="url(#outdoor)" stroke="#E5E5E5" filter="url(#shadow)"/>
<g clip-path="url(#c4b)">
<path d="M-2 559.6 C54.96 548.2 78.47999999999999 578.6 226 563.4" fill="none" stroke="#D8DED8" stroke-width="30"/><path d="M-2 559.6 C54.96 548.2 78.47999999999999 578.6 226 563.4" fill="none" stroke="#FFFFFF" stroke-width="12"/>
<path d="M34.8 724 C58.32 650.8 105.36 643.2 135.6 494" fill="none" stroke="#D8DED8" stroke-width="32"/><path d="M34.8 724 C58.32 650.8 105.36 643.2 135.6 494" fill="none" stroke="#fff" stroke-width="12"/>
<rect x="51.6" y="571" width="77.28" height="57" rx="10" fill="#FFFFFF" stroke="#D3DCD5" transform="rotate(-10 90.24 599.5)"/>
<rect x="63.36" y="582.4" width="50.4" height="30.400000000000002" rx="6" fill="#E8F4EB" stroke="#C7E1D0" transform="rotate(-10 88.56 597.6)"/>
<circle cx="60" cy="555.8" r="18" fill="#CFE3D5"/><circle cx="149.04" cy="647" r="24" fill="#DCEDE2"/><circle cx="41.52" cy="650.8" r="30" fill="#DCEDE2"/>
<g filter="url(#soft)"><ellipse cx="115.44" cy="620.04" rx="24.599999999999998" ry="10.66" fill="url(#pinGlow)"/><path d="M115.44 593.8 C100.67999999999999 593.8 90.84 604.4599999999999 90.84 618.4 C90.84 638.0799999999999 115.44 655.3 115.44 655.3 C115.44 655.3 140.04 638.0799999999999 140.04 618.4 C140.04 604.4599999999999 130.2 593.8 115.44 593.8 Z" fill="#2C854F"/><circle cx="115.44" cy="617.5799999999999" r="7.38" fill="#fff"/></g>
<g filter="url(#tiny)"><rect x="96.96" y="628" width="126" height="44" rx="12" class="label"/><text x="159.95999999999998" y="647" text-anchor="middle" class="font black bold" font-size="13">博物馆主入口</text><text x="159.95999999999998" y="662" text-anchor="middle" class="font muted" font-size="11">馆外参考位置</text></g>
</g>
<g filter="url(#shadow)"><rect x="204" y="514" width="168" height="190" rx="18" fill="#fff" stroke="#E5E5E5"/><text x="226" y="552" class="font black heavy" font-size="22">来馆</text><text x="226" y="579" class="font muted" font-size="13">查看到馆入口与馆外参考位置</text><rect x="226" y="634" width="124" height="42" rx="12" fill="#000"/><text x="288" y="661" text-anchor="middle" class="font lime heavy" font-size="15">打开来馆</text></g>
<g filter="url(#soft)"><rect x="18" y="728" width="354" height="76" rx="18" fill="#fff" stroke="#E5E5E5"/><text x="42" y="758" class="font green heavy" font-size="18">▶ 讲解</text><text x="42" y="780" class="font muted" font-size="12">从展厅内容进入音频讲解</text><text x="328" y="770" text-anchor="middle" class="font green heavy" font-size="24">›</text></g>
<rect x="142" y="826" width="106" height="4" rx="2" fill="#000" opacity=".12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
docs/Benchmark/home-redesign-options/option-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

41
docs/Benchmark/home-redesign-options/option-5.svg Normal file
View File

@@ -0,0 +1,41 @@
<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="0.42" stop-color="#F1F6F8"/><stop offset="1" stop-color="#E2ECF0"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="0.66" stop-color="#EFF4F6"/><stop offset="1" stop-color="#DCE7EC"/></linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#D3DEE4"/><stop offset="1" stop-color="#AEBEC8"/></linearGradient>
<linearGradient id="garden" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#E8F4EB"/><stop offset="1" stop-color="#CDE8D7"/></linearGradient>
<linearGradient id="outdoor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F5F8F2"/><stop offset="1" stop-color="#E5EEE7"/></linearGradient>
<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>
<radialGradient id="pinGlow" cx="50%" cy="60%" r="60%"><stop offset="0" stop-color="#2C854F" stop-opacity=".24"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/></radialGradient>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#696962}.disabled{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#fff;stroke:#E5E5E5;stroke-width:1}.glass{fill:#fff;fill-opacity:.84;stroke:#E5E5E5;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.2}.wall{fill:url(#wall);opacity:.66;stroke:#AEBEC8;stroke-width:.7}.garden{fill:url(#garden);stroke:#C7E1D0;stroke-width:1}.label{fill:#fff;stroke:#DEDEDE;stroke-width:1}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}.title{font-size:34px;font-weight:800}.h2{font-size:22px;font-weight:800}.h3{font-size:18px;font-weight:800}
</style>
</defs><rect width="390" height="844" fill="url(#bg)"/><clipPath id="c5"><rect x="14" y="92" width="362" height="632" rx="22"/></clipPath>
<rect x="14" y="92" width="362" height="632" rx="22" fill="url(#mapBg)" stroke="#E5E5E5" filter="url(#shadow)"/>
<g clip-path="url(#c5)">
<circle cx="296.36" cy="193.12" r="115.84" fill="#2C854F" opacity=".055"/><circle cx="79.16" cy="584.96" r="130.32" fill="#1B6EC0" opacity=".045"/>
<path d="M-26 218.4 L426 136.24" stroke="#BFD8E4" stroke-width="14" opacity=".34"/><path d="M-16 231.04 L418 148.88" stroke="#fff" stroke-width="6" opacity=".72"/>
<path d="M-26 635.52 L426 547.04" stroke="#BFD8E4" stroke-width="14" opacity=".32"/><path d="M-16 648.16 L418 559.6800000000001" stroke="#fff" stroke-width="6" opacity=".72"/>
<g transform="translate(24.86 123.6) scale(0.95) rotate(-18 190 300)" 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=".72"><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=".22" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M263.78 268.96000000000004 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/><path d="M274.64 281.6 l-16 9 l18 3 l-8 13"/></g>
<g filter="url(#soft)"><ellipse cx="252.92000000000002" cy="313.6" rx="30" ry="13" fill="url(#pinGlow)"/><path d="M252.92000000000002 281.6 C234.92000000000002 281.6 222.92000000000002 294.6 222.92000000000002 311.6 C222.92000000000002 335.6 252.92000000000002 356.6 252.92000000000002 356.6 C252.92000000000002 356.6 282.92 335.6 282.92 311.6 C282.92 294.6 270.92 281.6 252.92000000000002 281.6 Z" fill="#2C854F"/><circle cx="252.92000000000002" cy="310.6" r="9" fill="#fff"/></g>
</g>
<rect x="14" y="92" width="362" height="632" rx="22" fill="#000" opacity=".08"/>
<text x="18" y="58" class="font black title">导览</text><text x="18" y="78" class="font disabled" font-size="11">讲解优先入口</text>
<g filter="url(#shadow)"><rect x="28" y="112" width="334" height="134" rx="22" fill="#FFFFFF" stroke="#E5E5E5"/><text x="52" y="152" class="font black heavy" font-size="23">先听讲解，或直接看地图</text><text x="52" y="180" class="font muted" font-size="13">首页只保留讲解、来馆与三维组件</text><rect x="52" y="200" width="132" height="38" rx="12" fill="#000"/><text x="118" y="225" text-anchor="middle" class="font lime heavy" font-size="16">进入讲解</text><rect x="198" y="200" width="124" height="38" rx="12" fill="#fff" stroke="#000"/><text x="260" y="225" text-anchor="middle" class="font black heavy" font-size="16">查看来馆</text></g>
<g filter="url(#soft)"><rect x="42" y="582" width="306" height="76" rx="18" fill="#fff" stroke="#E5E5E5"/><text x="66" y="614" class="font black heavy" font-size="18">三维地图组件</text><text x="66" y="637" class="font muted" font-size="12">轻触地图查看馆内 / 馆外空间</text><text x="318" y="627" text-anchor="middle" class="font green heavy" font-size="28">›</text></g>
<g filter="url(#tiny)"><rect x="28" y="738" width="334" height="46" rx="15" fill="#fff" fill-opacity=".9" stroke="#E5E5E5"/><text x="195" y="767" text-anchor="middle" class="font muted" font-size="12">搜索、楼层、路线规划暂收纳，不在首页展开</text></g>
<rect x="142" y="826" width="106" height="4" rx="2" fill="#000" opacity=".12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
docs/Benchmark/home-redesign-options/options-overview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1021 KiB