feat: 食品添加剂课程业务开发（接待/主场景/取证/记录/信函学习页面）

fix: 修复课程运行时初始化与拖拽测试

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["biomejs.biome"]
+}

CLAUDE.md

@@ -129,8 +129,8 @@ bun run lint:fix   # 自动修复代码问题
 
 开发时要尊重模板已有能力：
 
-- 页面按 `1920 x 1080` 设计稿开发，整体缩放逻辑在 `src/utils/useScale.ts`。
-- 横屏访问提示逻辑在 `src/utils/useOrientation.ts` 与通用组件中。
+- 页面按 `1920 x 1080` 设计稿开发，整体缩放由 `src/course-runtime/canvas` 的 `CourseCanvas` 组件承担。
+- 横屏访问提示由 `src/course-runtime/orientation` 的 `OrientationGuard` 组件承担。
 - 易班能力通过 `src/utils/yiban.ts` 和 `public/videoajax/` 相关脚本封装。
 - 移动端调试使用 `src/utils/vconsole.ts`。
 - 新增通用组件时，同步考虑是否需要在 [src/pages/Components/index.tsx](src/pages/Components/index.tsx) 增加示例。

README.md

@@ -1,101 +1,312 @@
-# React Vite Template
+# 食品添加剂侦探课程
 
-一个基于 React 19、TypeScript、Vite、React Router 和 Tailwind CSS 的前端项目模板。
+「零食侦探事务所」主题的食品添加剂网络课程。学生以实习侦探身份，围绕一段关于零食添加剂的网络舆论展开探案式学习，在「接收线索 → 开展调查 → 获取证据 → 作出判定」的流程中，逐步建立对食品添加剂的科学认知。
 
-## 特性
+课程面向易班 H5 平台交付，按 1920×1080 设计稿开发，整体等比缩放适配 PC 与移动端横屏。
+
+## 课程概要
+
+### 学习路径
+
+学生首次学习沿剧情主线推进，完成每个阶段的调查任务即可积累经验、提升侦探等级：
+
+```text
+实习侦探（序幕）
+  ↓
+助理侦探（第一幕）
+  ↓
+初级侦探（第二幕）
+  ↓
+中级侦探（第三幕）
+  ↓
+高级侦探（第四幕）
+  ↓
+食安神探（终章 · 零食风暴）
+```
+
+### 四条调查线
+
+序幕从前情舆论视频切入，学生从求助信中梳理出四条调查线索，分别对应四幕核心案件：
+
+| 案件 | 调查线 | 待核验说法 | 核心问题 |
+| --- | --- | --- | --- |
+| 🌈 色彩迷局 | 着色剂身份线 / 来源辨析线 | 「颜色这么鲜艳，色素肯定没少加」 | 食品里的「色素」是什么？天然与人工合成能直接代表安全吗？ |
+| 🍊 味觉密码 | 香精与风味线 | 「水果味都是香精调出来的」 | 食品的香气从哪里来？香精的使用是否有据可依？ |
+| 🍮 Q 弹真相 | 增稠剂线 | 「果冻 Q 弹是因为加了很多胶」 | 「胶」是什么？增稠剂在食品中起什么作用？ |
+| ⏳ 保鲜疑云 | 防腐剂线 | 「面包放得久是因为防腐剂多」 | 防腐剂为什么被使用？如何判断其安全性？ |
+
+每条调查线统一遵循五步调查轨迹：**待核验说法 → 调查问题 → 探查方式 → 关键证据 → 调查判定**。
+
+### 核心教学要点
+
+- **着色剂**：赋予或改善食品色泽的一类食品添加剂；食品有颜色不等于额外加入了着色剂，颜色鲜艳也不代表用量多。
+- **身份核验**：能染色 ≠ 可作为食品着色剂。苏丹红是工业染料、非法添加物，不属于食品着色剂；胭脂红、栀子黄等才具有食品着色剂身份。
+- **天然 vs 人工合成**：两者首先反映的是来源与获得方式不同，不能直接等同于「安全」与「有害」；无论哪种来源，都要结合具体物质、食品类别及相应标准判断。
+- **铝色淀**：把水溶性着色剂转变为水不溶性着色形态，满足彩色糖衣、蛋糕装饰等不掉色、不迁移的加工需要。
+- **国标意识**：GB 2760-2024《食品安全国家标准 食品添加剂使用标准》对每种允许使用的添加剂的适用食品类别、最大使用量、使用范围均有严格规定。
+
+### 案件档案与学习资源
+
+课程把调查过程中产生和解锁的内容沉淀为「零食侦探事务所」资源清单，首次学习沿剧情推进，完成后可脱离剧情顺序回看复习：
+
+| 分类 | 功能定位 |
+| --- | --- |
+| 01 物证材料 | 案件调查的原始物证，调查的事实起点 |
+| 02 收件箱 | 市民求助、补充线索及后续来信 |
+| 03 调查资料 | 科普动画、微课、案例短片、旧案资料，承担主要知识讲解 |
+| 04 调查成果 | 学生实际完成过的调查操作及判断记录 |
+| 05 添加剂档案 | 持续积累的食品添加剂知识库，学一个解锁一个 |
+| 06 国标档案 | 培养「遇到添加剂问题查标准」的意识，提供标准依据 |
+| 07 案件线索板 | 剧情导航与学习进度导航，首页常驻入口 |
+| 08 调查报告 | 对一幕中多条调查线的最终汇总与消费建议 |
+| 09 侦探等级 | 学习者身份与整体课程成长记录 |
+
+## 技术栈
 
 - React 19 + TypeScript
