From db7a14329f7fc5d397841116ca37132d05011a13 Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Fri, 3 Jul 2026 02:31:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E8=AE=B2=E8=A7=A3=E4=B8=9A=E5=8A=A1?=
 =?UTF-8?q?=E5=8D=95=E5=85=83=E6=8E=A5=E5=85=A5=E9=A2=84=E8=A7=88=E5=B0=81?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/copy-h5-nav-assets.cjs                |   2 +
 scripts/generate-explain-unit-previews.cjs    | 173 ++++++++++++++++++
 src/components/explain/ExplainHallSelect.vue  |  45 +++--
 src/data/adapters/guideDataAdapter.ts         |   4 +
 src/domain/museum.ts                          |   1 +
 src/pages/explain/list.vue                    |   1 +
 src/pages/index/index.vue                     |   1 +
 src/utils/explainUnitPreviews.ts              |  46 +++++
 .../unit-previews/2060939176503275521.svg     |  27 +++
 .../unit-previews/2060939176637493249.svg     |  27 +++
 .../unit-previews/2060939176767516674.svg     |  28 +++
 .../unit-previews/2060939176897540098.svg     |  27 +++
 .../unit-previews/2060939177027563521.svg     |  27 +++
 .../unit-previews/7467940240901013505.svg     |  28 +++
 .../unit-previews/7467940240901013506.svg     |  28 +++
 .../unit-previews/7467940240901013507.svg     |  27 +++
 .../unit-previews/7467940240901013508.svg     |  27 +++
 .../unit-previews/7467940240901013509.svg     |  27 +++
 .../unit-previews/7467940240901013510.svg     |  27 +++
 .../unit-previews/7467940240901013511.svg     |  27 +++
 .../unit-previews/7467940240901013512.svg     |  27 +++
 .../unit-previews/7467940240901013513.svg     |  28 +++
 .../unit-previews/7467940240901013514.svg     |  28 +++
 .../unit-previews/7467940240901013515.svg     |  28 +++
 .../unit-previews/7467940240901013516.svg     |  28 +++
 .../unit-previews/7467940240901013517.svg     |  28 +++
 .../unit-previews/7467940240901013518.svg     |  29 +++
 .../unit-previews/7467940240901013519.svg     |  29 +++
 .../unit-previews/7467940240901013520.svg     |  29 +++
 .../unit-previews/7467940240901013521.svg     |  29 +++
 .../unit-previews/7467940240901013522.svg     |  29 +++
 .../unit-previews/7467940240901013523.svg     |  28 +++
 .../unit-previews/7467940240901013524.svg     |  28 +++
 .../unit-previews/7467940240901013525.svg     |  28 +++
 .../unit-previews/7467940240901013526.svg     |  28 +++
 .../unit-previews/7467940240901013527.svg     |  28 +++
 .../unit-previews/7467940240901013528.svg     |  28 +++
 .../unit-previews/7467940240901013529.svg     |  28 +++
 .../unit-previews/7467940240901013530.svg     |  27 +++
 .../unit-previews/7467940240901013531.svg     |  27 +++
 .../unit-previews/7467940240901013532.svg     |  28 +++
 .../unit-previews/7467940240901013533.svg     |  27 +++
 .../unit-previews/7467940240901013534.svg     |  27 +++
 static/explain/unit-previews/default.svg      |  27 +++
 44 files changed, 1254 insertions(+), 17 deletions(-)
 create mode 100644 scripts/generate-explain-unit-previews.cjs
 create mode 100644 src/utils/explainUnitPreviews.ts
 create mode 100644 static/explain/unit-previews/2060939176503275521.svg
 create mode 100644 static/explain/unit-previews/2060939176637493249.svg
 create mode 100644 static/explain/unit-previews/2060939176767516674.svg
 create mode 100644 static/explain/unit-previews/2060939176897540098.svg
 create mode 100644 static/explain/unit-previews/2060939177027563521.svg
 create mode 100644 static/explain/unit-previews/7467940240901013505.svg
 create mode 100644 static/explain/unit-previews/7467940240901013506.svg
 create mode 100644 static/explain/unit-previews/7467940240901013507.svg
 create mode 100644 static/explain/unit-previews/7467940240901013508.svg
 create mode 100644 static/explain/unit-previews/7467940240901013509.svg
 create mode 100644 static/explain/unit-previews/7467940240901013510.svg
 create mode 100644 static/explain/unit-previews/7467940240901013511.svg
 create mode 100644 static/explain/unit-previews/7467940240901013512.svg
 create mode 100644 static/explain/unit-previews/7467940240901013513.svg
 create mode 100644 static/explain/unit-previews/7467940240901013514.svg
 create mode 100644 static/explain/unit-previews/7467940240901013515.svg
 create mode 100644 static/explain/unit-previews/7467940240901013516.svg
 create mode 100644 static/explain/unit-previews/7467940240901013517.svg
 create mode 100644 static/explain/unit-previews/7467940240901013518.svg
 create mode 100644 static/explain/unit-previews/7467940240901013519.svg
 create mode 100644 static/explain/unit-previews/7467940240901013520.svg
 create mode 100644 static/explain/unit-previews/7467940240901013521.svg
 create mode 100644 static/explain/unit-previews/7467940240901013522.svg
 create mode 100644 static/explain/unit-previews/7467940240901013523.svg
 create mode 100644 static/explain/unit-previews/7467940240901013524.svg
 create mode 100644 static/explain/unit-previews/7467940240901013525.svg
 create mode 100644 static/explain/unit-previews/7467940240901013526.svg
 create mode 100644 static/explain/unit-previews/7467940240901013527.svg
 create mode 100644 static/explain/unit-previews/7467940240901013528.svg
 create mode 100644 static/explain/unit-previews/7467940240901013529.svg
 create mode 100644 static/explain/unit-previews/7467940240901013530.svg
 create mode 100644 static/explain/unit-previews/7467940240901013531.svg
 create mode 100644 static/explain/unit-previews/7467940240901013532.svg
 create mode 100644 static/explain/unit-previews/7467940240901013533.svg
 create mode 100644 static/explain/unit-previews/7467940240901013534.svg
 create mode 100644 static/explain/unit-previews/default.svg

