diff --git a/AGENTS.md b/AGENTS.md
index 0e09022..69f9559 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -66,7 +66,7 @@ yarn dev
 默认访问地址：
 
 ```text
-http://localhost:5601
+http://localhost:5602
 ```
 
 本地联调要求：
@@ -88,7 +88,7 @@ yarn build
 yarn preview
 ```
 
-默认预览端口为 `5602`。
+默认预览端口为 `5603`。
 
 ## 测试流程
 
diff --git a/README.md b/README.md
index e608685..cb7c537 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,9 @@ yarn install
 yarn dev
 ```
 
-访问：http://localhost:5601
+访问：http://localhost:5602
+
+局域网访问可使用本机 IP，例如 `http://192.168.1.23:5602/`。该地址由 Vite dev server 提供，支持样式和组件热更新。
 
 默认后台账号由 `WonderQ-Admin` 提供：`admin@example.com / ChangeMe123!`。
 
@@ -33,6 +35,6 @@ yarn dev
 - `src/styles.css`：Tailwind 入口、设计变量、后台布局和响应式样式。
 - `public/assets/`：后台预览所需静态资源，保留 `/assets/...` 引用方式。
 - `components.json`：shadcn/ui 组件配置。
-- `vite.config.ts`：开发环境将 `/api` 代理到 `http://localhost:4000`，并接入 Tailwind Vite 插件与 `@/*` 路径别名。
+- `vite.config.ts`：开发环境将 `/api` 代理到 `http://localhost:4000`，dev server 固定运行在 `5602` 并支持 HMR；生产构建预览运行在 `5603`。
 
 本仓库已经独立，不再依赖 `WonderQ-MiniAPP` 的相对路径。
diff --git a/docs/README.md b/docs/README.md
index 383d67d..295a6be 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -3,5 +3,6 @@
 本目录存放后台管理前端相关文档。
 
 - `admin-backend-plan.md`：从原 MiniAPP 迁出的后台管理规划，保留管理模块、页面能力和与后端 API 的协作边界。
+- `admin-module-config-api.md`：页面模块配置 CRUD 接口契约，供 WonderQ-Admin 后端实现首页轮播、目的地、主题卡和 CTA 等模块配置接口。
 
-后端 API 文档位于 `D:\www\znkj\WonderQ-Admin\docs`。
\ No newline at end of file
+后端 API 文档位于 `D:\www\znkj\WonderQ-Admin\docs`。
diff --git a/docs/admin-module-config-api.md b/docs/admin-module-config-api.md
new file mode 100644
index 0000000..3c0fd59
--- /dev/null
+++ b/docs/admin-module-config-api.md
@@ -0,0 +1,401 @@
+# 页面模块配置 Admin API 契约
+
+本文档定义 WonderQ-Admin 后端需要为 WonderQ-Admin-UI 实现的页面模块配置 CRUD 接口。接口用于维护小程序/H5 前台页面模块中的配置数据，例如首页轮播、目的地宫格、主题卡片和底部运营入口。
+
+## 适用模块
+
+当前一期只纳入结构化页面配置模块：
+
+| module         | 名称         | 用途                                           |
+| -------------- | ------------ | ---------------------------------------------- |
+| `heroSlides`   | 顶部轮播     | 首页首屏轮播图、标题短文案、展示排序和启用状态 |
+| `destinations` | 目的地       | 首页/目的地页展示、搜索入口和热门标记          |
+| `themes`       | 主题甄选     | 首页主题卡片和跳转                             |
+| `ctaBanners`   | 底部运营入口 | 权益卡、管家入口、需求入口等 CTA               |
+
+商品池、活动商品池和线索跟进继续走独立业务接口，不混入本契约。
+
+## 通用约定
+
+- 所有接口前缀为 `/api/admin`。
+- 所有接口需要校验 `Authorization: Bearer <token>`。
+- 请求和响应均为 `application/json`。
+- 字段使用 camelCase。
+- `PATCH` 为部分更新，只修改请求体中出现的字段。
+- 删除接口返回 JSON，不能返回空 body，因为当前前端请求封装会读取 JSON。
+
+错误响应保持当前前端兼容格式：
+
+```json
+{
+  "message": "模块不存在或无权限操作",
+  "code": "MODULE_CONFIG_FORBIDDEN",
+  "details": {}
+}
+```
+
+## 类型定义
+
+```ts
+type SiteModule = "heroSlides" | "destinations" | "themes" | "ctaBanners";
+
+type SiteItemPatch = {
+  title?: string;
+  kicker?: string;
+  name?: string;
+  slug?: string;
+  region?: string | null;
+  label?: string;
+  alt?: string;
+  image?: string | null;
+  targetType?: string | null;
+  targetValue?: string | null;
+  isHot?: boolean;
+  isActive?: boolean;
+  sortOrder?: number;
+};
+
+type HeroSlide = {
+  id: string;
+  title: string;
+  kicker: string | null;
+  image: string | null;
+  isActive: boolean;
+  sortOrder: number;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+type HeroSlideCreateInput = {
+  title: string;
+  kicker?: string | null;
+  image?: string | null;
+  isActive?: boolean;
+  sortOrder?: number;
+};
+
+type HeroSlideUpdateInput = Partial<HeroSlideCreateInput>;
+```
+
+各模块字段要求：
+
+| module         | 创建必填 | 可选字段                                                      |
+| -------------- | -------- | ------------------------------------------------------------- |
+| `heroSlides`   | `title`  | `kicker`、`image`、`isActive`、`sortOrder`                    |
+| `destinations` | `name`   | `slug`、`region`、`image`、`isHot`、`isActive`、`sortOrder`   |
+| `themes`       | `label`  | `image`、`targetType`、`targetValue`、`isActive`、`sortOrder` |
+| `ctaBanners`   | `alt`    | `image`、`targetType`、`targetValue`、`isActive`、`sortOrder` |
+
+后端可以在创建时补全 `id`、默认 `isActive=true`、默认 `sortOrder=当前模块最后一位`。
+
+## 顶部轮播 `heroSlides` 专用契约
+
+顶部轮播对应当前管理端抽屉中的 3 个区域：
+
+- 展示内容：`title`、`kicker`
+- 资源图片：`image`
+- 排序与状态：`sortOrder`、`isActive`
+
+字段语义：
+
+| 字段        | 类型             | 创建     | 更新       | 说明                                                                   |
+| ----------- | ---------------- | -------- | ---------- | ---------------------------------------------------------------------- |
+| `id`        | `string`         | 后端生成 | 不允许修改 | 顶部轮播配置项唯一 id                                                  |
+| `title`     | `string`         | 必填     | 可选       | 前台轮播主标题，提交时需要去除首尾空格，不能为空                       |
+| `kicker`    | `string \| null` | 可选     | 可选       | 副标题/短文案，空字符串可归一化为 `null` 或 `""`，前后端需保持响应一致 |
+| `image`     | `string \| null` | 可选     | 可选       | 单张轮播图地址或素材 URL；未上传时为 `null`                            |
+| `sortOrder` | `number`         | 可选     | 可选       | 展示顺序，整数；未传时追加到当前模块末尾                               |
+| `isActive`  | `boolean`        | 可选     | 可选       | 前台是否展示；未传时默认 `true`                                        |
+| `createdAt` | `string`         | 后端生成 | 后端维护   | ISO 时间字符串，可选返回                                               |
+| `updatedAt` | `string`         | 后端生成 | 后端维护   | ISO 时间字符串，可选返回                                               |
+
+顶部轮播不定义跳转能力。`heroSlides` 的创建、更新、查询响应中不要返回 `targetType`、`targetValue`；兼容期如果请求体携带这两个字段，后端可以忽略，但不要写入顶部轮播业务数据。
+
+### 顶部轮播 CRUD
+
+新增顶部轮播：
+
+```http
+POST /api/admin/site-config/heroSlides
+```
+
+请求体：
+
+```json
+{
+  "title": "新轮播",
+  "kicker": "贵州小包团首选",
+  "image": "/assets/source/hero.jpg",
+  "isActive": true,
+  "sortOrder": 0
+}
+```
+
+响应状态码 `201`：
+
+```json
+{
+  "id": "slide_001",
+  "title": "新轮播",
+  "kicker": "贵州小包团首选",
+  "image": "/assets/source/hero.jpg",
+  "isActive": true,
+  "sortOrder": 0,
+  "createdAt": "2026-07-01T08:00:00.000Z",
+  "updatedAt": "2026-07-01T08:00:00.000Z"
+}
+```
+
+更新顶部轮播：
+
+```http
+PATCH /api/admin/site-config/heroSlides/:id
+```
+
+请求体为 `HeroSlideUpdateInput`，只提交需要修改的字段：
+
+```json
+{
+  "title": "夏日贵州小包团",
+  "image": null,
+  "isActive": false
+}
+```
+
+响应状态码 `200`，响应体返回更新后的完整 `HeroSlide`。
+
+删除顶部轮播：
+
+```http
+DELETE /api/admin/site-config/heroSlides/:id
+```
+
+响应状态码 `200`：
+
+```json
+{
+  "id": "slide_001"
+}
+```
+
+删除后后端需要重新整理 `heroSlides` 内剩余项的 `sortOrder`。
+
+调整顶部轮播顺序：
+
+```http
+PATCH /api/admin/site-config/heroSlides/reorder
+```
+
+请求体：
+
+```json
+{
+  "itemIds": ["slide_002", "slide_001", "slide_003"]
+}
+```
+
+响应状态码 `200`：
+
+```json
+{
+  "items": [
+    {
+      "id": "slide_002",
+      "title": "第二张",
+      "kicker": null,
+      "image": null,
+      "sortOrder": 0,
+      "isActive": true
+    },
+    {
+      "id": "slide_001",
+      "title": "第一张",
+      "kicker": null,
+      "image": null,
+      "sortOrder": 1,
+      "isActive": true
+    }
+  ]
+}
+```
+
+## 接口列表
+
+以下路径由四类页面模块复用；`heroSlides` 的请求体和响应体以“顶部轮播专用契约”为准。
+
+### 获取完整站点配置
+
+```http
+GET /api/admin/site-config
+```
+
+响应：
+
+```ts
+type SiteConfig = {
+  heroSlides: HeroSlide[];
+  destinations: Destination[];
+  themes: ThemeCard[];
+  ctaBanners: CtaBanner[];
+};
+```
+
+### 新增模块配置项
+
+```http
+POST /api/admin/site-config/:module
+```
+
+请求体为 `SiteItemPatch`。响应状态码 `201`，响应体返回创建后的完整配置项：
+
+```json
+{
+  "id": "slide_001",
+  "title": "新轮播",
+  "kicker": "",
+  "image": null,
+  "isActive": true,
+  "sortOrder": 5
+}
+```
+
+### 更新模块配置项
+
+```http
+PATCH /api/admin/site-config/:module/:id
+```
+
+请求体为 `SiteItemPatch`。响应状态码 `200`，响应体返回更新后的完整配置项。
+
+### 删除模块配置项
+
+```http
+DELETE /api/admin/site-config/:module/:id
+```
+
+响应状态码 `200`，响应体：
+
+```json
+{
+  "id": "slide_001"
+}
+```
+
+删除后后端需要重新整理同模块内剩余项的 `sortOrder`。
+
+### 调整模块配置顺序
+
+```http
+PATCH /api/admin/site-config/:module/reorder
+```
+
+请求体：
+
+```json
+{
+  "itemIds": ["slide_002", "slide_001", "slide_003"]
+}
+```
+
+约束：
+
+- `itemIds` 必须包含该模块当前全部配置项 id。
+- 不允许重复 id。
+- 不允许混入其他模块 id。
+- 后端按数组顺序写入 `sortOrder`，从 0 开始。
+
+响应状态码 `200`：
+
+```json
+{
+  "items": [
+    { "id": "slide_002", "title": "第二张", "sortOrder": 0, "isActive": true },
+    { "id": "slide_001", "title": "第一张", "sortOrder": 1, "isActive": true }
+  ]
+}
+```
+
+如果后端使用 Express/Fastify 等路由，`/:module/reorder` 需要注册在 `/:module/:id` 之前，避免 `reorder` 被当成 id。
+
+## 状态码
+
+| 状态码 | 场景                                             |
+| ------ | ------------------------------------------------ |
+| `200`  | 查询、更新、删除、排序成功                       |
+| `201`  | 创建成功                                         |
+| `400`  | module 非法、请求体格式错误、排序 id 不完整      |
+| `401`  | 未登录或 token 无效                              |
+| `403`  | 无权限维护页面配置                               |
+| `404`  | 配置项不存在                                     |
+| `409`  | 删除被发布版本、商品或活动引用的配置项时发生冲突 |
+| `422`  | 字段校验失败，例如必填标题为空                   |
+| `500`  | 服务端异常                                       |
+
+## 前端联调入口
+
+WonderQ-Admin-UI 当前调用函数位于 `src/api.ts`：
+
+- `getSiteConfig()`
+- `createSiteConfigItem(module, input)`
+- `updateSiteConfigItem(module, id, input)`
+- `deleteSiteConfigItem(module, id)`
+- `reorderSiteConfigItems(module, itemIds)`
+
+维护地图 UI 位于 `src/pages/structure/StructurePage.tsx`。
+
+## 图片素材上传
+
+用于 WonderQ-Admin-UI 在维护页面模块图片时上传本地图片，并把返回的 OSS URL 写入 `image` 字段。
+
+```http
+POST /api/admin/media-assets/upload
+Content-Type: multipart/form-data
+Authorization: Bearer <token>
+```
+
+表单字段：
+
+| 字段 | 类型 | 必填 | 说明 |
+| --- | --- | --- | --- |
+| `file` | `File` | 是 | 图片文件，仅支持 JPG、PNG、WebP、GIF |
+| `group` | `string` | 否 | 素材分组，只能包含字母、数字、下划线和中划线；默认 `general` |
+
+限制：
+
+- 单个文件最大 5MB。
+- 后端会校验 `Content-Type` 和文件头魔数，拒绝 SVG、非图片文件和伪装类型。
+- 后端将文件上传到 OSS，返回可用于前台展示的 URL，并写入 `MediaAsset` 素材记录。
+
+响应状态码 `201`：
+
+```json
+{
+  "id": "asset_001",
+  "url": "https://bucket.oss-cn-example.aliyuncs.com/admin/heroSlides/2026/07/01/example.png",
+  "name": "hero.png",
+  "mimeType": "image/png",
+  "sizeBytes": 102400,
+  "group": "heroSlides",
+  "createdAt": "2026-07-01T08:00:00",
+  "updatedAt": "2026-07-01T08:00:00"
+}
+```
+
+常见错误：
+
+| 状态码 | `code` | 场景 |
+| --- | --- | --- |
+| `400` | `MEDIA_UPLOAD_INVALID_TYPE` | 文件不是允许的图片类型 |
+| `400` | `MEDIA_UPLOAD_TYPE_MISMATCH` | `Content-Type` 与文件头不一致 |
+| `400` | `MEDIA_UPLOAD_INVALID_GROUP` | `group` 格式非法 |
+| `413` | `MEDIA_UPLOAD_TOO_LARGE` | 文件超过 5MB |
+| `503` | `MEDIA_STORAGE_NOT_CONFIGURED` | OSS 环境配置不完整 |
+| `502` | `MEDIA_STORAGE_UPLOAD_FAILED` | OSS 上传失败 |
+
+前端封装位于 `src/api.ts`：
+
+```ts
+uploadMediaAsset(file: File, group?: string): Promise<MediaAsset>
+```
+
+`src/components/admin/SingleImageUploader.tsx` 已使用该封装；结构维护页会把当前模块 id 作为 `group` 上传。
diff --git a/package.json b/package.json
index 33d4abf..12960b5 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --host 0.0.0.0 --port 5601",
+    "dev": "vite",
     "build": "tsc --noEmit && vite build",
-    "preview": "vite preview --host 0.0.0.0 --port 5602"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@radix-ui/react-select": "^2.3.2",
diff --git a/src/App.tsx b/src/App.tsx
index acac029..f19291b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,1373 +1,15 @@
-import { FormEvent, ReactNode, useEffect, useMemo, useState } from "react";
-import {
-  AlertTriangle,
-  ArrowLeft,
-  Blocks,
-  ChevronRight,
-  CheckCircle2,
-  Eye,
-  FileText,
-  Home,
-  Image as ImageIcon,
-  LogOut,
-  MapPin,
-  Package,
-  Plus,
-  RefreshCcw,
-  Save,
-  Send,
-  Trash2,
-  X,
-  UserRoundCheck,
-} from "lucide-react";
-import {
-  clearToken,
-  createProduct,
-  Destination,
-  getDestinations,
-  getLeads,
-  getProducts,
-  getSiteConfig,
-  getToken,
-  Lead,
-  login,
-  Product,
-  ProductDetailBlock,
-  ProductDetailSection,
-  ProductInput,
-  publishSite,
-  resetGuizhouContent,
-  setToken,
-  SiteConfig,
-  SiteItemPatch,
-  SiteModule,
-  updateLeadStatus,
-  updateProduct,
-  updateSiteConfigItem,
-} from "./api";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { NativeSelect } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
+import { useState } from "react";
 