-- Vite 6 开发与构建
-- React Router 7 路由管理
-- 路由页面懒加载
-- Tailwind CSS 4
+- Vite 8 开发与构建
+- React Router 7 路由管理（Hash 路由 + 懒加载）
+- Tailwind CSS 4 原子化样式
+- Zustand 轻量状态管理
+- GSAP + @gsap/react 动效
+- dnd-kit 拖拽交互
 - Biome 代码格式化与检查
 - Husky + lint-staged 提交前检查
-- `@` 指向 `src` 的路径别名
-- 组件分层：通用组件、业务组件、页面组件
-
-## 使用模板
-
-### 通过 GitHub 页面创建
-
-1. 打开模板仓库页面
-2. 点击 **Use this template**
-3. 创建自己的新仓库
-4. 克隆新仓库并安装依赖
-
-```bash
-git clone https://github.com/your-name/your-app.git
-cd your-app
-bun install
-bun dev
-```
-
-### 通过 GitHub CLI 创建
-
-```bash
-gh repo create my-react-app --template your-name/react-vite-template --public
-cd my-react-app
-bun install
-bun dev
-```
-
-创建项目后，建议修改 [package.json](package.json) 中的 `name` 字段。
+- 1920×1080 整体缩放适配
+- 横屏访问提示
+- vconsole 移动端调试（仅开发环境）
+- 易班 videoajax.js 封装与用户信息状态管理
 
 ## 开发命令
 
 ```bash
-bun dev        # 启动开发服务器
-bun build      # 类型检查并构建生产版本
-bun preview    # 预览生产构建
-bun lint       # 代码检查
-bun lint:fix   # 自动修复代码问题
+bun install        # 安装依赖
+bun dev            # 启动开发服务器
+bun run build      # 类型检查并构建生产版本
+bun run preview    # 预览生产构建
+bun run lint       # 代码检查
+bun run lint:fix   # 自动修复代码问题
 ```
 
+修改代码后至少运行 `bun run lint`；涉及路由、构建配置、页面结构或类型系统的改动，同时运行 `bun run build`。
+
+## 应用配置
+
+页面标题、描述、图标、课程标识和 viewport 统一维护在 [src/app.config.ts](src/app.config.ts)。修改后需重启开发服务。
+
 ## 目录结构
 
 ```text
 src/
-├── api/          # API 请求相关代码
-├── assets/       # 项目资源
-├── components/   # 组件
-│   ├── business/ # 业务组件
-│   └── common/   # 通用组件
-├── hooks/        # 自定义 Hooks
-├── pages/        # 页面组件
-├── router/       # 路由配置
-├── styles/       # 全局样式
-├── types/        # TypeScript 类型
-└── utils/        # 工具函数
+├── api/                   # API 请求封装
+├── assets/                # 静态资源
+│   └── images/            # 课程切图（按页面分子目录）
+├── components/
+│   ├── business/          # 业务组合组件
+│   ├── common/            # 通用组件（Button、Overlay、Portal、Toast、ImageButton 等）
+│   ├── course-interactions/ # 课程交互（GuideDialog、GuideSpotlight、DragDrop）
+│   └── ui/                # 基础 UI 组件
+├── course-runtime/        # 固定课程画布运行时（缩放、横屏守护）
+├── lib/cn.ts              # class 合并工具
+├── pages/                 # 页面组件
+├── router/                # 路由配置
+├── stores/                # Zustand 状态管理
+├── styles/                # 全局样式
+├── types/                 # 跨模块共享类型
+└── utils/                 # 工具函数（assets、motion、yiban、lazyRoute 等）
 ```
 