diff --git a/scripts/copy-h5-nav-assets.cjs b/scripts/copy-h5-nav-assets.cjs
index 58b076e..f8c5dc4 100644
--- a/scripts/copy-h5-nav-assets.cjs
+++ b/scripts/copy-h5-nav-assets.cjs
@@ -70,6 +70,8 @@ const copyStaticFile = (fileName) => {
 copyStaticSubtree('nav-assets')
 copyStaticSubtree('guide-data')
 copyStaticSubtree('icons')
+// 讲解业务单元封面由 H5 运行时按 /static/explain/... 动态加载。
+copyStaticSubtree('explain')
 copyStaticSubtree('sgs-map-sdk')
 copyStaticSubtree('three')
 copyStaticFile('exhibit-placeholder.jpg')
diff --git a/scripts/generate-explain-unit-previews.cjs b/scripts/generate-explain-unit-previews.cjs
new file mode 100644
index 0000000..b4b5aca
--- /dev/null
+++ b/scripts/generate-explain-unit-previews.cjs
@@ -0,0 +1,173 @@
+const fs = require('fs')
+const path = require('path')
+
+const projectRoot = path.resolve(__dirname, '..')
+const outputDir = path.join(projectRoot, 'static', 'explain', 'unit-previews')
+
+// 业务单元来自当前 H5 讲解页实际渲染的一级 outline，生成结果需与映射表同步。
+const units = [
+  { id: '7467940240901013508', hall: '地球厅', name: '第一单元：宜居地球', theme: 'earth' },
+  { id: '7467940240901013509', hall: '地球厅', name: '第二单元：地史探源', theme: 'geology' },
+  { id: '7467940240901013510', hall: '地球厅', name: '第三单元：华夏山水', theme: 'landscape' },
+  { id: '7467940240901013511', hall: '地球厅', name: '第四单元：矿产资源——大地的馈赠', theme: 'mineral' },
+  { id: '7467940240901013512', hall: '地球厅', name: '专题区：地心穿越+自然灾害', theme: 'disaster' },
+  { id: '7467940240901013530', hall: '家园厅', name: '序厅', theme: 'home' },
+  { id: '7467940240901013531', hall: '家园厅', name: '第一单元：天地共鉴', theme: 'home' },
+  { id: '7467940240901013532', hall: '家园厅', name: '第二单元：万物共生', theme: 'ecology' },
+  { id: '7467940240901013533', hall: '家园厅', name: '第三单元：家园共筑', theme: 'home' },
+  { id: '7467940240901013534', hall: '家园厅', name: '尾厅', theme: 'home' },
+  { id: '7467940240901013513', hall: '恐龙厅', name: '第一单元：初识恐龙', theme: 'dinosaur' },
+  { id: '7467940240901013514', hall: '恐龙厅', name: '第二单元：恐龙解密', theme: 'dinosaur' },
+  { id: '7467940240901013515', hall: '恐龙厅', name: '第三单元：恐龙时代', theme: 'dinosaur' },
+  { id: '7467940240901013516', hall: '恐龙厅', name: '第四单元：粤赣育龙', theme: 'dinosaur' },
+  { id: '7467940240901013517', hall: '恐龙厅', name: '第五单元：终结与新生', theme: 'dinosaur' },
+  { id: '2060939176503275521', hall: '人类厅', name: '第一单元：什么是灵长类', theme: 'human' },
+  { id: '2060939176637493249', hall: '人类厅', name: '第二单元：猿与猴', theme: 'human' },
+  { id: '2060939176767516674', hall: '人类厅', name: '第三单元：丛林远足', theme: 'forest' },
+  { id: '2060939176897540098', hall: '人类厅', name: '第四单元：与巨兽同行', theme: 'human' },
+  { id: '2060939177027563521', hall: '人类厅', name: '第五单元：从燧石到硅基', theme: 'human' },
+  { id: '7467940240901013523', hall: '生态厅', name: '前言', theme: 'ecology' },
+  { id: '7467940240901013524', hall: '生态厅', name: '第二单元：各得其所——世界动物地理区系', theme: 'ecology' },
+  { id: '7467940240901013525', hall: '生态厅', name: '第三单元：地球之窗——全球主要生态系统景观', theme: 'ecology' },
+  { id: '7467940240901013526', hall: '生物厅', name: '序篇：生物的命名与分类', theme: 'biology' },
+  { id: '7467940240901013527', hall: '生物厅', name: '第二单元：中国南方保护动物', theme: 'biology' },
+  { id: '7467940240901013528', hall: '生物厅', name: '第三单元：生物基础知识', theme: 'biology' },
+  { id: '7467940240901013529', hall: '生物厅', name: '第四单元：生物大观', theme: 'biology' },
+  { id: '7467940240901013518', hall: '演化厅', name: '第零单元：基于博物学的进化思想', theme: 'evolution' },
+  { id: '7467940240901013519', hall: '演化厅', name: '第一单元：经典进化学说——影响世界的理论', theme: 'evolution' },
+  { id: '7467940240901013520', hall: '演化厅', name: '第二单元：遗传与变异——演化的内在驱动力', theme: 'evolution' },
+  { id: '7467940240901013521', hall: '演化厅', name: '第三单元：演化方向的选择——适应', theme: 'evolution' },
+  { id: '7467940240901013522', hall: '演化厅', name: '第四单元：三十八亿年的创造——从单细胞到智慧生命', theme: 'evolution' },
+  { id: '7467940240901013505', hall: '宇宙厅', name: '第一单元：仰望苍穹——人类对宇宙认识的历程', theme: 'cosmos' },
+  { id: '7467940240901013506', hall: '宇宙厅', name: '第二单元：拾级而观——等级宇宙结构', theme: 'cosmos' },
+  { id: '7467940240901013507', hall: '宇宙厅', name: '第三单元：采石知天——行星科学与深空探测', theme: 'meteorite' }
+]
+
+const themes = {
+  earth: ['#d7e9d2', '#fbf6d8', '#2f6f5f', '#8eac50'],
+  geology: ['#ebe1d3', '#bfd5dc', '#674c3b', '#c08c45'],
+  landscape: ['#dcefd7', '#f4efd0', '#265d4e', '#92b65a'],
+  mineral: ['#e8e1d4', '#f1f4df', '#4b4f5a', '#c2a95b'],
+  disaster: ['#eee0d1', '#d7e3e0', '#5b3d35', '#d69d45'],
+  home: ['#edf2df', '#f5f2d7', '#334c45', '#b2bf47'],
+  ecology: ['#dbeedb', '#f4f2d1', '#2a5a49', '#87a946'],
+  dinosaur: ['#e7e0cd', '#dce8d5', '#4d4932', '#9a7844'],
+  human: ['#e8e0d7', '#eef0d6', '#4b3f36', '#b8884b'],
+  forest: ['#d9eddc', '#eff3d2', '#2f5f43', '#76a159'],
+  biology: ['#dff0df', '#eef4d4', '#2f604b', '#7bb36c'],
+  evolution: ['#e6e6d8', '#dbe9df', '#3f5147', '#9ea34a'],
+  cosmos: ['#dce5ef', '#f2f1d4', '#26354e', '#7b8bb7'],
+  meteorite: ['#dedfe5', '#f4efd5', '#343746', '#b19b56'],
+  fallback: ['#e8eadf', '#f7f5df', '#3f4d43', '#a8b64c']
+}
+
+const escapeXml = (value) => String(value)
+  .replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+
+const shortTitle = (name) => name
+  .replace(/^第[一二三四五六七八九十零]+单元[:：]?/, '')
+  .replace(/^专题区[:：]?/, '')
+  .replace(/^序篇[:：]?/, '')
+  .replace(/[——+].*$/, '')
+  .trim()
+
+const motif = (theme, accent, dark) => {
+  if (theme === 'cosmos') {
+    return `
+      <circle cx="222" cy="58" r="24" fill="${accent}" opacity=".55"/>
+      <circle cx="278" cy="92" r="8" fill="${dark}" opacity=".8"/>
+      <path d="M42 132 C100 86 172 82 322 42" fill="none" stroke="${dark}" stroke-width="7" stroke-linecap="round" opacity=".28"/>
+      <path d="M222 58 C242 77 265 88 294 91" fill="none" stroke="${dark}" stroke-width="3" opacity=".65"/>
+    `
+  }
+  if (theme === 'meteorite' || theme === 'mineral' || theme === 'geology') {
+    return `
+      <path d="M240 34 L330 78 L298 160 L208 150 L178 78 Z" fill="${accent}" opacity=".72"/>
+      <path d="M238 52 L292 82 L278 130 L220 126 L204 84 Z" fill="none" stroke="${dark}" stroke-width="5" opacity=".55"/>
+      <path d="M36 146 C86 122 132 120 190 146 S284 174 348 134" fill="none" stroke="${dark}" stroke-width="8" opacity=".18"/>
+    `
+  }
+  if (theme === 'dinosaur') {
+    return `
+      <path d="M206 119 C220 74 258 48 308 60 C327 65 340 80 344 98 C318 88 292 94 276 116 C256 143 228 151 196 143 Z" fill="${accent}" opacity=".78"/>
+      <circle cx="312" cy="84" r="5" fill="${dark}" opacity=".85"/>
+      <path d="M198 142 C160 142 128 132 94 106" fill="none" stroke="${dark}" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M92 106 C70 96 56 76 52 56" fill="none" stroke="${dark}" stroke-width="7" stroke-linecap="round" opacity=".3"/>
+    `
+  }
+  if (theme === 'human') {
+    return `
+      <circle cx="270" cy="72" r="28" fill="${accent}" opacity=".78"/>
+      <path d="M228 150 C232 108 246 93 270 93 C294 93 309 110 314 150" fill="none" stroke="${dark}" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M58 142 C92 98 132 78 180 80" fill="none" stroke="${dark}" stroke-width="8" stroke-linecap="round" opacity=".22"/>
+    `
+  }
+  if (theme === 'biology' || theme === 'ecology' || theme === 'forest') {
+    return `
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="${accent}" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="${dark}" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="${dark}" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="${accent}" opacity=".35"/>
+    `
+  }
+  if (theme === 'evolution') {
+    return `
+      <path d="M64 142 C94 94 124 76 160 98 C190 116 198 70 230 58 C264 44 300 68 326 118" fill="none" stroke="${dark}" stroke-width="9" stroke-linecap="round" opacity=".28"/>
+      <circle cx="84" cy="128" r="13" fill="${accent}" opacity=".8"/>
+      <circle cx="160" cy="98" r="15" fill="${accent}" opacity=".68"/>
+      <circle cx="232" cy="58" r="17" fill="${accent}" opacity=".58"/>
+      <circle cx="322" cy="116" r="20" fill="${accent}" opacity=".76"/>
+    `
+  }
+  return `
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="${dark}" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="${accent}" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="${dark}" stroke-width="5" opacity=".4"/>
+  `
+}
+
+const svgFor = ({ id, hall, name, theme }) => {
+  const [start, end, dark, accent] = themes[theme] || themes.fallback
+  const title = shortTitle(name) || name
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="${escapeXml(hall)} ${escapeXml(title)}">
+  <defs>
+    <linearGradient id="bg-${id}" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="${start}"/>
+      <stop offset="1" stop-color="${end}"/>
+    </linearGradient>
+    <pattern id="dots-${id}" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="${dark}" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-${id})"/>
+  <rect width="640" height="360" fill="url(#dots-${id})" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    ${motif(theme, accent, dark)}
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="${dark}" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">${escapeXml(hall)}</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="${dark}" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">${escapeXml(title.slice(0, 11))}</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="${dark}" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="${accent}" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="${dark}" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
+`
+}
+
+fs.mkdirSync(outputDir, { recursive: true })
+units.forEach((unit) => {
+  fs.writeFileSync(path.join(outputDir, `${unit.id}.svg`), svgFor(unit), 'utf8')
+})
+fs.writeFileSync(path.join(outputDir, 'default.svg'), svgFor({
+  id: 'default',
+  hall: '讲解',
+  name: '自然博物馆导览',
+  theme: 'fallback'
+}), 'utf8')
+
+console.log(`Generated ${units.length + 1} explain unit preview SVG files in ${path.relative(projectRoot, outputDir)}`)
diff --git a/src/components/explain/ExplainHallSelect.vue b/src/components/explain/ExplainHallSelect.vue
index 0e60936..7568b06 100644
--- a/src/components/explain/ExplainHallSelect.vue
+++ b/src/components/explain/ExplainHallSelect.vue
@@ -62,9 +62,12 @@
             class="hall-card unit-card"
             @tap="handleBusinessUnitClick(unit.id)"
           >
-            <view class="unit-mark">
-              <text class="unit-mark-text">{{ unit.name.slice(0, 1) || '讲' }}</text>
-            </view>
+            <image
+              class="unit-thumb"
+              :src="unitPreviewImageUrl(unit)"
+              mode="aspectFill"
+              @error="handleUnitPreviewError(unit.id)"
+            />
 
             <view class="hall-main">
               <text class="hall-name">{{ unit.name }}</text>
@@ -122,7 +125,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import {
+  EXPLAIN_UNIT_PREVIEW_FALLBACK
+} from '@/utils/explainUnitPreviews'
 
 export interface ExplainHallSelectItem {
   id: string
@@ -139,6 +145,7 @@ export interface ExplainBusinessUnitSelectItem {
   id: string
   name: string
   hallId: string
+  previewImageUrl?: string
   guideStopCount: number
 }
 
@@ -183,6 +190,7 @@ const emit = defineEmits<{
 }>()
 
 const HALL_ICON_BASE = '/static/icons/halls'
+const failedUnitPreviewIds = ref(new Set<string>())
 
 const hallIconMap: Record<string, string> = {
   宇宙厅: `${HALL_ICON_BASE}/universe.jpg`,
@@ -229,6 +237,16 @@ const hallIconUrl = (hall: ExplainHallSelectItem) => {
 
 const hallIconText = (name: string) => name.trim().slice(0, 1) || '讲'
 
+const unitPreviewImageUrl = (unit: ExplainBusinessUnitSelectItem) => (
+  failedUnitPreviewIds.value.has(unit.id)
+    ? EXPLAIN_UNIT_PREVIEW_FALLBACK
+    : unit.previewImageUrl || EXPLAIN_UNIT_PREVIEW_FALLBACK
+)
+
+const handleUnitPreviewError = (unitId: string) => {
+  failedUnitPreviewIds.value = new Set([...failedUnitPreviewIds.value, unitId])
+}
+
 const hallMetaText = (hall: ExplainHallSelectItem) => (
   typeof hall.businessUnitCount === 'number' || typeof hall.guideStopCount === 'number'
     ? `${hall.businessUnitCount || 0} 个业务单元 · ${hall.guideStopCount || 0} 个讲解点`
@@ -376,22 +394,15 @@ const handleBack = () => {
   color: #83927a;
 }
 
-.unit-mark {
+.unit-thumb {
   flex-shrink: 0;
-  width: 68px;
+  width: 96px;
   height: 68px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   border-radius: 8px;
-  background: #151713;
-}
-
-.unit-mark-text {
-  font-size: 22px;
-  line-height: 30px;
-  font-weight: 800;
-  color: var(--museum-accent);
+  background: #eef0e4;
+  border: 1px solid rgba(36, 49, 42, 0.06);
+  box-sizing: border-box;
+  object-fit: cover;
 }
 
 .hall-main {
diff --git a/src/data/adapters/guideDataAdapter.ts b/src/data/adapters/guideDataAdapter.ts
index c84f83c..612ef7a 100644
--- a/src/data/adapters/guideDataAdapter.ts
+++ b/src/data/adapters/guideDataAdapter.ts
@@ -15,6 +15,9 @@ import {
 import {
   normalizeSameOriginPublicUrl
 } from '@/utils/publicUrl'
+import {
+  getExplainUnitPreviewImage
+} from '@/utils/explainUnitPreviews'
 import type {
   GuideStaticContentPayload,
   GuideStaticDataset,
@@ -298,6 +301,7 @@ const toExplainBusinessUnitsByHallId = (
         id: unitId,
         name: unitNameByKey.get(`${hallId}:${unitId}`) || '其他讲解',
         hallId,
+        previewImageUrl: getExplainUnitPreviewImage(unitId),
         guideStopCount: groupStops.length,
         stops: groupStops
       }))
diff --git a/src/domain/museum.ts b/src/domain/museum.ts
index 3de03b2..eb17af5 100644
--- a/src/domain/museum.ts
+++ b/src/domain/museum.ts
@@ -205,6 +205,7 @@ export interface ExplainBusinessUnit {
   id: string
   name: string
   hallId: string
+  previewImageUrl?: string
   guideStopCount: number
   stops: ExplainGuideStop[]
 }
diff --git a/src/pages/explain/list.vue b/src/pages/explain/list.vue
index 5858ced..29d18d3 100644
--- a/src/pages/explain/list.vue
+++ b/src/pages/explain/list.vue
@@ -96,6 +96,7 @@ const explainBusinessUnitItems = computed<ExplainBusinessUnitSelectItem[]>(() =>
     id: unit.id,
     name: unit.name,
     hallId: unit.hallId,
+    previewImageUrl: unit.previewImageUrl,
     guideStopCount: unit.guideStopCount
   }))
 ))
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 6dcb31f..0013abb 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -467,6 +467,7 @@ const explainBusinessUnitItems = computed<ExplainBusinessUnitSelectItem[]>(() =>
     id: unit.id,
     name: unit.name,
     hallId: unit.hallId,
+    previewImageUrl: unit.previewImageUrl,
     guideStopCount: unit.guideStopCount
   }))
 ))
diff --git a/src/utils/explainUnitPreviews.ts b/src/utils/explainUnitPreviews.ts
new file mode 100644
index 0000000..646cff2
--- /dev/null
+++ b/src/utils/explainUnitPreviews.ts
@@ -0,0 +1,46 @@
+const EXPLAIN_UNIT_PREVIEW_BASE = '/static/explain/unit-previews'
+
+export const EXPLAIN_UNIT_PREVIEW_FALLBACK = `${EXPLAIN_UNIT_PREVIEW_BASE}/default.svg`
+
+// 集中维护 H5 讲解业务单元封面，缺失或新增单元会回退到 default.svg。
+const unitPreviewImageById: Record<string, string> = {
+  '2060939176503275521': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176503275521.svg`,
+  '2060939176637493249': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176637493249.svg`,
+  '2060939176767516674': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176767516674.svg`,
+  '2060939176897540098': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176897540098.svg`,
+  '2060939177027563521': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939177027563521.svg`,
+  '7467940240901013505': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013505.svg`,
+  '7467940240901013506': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013506.svg`,
+  '7467940240901013507': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013507.svg`,
+  '7467940240901013508': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013508.svg`,
+  '7467940240901013509': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013509.svg`,
+  '7467940240901013510': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013510.svg`,
+  '7467940240901013511': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013511.svg`,
+  '7467940240901013512': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013512.svg`,
+  '7467940240901013513': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013513.svg`,
+  '7467940240901013514': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013514.svg`,
+  '7467940240901013515': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013515.svg`,
+  '7467940240901013516': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013516.svg`,
+  '7467940240901013517': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013517.svg`,
+  '7467940240901013518': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013518.svg`,
+  '7467940240901013519': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013519.svg`,
+  '7467940240901013520': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013520.svg`,
+  '7467940240901013521': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013521.svg`,
+  '7467940240901013522': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013522.svg`,
+  '7467940240901013523': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013523.svg`,
+  '7467940240901013524': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013524.svg`,
+  '7467940240901013525': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013525.svg`,
+  '7467940240901013526': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013526.svg`,
+  '7467940240901013527': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013527.svg`,
+  '7467940240901013528': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013528.svg`,
+  '7467940240901013529': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013529.svg`,
+  '7467940240901013530': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013530.svg`,
+  '7467940240901013531': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013531.svg`,
+  '7467940240901013532': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013532.svg`,
+  '7467940240901013533': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013533.svg`,
+  '7467940240901013534': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013534.svg`
+}
+
+export const getExplainUnitPreviewImage = (unitId?: string) => (
+  unitId ? unitPreviewImageById[unitId] || EXPLAIN_UNIT_PREVIEW_FALLBACK : EXPLAIN_UNIT_PREVIEW_FALLBACK
+)
diff --git a/static/explain/unit-previews/2060939176503275521.svg b/static/explain/unit-previews/2060939176503275521.svg
new file mode 100644
index 0000000..945152c
--- /dev/null
+++ b/static/explain/unit-previews/2060939176503275521.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="人类厅 什么是灵长类">
+  <defs>
+    <linearGradient id="bg-2060939176503275521" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8e0d7"/>
+      <stop offset="1" stop-color="#eef0d6"/>
+    </linearGradient>
+    <pattern id="dots-2060939176503275521" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4b3f36" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-2060939176503275521)"/>
+  <rect width="640" height="360" fill="url(#dots-2060939176503275521)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <circle cx="270" cy="72" r="28" fill="#b8884b" opacity=".78"/>
+      <path d="M228 150 C232 108 246 93 270 93 C294 93 309 110 314 150" fill="none" stroke="#4b3f36" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M58 142 C92 98 132 78 180 80" fill="none" stroke="#4b3f36" stroke-width="8" stroke-linecap="round" opacity=".22"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">人类厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">什么是灵长类</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4b3f36" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b8884b" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4b3f36" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/2060939176637493249.svg b/static/explain/unit-previews/2060939176637493249.svg
new file mode 100644
index 0000000..75b8832
--- /dev/null
+++ b/static/explain/unit-previews/2060939176637493249.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="人类厅 猿与猴">
+  <defs>
+    <linearGradient id="bg-2060939176637493249" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8e0d7"/>
+      <stop offset="1" stop-color="#eef0d6"/>
+    </linearGradient>
+    <pattern id="dots-2060939176637493249" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4b3f36" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-2060939176637493249)"/>
+  <rect width="640" height="360" fill="url(#dots-2060939176637493249)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <circle cx="270" cy="72" r="28" fill="#b8884b" opacity=".78"/>
+      <path d="M228 150 C232 108 246 93 270 93 C294 93 309 110 314 150" fill="none" stroke="#4b3f36" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M58 142 C92 98 132 78 180 80" fill="none" stroke="#4b3f36" stroke-width="8" stroke-linecap="round" opacity=".22"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">人类厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">猿与猴</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4b3f36" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b8884b" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4b3f36" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/2060939176767516674.svg b/static/explain/unit-previews/2060939176767516674.svg
new file mode 100644
index 0000000..9fd6be7
--- /dev/null
+++ b/static/explain/unit-previews/2060939176767516674.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="人类厅 丛林远足">
+  <defs>
+    <linearGradient id="bg-2060939176767516674" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#d9eddc"/>
+      <stop offset="1" stop-color="#eff3d2"/>
+    </linearGradient>
+    <pattern id="dots-2060939176767516674" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2f5f43" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-2060939176767516674)"/>
+  <rect width="640" height="360" fill="url(#dots-2060939176767516674)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#76a159" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2f5f43" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2f5f43" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#76a159" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2f5f43" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">人类厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2f5f43" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">丛林远足</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2f5f43" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#76a159" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2f5f43" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/2060939176897540098.svg b/static/explain/unit-previews/2060939176897540098.svg
new file mode 100644
index 0000000..56093a0
--- /dev/null
+++ b/static/explain/unit-previews/2060939176897540098.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="人类厅 与巨兽同行">
+  <defs>
+    <linearGradient id="bg-2060939176897540098" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8e0d7"/>
+      <stop offset="1" stop-color="#eef0d6"/>
+    </linearGradient>
+    <pattern id="dots-2060939176897540098" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4b3f36" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-2060939176897540098)"/>
+  <rect width="640" height="360" fill="url(#dots-2060939176897540098)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <circle cx="270" cy="72" r="28" fill="#b8884b" opacity=".78"/>
+      <path d="M228 150 C232 108 246 93 270 93 C294 93 309 110 314 150" fill="none" stroke="#4b3f36" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M58 142 C92 98 132 78 180 80" fill="none" stroke="#4b3f36" stroke-width="8" stroke-linecap="round" opacity=".22"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">人类厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">与巨兽同行</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4b3f36" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b8884b" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4b3f36" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/2060939177027563521.svg b/static/explain/unit-previews/2060939177027563521.svg
new file mode 100644
index 0000000..b7c3e72
--- /dev/null
+++ b/static/explain/unit-previews/2060939177027563521.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="人类厅 从燧石到硅基">
+  <defs>
+    <linearGradient id="bg-2060939177027563521" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8e0d7"/>
+      <stop offset="1" stop-color="#eef0d6"/>
+    </linearGradient>
+    <pattern id="dots-2060939177027563521" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4b3f36" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-2060939177027563521)"/>
+  <rect width="640" height="360" fill="url(#dots-2060939177027563521)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <circle cx="270" cy="72" r="28" fill="#b8884b" opacity=".78"/>
+      <path d="M228 150 C232 108 246 93 270 93 C294 93 309 110 314 150" fill="none" stroke="#4b3f36" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M58 142 C92 98 132 78 180 80" fill="none" stroke="#4b3f36" stroke-width="8" stroke-linecap="round" opacity=".22"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">人类厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4b3f36" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">从燧石到硅基</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4b3f36" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b8884b" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4b3f36" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013505.svg b/static/explain/unit-previews/7467940240901013505.svg
new file mode 100644
index 0000000..772c677
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013505.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="宇宙厅 仰望苍穹">
+  <defs>
+    <linearGradient id="bg-7467940240901013505" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dce5ef"/>
+      <stop offset="1" stop-color="#f2f1d4"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013505" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#26354e" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013505)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013505)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <circle cx="222" cy="58" r="24" fill="#7b8bb7" opacity=".55"/>
+      <circle cx="278" cy="92" r="8" fill="#26354e" opacity=".8"/>
+      <path d="M42 132 C100 86 172 82 322 42" fill="none" stroke="#26354e" stroke-width="7" stroke-linecap="round" opacity=".28"/>
+      <path d="M222 58 C242 77 265 88 294 91" fill="none" stroke="#26354e" stroke-width="3" opacity=".65"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#26354e" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">宇宙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#26354e" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">仰望苍穹</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#26354e" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#7b8bb7" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#26354e" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013506.svg b/static/explain/unit-previews/7467940240901013506.svg
new file mode 100644
index 0000000..e141cab
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013506.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="宇宙厅 拾级而观">
+  <defs>
+    <linearGradient id="bg-7467940240901013506" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dce5ef"/>
+      <stop offset="1" stop-color="#f2f1d4"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013506" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#26354e" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013506)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013506)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <circle cx="222" cy="58" r="24" fill="#7b8bb7" opacity=".55"/>
+      <circle cx="278" cy="92" r="8" fill="#26354e" opacity=".8"/>
+      <path d="M42 132 C100 86 172 82 322 42" fill="none" stroke="#26354e" stroke-width="7" stroke-linecap="round" opacity=".28"/>
+      <path d="M222 58 C242 77 265 88 294 91" fill="none" stroke="#26354e" stroke-width="3" opacity=".65"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#26354e" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">宇宙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#26354e" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">拾级而观</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#26354e" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#7b8bb7" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#26354e" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013507.svg b/static/explain/unit-previews/7467940240901013507.svg
new file mode 100644
index 0000000..65a69d5
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013507.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="宇宙厅 采石知天">
+  <defs>
+    <linearGradient id="bg-7467940240901013507" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dedfe5"/>
+      <stop offset="1" stop-color="#f4efd5"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013507" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#343746" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013507)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013507)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M240 34 L330 78 L298 160 L208 150 L178 78 Z" fill="#b19b56" opacity=".72"/>
+      <path d="M238 52 L292 82 L278 130 L220 126 L204 84 Z" fill="none" stroke="#343746" stroke-width="5" opacity=".55"/>
+      <path d="M36 146 C86 122 132 120 190 146 S284 174 348 134" fill="none" stroke="#343746" stroke-width="8" opacity=".18"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#343746" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">宇宙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#343746" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">采石知天</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#343746" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b19b56" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#343746" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013508.svg b/static/explain/unit-previews/7467940240901013508.svg
new file mode 100644
index 0000000..082b76a
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013508.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="地球厅 宜居地球">
+  <defs>
+    <linearGradient id="bg-7467940240901013508" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#d7e9d2"/>
+      <stop offset="1" stop-color="#fbf6d8"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013508" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2f6f5f" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013508)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013508)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#2f6f5f" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#8eac50" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#2f6f5f" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2f6f5f" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地球厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2f6f5f" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">宜居地球</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2f6f5f" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#8eac50" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2f6f5f" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013509.svg b/static/explain/unit-previews/7467940240901013509.svg
new file mode 100644
index 0000000..ca64908
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013509.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="地球厅 地史探源">
+  <defs>
+    <linearGradient id="bg-7467940240901013509" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#ebe1d3"/>
+      <stop offset="1" stop-color="#bfd5dc"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013509" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#674c3b" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013509)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013509)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M240 34 L330 78 L298 160 L208 150 L178 78 Z" fill="#c08c45" opacity=".72"/>
+      <path d="M238 52 L292 82 L278 130 L220 126 L204 84 Z" fill="none" stroke="#674c3b" stroke-width="5" opacity=".55"/>
+      <path d="M36 146 C86 122 132 120 190 146 S284 174 348 134" fill="none" stroke="#674c3b" stroke-width="8" opacity=".18"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#674c3b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地球厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#674c3b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地史探源</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#674c3b" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#c08c45" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#674c3b" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013510.svg b/static/explain/unit-previews/7467940240901013510.svg
new file mode 100644
index 0000000..8231a4b
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013510.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="地球厅 华夏山水">
+  <defs>
+    <linearGradient id="bg-7467940240901013510" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dcefd7"/>
+      <stop offset="1" stop-color="#f4efd0"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013510" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#265d4e" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013510)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013510)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#265d4e" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#92b65a" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#265d4e" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#265d4e" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地球厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#265d4e" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">华夏山水</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#265d4e" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#92b65a" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#265d4e" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013511.svg b/static/explain/unit-previews/7467940240901013511.svg
new file mode 100644
index 0000000..a32ab4b
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013511.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="地球厅 矿产资源">
+  <defs>
+    <linearGradient id="bg-7467940240901013511" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8e1d4"/>
+      <stop offset="1" stop-color="#f1f4df"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013511" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4b4f5a" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013511)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013511)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M240 34 L330 78 L298 160 L208 150 L178 78 Z" fill="#c2a95b" opacity=".72"/>
+      <path d="M238 52 L292 82 L278 130 L220 126 L204 84 Z" fill="none" stroke="#4b4f5a" stroke-width="5" opacity=".55"/>
+      <path d="M36 146 C86 122 132 120 190 146 S284 174 348 134" fill="none" stroke="#4b4f5a" stroke-width="8" opacity=".18"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4b4f5a" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地球厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4b4f5a" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">矿产资源</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4b4f5a" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#c2a95b" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4b4f5a" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013512.svg b/static/explain/unit-previews/7467940240901013512.svg
new file mode 100644
index 0000000..c20e6b0
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013512.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="地球厅 地心穿越">
+  <defs>
+    <linearGradient id="bg-7467940240901013512" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#eee0d1"/>
+      <stop offset="1" stop-color="#d7e3e0"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013512" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#5b3d35" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013512)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013512)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#5b3d35" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#d69d45" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#5b3d35" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#5b3d35" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地球厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#5b3d35" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地心穿越</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#5b3d35" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#d69d45" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#5b3d35" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013513.svg b/static/explain/unit-previews/7467940240901013513.svg
new file mode 100644
index 0000000..e3feeeb
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013513.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="恐龙厅 初识恐龙">
+  <defs>
+    <linearGradient id="bg-7467940240901013513" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e7e0cd"/>
+      <stop offset="1" stop-color="#dce8d5"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013513" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4d4932" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013513)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013513)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M206 119 C220 74 258 48 308 60 C327 65 340 80 344 98 C318 88 292 94 276 116 C256 143 228 151 196 143 Z" fill="#9a7844" opacity=".78"/>
+      <circle cx="312" cy="84" r="5" fill="#4d4932" opacity=".85"/>
+      <path d="M198 142 C160 142 128 132 94 106" fill="none" stroke="#4d4932" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M92 106 C70 96 56 76 52 56" fill="none" stroke="#4d4932" stroke-width="7" stroke-linecap="round" opacity=".3"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">恐龙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">初识恐龙</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4d4932" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9a7844" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4d4932" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013514.svg b/static/explain/unit-previews/7467940240901013514.svg
new file mode 100644
index 0000000..4bebe12
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013514.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="恐龙厅 恐龙解密">
+  <defs>
+    <linearGradient id="bg-7467940240901013514" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e7e0cd"/>
+      <stop offset="1" stop-color="#dce8d5"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013514" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4d4932" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013514)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013514)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M206 119 C220 74 258 48 308 60 C327 65 340 80 344 98 C318 88 292 94 276 116 C256 143 228 151 196 143 Z" fill="#9a7844" opacity=".78"/>
+      <circle cx="312" cy="84" r="5" fill="#4d4932" opacity=".85"/>
+      <path d="M198 142 C160 142 128 132 94 106" fill="none" stroke="#4d4932" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M92 106 C70 96 56 76 52 56" fill="none" stroke="#4d4932" stroke-width="7" stroke-linecap="round" opacity=".3"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">恐龙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">恐龙解密</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4d4932" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9a7844" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4d4932" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013515.svg b/static/explain/unit-previews/7467940240901013515.svg
new file mode 100644
index 0000000..51f9727
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013515.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="恐龙厅 恐龙时代">
+  <defs>
+    <linearGradient id="bg-7467940240901013515" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e7e0cd"/>
+      <stop offset="1" stop-color="#dce8d5"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013515" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4d4932" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013515)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013515)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M206 119 C220 74 258 48 308 60 C327 65 340 80 344 98 C318 88 292 94 276 116 C256 143 228 151 196 143 Z" fill="#9a7844" opacity=".78"/>
+      <circle cx="312" cy="84" r="5" fill="#4d4932" opacity=".85"/>
+      <path d="M198 142 C160 142 128 132 94 106" fill="none" stroke="#4d4932" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M92 106 C70 96 56 76 52 56" fill="none" stroke="#4d4932" stroke-width="7" stroke-linecap="round" opacity=".3"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">恐龙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">恐龙时代</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4d4932" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9a7844" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4d4932" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013516.svg b/static/explain/unit-previews/7467940240901013516.svg
new file mode 100644
index 0000000..292282f
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013516.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="恐龙厅 粤赣育龙">
+  <defs>
+    <linearGradient id="bg-7467940240901013516" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e7e0cd"/>
+      <stop offset="1" stop-color="#dce8d5"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013516" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4d4932" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013516)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013516)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M206 119 C220 74 258 48 308 60 C327 65 340 80 344 98 C318 88 292 94 276 116 C256 143 228 151 196 143 Z" fill="#9a7844" opacity=".78"/>
+      <circle cx="312" cy="84" r="5" fill="#4d4932" opacity=".85"/>
+      <path d="M198 142 C160 142 128 132 94 106" fill="none" stroke="#4d4932" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M92 106 C70 96 56 76 52 56" fill="none" stroke="#4d4932" stroke-width="7" stroke-linecap="round" opacity=".3"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">恐龙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">粤赣育龙</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4d4932" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9a7844" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4d4932" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013517.svg b/static/explain/unit-previews/7467940240901013517.svg
new file mode 100644
index 0000000..953d6cd
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013517.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="恐龙厅 终结与新生">
+  <defs>
+    <linearGradient id="bg-7467940240901013517" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e7e0cd"/>
+      <stop offset="1" stop-color="#dce8d5"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013517" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#4d4932" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013517)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013517)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M206 119 C220 74 258 48 308 60 C327 65 340 80 344 98 C318 88 292 94 276 116 C256 143 228 151 196 143 Z" fill="#9a7844" opacity=".78"/>
+      <circle cx="312" cy="84" r="5" fill="#4d4932" opacity=".85"/>
+      <path d="M198 142 C160 142 128 132 94 106" fill="none" stroke="#4d4932" stroke-width="12" stroke-linecap="round" opacity=".36"/>
+      <path d="M92 106 C70 96 56 76 52 56" fill="none" stroke="#4d4932" stroke-width="7" stroke-linecap="round" opacity=".3"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">恐龙厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#4d4932" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">终结与新生</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#4d4932" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9a7844" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#4d4932" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013518.svg b/static/explain/unit-previews/7467940240901013518.svg
new file mode 100644
index 0000000..6b1da6d
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013518.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="演化厅 基于博物学的进化思想">
+  <defs>
+    <linearGradient id="bg-7467940240901013518" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e6e6d8"/>
+      <stop offset="1" stop-color="#dbe9df"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013518" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#3f5147" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013518)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013518)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M64 142 C94 94 124 76 160 98 C190 116 198 70 230 58 C264 44 300 68 326 118" fill="none" stroke="#3f5147" stroke-width="9" stroke-linecap="round" opacity=".28"/>
+      <circle cx="84" cy="128" r="13" fill="#9ea34a" opacity=".8"/>
+      <circle cx="160" cy="98" r="15" fill="#9ea34a" opacity=".68"/>
+      <circle cx="232" cy="58" r="17" fill="#9ea34a" opacity=".58"/>
+      <circle cx="322" cy="116" r="20" fill="#9ea34a" opacity=".76"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">演化厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">基于博物学的进化思想</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#3f5147" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9ea34a" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#3f5147" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013519.svg b/static/explain/unit-previews/7467940240901013519.svg
new file mode 100644
index 0000000..9c221a6
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013519.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="演化厅 经典进化学说">
+  <defs>
+    <linearGradient id="bg-7467940240901013519" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e6e6d8"/>
+      <stop offset="1" stop-color="#dbe9df"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013519" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#3f5147" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013519)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013519)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M64 142 C94 94 124 76 160 98 C190 116 198 70 230 58 C264 44 300 68 326 118" fill="none" stroke="#3f5147" stroke-width="9" stroke-linecap="round" opacity=".28"/>
+      <circle cx="84" cy="128" r="13" fill="#9ea34a" opacity=".8"/>
+      <circle cx="160" cy="98" r="15" fill="#9ea34a" opacity=".68"/>
+      <circle cx="232" cy="58" r="17" fill="#9ea34a" opacity=".58"/>
+      <circle cx="322" cy="116" r="20" fill="#9ea34a" opacity=".76"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">演化厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">经典进化学说</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#3f5147" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9ea34a" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#3f5147" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013520.svg b/static/explain/unit-previews/7467940240901013520.svg
new file mode 100644
index 0000000..8669405
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013520.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="演化厅 遗传与变异">
+  <defs>
+    <linearGradient id="bg-7467940240901013520" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e6e6d8"/>
+      <stop offset="1" stop-color="#dbe9df"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013520" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#3f5147" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013520)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013520)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M64 142 C94 94 124 76 160 98 C190 116 198 70 230 58 C264 44 300 68 326 118" fill="none" stroke="#3f5147" stroke-width="9" stroke-linecap="round" opacity=".28"/>
+      <circle cx="84" cy="128" r="13" fill="#9ea34a" opacity=".8"/>
+      <circle cx="160" cy="98" r="15" fill="#9ea34a" opacity=".68"/>
+      <circle cx="232" cy="58" r="17" fill="#9ea34a" opacity=".58"/>
+      <circle cx="322" cy="116" r="20" fill="#9ea34a" opacity=".76"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">演化厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">遗传与变异</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#3f5147" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9ea34a" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#3f5147" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013521.svg b/static/explain/unit-previews/7467940240901013521.svg
new file mode 100644
index 0000000..80559c6
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013521.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="演化厅 演化方向的选择">
+  <defs>
+    <linearGradient id="bg-7467940240901013521" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e6e6d8"/>
+      <stop offset="1" stop-color="#dbe9df"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013521" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#3f5147" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013521)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013521)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M64 142 C94 94 124 76 160 98 C190 116 198 70 230 58 C264 44 300 68 326 118" fill="none" stroke="#3f5147" stroke-width="9" stroke-linecap="round" opacity=".28"/>
+      <circle cx="84" cy="128" r="13" fill="#9ea34a" opacity=".8"/>
+      <circle cx="160" cy="98" r="15" fill="#9ea34a" opacity=".68"/>
+      <circle cx="232" cy="58" r="17" fill="#9ea34a" opacity=".58"/>
+      <circle cx="322" cy="116" r="20" fill="#9ea34a" opacity=".76"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">演化厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">演化方向的选择</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#3f5147" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9ea34a" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#3f5147" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013522.svg b/static/explain/unit-previews/7467940240901013522.svg
new file mode 100644
index 0000000..4f16de0
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013522.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="演化厅 三十八亿年的创造">
+  <defs>
+    <linearGradient id="bg-7467940240901013522" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e6e6d8"/>
+      <stop offset="1" stop-color="#dbe9df"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013522" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#3f5147" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013522)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013522)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M64 142 C94 94 124 76 160 98 C190 116 198 70 230 58 C264 44 300 68 326 118" fill="none" stroke="#3f5147" stroke-width="9" stroke-linecap="round" opacity=".28"/>
+      <circle cx="84" cy="128" r="13" fill="#9ea34a" opacity=".8"/>
+      <circle cx="160" cy="98" r="15" fill="#9ea34a" opacity=".68"/>
+      <circle cx="232" cy="58" r="17" fill="#9ea34a" opacity=".58"/>
+      <circle cx="322" cy="116" r="20" fill="#9ea34a" opacity=".76"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">演化厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#3f5147" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">三十八亿年的创造</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#3f5147" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#9ea34a" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#3f5147" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013523.svg b/static/explain/unit-previews/7467940240901013523.svg
new file mode 100644
index 0000000..09552d7
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013523.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="生态厅 前言">
+  <defs>
+    <linearGradient id="bg-7467940240901013523" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dbeedb"/>
+      <stop offset="1" stop-color="#f4f2d1"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013523" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2a5a49" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013523)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013523)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#87a946" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2a5a49" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2a5a49" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#87a946" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生态厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">前言</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2a5a49" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#87a946" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2a5a49" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013524.svg b/static/explain/unit-previews/7467940240901013524.svg
new file mode 100644
index 0000000..5aeaa18
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013524.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="生态厅 各得其所">
+  <defs>
+    <linearGradient id="bg-7467940240901013524" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dbeedb"/>
+      <stop offset="1" stop-color="#f4f2d1"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013524" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2a5a49" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013524)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013524)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#87a946" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2a5a49" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2a5a49" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#87a946" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生态厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">各得其所</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2a5a49" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#87a946" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2a5a49" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013525.svg b/static/explain/unit-previews/7467940240901013525.svg
new file mode 100644
index 0000000..9c168da
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013525.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="生态厅 地球之窗">
+  <defs>
+    <linearGradient id="bg-7467940240901013525" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dbeedb"/>
+      <stop offset="1" stop-color="#f4f2d1"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013525" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2a5a49" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013525)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013525)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#87a946" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2a5a49" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2a5a49" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#87a946" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生态厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">地球之窗</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2a5a49" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#87a946" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2a5a49" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013526.svg b/static/explain/unit-previews/7467940240901013526.svg
new file mode 100644
index 0000000..5700830
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013526.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="生物厅 生物的命名与分类">
+  <defs>
+    <linearGradient id="bg-7467940240901013526" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dff0df"/>
+      <stop offset="1" stop-color="#eef4d4"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013526" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2f604b" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013526)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013526)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#7bb36c" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2f604b" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2f604b" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#7bb36c" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生物厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生物的命名与分类</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2f604b" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#7bb36c" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2f604b" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013527.svg b/static/explain/unit-previews/7467940240901013527.svg
new file mode 100644
index 0000000..fa2d804
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013527.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="生物厅 中国南方保护动物">
+  <defs>
+    <linearGradient id="bg-7467940240901013527" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dff0df"/>
+      <stop offset="1" stop-color="#eef4d4"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013527" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2f604b" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013527)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013527)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#7bb36c" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2f604b" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2f604b" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#7bb36c" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生物厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">中国南方保护动物</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2f604b" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#7bb36c" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2f604b" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013528.svg b/static/explain/unit-previews/7467940240901013528.svg
new file mode 100644
index 0000000..dbe5883
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013528.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="生物厅 生物基础知识">
+  <defs>
+    <linearGradient id="bg-7467940240901013528" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dff0df"/>
+      <stop offset="1" stop-color="#eef4d4"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013528" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2f604b" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013528)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013528)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#7bb36c" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2f604b" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2f604b" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#7bb36c" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生物厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生物基础知识</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2f604b" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#7bb36c" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2f604b" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013529.svg b/static/explain/unit-previews/7467940240901013529.svg
new file mode 100644
index 0000000..d18b55d
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013529.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="生物厅 生物大观">
+  <defs>
+    <linearGradient id="bg-7467940240901013529" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dff0df"/>
+      <stop offset="1" stop-color="#eef4d4"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013529" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2f604b" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013529)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013529)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#7bb36c" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2f604b" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2f604b" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#7bb36c" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生物厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2f604b" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">生物大观</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2f604b" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#7bb36c" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2f604b" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013530.svg b/static/explain/unit-previews/7467940240901013530.svg
new file mode 100644
index 0000000..e6d30f8
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013530.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="家园厅 序厅">
+  <defs>
+    <linearGradient id="bg-7467940240901013530" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#edf2df"/>
+      <stop offset="1" stop-color="#f5f2d7"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013530" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#334c45" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013530)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013530)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#334c45" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#b2bf47" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#334c45" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">家园厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">序厅</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#334c45" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b2bf47" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#334c45" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013531.svg b/static/explain/unit-previews/7467940240901013531.svg
new file mode 100644
index 0000000..3ac02e0
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013531.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="家园厅 天地共鉴">
+  <defs>
+    <linearGradient id="bg-7467940240901013531" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#edf2df"/>
+      <stop offset="1" stop-color="#f5f2d7"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013531" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#334c45" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013531)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013531)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#334c45" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#b2bf47" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#334c45" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">家园厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">天地共鉴</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#334c45" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b2bf47" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#334c45" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013532.svg b/static/explain/unit-previews/7467940240901013532.svg
new file mode 100644
index 0000000..6805cf1
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013532.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="家园厅 万物共生">
+  <defs>
+    <linearGradient id="bg-7467940240901013532" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dbeedb"/>
+      <stop offset="1" stop-color="#f4f2d1"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013532" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#2a5a49" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013532)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013532)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+      <path d="M248 142 C306 124 336 80 328 36 C284 42 244 78 230 130 Z" fill="#87a946" opacity=".72"/>
+      <path d="M230 132 C270 108 294 78 326 38" fill="none" stroke="#2a5a49" stroke-width="5" opacity=".45"/>
+      <path d="M70 154 C110 104 154 82 210 76" fill="none" stroke="#2a5a49" stroke-width="8" stroke-linecap="round" opacity=".18"/>
+      <circle cx="90" cy="70" r="18" fill="#87a946" opacity=".35"/>
+    
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">家园厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#2a5a49" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">万物共生</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#2a5a49" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#87a946" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#2a5a49" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013533.svg b/static/explain/unit-previews/7467940240901013533.svg
new file mode 100644
index 0000000..c0b8a8e
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013533.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="家园厅 家园共筑">
+  <defs>
+    <linearGradient id="bg-7467940240901013533" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#edf2df"/>
+      <stop offset="1" stop-color="#f5f2d7"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013533" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#334c45" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013533)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013533)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#334c45" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#b2bf47" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#334c45" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">家园厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">家园共筑</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#334c45" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b2bf47" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#334c45" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/7467940240901013534.svg b/static/explain/unit-previews/7467940240901013534.svg
new file mode 100644
index 0000000..e9d3ffb
--- /dev/null
+++ b/static/explain/unit-previews/7467940240901013534.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="家园厅 尾厅">
+  <defs>
+    <linearGradient id="bg-7467940240901013534" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#edf2df"/>
+      <stop offset="1" stop-color="#f5f2d7"/>
+    </linearGradient>
+    <pattern id="dots-7467940240901013534" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#334c45" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-7467940240901013534)"/>
+  <rect width="640" height="360" fill="url(#dots-7467940240901013534)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#334c45" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#b2bf47" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#334c45" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">家园厅</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#334c45" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">尾厅</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#334c45" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#b2bf47" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#334c45" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>
diff --git a/static/explain/unit-previews/default.svg b/static/explain/unit-previews/default.svg
new file mode 100644
index 0000000..9e554f4
--- /dev/null
+++ b/static/explain/unit-previews/default.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="讲解 自然博物馆导览">
+  <defs>
+    <linearGradient id="bg-default" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8eadf"/>
+      <stop offset="1" stop-color="#f7f5df"/>
+    </linearGradient>
+    <pattern id="dots-default" width="34" height="34" patternUnits="userSpaceOnUse">
+      <circle cx="4" cy="4" r="2.4" fill="#3f4d43" opacity=".13"/>
+    </pattern>
+  </defs>
+  <rect width="640" height="360" rx="28" fill="url(#bg-default)"/>
+  <rect width="640" height="360" fill="url(#dots-default)" opacity=".75"/>
+  <path d="M0 274 C108 226 190 248 288 220 C410 184 518 204 640 146 L640 360 L0 360 Z" fill="#fff" opacity=".36"/>
+  <g transform="translate(232 56)">
+    
+    <path d="M64 154 C108 114 156 96 208 98 C266 101 300 76 340 42" fill="none" stroke="#3f4d43" stroke-width="9" stroke-linecap="round" opacity=".22"/>
+    <circle cx="272" cy="74" r="34" fill="#a8b64c" opacity=".65"/>
+    <path d="M246 120 C286 109 316 84 334 48" fill="none" stroke="#3f4d43" stroke-width="5" opacity=".4"/>
+  
+  </g>
+  <rect x="38" y="42" width="126" height="36" rx="18" fill="#ffffff" opacity=".72"/>
+  <text x="101" y="66" text-anchor="middle" font-size="20" font-weight="700" fill="#3f4d43" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">讲解</text>
+  <text x="40" y="166" font-size="30" font-weight="800" fill="#3f4d43" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然博物馆导览</text>
+  <text x="40" y="207" font-size="20" font-weight="600" fill="#3f4d43" opacity=".72" font-family="HarmonyOS Sans SC, Microsoft YaHei, sans-serif">自然导览 · 图文讲解</text>
+  <path d="M40 252 L156 252" stroke="#a8b64c" stroke-width="9" stroke-linecap="round"/>
+  <path d="M40 276 L108 276" stroke="#3f4d43" stroke-width="5" stroke-linecap="round" opacity=".32"/>
+</svg>