-type Tab = "structure" | "home" | "destinations" | "products" | "leads";
-type PageId = "home" | "destination" | "detail" | "campaign" | "demand";
-type ModuleId = SiteModule | "routeProducts" | "campaignProducts" | "leadFlow";
-type Toast = { id: string; tone: "success" | "warning" | "danger"; title: string; message: string };
-
-type EditableSiteItem = SiteConfig["heroSlides"][number] | SiteConfig["destinations"][number] | SiteConfig["themes"][number] | SiteConfig["ctaBanners"][number];
-
-const sidebarGroups: { id: string; label: string; items: { id: Tab; label: string; icon: typeof Home; description: string }[] }[] = [
-  {
-    id: "workspace",
-    label: "工作台",
-    items: [{ id: "structure", label: "维护地图", icon: Blocks, description: "前台结构总览" }],
-  },
-  {
-    id: "frontend",
-    label: "前台页面",
-    items: [
-      { id: "home", label: "小程序首页", icon: Home, description: "轮播、主题、CTA" },
-      { id: "destinations", label: "目的地页", icon: MapPin, description: "字典、搜索、商品" },
-      { id: "products", label: "商品维护", icon: Package, description: "列表、卡片、详情" },
-    ],
-  },
-  {
-    id: "operations",
-    label: "业务处理",
-    items: [{ id: "leads", label: "需求线索", icon: UserRoundCheck, description: "表单和跟进" }],
-  },
-];
-
-const tabs = sidebarGroups.flatMap((group) => group.items);
-
-const leadStatusLabels: Record<Lead["status"], string> = {
-  new: "新线索",
-  assigned: "已分配",
-  contacted: "已联系",
-  planning: "方案中",
-  won: "已成交",
-  invalid: "无效",
-};
-
-const pageSpecs: {
-  id: PageId;
-  title: string;
-  subtitle: string;
-  frontPath: string;
-  modules: { id: ModuleId; label: string; hint: string; frontPosition: string }[];
-}[] = [
-  {
-    id: "home",
-    title: "万趣首页",
-    subtitle: "维护用户进入小程序后第一屏到页尾的内容顺序。",
-    frontPath: "前台：首页 / bottom tab「万趣」",
-    modules: [
-      { id: "heroSlides", label: "顶部轮播", hint: "控制首屏大图、活动入口和主视觉顺序。", frontPosition: "首页第一屏" },
-      { id: "destinations", label: "探索贵州", hint: "控制省内目的地宫格、热门标记和搜索入口。", frontPosition: "首页「探索贵州」" },
-      { id: "themes", label: "主题甄选", hint: "控制横向主题卡和搜索跳转。", frontPosition: "首页「主题甄选」" },
-      { id: "routeProducts", label: "精选线路", hint: "从商品库选择上架线路，决定首页线路池。", frontPosition: "首页精选线路" },
-      { id: "ctaBanners", label: "底部运营入口", hint: "控制权益卡、服务管家入口、目的地搜索、提交需求入口。", frontPosition: "首页页尾 CTA" },
-    ],
-  },
-  {
-    id: "destination",
-    title: "目的地页",
-    subtitle: "维护目的地、别名和与商品的关联，影响搜索和目的地 tab。",
-    frontPath: "前台：bottom tab「目的地」/ 搜索弹层",
-    modules: [
-      { id: "destinations", label: "目的地字典", hint: "维护名称、封面、热门状态和启停。", frontPosition: "目的地首页和搜索列表" },
-      { id: "routeProducts", label: "目的地商品", hint: "商品绑定目的地后会进入对应结果页。", frontPosition: "搜索结果页产品列表" },
-    ],
-  },
-  {
-    id: "detail",
-    title: "商品维护",
-    subtitle: "维护用户点击商品卡后的详情页内容和售卖状态。",
-    frontPath: "前台：产品卡点击后详情页",
-    modules: [{ id: "routeProducts", label: "商品库", hint: "编辑标题、价格、封面、标签、详情模块和上下架。", frontPosition: "详情页、搜索页、首页商品卡" }],
-  },
-  {
-    id: "campaign",
-    title: "活动专题",
-    subtitle: "维护轮播、主题卡和 CTA 指向的活动内容。",
-    frontPath: "前台：轮播 / 主题卡 / CTA 跳转",
-    modules: [
-      { id: "heroSlides", label: "轮播活动入口", hint: "首屏主视觉上的活动入口。", frontPosition: "首页轮播" },
-      { id: "themes", label: "主题活动入口", hint: "主题卡片进入对应活动专题。", frontPosition: "主题甄选横滑区" },
-      { id: "ctaBanners", label: "营销 CTA", hint: "页尾活动和需求入口。", frontPosition: "首页底部运营区" },
-      { id: "campaignProducts", label: "活动商品池", hint: "活动专题内展示的商品来自商品库。", frontPosition: "活动专题产品列表" },
-    ],
-  },
-  {
-    id: "demand",
-    title: "需求线索",
-    subtitle: "维护用户提交出行需求后的分配和跟进。",
-    frontPath: "前台：提交出行需求 / 立即咨询",
-    modules: [{ id: "leadFlow", label: "线索跟进", hint: "查看联系方式、目的地、来源商品并推进状态。", frontPosition: "需求表单提交后" }],
-  },
-];
-
-function formatDate(value: string) {
-  return new Intl.DateTimeFormat("zh-CN", {
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  }).format(new Date(value));
-}
-
-function toProductInput(product?: Product | null): ProductInput {
-  const summary = product?.summary || product?.tags?.join(" · ") || "万趣贵州小包团定制体验";
-  return {
-    title: product?.title ?? "",
-    subtitle: product?.subtitle ?? "",
-    destinationId: product?.destinationId ?? product?.destination?.id ?? null,
-    priceAmount: product?.priceAmount ?? null,
-    priceUnit: product?.priceUnit ?? "起/人",
-    tags: product?.tags ?? [],
-    coverImage: product?.coverImage ?? "",
-    summary: product?.summary ?? "",
-    images: product?.images?.map((image, index) => ({
-      url: image.url,
-      alt: image.alt ?? "",
-      sortOrder: image.sortOrder ?? index,
-    })) ?? [],
-    detailSections: product?.detailSections?.length
-      ? product.detailSections
-      : defaultAdminDetailSections(summary, product?.destination?.name ?? "贵州省内定制"),
-    status: product?.status ?? "draft",
-    sortWeight: product?.sortWeight ?? 0,
-  };
-}
-
-function defaultAdminDetailSections(summary: string, location: string): ProductDetailSection[] {
-  return [
-    { key: "overview", label: "行程概述", title: "小包团专属概览", blocks: [{ type: "text", text: `${summary}。万趣会按同行人、预算、酒店偏好和体力强度重排细节，保留小车小团、错峰入园与在地向导服务。` }] },
-    { key: "itinerary", label: "每日行程", title: `${location} 弹性安排`, blocks: [{ type: "text", text: "默认按抵达接站、核心景点游览、特色体验、酒店休整和返程送站安排每日节奏；具体天数、停留时长和餐食可在行前由服务管家二次确认。" }] },
-    { key: "service", label: "包含/不含服务", title: "费用边界清晰", blocks: [{ type: "text", text: "通常包含当地用车、行程内住宿、列明门票/体验、必要讲解和服务管家跟进；大交通、个人消费、未列明餐食和自选项目以最终方案为准。" }] },
-    { key: "notice", label: "出行须知", title: "贵州山地旅行提示", blocks: [{ type: "text", text: "贵州多山多雨，建议准备防滑鞋、轻便雨具和薄外套；溶洞、漂流、徒步等体验会按天气和同行人体力调整。" }] },
-    { key: "price", label: "价格区间", title: "按人数、酒店和季节报价", blocks: [{ type: "text", text: "页面价格为参考起价，节假日、旺季房态、用车车型和体验资源会影响最终报价；提交需求后由服务管家给出可执行方案。" }] },
-    { key: "manager", label: "服务管家", title: "直接添加服务管家", blocks: [{ type: "text", text: "点击底部“服务管家”或拨打 18786174929，可直接添加服务管家沟通出行人数、日期、酒店偏好和预算。" }] },
-  ];
-}
-
-const productStatusLabels: Record<ProductInput["status"], string> = {
-  draft: "草稿",
-  published: "已上架",
-  archived: "已归档",
-};
-
-const detailSectionTemplates: Pick<ProductDetailSection, "key" | "label" | "title">[] = [
-  { key: "overview", label: "行程概述", title: "小包团专属概览" },
-  { key: "itinerary", label: "每日行程", title: "弹性安排" },
-  { key: "service", label: "包含/不含服务", title: "费用边界清晰" },
-  { key: "notice", label: "出行须知", title: "贵州山地旅行提示" },
-  { key: "price", label: "价格区间", title: "按人数、酒店和季节报价" },
-  { key: "manager", label: "服务管家", title: "直接添加服务管家" },
-];
-
-function createEmptyDetailSection(index: number): ProductDetailSection {
-  const template = detailSectionTemplates[index % detailSectionTemplates.length];
-  return {
-    key: template.key,
-    label: template.label,
-    title: template.title,
-    blocks: [{ type: "text", text: "" }],
-  };
-}
-
-function createDetailBlock(type: ProductDetailBlock["type"]): ProductDetailBlock {
-  return type === "image" ? { type: "image", url: "", alt: "" } : { type: "text", text: "" };
-}
-
-function compactProductPayload(draft: ProductInput): ProductInput {
-  return {
-    ...draft,
-    title: draft.title.trim(),
-    subtitle: draft.subtitle?.trim() || "",
-    priceUnit: draft.priceUnit?.trim() || "起/人",
-    tags: draft.tags.map((tag) => tag.trim()).filter(Boolean),
-    images: (draft.images ?? [])
-      .map((image, index) => ({
-        url: image.url.trim(),
-        alt: image.alt?.trim() || null,
-        sortOrder: index,
-      }))
-      .filter((image) => image.url.length > 0),
-    detailSections: (draft.detailSections ?? [])
-      .map((section) => ({
-        key: section.key.trim(),
-        label: section.label.trim(),
-        title: section.title?.trim() || null,
-        blocks: section.blocks
-          .map((block) =>
-            block.type === "image"
-              ? { type: "image" as const, url: block.url.trim(), alt: block.alt?.trim() || null }
-              : { type: "text" as const, text: block.text.trim() },
-          )
-          .filter((block) => (block.type === "image" ? block.url.length > 0 : block.text.length > 0)),
-      }))
-      .filter((section) => section.key.length > 0 && section.label.length > 0 && section.blocks.length > 0),
-    priceAmount: draft.priceAmount === null ? undefined : Number(draft.priceAmount),
-    destinationId: draft.destinationId || null,
-  };
-}
-
-function itemName(item: EditableSiteItem) {
-  if ("title" in item) return item.title;
-  if ("name" in item) return item.name;
-  if ("label" in item) return item.label;
-  return item.alt;
-}
-
-function itemMeta(item: EditableSiteItem) {
-  if ("kicker" in item) return item.kicker || "轮播";
-  if ("aliases" in item) return item.aliases?.map((alias) => alias.alias).join(" / ") || "目的地";
-  if ("targetType" in item) return item.targetType || "跳转未配置";
-  return "";
-}
-
-function itemImage(item: EditableSiteItem) {
-  return item.image || "";
-}
-
-function moduleItems(config: SiteConfig, moduleId: SiteModule): EditableSiteItem[] {
-  return config[moduleId] as EditableSiteItem[];
-}
-
-function moduleEditable(moduleId: ModuleId): moduleId is SiteModule {
-  return moduleId === "heroSlides" || moduleId === "destinations" || moduleId === "themes" || moduleId === "ctaBanners";
-}
-
-function AdminDisclosure({
-  title,
-  description,
-  meta,
-  children,
-  defaultOpen = false,
-}: {
-  title: string;
-  description: string;
-  meta: string;
-  children: ReactNode;
-  defaultOpen?: boolean;
-}) {
-  return (
-    <details className="admin-disclosure" open={defaultOpen}>
-      <summary>
-        <span className="admin-disclosure-copy">
-          <strong>{title}</strong>
-          <small>{description}</small>
-        </span>
-        <span className="admin-disclosure-meta">
-          <em>{meta}</em>
-          <ChevronRight size={17} />
-        </span>
-      </summary>
-      <div className="admin-disclosure-body">{children}</div>
-    </details>
-  );
-}
-
-function ToastStack({ toasts, onClose }: { toasts: Toast[]; onClose: (id: string) => void }) {
-  if (!toasts.length) return null;
-  return (
-    <div className="admin-toast-stack" role="status" aria-live="polite">
-      {toasts.map((toast) => (
-        <article className={`admin-toast ${toast.tone}`} key={toast.id}>
-          {toast.tone === "success" ? <CheckCircle2 size={20} /> : <AlertTriangle size={20} />}
-          <span>
-            <strong>{toast.title}</strong>
-            <small>{toast.message}</small>
-          </span>
-          <Button variant="ghost" size="icon" onClick={() => onClose(toast.id)} aria-label="关闭提示">
-            <X size={16} />
-          </Button>
-        </article>
-      ))}
-    </div>
-  );
-}
-
-function LoginScreen({ onDone }: { onDone: () => void }) {
-  const [email, setEmail] = useState("admin@example.com");
-  const [password, setPassword] = useState("ChangeMe123!");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const submit = async (event: FormEvent) => {
-    event.preventDefault();
-    setLoading(true);
-    setError("");
-    try {
-      const result = await login(email, password);
-      setToken(result.token);
-      onDone();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "登录失败");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <main className="login-shell">
-      <Card className="login-panel">
-        <CardHeader className="p-0">
-          <span className="login-kicker">万趣运营后台</span>
-          <CardTitle>万趣小程序管理端</CardTitle>
-          <CardDescription>按前台页面结构维护内容、商品和线索。</CardDescription>
-        </CardHeader>
-        <CardContent className="p-0">
-          <form className="login-form-stack" onSubmit={submit}>
-            <label>
-              账号
-              <Input value={email} onChange={(event) => setEmail(event.target.value)} autoComplete="username" />
-            </label>
-            <label>
-              密码
-              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} autoComplete="current-password" />
-            </label>
-            {error ? (
-              <Alert variant="warning">
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            ) : null}
-            <Button disabled={loading}>{loading ? "登录中" : "进入维护台"}</Button>
-          </form>
-        </CardContent>
-      </Card>
-    </main>
-  );
-}
-
-function StructureWorkbench({
-  fixedPage,
-  onJump,
-  onDirtyChange,
-  notify,
-}: {
-  fixedPage?: PageId;
-  onJump: (tab: Tab) => void;
-  onDirtyChange: (dirty: boolean) => void;
-  notify: (toast: Omit<Toast, "id">) => void;
-}) {
-  const [config, setConfig] = useState<SiteConfig | null>(null);
-  const [products, setProducts] = useState<Product[]>([]);
-  const [pageId, setPageId] = useState<PageId>(fixedPage ?? "home");
-  const [moduleId, setModuleId] = useState<ModuleId>("heroSlides");
-  const [selectedId, setSelectedId] = useState("");
-  const [draft, setDraft] = useState<SiteItemPatch>({});
-  const [message, setMessage] = useState("");
-
-  const activePage = pageSpecs.find((page) => page.id === (fixedPage ?? pageId)) ?? pageSpecs[0];
-  const activeModule = activePage.modules.find((module) => module.id === moduleId) ?? activePage.modules[0];
-
-  const load = async () => {
-    const [site, productResult] = await Promise.all([getSiteConfig(), getProducts()]);
-    setConfig(site);
-    setProducts(productResult.items);
-    const firstModule = activePage.modules[0]?.id ?? "heroSlides";
-    setModuleId((current) => (activePage.modules.some((module) => module.id === current) ? current : firstModule));
-    if (moduleEditable(firstModule)) {
-      const first = moduleItems(site, firstModule)[0];
-      if (first && !selectedId) {
-        setSelectedId(first.id);
-        setDraftFromItem(first);
-      }
-    }
-  };
-
-  useEffect(() => {
-    load().catch((err) => setMessage(err.message));
-  }, []);
-
-  useEffect(() => {
-    if (!fixedPage) return;
-    setPageId(fixedPage);
-    const next = pageSpecs.find((page) => page.id === fixedPage)?.modules[0]?.id ?? "heroSlides";
-    setModuleId(next);
-    setSelectedId("");
-  }, [fixedPage]);
-
-  useEffect(() => {
-    if (!config || !moduleEditable(moduleId)) return;
-    const first = moduleItems(config, moduleId)[0];
-    if (!first) return;
-    setSelectedId(first.id);
-    setDraftFromItem(first);
-  }, [moduleId, config]);
-
-  const setDraftFromItem = (item: EditableSiteItem) => {
-    setDraft({
-      title: "title" in item ? item.title : undefined,
-      kicker: "kicker" in item ? item.kicker || "" : undefined,
-      name: "name" in item ? item.name : undefined,
-      label: "label" in item ? item.label : undefined,
-      alt: "alt" in item ? item.alt : undefined,
-      image: "image" in item ? item.image || "" : "",
-      targetType: "targetType" in item ? item.targetType || "" : undefined,
-      targetValue: "targetValue" in item ? item.targetValue || "" : undefined,
-      isActive: item.isActive,
-    });
-  };
-
-  const selectPage = (next: PageId) => {
-    setPageId(next);
-    const page = pageSpecs.find((item) => item.id === next);
-    setModuleId(page?.modules[0]?.id ?? "heroSlides");
-    setSelectedId("");
-    setMessage("");
-    onDirtyChange(false);
-  };
-
-  const selectItem = (item: EditableSiteItem) => {
-    setSelectedId(item.id);
-    setDraftFromItem(item);
-    setMessage("");
-    onDirtyChange(false);
-  };
-
-  const save = async () => {
-    if (!config || !moduleEditable(moduleId) || !selectedId) return;
-    await updateSiteConfigItem(moduleId, selectedId, draft);
-    setMessage("已保存，前台对应模块会使用新配置。");
-    onDirtyChange(false);
-    notify({ tone: "success", title: "内容已保存", message: `${activeModule.label} 已同步到维护数据。` });
-    await load();
-  };
-
-  const publish = async () => {
-    const result = await publishSite();
-    setMessage(`已生成发布版本：${result.title}`);
-    notify({ tone: "success", title: "已生成发布版本", message: result.title });
-  };
-
-  const resetToGuizhou = async () => {
-    const result = await resetGuizhouContent();
-    setMessage(`已重置贵州内容：${result.products} 条商品、${result.destinations} 个目的地。`);
-    notify({ tone: "success", title: "贵州内容已重置", message: "后台配置、商品库和素材引用已切换为贵州省内定制游。" });
-    setSelectedId("");
-    setDraft({});
-    onDirtyChange(false);
-    await load();
-  };
-
-  const editableItems = config && moduleEditable(moduleId) ? moduleItems(config, moduleId) : [];
-  const selectedItem = editableItems.find((item) => item.id === selectedId) ?? editableItems[0];
-
-  if (!config) return <EmptyState text={message || "正在读取小程序结构"} />;
-
-  return (
-    <section className="work-area structure-workbench">
-      <header className="section-head">
-        <div>
-          <h2>{fixedPage ? activePage.title : "小程序维护地图"}</h2>
-          <p>{fixedPage ? activePage.subtitle : "按用户看到的前台页面组织后台，逐层展开到可维护内容。"}</p>
-        </div>
-        <div className="action-row">
-          <Button variant="outline" onClick={load}>
-            <RefreshCcw size={17} />
-            刷新
-          </Button>
-          <Button className="primary-action compact" onClick={publish}>
-            <Send size={17} />
-            发布快照
-          </Button>
-          <Button variant="outline" onClick={resetToGuizhou}>
-            <RefreshCcw size={17} />
-            重置贵州内容
-          </Button>
-        </div>
-      </header>
-      {message ? <p className="notice">{message}</p> : null}
-      <div className={`maintenance-grid ${fixedPage ? "focused-page-grid" : ""}`}>
-        {!fixedPage ? (
-          <aside className="page-rail">
-            <h3>前台页面</h3>
-            {pageSpecs.map((page) => (
-              <Button variant="ghost" className={activePage.id === page.id ? "active" : ""} key={page.id} onClick={() => selectPage(page.id)}>
-                <span>
-                  <b>{page.title}</b>
-                  <small>{page.frontPath}</small>
-                </span>
-                <ChevronRight size={16} />
-              </Button>
-            ))}
-          </aside>
-        ) : (
-          <section className="page-focus-card">
-            <span className="focus-kicker">当前维护页面</span>
-            <h3>{activePage.title}</h3>
-            <p>{activePage.frontPath}</p>
-            <small>{activePage.subtitle}</small>
-          </section>
-        )}
-        <section className="module-rail">
-          <div className="front-context">
-            <Eye size={18} />
-            <span>
-              <b>{activePage.frontPath}</b>
-              <small>{activePage.subtitle}</small>
-            </span>
-          </div>
-          <h3>页面模块</h3>
-          {activePage.modules.map((module, index) => (
-            <Button variant="ghost" className={activeModule.id === module.id ? "active" : ""} key={module.id} onClick={() => setModuleId(module.id)}>
-              <em>{index + 1}</em>
-              <span>
-                <b>{module.label}</b>
-                <small>{module.frontPosition}</small>
-              </span>
-            </Button>
-          ))}
-        </section>
-        <section className="item-rail">
-          <h3>{activeModule.label}</h3>
-          <p>{activeModule.hint}</p>
-          {moduleEditable(moduleId) ? (
-            <div className="mapped-list">
-              {editableItems.map((item) => (
-                <Button variant="ghost" className={selectedItem?.id === item.id ? "selected" : ""} key={item.id} onClick={() => selectItem(item)}>
-                  {itemImage(item) ? <img src={itemImage(item)} alt="" /> : <span className="image-placeholder" />}
-                  <span>
-                    <b>{itemName(item)}</b>
-                    <small>{itemMeta(item)}</small>
-                  </span>
-                </Button>
-              ))}
-            </div>
-          ) : (
-            <ReferencePanel moduleId={moduleId} products={products} onJump={onJump} />
-          )}
-        </section>
-        <section className="edit-rail">
-          {moduleEditable(moduleId) && selectedItem ? (
-            <SiteItemEditor
-              moduleId={moduleId}
-              draft={draft}
-              onDraft={(nextDraft) => {
-                setDraft(nextDraft);
-                onDirtyChange(true);
-              }}
-              onSave={save}
-            />
-          ) : (
-            <FrontPreview config={config} moduleId={moduleId} products={products} />
-          )}
-        </section>
-      </div>
-    </section>
-  );
-}
-
-function ReferencePanel({ moduleId, products, onJump }: { moduleId: ModuleId; products: Product[]; onJump: (tab: Tab) => void }) {
-  if (moduleId === "leadFlow") {
-    return (
-      <div className="reference-panel">
-        <p>这个模块由客户需求列表维护，重点是状态流转、服务管家跟进和来源追踪。</p>
-        <Button className="primary-action compact" onClick={() => onJump("leads")}>进入需求线索</Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="reference-panel">
-      <p>这个模块引用商品库。编辑商品后，首页商品卡、搜索结果和详情页会同步使用同一份数据。</p>
-      <div className="mini-product-stack">
-        {products.slice(0, 4).map((product) => (
-          <span key={product.id}>
-            <img src={product.coverImage || ""} alt="" />
-            <b>{product.title}</b>
-          </span>
-        ))}
-      </div>
-      <Button className="primary-action compact" onClick={() => onJump("products")}>进入商品维护</Button>
-    </div>
-  );
-}
-
-function SiteItemEditor({
-  moduleId,
-  draft,
-  onDraft,
-  onSave,
-}: {
-  moduleId: SiteModule;
-  draft: SiteItemPatch;
-  onDraft: (draft: SiteItemPatch) => void;
-  onSave: () => void;
-}) {
-  const primaryKey = moduleId === "heroSlides" ? "title" : moduleId === "destinations" ? "name" : moduleId === "themes" ? "label" : "alt";
-  const primaryLabel = moduleId === "heroSlides" ? "轮播标题" : moduleId === "destinations" ? "目的地名称" : moduleId === "themes" ? "主题名称" : "入口文案";
-
-  return (
-    <div className="mapped-editor">
-      <header className="editor-head">
-        <span>
-          <h3>编辑当前内容</h3>
-          <small>保存后会影响对应前台模块</small>
-        </span>
-        <Button className="primary-action compact" onClick={onSave}>
-          <Save size={17} />
-          保存
-        </Button>
-      </header>
-      <div className="admin-disclosure-stack">
-        <AdminDisclosure title="展示内容" description="维护前台用户直接看到的名称和短文案。" meta={primaryLabel} defaultOpen>
-          <label>
-            {primaryLabel}
-            <Input value={(draft[primaryKey] as string) ?? ""} onChange={(event) => onDraft({ ...draft, [primaryKey]: event.target.value })} />
-          </label>
-          {moduleId === "heroSlides" ? (
-            <label>
-              副标题
-              <Input value={draft.kicker ?? ""} onChange={(event) => onDraft({ ...draft, kicker: event.target.value })} />
-            </label>
-          ) : null}
-        </AdminDisclosure>
-        <AdminDisclosure title="素材与跳转" description="维护图片素材和点击后的前台动作。" meta={moduleId === "destinations" ? "图片" : "图片 / 跳转"} defaultOpen={false}>
-          <label>
-            图片 URL
-            <Input value={draft.image ?? ""} onChange={(event) => onDraft({ ...draft, image: event.target.value })} />
-          </label>
-          {moduleId !== "destinations" ? (
-            <div className="form-grid compact-grid">
-              <label>
-                跳转类型
-                <Input value={draft.targetType ?? ""} onChange={(event) => onDraft({ ...draft, targetType: event.target.value })} />
-              </label>
-              <label>
-                跳转值
-                <Input value={draft.targetValue ?? ""} onChange={(event) => onDraft({ ...draft, targetValue: event.target.value })} />
-              </label>
-            </div>
-          ) : null}
-          <div className="asset-preview">
-            {draft.image ? <img src={draft.image} alt="" /> : <ImageIcon size={28} />}
-          </div>
-        </AdminDisclosure>
-        <AdminDisclosure title="发布状态" description="决定这个内容项是否在前台显示。" meta={draft.isActive ? "启用" : "隐藏"} defaultOpen={false}>
-          <label className="switch-line">
-            <Switch checked={Boolean(draft.isActive)} onCheckedChange={(checked) => onDraft({ ...draft, isActive: checked })} />
-            前台启用
-          </label>
-        </AdminDisclosure>
-      </div>
-    </div>
-  );
-}
-
-function FrontPreview({ config, moduleId, products }: { config: SiteConfig; moduleId: ModuleId; products: Product[] }) {
-  return (
-    <div className="phone-preview">
-      <header>万趣贵州</header>
-      <div className="preview-hero">
-        <img src={config.heroSlides[0]?.image || ""} alt="" />
-        <span>{config.heroSlides[0]?.title}</span>
-      </div>
-      <div className="preview-tabs">
-        <b className={moduleId === "destinations" ? "active" : ""}>探索贵州</b>
-        <b className={moduleId === "themes" ? "active" : ""}>主题甄选</b>
-        <b className={moduleId === "routeProducts" ? "active" : ""}>精选线路</b>
-      </div>
-      <div className="preview-grid">
-        {config.destinations.slice(0, 6).map((destination) => (
-          <span key={destination.id}>{destination.name}</span>
-        ))}
-      </div>
-      <div className="preview-products">
-        {products.slice(0, 2).map((product) => (
-          <article key={product.id}>
-            <img src={product.coverImage || ""} alt="" />
-            <b>{product.subtitle || product.title}</b>
-          </article>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ProductManager({
-  destinations,
-  onDirtyChange,
-  notify,
-}: {
-  destinations: Destination[];
-  onDirtyChange: (dirty: boolean) => void;
-  notify: (toast: Omit<Toast, "id">) => void;
-}) {
-  const [products, setProducts] = useState<Product[]>([]);
-  const [selected, setSelected] = useState<Product | null>(null);
-  const [draft, setDraft] = useState<ProductInput>(toProductInput());
-  const [keyword, setKeyword] = useState("");
-  const [message, setMessage] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [detailOpen, setDetailOpen] = useState(false);
-
-  const load = async () => {
-    setLoading(true);
-    setMessage("");
-    try {
-      const result = await getProducts(keyword);
-      setProducts(result.items);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    load().catch((err) => setMessage(err.message));
-  }, []);
-
-  const select = (product: Product) => {
-    setSelected(product);
-    setDraft(toProductInput(product));
-    setMessage("");
-    setDetailOpen(true);
-    onDirtyChange(false);
-  };
-
-  const save = async () => {
-    if (!draft.title.trim()) {
-      setMessage("请先填写商品标题。");
-      notify({ tone: "warning", title: "商品未保存", message: "商品标题不能为空。" });
-      return;
-    }
-
-    const payload = compactProductPayload(draft);
-    const saved = selected ? await updateProduct(selected.id, payload) : await createProduct(payload);
-    setSelected(saved);
-    setDraft(toProductInput(saved));
-    setMessage("商品已保存，对应前台商品卡、搜索结果和详情页会使用这份数据。");
-    onDirtyChange(false);
-    notify({ tone: "success", title: "商品已保存", message: "产品卡、搜索结果和详情页会使用最新内容。" });
-    await load();
-  };
-
-  const createNew = () => {
-    setSelected(null);
-    setDraft(toProductInput());
-    setDetailOpen(true);
-    setMessage("正在新建商品");
-    onDirtyChange(true);
-  };
-
-  const updateDraft = (nextDraft: ProductInput) => {
-    setDraft(nextDraft);
-    onDirtyChange(true);
-  };
-
-  const closeDetail = () => {
-    setDetailOpen(false);
-    setSelected(null);
-    setMessage("");
-    onDirtyChange(false);
-  };
-
-  if (!detailOpen) {
-    const publishedCount = products.filter((product) => product.status === "published").length;
-    const draftCount = products.filter((product) => product.status === "draft").length;
-
-    return (
-      <section className="work-area product-workbench">
-        <div className="product-list-page">
-          <header className="section-head product-list-head">
-            <div>
-              <h2>商品维护</h2>
-              <p>先管理商品列表，再点击单个商品进入详情维护。</p>
-            </div>
-            <Button className="primary-action compact" onClick={createNew}>
-              <Plus size={17} />
-              新建商品
-            </Button>
-          </header>
-          {message ? <p className="notice">{message}</p> : null}
-          <div className="product-list-summary">
-            <span>
-              <b>{products.length}</b>
-              <small>当前列表</small>
-            </span>
-            <span>
-              <b>{publishedCount}</b>
-              <small>已上架</small>
-            </span>
-            <span>
-              <b>{draftCount}</b>
-              <small>草稿</small>
-            </span>
-          </div>
-          <form
-            className="toolbar product-toolbar"
-            onSubmit={(event) => {
-              event.preventDefault();
-              load().catch((err) => setMessage(err.message));
-            }}
-          >
-            <Input value={keyword} onChange={(event) => setKeyword(event.target.value)} placeholder="搜索商品标题、短标题或标签" />
-            <Button variant="outline" disabled={loading}>
-              <RefreshCcw size={16} />
-              {loading ? "查询中" : "查询"}
-            </Button>
-          </form>
-          <div className="product-table product-list-table">
-            {products.map((product) => (
-              <Button variant="ghost" className={selected?.id === product.id ? "selected" : ""} key={product.id} onClick={() => select(product)}>
-                {product.coverImage ? <img src={product.coverImage} alt="" /> : <span className="image-placeholder" />}
-                <span className="product-table-main">
-                  <b>{product.title}</b>
-                  <small>{product.destination?.name || "未绑定目的地"} · {product.tags.slice(0, 3).join(" / ") || "暂无标签"}</small>
-                </span>
-                <Badge className={`status-chip ${product.status}`} variant={product.status === "published" ? "success" : product.status === "draft" ? "warning" : "muted"}>
-                  {productStatusLabels[product.status]}
-                </Badge>
-                <em>{product.priceAmount ? `¥${product.priceAmount}` : "未定价"}</em>
-                <span className="row-link">
-                  详情维护
-                  <ChevronRight size={16} />
-                </span>
-              </Button>
-            ))}
-            {!products.length ? <p className="muted empty-row">暂无商品，点击右上角新建商品。</p> : null}
-          </div>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="work-area product-workbench">
-      <div className="product-detail-page">
-        <header className="section-head">
-          <div>
-            <h2>{selected ? "商品详情维护" : "新建商品"}</h2>
-            <p>把列表卡片、销售信息、详情图文拆成可单独维护的模块。</p>
-          </div>
-          <div className="action-row">
-            <Button variant="outline" onClick={closeDetail}>
-              <ArrowLeft size={17} />
-              返回列表
-            </Button>
-            <Button className="primary-action compact" onClick={save}>
-              <Save size={17} />
-              保存商品
-            </Button>
-          </div>
-        </header>
-        {message ? <p className="notice">{message}</p> : null}
-        <div className="product-editor-layout">
-          <aside className="product-editor-sidebar">
-            <div className="product-cover-preview">
-              {draft.coverImage ? <img src={draft.coverImage} alt="" /> : <ImageIcon size={32} />}
-            </div>
-            <h3>{draft.title || "未命名商品"}</h3>
-            <p>{draft.summary || "列表摘要会显示在商品卡和详情页顶部。"}</p>
-            <div className="product-side-meta">
-              <span>
-                <b>{productStatusLabels[draft.status]}</b>
-                <small>状态</small>
-              </span>
-              <span>
-                <b>{draft.detailSections?.length ?? 0}</b>
-                <small>详情模块</small>
-              </span>
-              <span>
-                <b>{draft.tags.filter(Boolean).length}</b>
-                <small>标签</small>
-              </span>
-            </div>
-          </aside>
-          <div className="product-editor-main">
-            <div className="admin-disclosure-stack product-maintenance-stack">
-              <AdminDisclosure title="列表信息" description="维护商品卡、搜索结果和详情页顶部的主要文案。" meta="标题 / 摘要" defaultOpen>
-                <div className="form-grid">
-                  <label className="wide">
-                    商品标题
-                    <Textarea value={draft.title} onChange={(event) => updateDraft({ ...draft, title: event.target.value })} rows={3} />
-                  </label>
-                  <label>
-                    商品短标题
-                    <Input value={draft.subtitle ?? ""} onChange={(event) => updateDraft({ ...draft, subtitle: event.target.value })} />
-                  </label>
-                  <label>
-                    排序权重
-                    <Input type="number" value={draft.sortWeight} onChange={(event) => updateDraft({ ...draft, sortWeight: Number(event.target.value) })} />
-                  </label>
-                  <label className="wide">
-                    列表摘要
-                    <Textarea value={draft.summary ?? ""} onChange={(event) => updateDraft({ ...draft, summary: event.target.value })} rows={3} />
-                  </label>
-                </div>
-              </AdminDisclosure>
-              <AdminDisclosure title="销售与归属" description="控制商品是否上架、所属目的地、价格和前台售卖单位。" meta={productStatusLabels[draft.status]} defaultOpen={false}>
-                <div className="form-grid">
-                  <label>
-                    目的地
-                    <NativeSelect value={draft.destinationId ?? ""} onChange={(event) => updateDraft({ ...draft, destinationId: event.target.value || null })}>
-                      <option value="">未绑定</option>
-                      {destinations.map((destination) => (
-                        <option value={destination.id} key={destination.id}>{destination.name}</option>
-                      ))}
-                    </NativeSelect>
-                  </label>
-                  <label>
-                    上架状态
-                    <NativeSelect value={draft.status} onChange={(event) => updateDraft({ ...draft, status: event.target.value as ProductInput["status"] })}>
-                      <option value="draft">草稿</option>
-                      <option value="published">已上架</option>
-                      <option value="archived">已归档</option>
-                    </NativeSelect>
-                  </label>
-                  <label>
-                    价格
-                    <Input type="number" value={draft.priceAmount ?? ""} onChange={(event) => updateDraft({ ...draft, priceAmount: event.target.value ? Number(event.target.value) : null })} />
-                  </label>
-                  <label>
-                    价格单位
-                    <Input value={draft.priceUnit ?? "起/人"} onChange={(event) => updateDraft({ ...draft, priceUnit: event.target.value })} />
-                  </label>
-                </div>
-              </AdminDisclosure>
-              <AdminDisclosure title="标签模块" description="每个标签单独维护，保存时会自动去掉空标签。" meta={`${draft.tags.filter(Boolean).length} 个标签`} defaultOpen={false}>
-                <TagEditor tags={draft.tags} onChange={(tags) => updateDraft({ ...draft, tags })} />
-              </AdminDisclosure>
-              <AdminDisclosure title="图片模块" description="封面图用于列表卡片，详情图可作为商品图库或详情页素材。" meta={`${(draft.images ?? []).length} 张详情图`} defaultOpen={false}>
-                <div className="form-grid">
-                  <label className="wide">
-                    封面图片 URL
-                    <Input value={draft.coverImage ?? ""} onChange={(event) => updateDraft({ ...draft, coverImage: event.target.value })} />
-                  </label>
-                </div>
-                <ProductImagesEditor images={draft.images ?? []} onChange={(images) => updateDraft({ ...draft, images })} />
-              </AdminDisclosure>
-              <AdminDisclosure title="详情模块" description="按模块维护标题、图片和段落，不需要再编辑整段格式文本。" meta={`${draft.detailSections?.length ?? 0} 个模块`} defaultOpen={false}>
-                <DetailSectionsEditor sections={draft.detailSections ?? []} onChange={(detailSections) => updateDraft({ ...draft, detailSections })} />
-              </AdminDisclosure>
-            </div>
-            <div className="product-editor-footer">
-              <Button className="primary-action compact" onClick={save}>
-                <Save size={17} />
-                保存商品
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function TagEditor({ tags, onChange }: { tags: string[]; onChange: (tags: string[]) => void }) {
-  const updateTag = (index: number, value: string) => {
-    onChange(tags.map((tag, tagIndex) => (tagIndex === index ? value : tag)));
-  };
-
-  const removeTag = (index: number) => {
-    onChange(tags.filter((_, tagIndex) => tagIndex !== index));
-  };
-
-  return (
-    <div className="tag-editor">
-      {tags.map((tag, index) => (
-        <label className="tag-input-row" key={`${index}-${tag}`}>
-          标签 {index + 1}
-          <span>
-            <Input value={tag} onChange={(event) => updateTag(index, event.target.value)} />
-            <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeTag(index)} aria-label={`删除标签 ${index + 1}`}>
-              <X size={16} />
-            </Button>
-          </span>
-        </label>
-      ))}
-      {!tags.length ? <p className="field-help">暂无标签，可点击添加后逐个维护。</p> : null}
-      <Button type="button" variant="outline" className="inline-action" onClick={() => onChange([...tags, ""])}>
-        <Plus size={16} />
-        添加标签
-      </Button>
-    </div>
-  );
-}
-
-function ProductImagesEditor({
-  images,
-  onChange,
-}: {
-  images: NonNullable<ProductInput["images"]>;
-  onChange: (images: NonNullable<ProductInput["images"]>) => void;
-}) {
-  const updateImage = (index: number, patch: Partial<NonNullable<ProductInput["images"]>[number]>) => {
-    onChange(images.map((image, imageIndex) => (imageIndex === index ? { ...image, ...patch } : image)));
-  };
-
-  const removeImage = (index: number) => {
-    onChange(images.filter((_, imageIndex) => imageIndex !== index));
-  };
-
-  return (
-    <div className="image-list-editor">
-      {images.map((image, index) => (
-        <article className="image-editor-row" key={`${index}-${image.url}`}>
-          <div className="image-editor-preview">
-            {image.url ? <img src={image.url} alt="" /> : <ImageIcon size={24} />}
-          </div>
-          <div className="form-grid compact-grid">
-            <label className="wide">
-              详情图片 URL
-              <Input value={image.url} onChange={(event) => updateImage(index, { url: event.target.value })} />
-            </label>
-            <label className="wide">
-              图片标题 / 说明
-              <Input value={image.alt ?? ""} onChange={(event) => updateImage(index, { alt: event.target.value })} />
-            </label>
-          </div>
-          <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeImage(index)} aria-label={`删除详情图片 ${index + 1}`}>
-            <Trash2 size={16} />
-          </Button>
-        </article>
-      ))}
-      {!images.length ? <p className="field-help">暂无详情图片。封面图会继续用于商品卡，详情模块中也可以单独添加图片块。</p> : null}
-      <Button type="button" variant="outline" className="inline-action" onClick={() => onChange([...images, { url: "", alt: "", sortOrder: images.length }])}>
-        <Plus size={16} />
-        添加详情图片
-      </Button>
-    </div>
-  );
-}
-
-function DetailSectionsEditor({
-  sections,
-  onChange,
-}: {
-  sections: ProductDetailSection[];
-  onChange: (sections: ProductDetailSection[]) => void;
-}) {
-  const updateSection = (sectionIndex: number, patch: Partial<ProductDetailSection>) => {
-    onChange(sections.map((section, index) => (index === sectionIndex ? { ...section, ...patch } : section)));
-  };
-
-  const removeSection = (sectionIndex: number) => {
-    onChange(sections.filter((_, index) => index !== sectionIndex));
-  };
-
-  const updateBlock = (sectionIndex: number, blockIndex: number, nextBlock: ProductDetailBlock) => {
-    const section = sections[sectionIndex];
-    if (!section) return;
-    updateSection(sectionIndex, {
-      blocks: section.blocks.map((block, index) => (index === blockIndex ? nextBlock : block)),
-    });
-  };
-
-  const addBlock = (sectionIndex: number, type: ProductDetailBlock["type"]) => {
-    const section = sections[sectionIndex];
-    if (!section) return;
-    updateSection(sectionIndex, { blocks: [...section.blocks, createDetailBlock(type)] });
-  };
-
-  const removeBlock = (sectionIndex: number, blockIndex: number) => {
-    const section = sections[sectionIndex];
-    if (!section) return;
-    updateSection(sectionIndex, { blocks: section.blocks.filter((_, index) => index !== blockIndex) });
-  };
-
-  return (
-    <div className="detail-section-editor">
-      {sections.map((section, sectionIndex) => (
-        <article className="detail-section-card" key={`${section.key}-${sectionIndex}`}>
-          <header className="detail-section-card-head">
-            <span className="module-index">{sectionIndex + 1}</span>
-            <span>
-              <b>{section.label || "未命名模块"}</b>
-              <small>{section.blocks.length} 个内容块</small>
-            </span>
-            <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeSection(sectionIndex)} aria-label={`删除详情模块 ${sectionIndex + 1}`}>
-              <Trash2 size={16} />
-            </Button>
-          </header>
-          <div className="form-grid detail-section-fields">
-            <label>
-              模块 key
-              <Input value={section.key} onChange={(event) => updateSection(sectionIndex, { key: event.target.value })} />
-            </label>
-            <label>
-              模块名称
-              <Input value={section.label} onChange={(event) => updateSection(sectionIndex, { label: event.target.value })} />
-            </label>
-            <label className="wide">
-              模块标题
-              <Input value={section.title ?? ""} onChange={(event) => updateSection(sectionIndex, { title: event.target.value })} />
-            </label>
-          </div>
-          <div className="detail-block-list">
-            {section.blocks.map((block, blockIndex) => (
-              <article className={`detail-block-card ${block.type}`} key={`${section.key}-${blockIndex}-${block.type}`}>
-                <header>
-                  <span>
-                    {block.type === "image" ? <ImageIcon size={16} /> : <FileText size={16} />}
-                    <b>{block.type === "image" ? "图片内容" : "文字内容"} {blockIndex + 1}</b>
-                  </span>
-                  <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeBlock(sectionIndex, blockIndex)} aria-label={`删除内容块 ${blockIndex + 1}`}>
-                    <X size={15} />
-                  </Button>
-                </header>
-                {block.type === "image" ? (
-                  <div className="detail-image-block">
-                    <div className="image-editor-preview large">
-                      {block.url ? <img src={block.url} alt="" /> : <ImageIcon size={24} />}
-                    </div>
-                    <div className="form-grid compact-grid">
-                      <label className="wide">
-                        图片 URL
-                        <Input value={block.url} onChange={(event) => updateBlock(sectionIndex, blockIndex, { ...block, url: event.target.value })} />
-                      </label>
-                      <label className="wide">
-                        图片标题 / 说明
-                        <Input value={block.alt ?? ""} onChange={(event) => updateBlock(sectionIndex, blockIndex, { ...block, alt: event.target.value })} />
-                      </label>
-                    </div>
-                  </div>
-                ) : (
-                  <label>
-                    段落内容
-                    <Textarea value={block.text} onChange={(event) => updateBlock(sectionIndex, blockIndex, { ...block, text: event.target.value })} rows={4} />
-                  </label>
-                )}
-              </article>
-            ))}
-            {!section.blocks.length ? <p className="field-help">这个模块暂无内容块，可添加文字或图片。</p> : null}
-          </div>
-          <div className="section-action-row">
-            <Button type="button" variant="outline" className="inline-action" onClick={() => addBlock(sectionIndex, "text")}>
-              <FileText size={16} />
-              添加文字
-            </Button>
-            <Button type="button" variant="outline" className="inline-action" onClick={() => addBlock(sectionIndex, "image")}>
-              <ImageIcon size={16} />
-              添加图片
-            </Button>
-          </div>
-        </article>
-      ))}
-      {!sections.length ? <p className="field-help">暂无详情模块。可以从常用模块开始添加，再逐块维护标题、文字和图片。</p> : null}
-      <Button type="button" variant="outline" className="inline-action strong" onClick={() => onChange([...sections, createEmptyDetailSection(sections.length)])}>
-        <Plus size={16} />
-        添加详情模块
-      </Button>
-    </div>
-  );
-}
-
-function LeadManager({ notify }: { notify: (toast: Omit<Toast, "id">) => void }) {
-  const [leads, setLeads] = useState<Lead[]>([]);
-  const [message, setMessage] = useState("");
-
-  const load = async () => {
-    const result = await getLeads();
-    setLeads(result.items);
-  };
-
-  useEffect(() => {
-    load().catch((err) => setMessage(err.message));
-  }, []);
-
-  const changeStatus = async (lead: Lead, status: Lead["status"]) => {
-    await updateLeadStatus(lead.id, status);
-    setMessage("线索状态已更新");
-    notify({ tone: "success", title: "线索已更新", message: `${lead.phone} 已标记为${leadStatusLabels[status]}。` });
-    await load();
-  };
-
-  return (
-    <section className="work-area">
-      <header className="section-head">
-        <div>
-          <h2>需求线索跟进</h2>
-          <p>对应前台「提交出行需求」和详情页「立即咨询」。</p>
-        </div>
-        <Button variant="outline" onClick={load}>
-          <RefreshCcw size={17} />
-          刷新
-        </Button>
-      </header>
-      {message ? <p className="notice">{message}</p> : null}
-      <div className="lead-table">
-        <div className="lead-table-head">
-          <span>客户</span>
-          <span>需求</span>
-          <span>来源</span>
-          <span>状态</span>
-        </div>
-        {leads.map((lead) => (
-          <article className="lead-row" key={lead.id}>
-            <span>
-              <b>{lead.phone}</b>
-              <small>{formatDate(lead.createdAt)}</small>
-            </span>
-            <span>{lead.destination || lead.note || "未填写"}</span>
-            <span>{lead.sourceProduct?.title || lead.sourcePage || "H5 表单"}</span>
-            <NativeSelect value={lead.status} onChange={(event) => changeStatus(lead, event.target.value as Lead["status"])}>
-              {Object.entries(leadStatusLabels).map(([value, label]) => (
-                <option value={value} key={value}>{label}</option>
-              ))}
-            </NativeSelect>
-          </article>
-        ))}
-        {!leads.length ? <p className="muted empty-row">暂无客户需求。</p> : null}
-      </div>
-    </section>
-  );
-}
-
-function EmptyState({ text }: { text: string }) {
-  return <div className="empty-state">{text}</div>;
-}
+import { getToken } from "./api";
+import { AdminShell } from "@/components/admin/AdminShell";
+import { LoginPage } from "@/pages/login/LoginPage";
 
 export default function App() {
-  const [authed, setAuthed] = useState(Boolean(getToken()));
-  const [activeTab, setActiveTab] = useState<Tab>("structure");
-  const [destinations, setDestinations] = useState<Destination[]>([]);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [authed, setAuthed] = useState(!!getToken());
 
-  useEffect(() => {
-    if (!authed) return;
-    getDestinations().then((result) => setDestinations(result.items)).catch(() => setDestinations([]));
-  }, [authed, activeTab]);
+  if (!authed) {
+    return <LoginPage onDone={() => setAuthed(true)} />;
+  }
 
-  useEffect(() => {
-    setHasUnsavedChanges(false);
-  }, [activeTab]);
-
-  const activeMeta = useMemo(() => tabs.find((tab) => tab.id === activeTab), [activeTab]);
-  const activeLabel = activeMeta?.label ?? "";
-  const activeDescription = activeMeta?.description ?? "";
-
-  const notify = (toast: Omit<Toast, "id">) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(16).slice(2)}`;
-    setToasts((items) => [...items, { ...toast, id }]);
-    window.setTimeout(() => {
-      setToasts((items) => items.filter((item) => item.id !== id));
-    }, 4200);
-  };
-
-  if (!authed) return <LoginScreen onDone={() => setAuthed(true)} />;
-
-  return (
-    <main className="admin-shell">
-      <aside className="sidebar">
-        <div className="brand-block">
-          <b>万趣小程序管理端</b>
-          <span>按前台结构管理</span>
-        </div>
-        <nav>
-          {sidebarGroups.map((group) => (
-            <section className="sidebar-group" key={group.id} aria-label={group.label}>
-              <span>{group.label}</span>
-              {group.items.map((tab) => {
-                const Icon = tab.icon;
-                return (
-                  <Button
-                    variant="ghost"
-                    aria-label={tab.label}
-                    className={activeTab === tab.id ? "active" : ""}
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id)}
-                    title={tab.label}
-                  >
-                    <Icon size={18} />
-                    <span>
-                      <b>{tab.label}</b>
-                      <small>{tab.description}</small>
-                    </span>
-                  </Button>
-                );
-              })}
-            </section>
-          ))}
-        </nav>
-        <Button
-          variant="ghost"
-          aria-label="退出登录"
-          className="logout-button"
-          onClick={() => {
-            clearToken();
-            setAuthed(false);
-          }}
-          title="退出登录"
-        >
-          <LogOut size={17} />
-          退出登录
-        </Button>
-      </aside>
-      <section className="main-panel">
-        <header className="topbar">
-          <div>
-            <span>{activeLabel}</span>
-            <small>{activeDescription} · 结构化维护 · 内存开发模式</small>
-          </div>
-          <div className="topbar-actions">
-            <span className={hasUnsavedChanges ? "admin-dirty-chip is-dirty" : "admin-dirty-chip"}>
-              {hasUnsavedChanges ? "有未提交修改" : "内容已同步"}
-            </span>
-          </div>
-        </header>
-        {activeTab === "structure" ? (
-          <StructureWorkbench onJump={setActiveTab} onDirtyChange={setHasUnsavedChanges} notify={notify} />
-        ) : activeTab === "home" ? (
-          <StructureWorkbench key="home-workbench" fixedPage="home" onJump={setActiveTab} onDirtyChange={setHasUnsavedChanges} notify={notify} />
-        ) : activeTab === "destinations" ? (
-          <StructureWorkbench key="destination-workbench" fixedPage="destination" onJump={setActiveTab} onDirtyChange={setHasUnsavedChanges} notify={notify} />
-        ) : activeTab === "products" ? (
-          <ProductManager destinations={destinations} onDirtyChange={setHasUnsavedChanges} notify={notify} />
-        ) : (
-          <LeadManager notify={notify} />
-        )}
-      </section>
-      <ToastStack toasts={toasts} onClose={(id) => setToasts((items) => items.filter((item) => item.id !== id))} />
-    </main>
-  );
+  return <AdminShell onLogout={() => setAuthed(false)} />;
 }
diff --git a/src/api.ts b/src/api.ts
index c8f458b..9ee5bbc 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -65,25 +65,41 @@ export type Lead = {
   assignedUser?: { id: string; name: string } | null;
 };
 
+export type MediaAsset = {
+  id: string;
+  url: string;
+  name?: string | null;
+  mimeType?: string | null;
+  sizeBytes?: number | null;
+  group?: string | null;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
 export type SiteConfig = {
-  heroSlides: Array<{ id: string; title: string; kicker?: string | null; image: string; targetType?: string | null; targetValue?: string | null; isActive: boolean }>;
+  heroSlides: Array<{ id: string; title: string; kicker: string | null; image: string | null; isActive: boolean; sortOrder: number; createdAt?: string; updatedAt?: string }>;
   destinations: Destination[];
   themes: Array<{ id: string; label: string; image: string; targetType?: string | null; targetValue?: string | null; isActive: boolean }>;
   ctaBanners: Array<{ id: string; alt: string; image: string; targetType: string; targetValue?: string | null; isActive: boolean }>;
 };
 
 export type SiteModule = "heroSlides" | "destinations" | "themes" | "ctaBanners";
+export type SiteConfigItem = SiteConfig[SiteModule][number];
 
 export type SiteItemPatch = {
   title?: string;
   kicker?: string;
   name?: string;
+  slug?: string;
+  region?: string | null;
   label?: string;
   alt?: string;
   image?: string | null;
   targetType?: string | null;
   targetValue?: string | null;
+  isHot?: boolean;
   isActive?: boolean;
+  sortOrder?: number;
 };
 
 export type ProductInput = {
@@ -169,17 +185,59 @@ export async function getDestinations() {
   return request<{ items: Destination[] }>("/api/admin/destinations");
 }
 
+export async function uploadMediaAsset(file: File, group = "site-config") {
+  const form = new FormData();
+  form.set("file", file);
+  form.set("group", group);
+  const headers = new Headers();
+  const token = getToken();
+  if (token) headers.set("Authorization", `Bearer ${token}`);
+
+  const response = await fetch(`${API_BASE}/api/admin/media-assets/upload`, {
+    method: "POST",
+    headers,
+    body: form,
+  });
+
+  if (!response.ok) {
+    const body = await response.json().catch(() => ({}));
+    throw new Error(body.message ?? `请求失败：${response.status}`);
+  }
+
+  return response.json() as Promise<MediaAsset>;
+}
+
 export async function getSiteConfig() {
   return request<SiteConfig>("/api/admin/site-config");
 }
 
+export async function createSiteConfigItem(module: SiteModule, input: SiteItemPatch) {
+  return request<SiteConfigItem>(`/api/admin/site-config/${module}`, {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
+
 export async function updateSiteConfigItem(module: SiteModule, id: string, input: SiteItemPatch) {
-  return request(`/api/admin/site-config/${module}/${id}`, {
+  return request<SiteConfigItem>(`/api/admin/site-config/${module}/${id}`, {
     method: "PATCH",
     body: JSON.stringify(input),
   });
 }
 
+export async function deleteSiteConfigItem(module: SiteModule, id: string) {
+  return request<{ id: string }>(`/api/admin/site-config/${module}/${id}`, {
+    method: "DELETE",
+  });
+}
+
+export async function reorderSiteConfigItems(module: SiteModule, itemIds: string[]) {
+  return request<{ items: SiteConfigItem[] }>(`/api/admin/site-config/${module}/reorder`, {
+    method: "PATCH",
+    body: JSON.stringify({ itemIds }),
+  });
+}
+
 export async function getLeads() {
   return request<{ items: Lead[] }>("/api/admin/leads");
 }
diff --git a/src/components/admin/AdminDisclosure.tsx b/src/components/admin/AdminDisclosure.tsx
new file mode 100644
index 0000000..777fff4
--- /dev/null
+++ b/src/components/admin/AdminDisclosure.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+export function AdminDisclosure({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="admin-disclosure">
+      <header className="admin-disclosure-head">
+        <span className="admin-disclosure-copy">
+          <strong>{title}</strong>
+          {description ? <small>{description}</small> : null}
+        </span>
+      </header>
+      <div className="admin-disclosure-body">{children}</div>
+    </section>
+  );
+}
diff --git a/src/components/admin/AdminShell.tsx b/src/components/admin/AdminShell.tsx
new file mode 100644
index 0000000..c919896
--- /dev/null
+++ b/src/components/admin/AdminShell.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useMemo, useState } from "react";
+import { Blocks, Home, LogOut, MapPin, Package, UserRoundCheck } from "lucide-react";
+
+import { clearToken, getDestinations } from "@/api";
+import type { Destination } from "@/api";
+import { ToastStack } from "@/components/admin/ToastStack";
+import { Button } from "@/components/ui/button";
+import { LeadsPage } from "@/pages/leads/LeadsPage";
+import { ProductsPage } from "@/pages/products/ProductsPage";
+import { StructurePage } from "@/pages/structure/StructurePage";
+import type { Tab, Toast } from "@/types/admin";
+
+const sidebarGroups: { id: string; label: string; items: { id: Tab; label: string; icon: typeof Home; description: string }[] }[] = [
+  {
+    id: "workspace",
+    label: "工作台",
+    items: [{ id: "structure", label: "维护地图", icon: Blocks, description: "前台结构总览" }],
+  },
+  {
+    id: "frontend",
+    label: "前台页面",
+    items: [
+      { id: "home", label: "小程序首页", icon: Home, description: "轮播、主题、CTA" },
+      { id: "destinations", label: "目的地页", icon: MapPin, description: "字典、搜索、商品" },
+      { id: "products", label: "商品维护", icon: Package, description: "列表、卡片、详情" },
+    ],
+  },
+  {
+    id: "operations",
+    label: "业务处理",
+    items: [{ id: "leads", label: "需求线索", icon: UserRoundCheck, description: "表单和跟进" }],
+  },
+];
+
+const tabs = sidebarGroups.flatMap((group) => group.items);
+
+export function AdminShell({ onLogout }: { onLogout: () => void }) {
+  const [activeTab, setActiveTab] = useState<Tab>("structure");
+  const [destinations, setDestinations] = useState<Destination[]>([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  useEffect(() => {
+    getDestinations()
+      .then((result) => setDestinations(result.items))
+      .catch(() => setDestinations([]));
+  }, [activeTab]);
+
+  useEffect(() => {
+    setHasUnsavedChanges(false);
+  }, [activeTab]);
+
+  const activeMeta = useMemo(() => tabs.find((tab) => tab.id === activeTab), [activeTab]);
+  const activeLabel = activeMeta?.label ?? "";
+  const activeDescription = activeMeta?.description ?? "";
+
+  const notify = (toast: Omit<Toast, "id">) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+    setToasts((items) => [...items, { ...toast, id }]);
+    window.setTimeout(() => {
+      setToasts((items) => items.filter((item) => item.id !== id));
+    }, 4200);
+  };
+
+  const logout = () => {
+    clearToken();
+    onLogout();
+  };
+
+  return (
+    <main className="admin-shell">
+      <aside className="sidebar">
+        <div className="brand-block">
+          <b>万趣小程序管理端</b>
+          <span>按前台结构管理</span>
+        </div>
+        <nav>
+          {sidebarGroups.map((group) => (
+            <section className="sidebar-group" key={group.id} aria-label={group.label}>
+              <span>{group.label}</span>
+              {group.items.map((tab) => {
+                const Icon = tab.icon;
+                return (
+                  <Button
+                    variant="ghost"
+                    aria-label={tab.label}
+                    className={activeTab === tab.id ? "active" : ""}
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    title={tab.label}
+                  >
+                    <Icon size={18} />
+                    <span>
+                      <b>{tab.label}</b>
+                      <small>{tab.description}</small>
+                    </span>
+                  </Button>
+                );
+              })}
+            </section>
+          ))}
+        </nav>
+        <Button variant="ghost" aria-label="退出登录" className="logout-button" onClick={logout} title="退出登录">
+          <LogOut size={17} />
+          退出登录
+        </Button>
+      </aside>
+      <section className="main-panel">
+        <header className="topbar">
+          <div>
+            <span>{activeLabel}</span>
+            <small>{activeDescription} · 结构化维护 · 内存开发模式</small>
+          </div>
+          <div className="topbar-actions">
+            <span className={hasUnsavedChanges ? "admin-dirty-chip is-dirty" : "admin-dirty-chip"}>
+              {hasUnsavedChanges ? "有未提交修改" : "内容已同步"}
+            </span>
+          </div>
+        </header>
+        {activeTab === "structure" ? (
+          <StructurePage onJump={setActiveTab} onDirtyChange={setHasUnsavedChanges} notify={notify} />
+        ) : activeTab === "home" ? (
+          <StructurePage key="home-workbench" fixedPage="home" onJump={setActiveTab} onDirtyChange={setHasUnsavedChanges} notify={notify} />
+        ) : activeTab === "destinations" ? (
+          <StructurePage key="destination-workbench" fixedPage="destination" onJump={setActiveTab} onDirtyChange={setHasUnsavedChanges} notify={notify} />
+        ) : activeTab === "products" ? (
+          <ProductsPage destinations={destinations} onDirtyChange={setHasUnsavedChanges} notify={notify} />
+        ) : (
+          <LeadsPage notify={notify} />
+        )}
+      </section>
+      <ToastStack toasts={toasts} onClose={(id) => setToasts((items) => items.filter((item) => item.id !== id))} />
+    </main>
+  );
+}
diff --git a/src/components/admin/EmptyState.tsx b/src/components/admin/EmptyState.tsx
new file mode 100644
index 0000000..ca76619
--- /dev/null
+++ b/src/components/admin/EmptyState.tsx
@@ -0,0 +1,3 @@
+export function EmptyState({ text }: { text: string }) {
+  return <div className="empty-state">{text}</div>;
+}
diff --git a/src/components/admin/SingleImageUploader.tsx b/src/components/admin/SingleImageUploader.tsx
new file mode 100644
index 0000000..325af75
--- /dev/null
+++ b/src/components/admin/SingleImageUploader.tsx
@@ -0,0 +1,102 @@
+import { ChangeEvent, useRef, useState } from "react";
+import { Image as ImageIcon, Trash2 } from "lucide-react";
+
+import { uploadMediaAsset } from "@/api";
+
+const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+const ALLOWED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
+
+export function SingleImageUploader({
+  value,
+  onChange,
+  group = "site-config",
+}: {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  group?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const openFilePicker = () => inputRef.current?.click();
+  const displayValue = value ?? "";
+  const hasImage = Boolean(displayValue);
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+
+    if (!ALLOWED_IMAGE_TYPES.has(file.type)) {
+      setError("请选择 JPG、PNG、WebP 或 GIF 图片。");
+      return;
+    }
+    if (file.size > MAX_IMAGE_BYTES) {
+      setError("图片大小不能超过 5MB。");
+      return;
+    }
+
+    try {
+      setUploading(true);
+      const asset = await uploadMediaAsset(file, group);
+      setError("");
+      onChange(asset.url);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "图片上传失败，请重新选择。");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleRemove = () => {
+    onChange(null);
+  };
+
+  return (
+    <div className="single-image-uploader">
+      <input
+        ref={inputRef}
+        className="single-image-input"
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/gif"
+        onChange={handleFileChange}
+        aria-label="上传图片素材"
+        disabled={uploading}
+      />
+      <div className={`single-image-card ${hasImage ? "has-image" : ""}`}>
+        <button
+          type="button"
+          className={`single-image-preview ${hasImage ? "has-image" : ""}`}
+          onClick={openFilePicker}
+          aria-label={hasImage ? "更换图片素材" : "上传图片素材"}
+          disabled={uploading}
+        >
+          {hasImage ? (
+            <img src={displayValue} alt="当前图片预览" />
+          ) : (
+            <span className="single-image-placeholder">
+              <ImageIcon size={30} />
+              <b>{uploading ? "上传中" : "暂无图片"}</b>
+              <small>{uploading ? "正在上传到 OSS" : "上传后在这里预览单张素材"}</small>
+            </span>
+          )}
+        </button>
+        {hasImage ? (
+          <div className="single-image-actions">
+            <button
+              type="button"
+              className="single-image-remove-button"
+              onClick={handleRemove}
+              aria-label="移除图片"
+              title="移除图片"
+              disabled={uploading}
+            >
+              <Trash2 size={16} />
+            </button>
+          </div>
+        ) : null}
+      </div>
+      {error ? <p className="field-error">{error}</p> : null}
+    </div>
+  );
+}
diff --git a/src/components/admin/ToastStack.tsx b/src/components/admin/ToastStack.tsx
new file mode 100644
index 0000000..ea7b7bf
--- /dev/null
+++ b/src/components/admin/ToastStack.tsx
@@ -0,0 +1,25 @@
+import { AlertTriangle, CheckCircle2, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import type { Toast } from "@/types/admin";
+
+export function ToastStack({ toasts, onClose }: { toasts: Toast[]; onClose: (id: string) => void }) {
+  if (!toasts.length) return null;
+
+  return (
+    <div className="admin-toast-stack" role="status" aria-live="polite">
+      {toasts.map((toast) => (
+        <article className={`admin-toast ${toast.tone}`} key={toast.id}>
+          {toast.tone === "success" ? <CheckCircle2 size={20} /> : <AlertTriangle size={20} />}
+          <span>
+            <strong>{toast.title}</strong>
+            <small>{toast.message}</small>
+          </span>
+          <Button variant="ghost" size="icon" onClick={() => onClose(toast.id)} aria-label="关闭提示">
+            <X size={16} />
+          </Button>
+        </article>
+      ))}
+    </div>
+  );
+}
diff --git a/src/lib/admin-utils.ts b/src/lib/admin-utils.ts
new file mode 100644
index 0000000..8b1edaa
--- /dev/null
+++ b/src/lib/admin-utils.ts
@@ -0,0 +1,219 @@
+import type {
+  Lead,
+  Product,
+  ProductDetailBlock,
+  ProductDetailSection,
+  ProductInput,
+  SiteConfig,
+  SiteItemPatch,
+  SiteModule,
+} from "@/api";
+import type { EditableSiteItem, ModuleId } from "@/types/admin";
+
+export const leadStatusLabels: Record<Lead["status"], string> = {
+  new: "新线索",
+  assigned: "已分配",
+  contacted: "已联系",
+  planning: "方案中",
+  won: "已成交",
+  invalid: "无效",
+};
+
+export const productStatusLabels: Record<ProductInput["status"], string> = {
+  draft: "草稿",
+  published: "已上架",
+  archived: "已归档",
+};
+
+const detailSectionTemplates: Pick<ProductDetailSection, "key" | "label" | "title">[] = [
+  { key: "overview", label: "行程概述", title: "小包团专属概览" },
+  { key: "itinerary", label: "每日行程", title: "弹性安排" },
+  { key: "service", label: "包含/不含服务", title: "费用边界清晰" },
+  { key: "notice", label: "出行须知", title: "贵州山地旅行提示" },
+  { key: "price", label: "价格区间", title: "按人数、酒店和季节报价" },
+  { key: "manager", label: "服务管家", title: "直接添加服务管家" },
+];
+
+export function formatDate(value: string) {
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(value));
+}
+
+export function toProductInput(product?: Product | null): ProductInput {
+  const summary = product?.summary || product?.tags?.join(" · ") || "万趣贵州小包团定制体验";
+  return {
+    title: product?.title ?? "",
+    subtitle: product?.subtitle ?? "",
+    destinationId: product?.destinationId ?? product?.destination?.id ?? null,
+    priceAmount: product?.priceAmount ?? null,
+    priceUnit: product?.priceUnit ?? "起/人",
+    tags: product?.tags ?? [],
+    coverImage: product?.coverImage ?? "",
+    summary: product?.summary ?? "",
+    images:
+      product?.images?.map((image, index) => ({
+        url: image.url,
+        alt: image.alt ?? "",
+        sortOrder: image.sortOrder ?? index,
+      })) ?? [],
+    detailSections: product?.detailSections?.length
+      ? product.detailSections
+      : defaultAdminDetailSections(summary, product?.destination?.name ?? "贵州省内定制"),
+    status: product?.status ?? "draft",
+    sortWeight: product?.sortWeight ?? 0,
+  };
+}
+
+export function defaultAdminDetailSections(summary: string, location: string): ProductDetailSection[] {
+  return [
+    { key: "overview", label: "行程概述", title: "小包团专属概览", blocks: [{ type: "text", text: `${summary}。万趣会按同行人、预算、酒店偏好和体力强度重排细节，保留小车小团、错峰入园与在地向导服务。` }] },
+    { key: "itinerary", label: "每日行程", title: `${location} 弹性安排`, blocks: [{ type: "text", text: "默认按抵达接站、核心景点游览、特色体验、酒店休整和返程送站安排每日节奏；具体天数、停留时长和餐食可在行前由服务管家二次确认。" }] },
+    { key: "service", label: "包含/不含服务", title: "费用边界清晰", blocks: [{ type: "text", text: "通常包含当地用车、行程内住宿、列明门票/体验、必要讲解和服务管家跟进；大交通、个人消费、未列明餐食和自选项目以最终方案为准。" }] },
+    { key: "notice", label: "出行须知", title: "贵州山地旅行提示", blocks: [{ type: "text", text: "贵州多山多雨，建议准备防滑鞋、轻便雨具和薄外套；溶洞、漂流、徒步等体验会按天气和同行人体力调整。" }] },
+    { key: "price", label: "价格区间", title: "按人数、酒店和季节报价", blocks: [{ type: "text", text: "页面价格为参考起价，节假日、旺季房态、用车车型和体验资源会影响最终报价；提交需求后由服务管家给出可执行方案。" }] },
+    { key: "manager", label: "服务管家", title: "直接添加服务管家", blocks: [{ type: "text", text: "点击底部“服务管家”或拨打 18786174929，可直接添加服务管家沟通出行人数、日期、酒店偏好和预算。" }] },
+  ];
+}
+
+export function createEmptyDetailSection(index: number): ProductDetailSection {
+  const template = detailSectionTemplates[index % detailSectionTemplates.length];
+  return {
+    key: template.key,
+    label: template.label,
+    title: template.title,
+    blocks: [{ type: "text", text: "" }],
+  };
+}
+
+export function createDetailBlock(type: ProductDetailBlock["type"]): ProductDetailBlock {
+  return type === "image" ? { type: "image", url: "", alt: "" } : { type: "text", text: "" };
+}
+
+export function compactProductPayload(draft: ProductInput): ProductInput {
+  return {
+    ...draft,
+    title: draft.title.trim(),
+    subtitle: draft.subtitle?.trim() || "",
+    priceUnit: draft.priceUnit?.trim() || "起/人",
+    tags: draft.tags.map((tag) => tag.trim()).filter(Boolean),
+    images: (draft.images ?? [])
+      .map((image, index) => ({
+        url: image.url.trim(),
+        alt: image.alt?.trim() || null,
+        sortOrder: index,
+      }))
+      .filter((image) => image.url.length > 0),
+    detailSections: (draft.detailSections ?? [])
+      .map((section) => ({
+        key: section.key.trim(),
+        label: section.label.trim(),
+        title: section.title?.trim() || null,
+        blocks: section.blocks
+          .map((block) =>
+            block.type === "image"
+              ? { type: "image" as const, url: block.url.trim(), alt: block.alt?.trim() || null }
+              : { type: "text" as const, text: block.text.trim() },
+          )
+          .filter((block) => (block.type === "image" ? block.url.length > 0 : block.text.length > 0)),
+      }))
+      .filter((section) => section.key.length > 0 && section.label.length > 0 && section.blocks.length > 0),
+    priceAmount: draft.priceAmount === null ? undefined : Number(draft.priceAmount),
+    destinationId: draft.destinationId || null,
+  };
+}
+
+export function siteItemPrimaryKey(moduleId: SiteModule): keyof SiteItemPatch {
+  if (moduleId === "heroSlides") return "title";
+  if (moduleId === "destinations") return "name";
+  if (moduleId === "themes") return "label";
+  return "alt";
+}
+
+export function createEmptySiteItemDraft(moduleId: SiteModule, sortOrder: number): SiteItemPatch {
+  if (moduleId === "heroSlides") {
+    return { title: "", kicker: "", image: "", isActive: true, sortOrder };
+  }
+  if (moduleId === "destinations") {
+    return { name: "新目的地", slug: "", region: "", image: "", isHot: false, isActive: true, sortOrder };
+  }
+  if (moduleId === "themes") {
+    return { label: "新主题", image: "", isActive: true, sortOrder };
+  }
+  return { alt: "新运营入口", image: "", isActive: true, sortOrder };
+}
+
+export function compactSiteItemPayload(moduleId: SiteModule, draft: SiteItemPatch): SiteItemPatch {
+  const payload: SiteItemPatch = {
+    ...draft,
+    image: draft.image?.trim() || null,
+    isActive: draft.isActive ?? true,
+    sortOrder: Number.isFinite(Number(draft.sortOrder)) ? Number(draft.sortOrder) : undefined,
+  };
+
+  if (moduleId === "heroSlides") {
+    payload.title = draft.title?.trim();
+    payload.kicker = draft.kicker?.trim() || "";
+  }
+  if (moduleId === "destinations") {
+    payload.name = draft.name?.trim();
+    payload.slug = draft.slug?.trim();
+    payload.region = draft.region?.trim() || null;
+    payload.isHot = Boolean(draft.isHot);
+  }
+  if (moduleId === "themes") {
+    payload.label = draft.label?.trim();
+  }
+  if (moduleId === "ctaBanners") {
+    payload.alt = draft.alt?.trim();
+  }
+
+  return payload;
+}
+
+export function readImageAsDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+        return;
+      }
+      reject(new Error("图片读取失败，请重新选择。"));
+    };
+    reader.onerror = () => reject(reader.error ?? new Error("图片读取失败，请重新选择。"));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function itemName(item: EditableSiteItem) {
+  if ("title" in item) return item.title;
+  if ("name" in item) return item.name;
+  if ("label" in item) return item.label;
+  return item.alt;
+}
+
+export function itemMeta(item: EditableSiteItem) {
+  if ("kicker" in item) return item.kicker || "轮播";
+  if ("aliases" in item) return item.region || item.aliases?.map((alias) => alias.alias).join(" / ") || "目的地";
+  return "";
+}
+
+export function itemImage(item: EditableSiteItem) {
+  return item.image || "";
+}
+
+export function itemSortOrder(item: EditableSiteItem) {
+  return "sortOrder" in item ? item.sortOrder : undefined;
+}
+
+export function moduleItems(config: SiteConfig, moduleId: SiteModule): EditableSiteItem[] {
+  return config[moduleId] as EditableSiteItem[];
+}
+
+export function moduleEditable(moduleId: ModuleId): moduleId is SiteModule {
+  return moduleId === "heroSlides" || moduleId === "destinations" || moduleId === "themes" || moduleId === "ctaBanners";
+}
diff --git a/src/pages/leads/LeadsPage.tsx b/src/pages/leads/LeadsPage.tsx
new file mode 100644
index 0000000..e205701
--- /dev/null
+++ b/src/pages/leads/LeadsPage.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import { RefreshCcw } from "lucide-react";
+
+import { getLeads, updateLeadStatus } from "@/api";
+import type { Lead } from "@/api";
+import { Button } from "@/components/ui/button";
+import { NativeSelect } from "@/components/ui/select";
+import { formatDate, leadStatusLabels } from "@/lib/admin-utils";
+import type { Notify } from "@/types/admin";
+
+export function LeadsPage({ notify }: { notify: Notify }) {
+  const [leads, setLeads] = useState<Lead[]>([]);
+  const [message, setMessage] = useState("");
+
+  const load = async () => {
+    const result = await getLeads();
+    setLeads(result.items);
+  };
+
+  useEffect(() => {
+    load().catch((err) => setMessage(err.message));
+  }, []);
+
+  const changeStatus = async (lead: Lead, status: Lead["status"]) => {
+    await updateLeadStatus(lead.id, status);
+    setMessage("线索状态已更新");
+    notify({ tone: "success", title: "线索已更新", message: `${lead.phone} 已标记为${leadStatusLabels[status]}。` });
+    await load();
+  };
+
+  return (
+    <section className="work-area">
+      <header className="section-head">
+        <div>
+          <h2>需求线索跟进</h2>
+          <p>对应前台「提交出行需求」和详情页「立即咨询」。</p>
+        </div>
+        <Button variant="outline" onClick={load}>
+          <RefreshCcw size={17} />
+          刷新
+        </Button>
+      </header>
+      {message ? <p className="notice">{message}</p> : null}
+      <div className="lead-table">
+        <div className="lead-table-head">
+          <span>客户</span>
+          <span>需求</span>
+          <span>来源</span>
+          <span>状态</span>
+        </div>
+        {leads.map((lead) => (
+          <article className="lead-row" key={lead.id}>
+            <span>
+              <b>{lead.phone}</b>
+              <small>{formatDate(lead.createdAt)}</small>
+            </span>
+            <span>{lead.destination || lead.note || "未填写"}</span>
+            <span>{lead.sourceProduct?.title || lead.sourcePage || "H5 表单"}</span>
+            <NativeSelect value={lead.status} onChange={(event) => changeStatus(lead, event.target.value as Lead["status"])}>
+              {Object.entries(leadStatusLabels).map(([value, label]) => (
+                <option value={value} key={value}>
+                  {label}
+                </option>
+              ))}
+            </NativeSelect>
+          </article>
+        ))}
+        {!leads.length ? <p className="muted empty-row">暂无客户需求。</p> : null}
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx
new file mode 100644
index 0000000..78cc78c
--- /dev/null
+++ b/src/pages/login/LoginPage.tsx
@@ -0,0 +1,59 @@
+import { FormEvent, useState } from "react";
+
+import { login, setToken } from "@/api";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+export function LoginPage({ onDone }: { onDone: () => void }) {
+  const [email, setEmail] = useState("admin@example.com");
+  const [password, setPassword] = useState("ChangeMe123!");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      const result = await login(email, password);
+      setToken(result.token);
+      onDone();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "登录失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="login-shell">
+      <Card className="login-panel">
+        <CardHeader className="p-0">
+          <span className="login-kicker">万趣运营后台</span>
+          <CardTitle>万趣小程序管理端</CardTitle>
+          <CardDescription>按前台页面结构维护内容、商品和线索。</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <form className="login-form-stack" onSubmit={submit}>
+            <label>
+              账号
+              <Input value={email} onChange={(event) => setEmail(event.target.value)} autoComplete="username" />
+            </label>
+            <label>
+              密码
+              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} autoComplete="current-password" />
+            </label>
+            {error ? (
+              <Alert variant="warning">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : null}
+            <Button disabled={loading}>{loading ? "登录中" : "进入维护台"}</Button>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
diff --git a/src/pages/products/ProductsPage.tsx b/src/pages/products/ProductsPage.tsx
new file mode 100644
index 0000000..6495720
--- /dev/null
+++ b/src/pages/products/ProductsPage.tsx
@@ -0,0 +1,487 @@
+import { useEffect, useState } from "react";
+import { ArrowLeft, ChevronRight, FileText, Image as ImageIcon, Plus, RefreshCcw, Save, Trash2, X } from "lucide-react";
+
+import { createProduct, getProducts, updateProduct } from "@/api";
+import type { Destination, Product, ProductDetailBlock, ProductDetailSection, ProductInput } from "@/api";
+import { AdminDisclosure } from "@/components/admin/AdminDisclosure";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  compactProductPayload,
+  createDetailBlock,
+  createEmptyDetailSection,
+  productStatusLabels,
+  toProductInput,
+} from "@/lib/admin-utils";
+import type { DirtyChangeHandler, Notify } from "@/types/admin";
+
+export function ProductsPage({
+  destinations,
+  onDirtyChange,
+  notify,
+}: {
+  destinations: Destination[];
+  onDirtyChange: DirtyChangeHandler;
+  notify: Notify;
+}) {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [selected, setSelected] = useState<Product | null>(null);
+  const [draft, setDraft] = useState<ProductInput>(toProductInput());
+  const [keyword, setKeyword] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  const load = async () => {
+    setLoading(true);
+    setMessage("");
+    try {
+      const result = await getProducts(keyword);
+      setProducts(result.items);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load().catch((err) => setMessage(err.message));
+  }, []);
+
+  const select = (product: Product) => {
+    setSelected(product);
+    setDraft(toProductInput(product));
+    setMessage("");
+    setDetailOpen(true);
+    onDirtyChange(false);
+  };
+
+  const save = async () => {
+    if (!draft.title.trim()) {
+      setMessage("请先填写商品标题。");
+      notify({ tone: "warning", title: "商品未保存", message: "商品标题不能为空。" });
+      return;
+    }
+
+    const payload = compactProductPayload(draft);
+    const saved = selected ? await updateProduct(selected.id, payload) : await createProduct(payload);
+    setSelected(saved);
+    setDraft(toProductInput(saved));
+    setMessage("商品已保存，对应前台商品卡、搜索结果和详情页会使用这份数据。");
+    onDirtyChange(false);
+    notify({ tone: "success", title: "商品已保存", message: "产品卡、搜索结果和详情页会使用最新内容。" });
+    await load();
+  };
+
+  const createNew = () => {
+    setSelected(null);
+    setDraft(toProductInput());
+    setDetailOpen(true);
+    setMessage("正在新建商品");
+    onDirtyChange(true);
+  };
+
+  const updateDraft = (nextDraft: ProductInput) => {
+    setDraft(nextDraft);
+    onDirtyChange(true);
+  };
+
+  const closeDetail = () => {
+    setDetailOpen(false);
+    setSelected(null);
+    setMessage("");
+    onDirtyChange(false);
+  };
+
+  if (!detailOpen) {
+    const publishedCount = products.filter((product) => product.status === "published").length;
+    const draftCount = products.filter((product) => product.status === "draft").length;
+
+    return (
+      <section className="work-area product-workbench">
+        <div className="product-list-page">
+          <header className="section-head product-list-head">
+            <div>
+              <h2>商品维护</h2>
+              <p>先管理商品列表，再点击单个商品进入详情维护。</p>
+            </div>
+            <Button className="primary-action compact" onClick={createNew}>
+              <Plus size={17} />
+              新建商品
+            </Button>
+          </header>
+          {message ? <p className="notice">{message}</p> : null}
+          <div className="product-list-summary">
+            <span>
+              <b>{products.length}</b>
+              <small>当前列表</small>
+            </span>
+            <span>
+              <b>{publishedCount}</b>
+              <small>已上架</small>
+            </span>
+            <span>
+              <b>{draftCount}</b>
+              <small>草稿</small>
+            </span>
+          </div>
+          <form
+            className="toolbar product-toolbar"
+            onSubmit={(event) => {
+              event.preventDefault();
+              load().catch((err) => setMessage(err.message));
+            }}
+          >
+            <Input value={keyword} onChange={(event) => setKeyword(event.target.value)} placeholder="搜索商品标题、短标题或标签" />
+            <Button variant="outline" disabled={loading}>
+              <RefreshCcw size={16} />
+              {loading ? "查询中" : "查询"}
+            </Button>
+          </form>
+          <div className="product-table product-list-table">
+            {products.map((product) => (
+              <Button variant="ghost" className={selected?.id === product.id ? "selected" : ""} key={product.id} onClick={() => select(product)}>
+                {product.coverImage ? <img src={product.coverImage} alt="" /> : <span className="image-placeholder" />}
+                <span className="product-table-main">
+                  <b>{product.title}</b>
+                  <small>
+                    {product.destination?.name || "未绑定目的地"} · {product.tags.slice(0, 3).join(" / ") || "暂无标签"}
+                  </small>
+                </span>
+                <Badge className={`status-chip ${product.status}`} variant={product.status === "published" ? "success" : product.status === "draft" ? "warning" : "muted"}>
+                  {productStatusLabels[product.status]}
+                </Badge>
+                <em>{product.priceAmount ? `¥${product.priceAmount}` : "未定价"}</em>
+                <span className="row-link">
+                  详情维护
+                  <ChevronRight size={16} />
+                </span>
+              </Button>
+            ))}
+            {!products.length ? <p className="muted empty-row">暂无商品，点击右上角新建商品。</p> : null}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="work-area product-workbench">
+      <div className="product-detail-page">
+        <header className="section-head">
+          <div>
+            <h2>{selected ? "商品详情维护" : "新建商品"}</h2>
+            <p>把列表卡片、销售信息、详情图文拆成可单独维护的模块。</p>
+          </div>
+          <div className="action-row">
+            <Button variant="outline" onClick={closeDetail}>
+              <ArrowLeft size={17} />
+              返回列表
+            </Button>
+            <Button className="primary-action compact" onClick={save}>
+              <Save size={17} />
+              保存商品
+            </Button>
+          </div>
+        </header>
+        {message ? <p className="notice">{message}</p> : null}
+        <div className="product-editor-layout">
+          <aside className="product-editor-sidebar">
+            <div className="product-cover-preview">{draft.coverImage ? <img src={draft.coverImage} alt="" /> : <ImageIcon size={32} />}</div>
+            <h3>{draft.title || "未命名商品"}</h3>
+            <p>{draft.summary || "列表摘要会显示在商品卡和详情页顶部。"}</p>
+            <div className="product-side-meta">
+              <span>
+                <b>{productStatusLabels[draft.status]}</b>
+                <small>状态</small>
+              </span>
+              <span>
+                <b>{draft.detailSections?.length ?? 0}</b>
+                <small>详情模块</small>
+              </span>
+              <span>
+                <b>{draft.tags.filter(Boolean).length}</b>
+                <small>标签</small>
+              </span>
+            </div>
+          </aside>
+          <div className="product-editor-main">
+            <div className="admin-disclosure-stack product-maintenance-stack">
+              <AdminDisclosure title="列表信息" description="维护商品卡、搜索结果和详情页顶部的主要文案。">
+                <div className="form-grid">
+                  <label className="wide">
+                    商品标题
+                    <Textarea value={draft.title} onChange={(event) => updateDraft({ ...draft, title: event.target.value })} rows={3} />
+                  </label>
+                  <label>
+                    商品短标题
+                    <Input value={draft.subtitle ?? ""} onChange={(event) => updateDraft({ ...draft, subtitle: event.target.value })} />
+                  </label>
+                  <label>
+                    排序权重
+                    <Input type="number" value={draft.sortWeight} onChange={(event) => updateDraft({ ...draft, sortWeight: Number(event.target.value) })} />
+                  </label>
+                  <label className="wide">
+                    列表摘要
+                    <Textarea value={draft.summary ?? ""} onChange={(event) => updateDraft({ ...draft, summary: event.target.value })} rows={3} />
+                  </label>
+                </div>
+              </AdminDisclosure>
+              <AdminDisclosure title="销售与归属" description="控制商品是否上架、所属目的地、价格和前台售卖单位。">
+                <div className="form-grid">
+                  <label>
+                    目的地
+                    <NativeSelect value={draft.destinationId ?? ""} onChange={(event) => updateDraft({ ...draft, destinationId: event.target.value || null })}>
+                      <option value="">未绑定</option>
+                      {destinations.map((destination) => (
+                        <option value={destination.id} key={destination.id}>
+                          {destination.name}
+                        </option>
+                      ))}
+                    </NativeSelect>
+                  </label>
+                  <label>
+                    上架状态
+                    <NativeSelect value={draft.status} onChange={(event) => updateDraft({ ...draft, status: event.target.value as ProductInput["status"] })}>
+                      <option value="draft">草稿</option>
+                      <option value="published">已上架</option>
+                      <option value="archived">已归档</option>
+                    </NativeSelect>
+                  </label>
+                  <label>
+                    价格
+                    <Input type="number" value={draft.priceAmount ?? ""} onChange={(event) => updateDraft({ ...draft, priceAmount: event.target.value ? Number(event.target.value) : null })} />
+                  </label>
+                  <label>
+                    价格单位
+                    <Input value={draft.priceUnit ?? "起/人"} onChange={(event) => updateDraft({ ...draft, priceUnit: event.target.value })} />
+                  </label>
+                </div>
+              </AdminDisclosure>
+              <AdminDisclosure title="标签模块" description="每个标签单独维护，保存时会自动去掉空标签。">
+                <TagEditor tags={draft.tags} onChange={(tags) => updateDraft({ ...draft, tags })} />
+              </AdminDisclosure>
+              <AdminDisclosure title="图片模块" description="封面图用于列表卡片，详情图可作为商品图库或详情页素材。">
+                <div className="form-grid">
+                  <label className="wide">
+                    封面图片 URL
+                    <Input value={draft.coverImage ?? ""} onChange={(event) => updateDraft({ ...draft, coverImage: event.target.value })} />
+                  </label>
+                </div>
+                <ProductImagesEditor images={draft.images ?? []} onChange={(images) => updateDraft({ ...draft, images })} />
+              </AdminDisclosure>
+              <AdminDisclosure title="详情模块" description="按模块维护标题、图片和段落，不需要再编辑整段格式文本。">
+                <DetailSectionsEditor sections={draft.detailSections ?? []} onChange={(detailSections) => updateDraft({ ...draft, detailSections })} />
+              </AdminDisclosure>
+            </div>
+            <div className="product-editor-footer">
+              <Button className="primary-action compact" onClick={save}>
+                <Save size={17} />
+                保存商品
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TagEditor({ tags, onChange }: { tags: string[]; onChange: (tags: string[]) => void }) {
+  const updateTag = (index: number, value: string) => {
+    onChange(tags.map((tag, tagIndex) => (tagIndex === index ? value : tag)));
+  };
+
+  const removeTag = (index: number) => {
+    onChange(tags.filter((_, tagIndex) => tagIndex !== index));
+  };
+
+  return (
+    <div className="tag-editor">
+      {tags.map((tag, index) => (
+        <label className="tag-input-row" key={`${index}-${tag}`}>
+          标签 {index + 1}
+          <span>
+            <Input value={tag} onChange={(event) => updateTag(index, event.target.value)} />
+            <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeTag(index)} aria-label={`删除标签 ${index + 1}`}>
+              <X size={16} />
+            </Button>
+          </span>
+        </label>
+      ))}
+      {!tags.length ? <p className="field-help">暂无标签，可点击添加后逐个维护。</p> : null}
+      <Button type="button" variant="outline" className="inline-action" onClick={() => onChange([...tags, ""])}>
+        <Plus size={16} />
+        添加标签
+      </Button>
+    </div>
+  );
+}
+
+function ProductImagesEditor({
+  images,
+  onChange,
+}: {
+  images: NonNullable<ProductInput["images"]>;
+  onChange: (images: NonNullable<ProductInput["images"]>) => void;
+}) {
+  const updateImage = (index: number, patch: Partial<NonNullable<ProductInput["images"]>[number]>) => {
+    onChange(images.map((image, imageIndex) => (imageIndex === index ? { ...image, ...patch } : image)));
+  };
+
+  const removeImage = (index: number) => {
+    onChange(images.filter((_, imageIndex) => imageIndex !== index));
+  };
+
+  return (
+    <div className="image-list-editor">
+      {images.map((image, index) => (
+        <article className="image-editor-row" key={`${index}-${image.url}`}>
+          <div className="image-editor-preview">{image.url ? <img src={image.url} alt="" /> : <ImageIcon size={24} />}</div>
+          <div className="form-grid compact-grid">
+            <label className="wide">
+              详情图片 URL
+              <Input value={image.url} onChange={(event) => updateImage(index, { url: event.target.value })} />
+            </label>
+            <label className="wide">
+              图片标题 / 说明
+              <Input value={image.alt ?? ""} onChange={(event) => updateImage(index, { alt: event.target.value })} />
+            </label>
+          </div>
+          <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeImage(index)} aria-label={`删除详情图片 ${index + 1}`}>
+            <Trash2 size={16} />
+          </Button>
+        </article>
+      ))}
+      {!images.length ? <p className="field-help">暂无详情图片。封面图会继续用于商品卡，详情模块中也可以单独添加图片块。</p> : null}
+      <Button type="button" variant="outline" className="inline-action" onClick={() => onChange([...images, { url: "", alt: "", sortOrder: images.length }])}>
+        <Plus size={16} />
+        添加详情图片
+      </Button>
+    </div>
+  );
+}
+
+function DetailSectionsEditor({
+  sections,
+  onChange,
+}: {
+  sections: ProductDetailSection[];
+  onChange: (sections: ProductDetailSection[]) => void;
+}) {
+  const updateSection = (sectionIndex: number, patch: Partial<ProductDetailSection>) => {
+    onChange(sections.map((section, index) => (index === sectionIndex ? { ...section, ...patch } : section)));
+  };
+
+  const removeSection = (sectionIndex: number) => {
+    onChange(sections.filter((_, index) => index !== sectionIndex));
+  };
+
+  const updateBlock = (sectionIndex: number, blockIndex: number, nextBlock: ProductDetailBlock) => {
+    const section = sections[sectionIndex];
+    if (!section) return;
+    updateSection(sectionIndex, {
+      blocks: section.blocks.map((block, index) => (index === blockIndex ? nextBlock : block)),
+    });
+  };
+
+  const addBlock = (sectionIndex: number, type: ProductDetailBlock["type"]) => {
+    const section = sections[sectionIndex];
+    if (!section) return;
+    updateSection(sectionIndex, { blocks: [...section.blocks, createDetailBlock(type)] });
+  };
+
+  const removeBlock = (sectionIndex: number, blockIndex: number) => {
+    const section = sections[sectionIndex];
+    if (!section) return;
+    updateSection(sectionIndex, { blocks: section.blocks.filter((_, index) => index !== blockIndex) });
+  };
+
+  return (
+    <div className="detail-section-editor">
+      {sections.map((section, sectionIndex) => (
+        <article className="detail-section-card" key={`${section.key}-${sectionIndex}`}>
+          <header className="detail-section-card-head">
+            <span className="module-index">{sectionIndex + 1}</span>
+            <span>
+              <b>{section.label || "未命名模块"}</b>
+              <small>{section.blocks.length} 个内容块</small>
+            </span>
+            <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeSection(sectionIndex)} aria-label={`删除详情模块 ${sectionIndex + 1}`}>
+              <Trash2 size={16} />
+            </Button>
+          </header>
+          <div className="form-grid detail-section-fields">
+            <label>
+              模块 key
+              <Input value={section.key} onChange={(event) => updateSection(sectionIndex, { key: event.target.value })} />
+            </label>
+            <label>
+              模块名称
+              <Input value={section.label} onChange={(event) => updateSection(sectionIndex, { label: event.target.value })} />
+            </label>
+            <label className="wide">
+              模块标题
+              <Input value={section.title ?? ""} onChange={(event) => updateSection(sectionIndex, { title: event.target.value })} />
+            </label>
+          </div>
+          <div className="detail-block-list">
+            {section.blocks.map((block, blockIndex) => (
+              <article className={`detail-block-card ${block.type}`} key={`${section.key}-${blockIndex}-${block.type}`}>
+                <header>
+                  <span>
+                    {block.type === "image" ? <ImageIcon size={16} /> : <FileText size={16} />}
+                    <b>
+                      {block.type === "image" ? "图片内容" : "文字内容"} {blockIndex + 1}
+                    </b>
+                  </span>
+                  <Button type="button" variant="ghost" size="icon" className="icon-action danger-icon" onClick={() => removeBlock(sectionIndex, blockIndex)} aria-label={`删除内容块 ${blockIndex + 1}`}>
+                    <X size={15} />
+                  </Button>
+                </header>
+                {block.type === "image" ? (
+                  <div className="detail-image-block">
+                    <div className="image-editor-preview large">{block.url ? <img src={block.url} alt="" /> : <ImageIcon size={24} />}</div>
+                    <div className="form-grid compact-grid">
+                      <label className="wide">
+                        图片 URL
+                        <Input value={block.url} onChange={(event) => updateBlock(sectionIndex, blockIndex, { ...block, url: event.target.value })} />
+                      </label>
+                      <label className="wide">
+                        图片标题 / 说明
+                        <Input value={block.alt ?? ""} onChange={(event) => updateBlock(sectionIndex, blockIndex, { ...block, alt: event.target.value })} />
+                      </label>
+                    </div>
+                  </div>
+                ) : (
+                  <label>
+                    段落内容
+                    <Textarea value={block.text} onChange={(event) => updateBlock(sectionIndex, blockIndex, { ...block, text: event.target.value })} rows={4} />
+                  </label>
+                )}
+              </article>
+            ))}
+            {!section.blocks.length ? <p className="field-help">这个模块暂无内容块，可添加文字或图片。</p> : null}
+          </div>
+          <div className="section-action-row">
+            <Button type="button" variant="outline" className="inline-action" onClick={() => addBlock(sectionIndex, "text")}>
+              <FileText size={16} />
+              添加文字
+            </Button>
+            <Button type="button" variant="outline" className="inline-action" onClick={() => addBlock(sectionIndex, "image")}>
+              <ImageIcon size={16} />
+              添加图片
+            </Button>
+          </div>
+        </article>
+      ))}
+      {!sections.length ? <p className="field-help">暂无详情模块。可以从常用模块开始添加，再逐块维护标题、文字和图片。</p> : null}
+      <Button type="button" variant="outline" className="inline-action strong" onClick={() => onChange([...sections, createEmptyDetailSection(sections.length)])}>
+        <Plus size={16} />
+        添加详情模块
+      </Button>
+    </div>
+  );
+}
diff --git a/src/pages/structure/StructurePage.tsx b/src/pages/structure/StructurePage.tsx
new file mode 100644
index 0000000..9ccfb35
--- /dev/null
+++ b/src/pages/structure/StructurePage.tsx
@@ -0,0 +1,851 @@
+import { useEffect, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronRight,
+  Eye,
+  Plus,
+  RefreshCcw,
+  Save,
+  Send,
+  Trash2,
+  X,
+} from "lucide-react";
+
+import {
+  createSiteConfigItem,
+  deleteSiteConfigItem,
+  getProducts,
+  getSiteConfig,
+  publishSite,
+  reorderSiteConfigItems,
+  resetGuizhouContent,
+  updateSiteConfigItem,
+} from "@/api";
+import type { Product, SiteConfig, SiteItemPatch, SiteModule } from "@/api";
+import { AdminDisclosure } from "@/components/admin/AdminDisclosure";
+import { EmptyState } from "@/components/admin/EmptyState";
+import { SingleImageUploader } from "@/components/admin/SingleImageUploader";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  compactSiteItemPayload,
+  createEmptySiteItemDraft,
+  itemImage,
+  itemMeta,
+  itemName,
+  itemSortOrder,
+  moduleEditable,
+  moduleItems,
+  siteItemPrimaryKey,
+} from "@/lib/admin-utils";
+import type {
+  DirtyChangeHandler,
+  EditableSiteItem,
+  ModuleId,
+  Notify,
+  PageId,
+  Tab,
+} from "@/types/admin";
+
+const NEW_SITE_ITEM_ID = "__new_site_item__";
+
+const pageSpecs: {
+  id: PageId;
+  title: string;
+  subtitle: string;
+  frontPath: string;
+  modules: {
+    id: ModuleId;
+    label: string;
+    hint: string;
+    frontPosition: string;
+  }[];
+}[] = [
+  {
+    id: "home",
+    title: "万趣首页",
+    subtitle: "维护用户进入小程序后第一屏到页尾的内容顺序。",
+    frontPath: "前台：首页 / bottom tab「万趣」",
+    modules: [
+      {
+        id: "heroSlides",
+        label: "顶部轮播",
+        hint: "控制首屏大图、活动入口和主视觉顺序。",
+        frontPosition: "首页第一屏",
+      },
+      {
+        id: "destinations",
+        label: "探索贵州",
+        hint: "控制省内目的地宫格、热门标记和搜索入口。",
+        frontPosition: "首页「探索贵州」",
+      },
+      {
+        id: "themes",
+        label: "主题甄选",
+        hint: "控制横向主题卡和搜索跳转。",
+        frontPosition: "首页「主题甄选」",
+      },
+      {
+        id: "routeProducts",
+        label: "精选线路",
+        hint: "从商品库选择上架线路，决定首页线路池。",
+        frontPosition: "首页精选线路",
+      },
+      {
+        id: "ctaBanners",
+        label: "底部运营入口",
+        hint: "控制权益卡、服务管家入口、目的地搜索、提交需求入口。",
+        frontPosition: "首页页尾 CTA",
+      },
+    ],
+  },
+  {
+    id: "destination",
+    title: "目的地页",
+    subtitle: "维护目的地、别名和与商品的关联，影响搜索和目的地 tab。",
+    frontPath: "前台：bottom tab「目的地」/ 搜索弹层",
+    modules: [
+      {
+        id: "destinations",
+        label: "目的地字典",
+        hint: "维护名称、封面、热门状态和启停。",
+        frontPosition: "目的地首页和搜索列表",
+      },
+      {
+        id: "routeProducts",
+        label: "目的地商品",
+        hint: "商品绑定目的地后会进入对应结果页。",
+        frontPosition: "搜索结果页产品列表",
+      },
+    ],
+  },
+  {
+    id: "detail",
+    title: "商品维护",
+    subtitle: "维护用户点击商品卡后的详情页内容和售卖状态。",
+    frontPath: "前台：产品卡点击后详情页",
+    modules: [
+      {
+        id: "routeProducts",
+        label: "商品库",
+        hint: "编辑标题、价格、封面、标签、详情模块和上下架。",
+        frontPosition: "详情页、搜索页、首页商品卡",
+      },
+    ],
+  },
+  {
+    id: "campaign",
+    title: "活动专题",
+    subtitle: "维护轮播、主题卡和 CTA 指向的活动内容。",
+    frontPath: "前台：轮播 / 主题卡 / CTA 跳转",
+    modules: [
+      {
+        id: "heroSlides",
+        label: "轮播活动入口",
+        hint: "首屏主视觉上的活动入口。",
+        frontPosition: "首页轮播",
+      },
+      {
+        id: "themes",
+        label: "主题活动入口",
+        hint: "主题卡片进入对应活动专题。",
+        frontPosition: "主题甄选横滑区",
+      },
+      {
+        id: "ctaBanners",
+        label: "营销 CTA",
+        hint: "页尾活动和需求入口。",
+        frontPosition: "首页底部运营区",
+      },
+      {
+        id: "campaignProducts",
+        label: "活动商品池",
+        hint: "活动专题内展示的商品来自商品库。",
+        frontPosition: "活动专题产品列表",
+      },
+    ],
+  },
+  {
+    id: "demand",
+    title: "需求线索",
+    subtitle: "维护用户提交出行需求后的分配和跟进。",
+    frontPath: "前台：提交出行需求 / 立即咨询",
+    modules: [
+      {
+        id: "leadFlow",
+        label: "线索跟进",
+        hint: "查看联系方式、目的地、来源商品并推进状态。",
+        frontPosition: "需求表单提交后",
+      },
+    ],
+  },
+];
+
+export function StructurePage({
+  fixedPage,
+  onJump,
+  onDirtyChange,
+  notify,
+}: {
+  fixedPage?: PageId;
+  onJump: (tab: Tab) => void;
+  onDirtyChange: DirtyChangeHandler;
+  notify: Notify;
+}) {
+  const [config, setConfig] = useState<SiteConfig | null>(null);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [pageId, setPageId] = useState<PageId>(fixedPage ?? "home");
+  const [moduleId, setModuleId] = useState<ModuleId>("heroSlides");
+  const [selectedId, setSelectedId] = useState("");
+  const [draft, setDraft] = useState<SiteItemPatch>({});
+  const [message, setMessage] = useState("");
+  const [editorOpen, setEditorOpen] = useState(false);
+
+  const activePage =
+    pageSpecs.find((page) => page.id === (fixedPage ?? pageId)) ?? pageSpecs[0];
+  const activeModule =
+    activePage.modules.find((module) => module.id === moduleId) ??
+    activePage.modules[0];
+  const editableItems =
+    config && moduleEditable(moduleId) ? moduleItems(config, moduleId) : [];
+  const isCreatingSiteItem = selectedId === NEW_SITE_ITEM_ID;
+  const selectedItem = isCreatingSiteItem
+    ? undefined
+    : (editableItems.find((item) => item.id === selectedId) ??
+      editableItems[0]);
+  const showEditorDrawer =
+    editorOpen &&
+    moduleEditable(moduleId) &&
+    (isCreatingSiteItem || Boolean(selectedItem));
+  const gridClassName = [
+    "maintenance-grid",
+    fixedPage ? "focused-page-grid" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const setDraftFromItem = (item: EditableSiteItem) => {
+    setDraft({
+      title: "title" in item ? item.title : undefined,
+      kicker: "kicker" in item ? item.kicker || "" : undefined,
+      name: "name" in item ? item.name : undefined,
+      slug: "slug" in item ? item.slug : undefined,
+      region: "region" in item ? item.region || "" : undefined,
+      label: "label" in item ? item.label : undefined,
+      alt: "alt" in item ? item.alt : undefined,
+      image: "image" in item ? item.image || "" : "",
+      isHot: "isHot" in item ? item.isHot : undefined,
+      isActive: item.isActive,
+      sortOrder: itemSortOrder(item),
+    });
+  };
+
+  const load = async () => {
+    const [site, productResult] = await Promise.all([
+      getSiteConfig(),
+      getProducts(),
+    ]);
+    setConfig(site);
+    setProducts(productResult.items);
+    const firstModule = activePage.modules[0]?.id ?? "heroSlides";
+    setModuleId((current) =>
+      activePage.modules.some((module) => module.id === current)
+        ? current
+        : firstModule,
+    );
+    if (moduleEditable(firstModule)) {
+      const first = moduleItems(site, firstModule)[0];
+      if (first && !selectedId) {
+        setSelectedId(first.id);
+        setDraftFromItem(first);
+      }
+    }
+  };
+
+  useEffect(() => {
+    load().catch((err) => setMessage(err.message));
+  }, []);
+
+  useEffect(() => {
+    if (!fixedPage) return;
+    setPageId(fixedPage);
+    const next =
+      pageSpecs.find((page) => page.id === fixedPage)?.modules[0]?.id ??
+      "heroSlides";
+    setModuleId(next);
+    setSelectedId("");
+    setEditorOpen(false);
+  }, [fixedPage]);
+
+  useEffect(() => {
+    if (!config || !moduleEditable(moduleId)) {
+      setSelectedId("");
+      setDraft({});
+      setEditorOpen(false);
+      return;
+    }
+    const first = moduleItems(config, moduleId)[0];
+    if (!first) {
+      setSelectedId("");
+      setDraft({});
+      setEditorOpen(false);
+      return;
+    }
+    setSelectedId(first.id);
+    setDraftFromItem(first);
+    setEditorOpen(false);
+  }, [moduleId, config]);
+
+  const selectPage = (next: PageId) => {
+    setPageId(next);
+    const page = pageSpecs.find((item) => item.id === next);
+    setModuleId(page?.modules[0]?.id ?? "heroSlides");
+    setSelectedId("");
+    setMessage("");
+    setEditorOpen(false);
+    onDirtyChange(false);
+  };
+
+  const startCreateSiteItem = () => {
+    if (!moduleEditable(moduleId)) return;
+    setSelectedId(NEW_SITE_ITEM_ID);
+    setDraft(createEmptySiteItemDraft(moduleId, editableItems.length));
+    setMessage("");
+    setEditorOpen(true);
+    onDirtyChange(true);
+  };
+
+  const selectItem = (item: EditableSiteItem) => {
+    setSelectedId(item.id);
+    setDraftFromItem(item);
+    setMessage("");
+    setEditorOpen(true);
+    onDirtyChange(false);
+  };
+
+  const closeEditorDrawer = () => {
+    setEditorOpen(false);
+    if (isCreatingSiteItem) {
+      const first = editableItems[0];
+      if (first) {
+        setSelectedId(first.id);
+        setDraftFromItem(first);
+      } else {
+        setSelectedId("");
+        setDraft({});
+      }
+      onDirtyChange(false);
+    }
+  };
+
+  const save = async () => {
+    if (
+      !config ||
+      !moduleEditable(moduleId) ||
+      (!selectedId && !isCreatingSiteItem)
+    )
+      return;
+    const payload = compactSiteItemPayload(moduleId, draft);
+    const primaryKey = siteItemPrimaryKey(moduleId);
+    const primaryValue = String(payload[primaryKey] ?? "").trim();
+
+    if (!primaryValue) {
+      const messageText = "请先填写当前模块的主标题/名称。";
+      notify({ tone: "warning", title: "内容未保存", message: messageText });
+      return;
+    }
+
+    try {
+      const saved = isCreatingSiteItem
+        ? await createSiteConfigItem(moduleId, payload)
+        : await updateSiteConfigItem(moduleId, selectedId, payload);
+      setSelectedId(saved.id);
+      setDraftFromItem(saved as EditableSiteItem);
+      setMessage("");
+      onDirtyChange(false);
+      notify({
+        tone: "success",
+        title: isCreatingSiteItem ? "内容已新增" : "内容已保存",
+        message: `${activeModule.label} 已同步到维护数据。`,
+      });
+      await load();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "保存失败";
+      setMessage(messageText);
+      notify({ tone: "danger", title: "内容保存失败", message: messageText });
+    }
+  };
+
+  const removeSiteItem = async (item: EditableSiteItem) => {
+    if (!moduleEditable(moduleId)) return;
+    const confirmed = window.confirm(
+      `确认删除「${itemName(item)}」吗？删除后需要后端同步移除对应模块配置。`,
+    );
+    if (!confirmed) return;
+
+    try {
+      await deleteSiteConfigItem(moduleId, item.id);
+      setSelectedId("");
+      setDraft({});
+      setMessage("");
+      onDirtyChange(false);
+      notify({
+        tone: "success",
+        title: "内容已删除",
+        message: `${activeModule.label} 已移除一项配置。`,
+      });
+      await load();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "删除失败";
+      setMessage(messageText);
+      notify({ tone: "danger", title: "内容删除失败", message: messageText });
+    }
+  };
+
+  const moveSiteItem = async (item: EditableSiteItem, direction: -1 | 1) => {
+    if (!moduleEditable(moduleId)) return;
+    const currentIndex = editableItems.findIndex(
+      (candidate) => candidate.id === item.id,
+    );
+    const nextIndex = currentIndex + direction;
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= editableItems.length)
+      return;
+
+    const nextIds = editableItems.map((candidate) => candidate.id);
+    [nextIds[currentIndex], nextIds[nextIndex]] = [
+      nextIds[nextIndex],
+      nextIds[currentIndex],
+    ];
+
+    try {
+      await reorderSiteConfigItems(moduleId, nextIds);
+      setMessage("");
+      onDirtyChange(false);
+      notify({
+        tone: "success",
+        title: "顺序已更新",
+        message: `${activeModule.label} 已按新顺序保存。`,
+      });
+      await load();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "排序失败";
+      setMessage(messageText);
+      notify({ tone: "danger", title: "排序保存失败", message: messageText });
+    }
+  };
+
+  const publish = async () => {
+    const result = await publishSite();
+    setMessage("");
+    notify({ tone: "success", title: "已生成发布版本", message: result.title });
+  };
+
+  const resetToGuizhou = async () => {
+    const result = await resetGuizhouContent();
+    setMessage("");
+    notify({
+      tone: "success",
+      title: "贵州内容已重置",
+      message: "后台配置、商品库和素材引用已切换为贵州省内定制游。",
+    });
+    setSelectedId("");
+    setDraft({});
+    onDirtyChange(false);
+    await load();
+  };
+
+  if (!config) return <EmptyState text={message || "正在读取小程序结构"} />;
+
+  return (
+    <section className="work-area structure-workbench">
+      <header className="section-head">
+        <div>
+          <h2>{fixedPage ? activePage.title : "小程序维护地图"}</h2>
+          <p>
+            {fixedPage
+              ? activePage.subtitle
+              : "按用户看到的前台页面组织后台，逐层展开到可维护内容。"}
+          </p>
+        </div>
+        <div className="action-row">
+          <Button variant="outline" onClick={load}>
+            <RefreshCcw size={17} />
+            刷新
+          </Button>
+          <Button className="primary-action compact" onClick={publish}>
+            <Send size={17} />
+            发布快照
+          </Button>
+          <Button variant="outline" onClick={resetToGuizhou}>
+            <RefreshCcw size={17} />
+            重置贵州内容
+          </Button>
+        </div>
+      </header>
+      <div className={gridClassName}>
+        {!fixedPage ? (
+          <aside className="page-rail">
+            <h3>前台页面</h3>
+            {pageSpecs.map((page) => (
+              <Button
+                variant="ghost"
+                className={activePage.id === page.id ? "active" : ""}
+                key={page.id}
+                onClick={() => selectPage(page.id)}
+              >
+                <span>
+                  <b>{page.title}</b>
+                  <small>{page.frontPath}</small>
+                </span>
+                <ChevronRight size={16} />
+              </Button>
+            ))}
+          </aside>
+        ) : (
+          <section className="page-focus-card">
+            <span className="focus-kicker">当前维护页面</span>
+            <h3>{activePage.title}</h3>
+            <p>{activePage.frontPath}</p>
+            <small>{activePage.subtitle}</small>
+          </section>
+        )}
+        <section className="module-rail">
+          <div className="front-context">
+            <Eye size={18} />
+            <span>
+              <b>{activePage.frontPath}</b>
+              <small>{activePage.subtitle}</small>
+            </span>
+          </div>
+          <h3>页面模块</h3>
+          {activePage.modules.map((module, index) => (
+            <Button
+              variant="ghost"
+              className={activeModule.id === module.id ? "active" : ""}
+              key={module.id}
+              onClick={() => setModuleId(module.id)}
+            >
+              <em>{index + 1}</em>
+              <span>
+                <b>{module.label}</b>
+                <small>{module.frontPosition}</small>
+              </span>
+            </Button>
+          ))}
+        </section>
+        <section className="item-rail">
+          <header className="module-data-head">
+            <span>
+              <h3>{activeModule.label}</h3>
+              <p>{activeModule.hint}</p>
+            </span>
+            {moduleEditable(moduleId) ? (
+              <Button
+                className="primary-action compact"
+                onClick={startCreateSiteItem}
+              >
+                <Plus size={16} />
+                新增
+              </Button>
+            ) : null}
+          </header>
+          {moduleEditable(moduleId) ? (
+            <div className="mapped-list">
+              {editableItems.map((item, index) => (
+                <div className="mapped-list-row" key={item.id}>
+                  <Button
+                    variant="ghost"
+                    className={`mapped-list-main ${selectedItem?.id === item.id ? "selected" : ""}`}
+                    onClick={() => selectItem(item)}
+                  >
+                    {itemImage(item) ? (
+                      <img src={itemImage(item)} alt="" />
+                    ) : (
+                      <span className="image-placeholder" />
+                    )}
+                    <span>
+                      <b>{itemName(item)}</b>
+                      <small>
+                        {itemMeta(item)}
+                        {typeof itemSortOrder(item) === "number"
+                          ? ` · 排序 ${itemSortOrder(item)}`
+                          : ""}
+                      </small>
+                    </span>
+                  </Button>
+                  <div
+                    className="mapped-list-actions"
+                    aria-label={`${itemName(item)} 操作`}
+                  >
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      disabled={index === 0}
+                      onClick={() => moveSiteItem(item, -1)}
+                      aria-label={`上移 ${itemName(item)}`}
+                    >
+                      <ArrowUp size={15} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      disabled={index === editableItems.length - 1}
+                      onClick={() => moveSiteItem(item, 1)}
+                      aria-label={`下移 ${itemName(item)}`}
+                    >
+                      <ArrowDown size={15} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeSiteItem(item)}
+                      aria-label={`删除 ${itemName(item)}`}
+                    >
+                      <Trash2 size={15} />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+              {!editableItems.length ? (
+                <p className="mapped-empty">
+                  暂无配置数据，点击新增创建第一项。
+                </p>
+              ) : null}
+            </div>
+          ) : (
+            <ReferencePanel
+              moduleId={moduleId}
+              products={products}
+              onJump={onJump}
+            />
+          )}
+        </section>
+      </div>
+      {showEditorDrawer && moduleEditable(moduleId) ? (
+        <div className="edit-drawer-layer">
+          <button
+            className="edit-drawer-backdrop"
+            type="button"
+            aria-label="关闭编辑抽屉"
+            onClick={closeEditorDrawer}
+          />
+          <section
+            className="edit-rail edit-drawer"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="site-item-editor-title"
+          >
+            <SiteItemEditor
+              moduleId={moduleId}
+              moduleLabel={activeModule.label}
+              draft={draft}
+              isCreating={isCreatingSiteItem}
+              onDraft={(nextDraft) => {
+                setDraft(nextDraft);
+                onDirtyChange(true);
+              }}
+              onSave={save}
+              onClose={closeEditorDrawer}
+            />
+          </section>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function ReferencePanel({
+  moduleId,
+  products,
+  onJump,
+}: {
+  moduleId: ModuleId;
+  products: Product[];
+  onJump: (tab: Tab) => void;
+}) {
+  if (moduleId === "leadFlow") {
+    return (
+      <div className="reference-panel">
+        <p>
+          这个模块由客户需求列表维护，重点是状态流转、服务管家跟进和来源追踪。
+        </p>
+        <Button
+          className="primary-action compact"
+          onClick={() => onJump("leads")}
+        >
+          进入需求线索
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="reference-panel">
+      <p>
+        这个模块引用商品库。编辑商品后，首页商品卡、搜索结果和详情页会同步使用同一份数据。
+      </p>
+      <div className="mini-product-stack">
+        {products.slice(0, 4).map((product) => (
+          <span key={product.id}>
+            <img src={product.coverImage || ""} alt="" />
+            <b>{product.title}</b>
+          </span>
+        ))}
+      </div>
+      <Button
+        className="primary-action compact"
+        onClick={() => onJump("products")}
+      >
+        进入商品维护
+      </Button>
+    </div>
+  );
+}
+
+function SiteItemEditor({
+  moduleId,
+  moduleLabel,
+  draft,
+  isCreating,
+  onDraft,
+  onSave,
+  onClose,
+}: {
+  moduleId: SiteModule;
+  moduleLabel: string;
+  draft: SiteItemPatch;
+  isCreating: boolean;
+  onDraft: (draft: SiteItemPatch) => void;
+  onSave: () => void;
+  onClose: () => void;
+}) {
+  const primaryKey = siteItemPrimaryKey(moduleId);
+  const primaryLabel =
+    moduleId === "heroSlides"
+      ? "轮播标题"
+      : moduleId === "destinations"
+        ? "目的地名称"
+        : moduleId === "themes"
+          ? "主题名称"
+          : "入口文案";
+  const editorTitle = `${isCreating ? "新增" : "编辑"}${moduleLabel}`;
+
+  return (
+    <div className="mapped-editor">
+      <header className="editor-head">
+        <span>
+          <h3 id="site-item-editor-title">{editorTitle}</h3>
+          <small>
+            {isCreating
+              ? `创建后会进入「${moduleLabel}」的数据列表`
+              : `保存后会影响「${moduleLabel}」前台模块`}
+          </small>
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          aria-label="关闭编辑抽屉"
+        >
+          <X size={18} />
+        </Button>
+      </header>
+      <div className="admin-disclosure-stack">
+        <AdminDisclosure title="展示内容">
+          <label>
+            {primaryLabel}
+            <Input
+              value={String(draft[primaryKey] ?? "")}
+              onChange={(event) =>
+                onDraft({ ...draft, [primaryKey]: event.target.value })
+              }
+            />
+          </label>
+          {moduleId === "heroSlides" ? (
+            <label>
+              副标题
+              <Input
+                value={draft.kicker ?? ""}
+                onChange={(event) =>
+                  onDraft({ ...draft, kicker: event.target.value })
+                }
+              />
+            </label>
+          ) : null}
+          {moduleId === "destinations" ? (
+            <div className="form-grid compact-grid">
+              <label>
+                目的地标识
+                <Input
+                  value={draft.slug ?? ""}
+                  onChange={(event) =>
+                    onDraft({ ...draft, slug: event.target.value })
+                  }
+                />
+              </label>
+              <label>
+                所属区域
+                <Input
+                  value={draft.region ?? ""}
+                  onChange={(event) =>
+                    onDraft({ ...draft, region: event.target.value })
+                  }
+                />
+              </label>
+            </div>
+          ) : null}
+        </AdminDisclosure>
+        <AdminDisclosure title="资源图片">
+          <SingleImageUploader
+            value={draft.image}
+            onChange={(image) => onDraft({ ...draft, image })}
+            group={moduleId}
+          />
+        </AdminDisclosure>
+        <AdminDisclosure title="排序与状态">
+          <label>
+            排序值
+            <Input
+              type="number"
+              value={draft.sortOrder ?? 0}
+              onChange={(event) =>
+                onDraft({ ...draft, sortOrder: Number(event.target.value) })
+              }
+            />
+          </label>
+          {moduleId === "destinations" ? (
+            <label className="switch-line">
+              <Switch
+                checked={Boolean(draft.isHot)}
+                onCheckedChange={(checked) =>
+                  onDraft({ ...draft, isHot: checked })
+                }
+              />
+              设为热门
+            </label>
+          ) : null}
+          <label className="switch-line">
+            <Switch
+              checked={Boolean(draft.isActive)}
+              onCheckedChange={(checked) =>
+                onDraft({ ...draft, isActive: checked })
+              }
+            />
+            前台启用
+          </label>
+        </AdminDisclosure>
+      </div>
+      <footer className="drawer-editor-footer">
+        <Button variant="outline" onClick={onClose}>
+          取消
+        </Button>
+        <Button className="primary-action compact" onClick={onSave}>
+          <Save size={17} />
+          {isCreating ? "创建" : "保存"}
+        </Button>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/styles.css b/src/styles.css
index 5de7f1a..4ce46bf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -161,6 +161,8 @@ textarea {
 
 .admin-shell {
   min-height: 100vh;
+  width: 100vw;
+  overflow: hidden;
   display: grid;
   grid-template-columns: 236px minmax(0, 1fr);
 }
@@ -262,30 +264,47 @@ textarea {
 
 .main-panel {
   min-width: 0;
+  width: 100%;
+  overflow: hidden;
   display: grid;
-  grid-template-rows: 56px minmax(0, 1fr);
+  grid-template-rows: minmax(56px, auto) minmax(0, 1fr);
 }
 
 .topbar {
+  width: 100%;
+  min-width: 0;
+  min-height: 56px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 16px;
   padding: 0 24px;
   background: #fff;
   border-bottom: 1px solid #dde3e8;
 }
 
+.topbar > div:first-child {
+  min-width: 0;
+  flex: 1 1 260px;
+}
+
 .topbar span {
   display: block;
   font-weight: 800;
 }
 
 .topbar small {
+  overflow: hidden;
+  display: block;
   color: #75808a;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .topbar-actions {
+  min-width: 0;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -313,6 +332,7 @@ textarea {
 
 .work-area {
   min-width: 0;
+  overflow: auto;
   padding: 24px;
 }
 
@@ -444,12 +464,18 @@ textarea {
   grid-row: 3;
   min-height: 0;
   display: grid;
-  grid-template-columns: 260px 300px minmax(320px, 0.95fr) minmax(360px, 1.05fr);
+  grid-template-columns: minmax(190px, 240px) minmax(240px, 300px) minmax(
+      320px,
+      1fr
+    );
   gap: 14px;
 }
 
 .maintenance-grid.focused-page-grid {
-  grid-template-columns: 260px 300px minmax(330px, 0.95fr) minmax(380px, 1.05fr);
+  grid-template-columns: minmax(190px, 240px) minmax(240px, 300px) minmax(
+      320px,
+      1fr
+    );
 }
 
 .page-rail,
@@ -471,7 +497,11 @@ textarea {
   gap: 10px;
   color: #263038;
   background:
-    linear-gradient(180deg, rgba(36, 125, 121, 0.08), rgba(255, 255, 255, 0) 62%),
+    linear-gradient(
+      180deg,
+      rgba(36, 125, 121, 0.08),
+      rgba(255, 255, 255, 0) 62%
+    ),
     #fff;
 }
 
@@ -521,9 +551,68 @@ textarea {
   overflow-y: auto;
 }
 
+.item-rail,
+.edit-rail {
+  align-self: start;
+  height: fit-content;
+  max-height: calc(100vh - 190px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.edit-drawer-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  pointer-events: none;
+}
+
+.edit-drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: rgba(15, 23, 42, 0.18);
+  cursor: default;
+  pointer-events: auto;
+}
+
+.edit-rail.edit-drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: min(460px, calc(100vw - 32px));
+  height: 100vh;
+  max-height: none;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 12px 0 0 12px;
+  background: #fff;
+  box-shadow:
+    0 0 0 1px rgba(15, 23, 42, 0.08),
+    -18px 0 48px rgba(15, 23, 42, 0.18);
+  pointer-events: auto;
+  animation: drawer-slide-in 180ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+@keyframes drawer-slide-in {
+  from {
+    transform: translateX(18px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 .page-rail button,
 .module-rail button,
-.mapped-list button {
+.mapped-list-main {
   width: 100%;
   height: auto;
   min-width: 0;
@@ -552,7 +641,7 @@ textarea {
 
 .page-rail button.active,
 .module-rail button.active,
-.mapped-list button.selected {
+.mapped-list-main.selected {
   border-color: #247d79;
   background: #eff9f8;
 }
@@ -638,10 +727,27 @@ textarea {
   -webkit-line-clamp: 2;
 }
 
-.item-rail > p {
-  margin: -4px 0 14px;
+.module-data-head {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.module-data-head span {
+  min-width: 0;
+}
+
+.module-data-head h3 {
+  margin-bottom: 6px;
+}
+
+.module-data-head p {
+  margin: 0;
   color: #68747d;
   line-height: 1.55;
+  max-width: 54ch;
 }
 
 .mapped-list,
@@ -651,14 +757,49 @@ textarea {
   gap: 10px;
 }
 
-.mapped-list button {
+.mapped-list-row {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.mapped-list-main {
   display: grid;
   grid-template-columns: 64px minmax(0, 1fr);
   gap: 10px;
   align-items: center;
 }
 
-.mapped-list img,
+.mapped-list-actions {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.mapped-list-actions button {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  color: #68747d;
+}
+
+.mapped-list-actions button:last-child {
+  color: #a3382f;
+}
+
+.mapped-empty {
+  margin: 0;
+  padding: 14px;
+  border: 1px dashed #cfd8df;
+  border-radius: 7px;
+  color: #68747d;
+  background: #f8fafb;
+  line-height: 1.5;
+}
+
+.mapped-list-main img,
 .mini-product-stack img {
   width: 64px;
   height: 48px;
@@ -668,39 +809,53 @@ textarea {
 }
 
 .mapped-editor {
+  min-height: 100%;
   align-content: start;
 }
 
+.edit-drawer .mapped-editor {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0;
+}
+
 .admin-disclosure-stack {
   display: grid;
   gap: 10px;
 }
 
+.edit-drawer .admin-disclosure-stack {
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 16px 18px;
+  align-content: start;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.edit-drawer .admin-disclosure-stack::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
 .admin-disclosure {
-  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto auto;
   border: 1px solid #dce3e8;
   border-radius: 8px;
   background: #fff;
 }
 
-.admin-disclosure[open] {
-  border-color: #b7cbc9;
-  box-shadow: 0 10px 24px rgba(23, 108, 104, 0.08);
-}
-
-.admin-disclosure summary {
+.admin-disclosure-head {
   min-height: 58px;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
   align-items: center;
   padding: 12px 14px;
-  cursor: pointer;
-  list-style: none;
-}
-
-.admin-disclosure summary::-webkit-details-marker {
-  display: none;
 }
 
 .admin-disclosure-copy {
@@ -721,50 +876,145 @@ textarea {
   line-height: 1.45;
 }
 
-.admin-disclosure-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-}
-
-.admin-disclosure-meta em {
-  padding: 4px 7px;
-  border-radius: 999px;
-  color: #176c68;
-  background: #edf7f6;
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 800;
-}
-
-.admin-disclosure-meta svg {
-  transition: transform 160ms ease;
-}
-
-.admin-disclosure[open] .admin-disclosure-meta svg {
-  transform: rotate(90deg);
-}
-
 .admin-disclosure-body {
+  min-width: 0;
+  min-height: 0;
   display: grid;
   gap: 12px;
   padding: 0 14px 14px;
+  overflow: visible;
 }
 
-.mapped-editor .asset-preview {
+.admin-disclosure-body > * {
+  min-width: 0;
+}
+
+.single-image-uploader {
+  min-width: 0;
   display: grid;
-  place-items: center;
-  min-height: 190px;
+  gap: 8px;
+  align-content: start;
+}
+
+.single-image-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
   overflow: hidden;
-  border: 1px solid #dce2e7;
-  border-radius: 7px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.single-image-card {
+  position: relative;
+  overflow: hidden;
+  border: 1px dashed #cbd5dc;
+  border-radius: 8px;
+  background: #f7fafb;
+}
+
+.single-image-card.has-image {
+  border-style: solid;
   background: #f5f7f8;
 }
 
-.mapped-editor .asset-preview img {
+.single-image-preview {
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
   width: 100%;
-  height: 220px;
+  min-height: 132px;
+  max-height: 220px;
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: #68747d;
+  cursor: pointer;
+  font: inherit;
+  text-align: center;
+}
+
+.single-image-preview.has-image {
+  background: #101820;
+}
+
+.single-image-preview:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.single-image-card:hover .single-image-placeholder b,
+.single-image-card:hover .single-image-placeholder small {
+  color: #1f5f5b;
+}
+
+.single-image-preview img {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
   object-fit: cover;
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
+}
+
+.single-image-placeholder {
+  display: grid;
+  place-items: center;
+  gap: 6px;
+  padding: 24px;
+  text-align: center;
+}
+
+.single-image-placeholder b {
+  color: #34414a;
+}
+
+.single-image-placeholder small {
+  color: #68747d;
+}
+
+.single-image-actions {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.single-image-remove-button {
+  display: inline-grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  padding: 0;
+  border: 1px solid rgba(224, 183, 173, 0.84);
+  border-radius: 8px;
+  color: #9c3d2f;
+  background: rgba(255, 248, 246, 0.94);
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+}
+
+.single-image-remove-button:hover {
+  border-color: rgba(185, 77, 63, 0.6);
+  color: #7f2f24;
+  background: rgba(255, 241, 238, 0.98);
+}
+
+.single-image-remove-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.field-error {
+  margin: -4px 0 0;
+  color: #9c3d2f;
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .switch-line {
@@ -782,6 +1032,10 @@ textarea {
   overflow: visible;
 }
 
+.admin-disclosure-body .form-grid {
+  overflow: visible;
+}
+
 .reference-panel {
   color: #46525c;
   line-height: 1.6;
@@ -809,16 +1063,6 @@ textarea {
   white-space: nowrap;
 }
 
-.phone-preview {
-  width: min(100%, 330px);
-  margin: 0 auto;
-  overflow: hidden;
-  border: 1px solid #d4dce2;
-  border-radius: 18px;
-  background: #fff;
-  box-shadow: 0 18px 45px rgba(26, 35, 42, 0.12);
-}
-
 .admin-toast-stack {
   position: fixed;
   right: 18px;
@@ -873,98 +1117,6 @@ textarea {
   color: #66727b;
 }
 
-.phone-preview header {
-  height: 42px;
-  display: grid;
-  place-items: center;
-  color: #fff;
-  background: #111;
-  font-weight: 800;
-}
-
-.preview-hero {
-  position: relative;
-  height: 190px;
-}
-
-.preview-hero img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.preview-hero span {
-  position: absolute;
-  left: 16px;
-  bottom: 16px;
-  color: #fff;
-  font-weight: 800;
-  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
-}
-
-.preview-tabs {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  border-bottom: 1px solid #edf0f2;
-}
-
-.preview-tabs b {
-  padding: 11px 4px;
-  color: #68747d;
-  font-size: 12px;
-  text-align: center;
-}
-
-.preview-tabs b.active {
-  color: #176c68;
-}
-
-.preview-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-  padding: 12px;
-}
-
-.preview-grid span {
-  padding: 8px 4px;
-  color: #176c68;
-  background: #ecf6f5;
-  border-radius: 5px;
-  font-size: 12px;
-  text-align: center;
-}
-
-.preview-products {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  padding: 0 12px 14px;
-}
-
-.preview-products article {
-  min-width: 0;
-  display: grid;
-  gap: 6px;
-}
-
-.preview-products img {
-  width: 100%;
-  height: 72px;
-  object-fit: cover;
-  border-radius: 6px;
-}
-
-.preview-products b {
-  overflow: hidden;
-  display: -webkit-box;
-  color: #263038;
-  font-size: 12px;
-  line-height: 1.35;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
 .product-workbench {
   height: calc(100vh - 56px);
   overflow: auto;
@@ -1358,6 +1510,37 @@ textarea {
   margin-bottom: 14px;
 }
 
+.edit-drawer .editor-head {
+  margin: 0;
+  padding: 18px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.edit-drawer .editor-head span {
+  min-width: 0;
+}
+
+.edit-drawer .editor-head h3 {
+  margin: 0 0 4px;
+  text-wrap: balance;
+}
+
+.edit-drawer .editor-head button {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+}
+
+.drawer-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 18px;
+  border-top: 1px solid #e2e8f0;
+  background: rgba(248, 250, 252, 0.92);
+}
+
 .form-grid {
   overflow: auto;
   display: grid;
@@ -1428,7 +1611,11 @@ textarea {
 .login-shell,
 .admin-shell {
   background:
-    radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 34rem),
+    radial-gradient(
+      circle at top left,
+      rgba(15, 118, 110, 0.08),
+      transparent 34rem
+    ),
     var(--background);
 }
 
@@ -1453,8 +1640,7 @@ textarea {
 .front-context,
 .product-list-summary span,
 .product-side-meta span,
-.image-editor-row,
-.phone-preview {
+.image-editor-row {
   border-color: var(--border);
   background: var(--card);
   color: var(--card-foreground);
@@ -1487,7 +1673,7 @@ label,
 .module-rail small,
 .mapped-list small,
 .editor-head small,
-.item-rail > p,
+.module-data-head p,
 .field-help,
 .product-editor-sidebar p,
 .product-side-meta small,
@@ -1513,8 +1699,7 @@ textarea {
 input:focus,
 select:focus,
 textarea:focus,
-button:focus-visible,
-summary:focus-visible {
+button:focus-visible {
   outline: 2px solid transparent;
   box-shadow: 0 0 0 2px var(--ring);
 }
@@ -1618,7 +1803,7 @@ summary:focus-visible {
 
 .page-rail button,
 .module-rail button,
-.mapped-list button,
+.mapped-list-main,
 .product-table button {
   border-color: var(--border);
   border-radius: 8px;
@@ -1627,7 +1812,7 @@ summary:focus-visible {
 
 .page-rail button.active,
 .module-rail button.active,
-.mapped-list button.selected,
+.mapped-list-main.selected,
 .product-table button.selected {
   border-color: var(--primary);
   background: var(--success-muted);
@@ -1642,17 +1827,7 @@ summary:focus-visible {
   background: var(--muted);
 }
 
-.admin-disclosure[open] {
-  border-color: var(--success-border);
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
-}
-
-.admin-disclosure-meta em {
-  color: var(--primary);
-  background: var(--success-muted);
-}
-
-.mapped-editor .asset-preview,
+.single-image-preview,
 .product-cover-preview,
 .image-editor-preview,
 .image-placeholder {
diff --git a/src/types/admin.ts b/src/types/admin.ts
new file mode 100644
index 0000000..caa8c5b
--- /dev/null
+++ b/src/types/admin.ts
@@ -0,0 +1,21 @@
+import type { SiteConfig, SiteModule } from "@/api";
+
+export type Tab = "structure" | "home" | "destinations" | "products" | "leads";
+export type PageId = "home" | "destination" | "detail" | "campaign" | "demand";
+export type ModuleId = SiteModule | "routeProducts" | "campaignProducts" | "leadFlow";
+
+export type Toast = {
+  id: string;
+  tone: "success" | "warning" | "danger";
+  title: string;
+  message: string;
+};
+
+export type Notify = (toast: Omit<Toast, "id">) => void;
+export type DirtyChangeHandler = (dirty: boolean) => void;
+
+export type EditableSiteItem =
+  | SiteConfig["heroSlides"][number]
+  | SiteConfig["destinations"][number]
+  | SiteConfig["themes"][number]
+  | SiteConfig["ctaBanners"][number];
diff --git a/vite.config.ts b/vite.config.ts
index d7c763c..643e1a1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,12 @@ export default defineConfig({
     },
   },
   server: {
-    port: 5601,
+    host: "0.0.0.0",
+    port: 5602,
+    strictPort: true,
+    hmr: {
+      clientPort: 5602,
+    },
     proxy: {
       "/api": {
         target: "http://localhost:4000",
@@ -19,5 +24,10 @@ export default defineConfig({
       },
     },
   },
+  preview: {
+    host: "0.0.0.0",
+    port: 5603,
+    strictPort: true,
+  },
 });