-## 路由懒加载
+完整开发规范见 [CLAUDE.md](CLAUDE.md)。
 
-模板内置了 `lazyRoute` 工具函数，新页面可以这样配置：
+## 课程交互能力
+
+项目内置一套课程交互能力，用于支撑探案式学习中的对话、引导、拖拽、弹层等场景。这些源码直接维护在当前仓库，可按需修改。
+
+### 引导聚光灯 SpotlightGuide
+
+适合课程首次学习时突出关键操作区域。在元素上标注 `data-guide`，在页面初始化时启动引导：
+
+```tsx
+import { useEffect } from "react";
+import { GuideSpotlight } from "@/components/common";
+import { useSpotlightStore } from "@/stores";
+
+export default function LessonPage() {
+	useEffect(() => {
+		useSpotlightStore.getState().startSpotlight({
+			courseId: "color-mystery",
+			spotlightId: "intro",
+			steps: [
+				{
+					id: "start",
+					target: { dataGuide: "start-button" },
+					title: "开始调查",
+					description: "点击这里开始第一幕调查。",
+					placement: "bottom",
+					allowTargetClick: true,
+				},
+			],
+		});
+	}, []);
+
+	return (
+		<>
+			<button data-guide="start-button">立即立案</button>
+			<GuideSpotlight />
+		</>
+	);
+}
+```
+
+- `target` 支持 CSS selector 或 `{ dataGuide: "xxx" }`。
+- `placement`：`top` / `bottom` / `left` / `right` / `auto`。
+- `allowTargetClick`：让高亮区域下方的真实元素可被点击，但不会自动切换步骤，需在业务点击逻辑中手动调用 `nextStep` / `finishSpotlight` / `closeSpotlight`。
+- 同一 `courseId + spotlightId` 默认只显示一次（完成或跳过即标记已完成），可用 `resetSpotlight(courseId, spotlightId)` 重新显示。
+- 组件内置遮罩淡入、高亮呼吸和提示框入场动画，并兼容系统 `prefers-reduced-motion`。
+
+### 引导对话 GuideDialog
+
+适合在剧情节点弹出侦探助手对话、问题选择等。通过 `defineDialog` 定义、`GuideDialog` 渲染：
+
+```tsx
+import { defineDialog, GuideDialog } from "@/components/common";
+
+const dialog = defineDialog({ /* steps, characters, ... */ });
+
+dialog.start();
+```
+
+### 拖拽交互 DragDrop
+
+基于 dnd-kit，适合证据分类、调查轨迹排序、选项匹配等交互：
+
+```tsx
+import { DragDropProvider, Draggable, Droppable } from "@/components/course-interactions/drag-drop";
+import { useCourseCanvas } from "@/course-runtime/canvas";
+
+const { scale } = useCourseCanvas();
+
+<DragDropProvider scale={scale} onDragEnd={(event) => console.log(event.active.id, event.over?.id)}>
+	<Draggable id="tartrazine">柠檬黄</Draggable>
+	<Droppable id="natural-zone">天然来源</Droppable>
+</DragDropProvider>
+```
+
+由于画布整体使用 `transform: scale(...)` 缩放，拖拽内容在画布内时建议给 `DragDropProvider` 传入当前 `scale`，避免拖拽元素与手指/鼠标移动不同步。
+
+### 动效 GSAP
+
+项目通过 [src/utils/motion.ts](src/utils/motion.ts) 统一封装 GSAP 入口：`gsap` / `useGSAP` 已注册导出，提供统一缓动常量 `EASE_OUT` / `EASE_IN_OUT`，以及 `useReducedMotion()` 响应 `prefers-reduced-motion` 做动画降级。后续课程页面需要 ScrollTrigger 等插件时，在该文件按需 `registerPlugin`。
+
+```ts
+import { gsap, useGSAP, EASE_OUT, useReducedMotion } from "@/utils";
+```
+
+### 弹层 Overlay / Portal
+
+`Overlay` 已内置 `Portal`，默认挂载到 App 缩放画布内部，适合课程弹窗跟随画布缩放：
+
+```tsx
+import { Overlay } from "@/components/common";
+
+<Overlay
+	open={open}
+	onClose={() => setOpen(false)}
+	backgroundImage="url(./images/dialog-bg.png)"
+	backgroundClassName="bg-cover bg-center"
+>
+	{/* 课程弹层内容 */}
+</Overlay>
+```
+
+`Portal` 默认挂载到 `document.body`，`Overlay` 默认 `placement="app"`（跟随画布缩放）；也可用 `placement="app"` 或 `container` 自定义挂载位置。挂载优先级：`container` > `placement` > 组件默认值。
+
+### Toast 轻提示
+
+`App` 已默认接入 `ToastProvider` 和 `ToastViewport`，页面中可直接使用：
+
+```tsx
+import { useToast } from "@/components/common";
+
+const toast = useToast();
+toast.success("证据已收入档案");
+toast.error("选择有误，请重新核验");
+```
+
+支持 `info` / `success` / `warning` / `error` / `show`。
+
+## 易班平台接入
+
+项目面向易班 H5 / 静态资源相对路径部署，Vite `base` 固定为 `"./"`，确保构建产物在未知子路径或压缩包上传场景下仍能引用资源。
+
+### videoajax.js
+
+已集成易班 [public/videoajax/jquery-3.7.1.min.js](public/videoajax/jquery-3.7.1.min.js) 与 [public/videoajax/videoajax.js](public/videoajax/videoajax.js)，需与构建产物同源、同相对路径部署。若易班平台提供新版本，确认来源、版本和分发权限后再替换，并重新验证用户数据、课程进度、断点和答题记录能力。
+
+### 环境判断
+
+启动时从 URL 读取 `courseId` / `courseid`、`uid`。生产环境中只要存在以上任意参数即视为易班环境。
+
+本地开发即使 URL 带这些参数也默认使用 `sessionStorage`，避免误请求易班接口：
+
+```text
+http://localhost:5173/?courseId=123&uid=456
+```
+
+本地确需强制走易班接口时追加 `yiban=1`：
+
+```text
+http://localhost:5173/?courseId=123&uid=456&yiban=1
+```
+
+### 易班能力
+
+```ts
+import {
+	setUserStorage,
+	getUserStorage,
+	reportCourseProgress,
+	getCourseProgress,
+	saveBreakPoint,
+	getBreakPoint,
+	saveUserAnswer,
+} from "@/utils/yiban";
+import { useUserStore } from "@/stores";
+```
+
+- **存取用户数据**：`setUserStorage(lessonId, key, value)` / `getUserStorage(lessonId, key)`，自动根据易班连接状态选择存储方式。
+- **课程进度**：`reportCourseProgress(order)` / `getCourseProgress(order)`。
+- **播放断点**：`saveBreakPoint({ userId, courseId, lessonId, breakPoint })` / `getBreakPoint(...)`。
+- **答题记录**：`saveUserAnswer({ userId, lessonId, courseId, questionOrder, answer })`。
+- **用户状态**：`useUserStore()` 提供 `userId`、`userName`、`setUserInfo`、`setYibanConnectionStatus` 等。
+
+### 移动端调试
+
+开发环境自动启用 vconsole，可在移动端查看 Console、Network、Element、Storage。
+
+## 课程画布适配
+
+按 1920×1080 设计稿开发，由 [src/course-runtime/canvas](src/course-runtime/canvas) 的 `CourseCanvas` 组件承担整体缩放，默认 `width=1920`、`height=1080`、`maxScale=1`。
+
+- PC 端：按可视区域等比缩放并居中。
+- 大屏：`maxScale` 默认为 1，不超过设计稿原始尺寸，周围留白。
+- 移动端：优先横屏访问，竖屏时由 `OrientationGuard` 显示横屏提示。
+- 视口优先读取 `visualViewport`，移动端地址栏显示/隐藏时更稳定。
+- 页面内容按设计稿像素开发，不使用 rem 适配。
+
+## 路由
+
+路由集中在 [src/router/index.tsx](src/router/index.tsx)，使用 Hash 路由 + `lazyRoute` 懒加载，新增页面遵循该模式并配 `HydrateFallback: RouteFallback`：
 
 ```tsx
 {
-  path: "about",
-  lazy: lazyRoute(() => import("../pages/About/About")),
+	path: "about",
+	lazy: lazyRoute(() => import("../pages/About")),
+	HydrateFallback: RouteFallback,
 }
 ```
 
-页面组件使用默认导出：
-
-```tsx
-export default function About() {
-  return <div>About</div>;
-}
-```
-
-## 发布为 GitHub 模板仓库
-
-如果你要把这个项目作为模板发布：
-
-1. 推送到 GitHub
-2. 进入仓库 **Settings**
-3. 勾选 **Template repository**
-
-之后其他人就可以通过 **Use this template** 使用它。
+页面组件使用默认导出。
 
 ## License
 

bun.lock

@@ -7,7 +7,9 @@
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/utilities": "^3.2.2",
+        "@gsap/react": "^2.1.2",
         "clsx": "^2.1.1",
+        "gsap": "^3.15.0",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
         "react-router-dom": "^7.12.0",
@@ -68,6 +70,8 @@
 
     "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="],
 
+    "@gsap/react": ["@gsap/react@2.1.2", "https://registry.npmmirror.com/@gsap/react/-/react-2.1.2.tgz", { "peerDependencies": { "gsap": "^3.12.5", "react": ">=17" } }, "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -216,6 +220,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "gsap": ["gsap@3.15.0", "https://registry.npmmirror.com/gsap/-/gsap-3.15.0.tgz", {}, "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A=="],
+
     "husky": ["husky@9.1.7", "https://registry.npmmirror.com/husky/-/husky-9.1.7.tgz", { "bin": { "husky": "bin.js" } }, "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA=="],
 
     "is-fullwidth-code-point": ["is-fullwidth-code-point@5.1.0", "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz", { "dependencies": { "get-east-asian-width": "^1.3.1" } }, "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ=="],

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "react-template",
+	"name": "food-add-edu",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",
@@ -18,7 +18,9 @@
 	"dependencies": {
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/utilities": "^3.2.2",
+		"@gsap/react": "^2.1.2",
 		"clsx": "^2.1.1",
+		"gsap": "^3.15.0",
 		"react": "^19.2.7",
 		"react-dom": "^19.2.7",
 		"react-router-dom": "^7.12.0",

src/App.tsx

@@ -1,15 +1,34 @@
+import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
-import { Navigation } from "./components/business";
-import { cn } from "./utils";
+import { ToastProvider, ToastViewport } from "@/components/ui/toast";
+import { CourseCanvas, useCourseCanvas } from "@/course-runtime/canvas";
+import { OrientationGuard } from "@/course-runtime/orientation";
+import { registerAppPortalRoot } from "./components/common/canvasPortal";
+
+function CourseShell() {
+	const { portalContainer } = useCourseCanvas();
+
+	useEffect(() => registerAppPortalRoot(portalContainer), [portalContainer]);
+
+	return (
+		<ToastProvider>
+			<Outlet />
+			<ToastViewport container={portalContainer} />
+		</ToastProvider>
+	);
+}
 
 function App() {
 	return (
-		<div className={cn("min-h-screen flex flex-col")}>
-			<Navigation />
-			<main className={cn("flex-1 p-8")}>
-				<Outlet />
-			</main>
-		</div>
+		<>
+			<OrientationGuard />
+			<CourseCanvas
+				className="bg-gray-900"
+				canvasClassName="flex flex-col overflow-hidden bg-white"
+			>
+				<CourseShell />
+			</CourseCanvas>
+		</>
 	);
 }
 

src/app.config.ts

@@ -0,0 +1,35 @@
+/**
+ * 应用配置
+ * 修改此文件后需要重启开发服务
+ */
+const env = (import.meta as ImportMeta & { env?: Record<string, string> }).env;
+
+export const appConfig = {
+	/** 应用标题 */
+	title: "食品添加剂侦探课程",
+
+	/** 网站描述 */
+	description: "零食侦探事务所 · 食品添加剂网络课程",
+
+	/** Favicon 路径（相对于 public 目录） */
+	favicon: "./vite.svg",
+
+	/** 课程配置 */
+	course: {
+		id: env?.VITE_COURSE_ID ?? "food-add-edu",
+		name: env?.VITE_COURSE_NAME ?? "食品添加剂侦探课程",
+	},
+
+	/** 本地存储配置 */
+	storage: {
+		prefix: "food-add-edu",
+	},
+
+	/** 视口配置 */
+	viewport: {
+		width: "device-width",
+		initialScale: 1.0,
+		minimumScale: 1.0,
+		maximumScale: 1.0,
+	},
+};

src/assets/images/record/侦探助手.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 793.01 162.76"><defs><style>.cls-1{opacity:0.55;}.cls-2{fill:#e8f9b8;}.cls-3{fill:none;stroke:#d4d97c;stroke-miterlimit:10;stroke-width:2px;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><image opacity="0.55" width="793" height="162" transform="translate(0.01 0.76)" xlink:href="data:image/png;base64,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 truncated