From 9fd91c84e505153e0483132f50f8d41e78f0cd2f Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 2 Jul 2026 23:05:45 +0800
Subject: [PATCH] feat(admin): add route sections admin management module

This commit adds the complete admin workflow for managing homepage curated route subgroups:
- Add `RouteSection` type and extend `SiteConfig`/`SiteModule` to support the new module
- Create all required admin components: panel, editors, product picker, and utility functions
- Update admin utilities and API types to handle routeSections CRUD operations
- Update documentation to include the new routeSections API contract
- Add supporting CSS styles for the new UI elements
---
 .../Picface/Cloud/sgim_picface_cloud.bin      | Bin 0 -> 172152 bytes
 .../Picface/Cloud/sgim_picface_cloud_bak.bin  | Bin 0 -> 172152 bytes
 docs/admin-module-config-api.md               |  91 ++-
 src/api.ts                                    |  18 +-
 .../RouteProductQuickCreateForm.tsx           | 215 ++++++++
 .../route-sections/RouteSectionEditor.tsx     | 107 ++++
 .../RouteSectionProductEditor.tsx             |  97 ++++
 .../RouteSectionProductPicker.tsx             | 160 ++++++
 .../route-sections/RouteSectionsPanel.tsx     | 521 ++++++++++++++++++
 .../admin/route-sections/helpers.ts           |  63 +++
 src/lib/admin-utils.ts                        |  19 +-
 src/pages/structure/StructurePage.tsx         |  49 +-
 src/styles.css                                | 412 ++++++++++++++
 src/types/admin.ts                            |   1 +
 14 files changed, 1732 insertions(+), 21 deletions(-)
 create mode 100644 %SystemDrive%/ProgramData/SogouInput/Components/Picface/Cloud/sgim_picface_cloud.bin
 create mode 100644 %SystemDrive%/ProgramData/SogouInput/Components/Picface/Cloud/sgim_picface_cloud_bak.bin
 create mode 100644 src/components/admin/route-sections/RouteProductQuickCreateForm.tsx
 create mode 100644 src/components/admin/route-sections/RouteSectionEditor.tsx
 create mode 100644 src/components/admin/route-sections/RouteSectionProductEditor.tsx
 create mode 100644 src/components/admin/route-sections/RouteSectionProductPicker.tsx
 create mode 100644 src/components/admin/route-sections/RouteSectionsPanel.tsx
 create mode 100644 src/components/admin/route-sections/helpers.ts

diff --git a/%SystemDrive%/ProgramData/SogouInput/Components/Picface/Cloud/sgim_picface_cloud.bin b/%SystemDrive%/ProgramData/SogouInput/Components/Picface/Cloud/sgim_picface_cloud.bin
new file mode 100644
index 0000000000000000000000000000000000000000..306921d17ea0219b7c0867ebd380f5d568685811
GIT binary patch
literal 172152
zcmeIup$&jQ3<c1FLNWq7u)_%y2@Jp(T?Bula!D;Cyo&bc*S)h{?Y;LYekQk3uJy<s
zv5c5~uHrfB+5`v?AV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs
z0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZ
zfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&U
zAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C7
z2oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N
z0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+
z009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBly
zK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF
z5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk
z1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs
z0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZ
zfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&U
zAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C7
z2oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N
j0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PH_jp!EgW

literal 0
HcmV?d00001

diff --git a/%SystemDrive%/ProgramData/SogouInput/Components/Picface/Cloud/sgim_picface_cloud_bak.bin b/%SystemDrive%/ProgramData/SogouInput/Components/Picface/Cloud/sgim_picface_cloud_bak.bin
new file mode 100644
index 0000000000000000000000000000000000000000..306921d17ea0219b7c0867ebd380f5d568685811
GIT binary patch
literal 172152
zcmeIup$&jQ3<c1FLNWq7u)_%y2@Jp(T?Bula!D;Cyo&bc*S)h{?Y;LYekQk3uJy<s
zv5c5~uHrfB+5`v?AV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs
z0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZ
zfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&U
zAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C7
z2oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N
z0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+
z009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBly
zK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF
z5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk
z1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs
z0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZ
zfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&U
zAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C7
z2oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N
j0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PH_jp!EgW

literal 0
HcmV?d00001

diff --git a/docs/admin-module-config-api.md b/docs/admin-module-config-api.md
index 6be9400..6767fa0 100644
--- a/docs/admin-module-config-api.md
+++ b/docs/admin-module-config-api.md
@@ -1,6 +1,6 @@
 # 页面模块配置 Admin API 契约
 
-本文档定义 WonderQ-Admin 后端需要为 WonderQ-Admin-UI 实现的页面模块配置 CRUD 接口。接口用于维护小程序/H5 前台页面模块中的配置数据，例如首页轮播、目的地宫格、贵州地图、主题卡片、特价优惠和底部运营入口。
+本文档定义 WonderQ-Admin 后端需要为 WonderQ-Admin-UI 实现的页面模块配置 CRUD 接口。接口用于维护小程序/H5 前台页面模块中的配置数据，例如首页轮播、目的地宫格、贵州地图、主题卡片、特价优惠、精选线路分组和底部运营入口。
 
 ## 适用模块
 
@@ -13,9 +13,10 @@
 | `map`          | 贵州地图     | 首页「探索贵州」区域内的地图图片素材          |
 | `themes`       | 主题甄选     | 首页主题卡片和跳转                             |
 | `campaigns`    | 特价优惠     | 首页特价优惠活动元信息                         |
+| `routeSections` | 精选线路子分组 | 首页“精选线路”按运营任务新增分组，维护标题、副文案、启用状态和关联商品 |
 | `ctaBanners`   | 底部运营入口 | 权益卡、管家入口、需求入口等 CTA               |
 
-商品池、活动商品池和线索跟进继续走独立业务接口，不混入本契约。
+商品本体、活动商品池和线索跟进继续走独立业务接口，不混入本契约。`routeSections` 只维护精选线路子分组和商品 ID 关联，不重复编辑商品详情。
 
 ## 通用约定
 
@@ -40,21 +41,25 @@
 
 WonderQ-Admin 后端实现页面模块配置接口时，需要把 `map` 和 `campaigns` 作为正式模块接入，而不是只在前端展示：
 
-- 模块白名单必须包含 `heroSlides`、`destinations`、`map`、`themes`、`campaigns`、`ctaBanners`。
+- 模块白名单必须包含 `heroSlides`、`destinations`、`map`、`themes`、`campaigns`、`routeSections`、`ctaBanners`。
 - 权限校验、模块路由、服务层分发和数据模型映射都必须识别 `map` 和 `campaigns`，否则前端会收到 `MODULE_CONFIG_FORBIDDEN` 并以 toast 展示失败原因。
 - `GET /api/admin/site-config` 即使没有地图数据，也必须返回 `map: []`，不要省略 `map` 字段。
 - `GET /api/admin/site-config` 即使没有特价优惠数据，也必须返回 `campaigns: []`，不要省略 `campaigns` 字段。
+- `GET /api/admin/site-config` 必须返回 `routeSections`，包含未启用分组和后台已配置的全部商品 ID。
 - `map` 只维护一张图片，只需要支持查询、创建、更新、删除，不需要排序接口。
 - `campaigns` 维护活动元信息，只需要支持查询、创建、更新、删除，不需要排序接口。
+- `routeSections` 允许按运营任务新增多个子分组；已创建分组支持更新字段、商品关联、删除和分组顺序。
+- 同一商品不能同时出现在多个 `routeSections` 子分组；更新 `productIds` 时后端需要校验互斥。
 - 图片上传仍走 `POST /api/admin/media-assets/upload`，模块保存接口只接收上传结果里的 OSS `url` 字段并写入 `image`。
 
 ## 类型定义
 
 ```ts
-type SiteModule = "heroSlides" | "destinations" | "map" | "themes" | "campaigns" | "ctaBanners";
+type SiteModule = "heroSlides" | "destinations" | "map" | "themes" | "campaigns" | "routeSections" | "ctaBanners";
 
 type SiteItemPatch = {
   title?: string;
+  subtitle?: string | null;
   kicker?: string;
   name?: string;
   slug?: string;
@@ -69,6 +74,7 @@ type SiteItemPatch = {
   isHot?: boolean;
   isActive?: boolean;
   sortOrder?: number;
+  productIds?: string[];
   status?: "draft" | "published";
   startsAt?: string | null;
   endsAt?: string | null;
@@ -140,6 +146,17 @@ type CampaignCreateInput = {
 };
 
 type CampaignUpdateInput = Partial<CampaignCreateInput>;
+
+type RouteSection = {
+  id: string;
+  title: string;
+  subtitle: string | null;
+  productIds: string[];
+  isActive: boolean;
+  sortOrder: number;
+  createdAt?: string;
+  updatedAt?: string;
+};
 ```
 
 各模块字段要求：
@@ -151,6 +168,7 @@ type CampaignUpdateInput = Partial<CampaignCreateInput>;
 | `map`          | `image`  | `isActive`                                                   |
 | `themes`       | `label`  | `image`、`targetType`、`targetValue`、`isActive`、`sortOrder` |
 | `campaigns`    | `title`、`slug` | `description`、`coverImage`、`priceAmount`、`priceUnit`、`tags`、`status`、`startsAt`、`endsAt` |
+| `routeSections` | `title` | `subtitle`、`productIds`、`isActive`、`sortOrder` |
 | `ctaBanners`   | `alt`    | `image`、`targetType`、`targetValue`、`isActive`、`sortOrder` |
 
 后端可以在创建时补全 `id`、默认 `isActive=true`、默认 `sortOrder=当前模块最后一位`。
@@ -414,9 +432,68 @@ DELETE /api/admin/site-config/campaigns/:id
 特价优惠不定义 `sortOrder`、`isActive`、`targetType` 和 `targetValue`；兼容期如果请求体携带这些字段，后端可以忽略，但不要写入 `Campaign` 业务数据。
 `tags` 保存前需要 trim 并过滤空字符串；有效标签超过 3 个时返回 `422 MODULE_CONFIG_VALIDATION_ERROR`，`details` 为 `{ "field": "tags", "max": 3 }`。
 
+## 精选线路子分组 `routeSections` 专用契约
+
+`routeSections` 对应首页“精选线路”的运营分组。运营可按任务新增分组，并维护分组标题、副文案、启用状态、分组顺序、关联线路商品和商品顺序。
+
+字段语义：
+
+| 字段 | 类型 | 更新 | 说明 |
+| --- | --- | --- | --- |
+| `id` | `string` | 不允许修改 | 系统生成分组 ID |
+| `title` | `string` | 可选 | 分组标题，不能为空 |
+| `subtitle` | `string \| null` | 可选 | 分组副文案 |
+| `productIds` | `string[]` | 可选 | 关联商品 ID，按数组顺序展示 |
+| `isActive` | `boolean` | 可选 | 用户侧是否展示该分组 |
+| `sortOrder` | `number` | 可选 | 分组展示顺序 |
+
+更新分组：
+
+```http
+POST /api/admin/site-config/routeSections
+```
+
+请求体示例：
+
+```json
+{
+  "title": "经典人文打卡线路",
+  "subtitle": "黄果树、荔波小七孔、千户苗寨、镇远古城、梵净山一次串联"
+}
+```
+
+响应状态码 `201`，返回创建后的子分组。`id` 由后端生成；精选线路分组按运营任务动态新增，不再限制为固定三组，也不再使用 `routes` / `routes-outdoor` / `routes-mix` 作为固定槽位。
+
+```http
+PATCH /api/admin/site-config/routeSections/:id
+```
+
+请求体示例：
+
+```json
+{
+  "title": "经典人文打卡线路",
+  "subtitle": "黄果树、荔波小七孔、千户苗寨、镇远古城、梵净山一次串联",
+  "isActive": true,
+  "productIds": ["product-uuid-1", "product-uuid-2"]
+}
+```
+
+调整分组顺序：
+
+```http
+PATCH /api/admin/site-config/routeSections/reorder
+```
+
+约束：
+
+- `productIds` 中的商品必须存在。
+- 同一商品不能出现在其他精选线路子分组；冲突时返回 `409 ROUTE_SECTION_PRODUCT_CONFLICT`。
+- `DELETE /api/admin/site-config/routeSections/:id` 删除分组配置并返回被删除 ID；只移除首页分组，不删除关联商品本体。
+
 ## 接口列表
 
-以下路径由六类页面模块复用；`heroSlides`、`map`、`campaigns` 的请求体和响应体以各自专用契约为准。
+以下路径由七类页面模块复用；`heroSlides`、`map`、`campaigns`、`routeSections` 的请求体和响应体以各自专用契约为准。
 
 ### 获取完整站点配置
 
@@ -433,12 +510,14 @@ type SiteConfig = {
   map: MapImage[];
   themes: ThemeCard[];
   campaigns: Campaign[];
+  routeSections: RouteSection[];
   ctaBanners: CtaBanner[];
 };
 ```
 
 `map` 字段必须稳定返回数组；无数据时返回空数组 `[]`。
 `campaigns` 字段必须稳定返回数组；无数据时返回空数组 `[]`。
+`routeSections` 字段必须稳定返回数组；无数据时返回 `[]`，由管理端通过“新增”逐个创建子分组。
 
 ### 新增模块配置项
 
@@ -504,7 +583,7 @@ PATCH /api/admin/site-config/:module/reorder
 - 不允许混入其他模块 id。
 - 后端按数组顺序写入 `sortOrder`，从 0 开始。
 
-`map` 和 `campaigns` 模块不提供排序能力。若收到 `PATCH /api/admin/site-config/map/reorder` 或 `PATCH /api/admin/site-config/campaigns/reorder`，后端应返回 `400` 或 `405`，不要创建任何排序数据。
+`map` 和 `campaigns` 模块不提供排序能力。若收到 `PATCH /api/admin/site-config/map/reorder` 或 `PATCH /api/admin/site-config/campaigns/reorder`，后端应返回 `400` 或 `405`，不要创建任何排序数据。`routeSections` 支持排序，但 `itemIds` 必须刚好包含当前已保存的子分组 ID。
 
 响应状态码 `200`：
 
diff --git a/src/api.ts b/src/api.ts
index 094b9c6..7acb908 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -92,21 +92,34 @@ export type Campaign = {
   updatedAt?: string;
 };
 
+export type RouteSection = {
+  id: string;
+  title: string;
+  subtitle?: string | null;
+  productIds: string[];
+  isActive: boolean;
+  sortOrder: number;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
 export type SiteConfig = {
   heroSlides: Array<{ id: string; title: string; kicker: string | null; image: string | null; isActive: boolean; sortOrder: number; createdAt?: string; updatedAt?: string }>;
   destinations: Destination[];
   map: Array<{ id: string; image: string | null; isActive: boolean; createdAt?: string; updatedAt?: string }>;
   themes: Array<{ id: string; label: string; image: string; targetType?: string | null; targetValue?: string | null; isActive: boolean }>;
   campaigns: Campaign[];
+  routeSections: RouteSection[];
   ctaBanners: Array<{ id: string; alt: string; image: string; targetType: string; targetValue?: string | null; isActive: boolean }>;
 };
 
-export type SiteModule = "heroSlides" | "destinations" | "map" | "themes" | "campaigns" | "ctaBanners";
+export type SiteModule = "heroSlides" | "destinations" | "map" | "themes" | "campaigns" | "routeSections" | "ctaBanners";
 export type SiteConfigItem = SiteConfig[SiteModule][number];
 type SiteConfigItemResponse = SiteConfigItem | { item: SiteConfigItem };
 
 export type SiteItemPatch = {
   title?: string;
+  subtitle?: string | null;
   kicker?: string;
   name?: string;
   slug?: string;
@@ -124,6 +137,7 @@ export type SiteItemPatch = {
   isHot?: boolean;
   isActive?: boolean;
   sortOrder?: number;
+  productIds?: string[];
   status?: "draft" | "published";
   startsAt?: string | null;
   endsAt?: string | null;
@@ -290,7 +304,7 @@ export async function publishSite() {
 }
 
 export async function resetGuizhouContent() {
-  return request<{ heroSlides: number; destinations: number; themes: number; ctaBanners: number; products: number }>("/api/admin/reset-guizhou-content", {
+  return request<{ heroSlides: number; destinations: number; themes: number; ctaBanners: number; routeSections?: number; products: number }>("/api/admin/reset-guizhou-content", {
     method: "POST",
     body: JSON.stringify({}),
   });
diff --git a/src/components/admin/route-sections/RouteProductQuickCreateForm.tsx b/src/components/admin/route-sections/RouteProductQuickCreateForm.tsx
new file mode 100644
index 0000000..9287581
--- /dev/null
+++ b/src/components/admin/route-sections/RouteProductQuickCreateForm.tsx
@@ -0,0 +1,215 @@
+import { Plus, X } from "lucide-react";
+import { MutableRefObject, useEffect, useState } from "react";
+
+import type { ProductInput } from "@/api";
+import { AdminDisclosure } from "@/components/admin/AdminDisclosure";
+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 { Textarea } from "@/components/ui/textarea";
+
+type QuickRouteDraft = {
+  title: string;
+  summary: string;
+  destinationName: string;
+  priceAmount: number | null;
+  priceUnit: string;
+  tags: string[];
+  coverImage: string;
+  published: boolean;
+  sortWeight: number;
+};
+
+const emptyDraft: QuickRouteDraft = {
+  title: "",
+  summary: "",
+  destinationName: "",
+  priceAmount: null,
+  priceUnit: "起/人",
+  tags: ["", ""],
+  coverImage: "",
+  published: true,
+  sortWeight: 0,
+};
+
+export function RouteProductQuickCreateForm({
+  onCreate,
+  onSubmitRef,
+}: {
+  onCreate: (input: ProductInput) => Promise<void>;
+  onSubmitRef: MutableRefObject<(() => Promise<void>) | null>;
+}) {
+  const [draft, setDraft] = useState<QuickRouteDraft>(emptyDraft);
+
+  const submit = async () => {
+    const title = draft.title.trim();
+    if (!title) return;
+
+    await onCreate({
+      title,
+      subtitle: draft.destinationName.trim(),
+      destinationId: null,
+      priceAmount: draft.priceAmount,
+      priceUnit: draft.priceUnit.trim() || "起/人",
+      tags: draft.tags.map((tag) => tag.trim()).filter(Boolean).slice(0, 3),
+      coverImage: draft.coverImage.trim() || null,
+      summary: draft.summary.trim(),
+      images: [],
+      detailSections: [],
+      status: draft.published ? "published" : "draft",
+      sortWeight: draft.sortWeight,
+    });
+    setDraft(emptyDraft);
+  };
+
+  useEffect(() => {
+    onSubmitRef.current = submit;
+    return () => {
+      onSubmitRef.current = null;
+    };
+  }, [draft, onSubmitRef]);
+
+  return (
+    <div className="admin-disclosure-stack route-product-create-form">
+      <AdminDisclosure title="展示内容">
+        <label>
+          线路标题
+          <Input
+            value={draft.title}
+            onChange={(event) => setDraft({ ...draft, title: event.target.value })}
+          />
+        </label>
+        <label>
+          线路描述
+          <Textarea
+            value={draft.summary}
+            onChange={(event) => setDraft({ ...draft, summary: event.target.value })}
+            rows={3}
+          />
+        </label>
+        <label>
+          目标地点
+          <Input
+            value={draft.destinationName}
+            onChange={(event) => setDraft({ ...draft, destinationName: event.target.value })}
+          />
+        </label>
+      </AdminDisclosure>
+
+      <AdminDisclosure title="价格信息">
+        <div className="form-grid compact-grid">
+          <label>
+            价格
+            <Input
+              type="number"
+              value={draft.priceAmount ?? ""}
+              onChange={(event) =>
+                setDraft({
+                  ...draft,
+                  priceAmount: event.target.value ? Number(event.target.value) : null,
+                })
+              }
+            />
+          </label>
+          <label>
+            价格单位
+            <Input
+              value={draft.priceUnit}
+              onChange={(event) => setDraft({ ...draft, priceUnit: event.target.value })}
+            />
+          </label>
+        </div>
+      </AdminDisclosure>
+
+      <AdminDisclosure title="线路标签">
+        <QuickTagEditor
+          tags={draft.tags}
+          onChange={(tags) => setDraft({ ...draft, tags })}
+        />
+      </AdminDisclosure>
+
+      <AdminDisclosure title="线路封面图">
+        <SingleImageUploader
+          value={draft.coverImage}
+          onChange={(coverImage) => setDraft({ ...draft, coverImage: coverImage ?? "" })}
+          group="route-section-products"
+        />
+      </AdminDisclosure>
+
+      <AdminDisclosure title="显示状态">
+        <label>
+          排序值
+          <Input
+            type="number"
+            value={draft.sortWeight}
+            onChange={(event) =>
+              setDraft({ ...draft, sortWeight: Number(event.target.value) })
+            }
+          />
+        </label>
+        <label className="switch-line">
+          <Switch
+            checked={draft.published}
+            onCheckedChange={(checked) => setDraft({ ...draft, published: checked })}
+          />
+          创建后上架
+        </label>
+      </AdminDisclosure>
+    </div>
+  );
+}
+
+function QuickTagEditor({
+  tags,
+  onChange,
+}: {
+  tags: string[];
+  onChange: (tags: string[]) => void;
+}) {
+  const normalizedTags = tags.slice(0, 3);
+  const updateTag = (index: number, value: string) => {
+    onChange(normalizedTags.map((tag, tagIndex) => (tagIndex === index ? value : tag)));
+  };
+  const removeTag = (index: number) => {
+    onChange(normalizedTags.filter((_, tagIndex) => tagIndex !== index));
+  };
+  const addTag = () => {
+    if (normalizedTags.length >= 3) return;
+    onChange([...normalizedTags, ""]);
+  };
+
+  return (
+    <div className="tag-editor compact-tag-editor">
+      {normalizedTags.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>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        className="inline-action"
+        onClick={addTag}
+        disabled={normalizedTags.length >= 3}
+      >
+        <Plus size={16} />
+        添加标签
+      </Button>
+      <p className="field-help">最多维护 3 个标签，保存时会自动去掉空标签。</p>
+    </div>
+  );
+}
diff --git a/src/components/admin/route-sections/RouteSectionEditor.tsx b/src/components/admin/route-sections/RouteSectionEditor.tsx
new file mode 100644
index 0000000..df37d88
--- /dev/null
+++ b/src/components/admin/route-sections/RouteSectionEditor.tsx
@@ -0,0 +1,107 @@
+import { Save, X } from "lucide-react";
+
+import { AdminDisclosure } from "@/components/admin/AdminDisclosure";
+import type { RouteSectionDraft } from "@/components/admin/route-sections/helpers";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+
+export function RouteSectionEditor({
+  draft,
+  mode = "edit",
+  saving,
+  onDraft,
+  onSave,
+  onClose,
+}: {
+  draft: RouteSectionDraft;
+  mode?: "create" | "edit";
+  saving: boolean;
+  onDraft: (draft: RouteSectionDraft) => void;
+  onSave: () => void;
+  onClose: () => void;
+}) {
+  const isCreating = mode === "create";
+
+  return (
+    <div className="mapped-editor route-section-editor">
+      <header className="editor-head">
+        <span>
+          <h3 id="route-section-editor-title">
+            {isCreating ? "新增精选线路子分组" : "编辑精选线路子分组"}
+          </h3>
+          <small>
+            {isCreating
+              ? "先保存标题和副文案，保存后可继续配置关联线路。"
+              : "标题、副文案、启用状态和关联线路会同步到用户侧首页。"}
+          </small>
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          aria-label="关闭精选线路编辑抽屉"
+        >
+          <X size={18} />
+        </Button>
+      </header>
+      <div className="admin-disclosure-stack">
+        <AdminDisclosure title="分组内容">
+          <label>
+            分组标题
+            <Input
+              value={draft.title}
+              onChange={(event) => onDraft({ ...draft, title: event.target.value })}
+            />
+          </label>
+          <label>
+            副文案
+            <Textarea
+              value={draft.subtitle}
+              onChange={(event) => onDraft({ ...draft, subtitle: event.target.value })}
+              rows={3}
+            />
+          </label>
+        </AdminDisclosure>
+        <AdminDisclosure title="排序与状态">
+          <label>
+            分组顺序
+            <Input
+              type="number"
+              value={draft.sortOrder}
+              onChange={(event) =>
+                onDraft({ ...draft, sortOrder: Number(event.target.value) })
+              }
+            />
+          </label>
+          <label className="switch-line">
+            <Switch
+              checked={draft.isActive}
+              onCheckedChange={(checked) => onDraft({ ...draft, isActive: checked })}
+            />
+            用户侧启用
+          </label>
+          <p className="field-help">
+            {isCreating
+              ? "按填写的顺序保存；关闭启用后，后台可继续维护，用户侧暂不展示。"
+              : "按运营任务维护精选线路分组；停用后用户侧不展示，后台仍保留配置。"}
+          </p>
+        </AdminDisclosure>
+      </div>
+      <footer className="drawer-editor-footer">
+        <Button variant="outline" onClick={onClose} disabled={saving}>
+          取消
+        </Button>
+        <Button
+          className="primary-action compact"
+          onClick={onSave}
+          disabled={saving || !draft.title.trim()}
+        >
+          <Save size={17} />
+          {saving ? "保存中" : "保存"}
+        </Button>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/components/admin/route-sections/RouteSectionProductEditor.tsx b/src/components/admin/route-sections/RouteSectionProductEditor.tsx
new file mode 100644
index 0000000..5017be2
--- /dev/null
+++ b/src/components/admin/route-sections/RouteSectionProductEditor.tsx
@@ -0,0 +1,97 @@
+import { Save, X } from "lucide-react";
+import { useRef } from "react";
+
+import type { Product, ProductInput } from "@/api";
+import { RouteProductQuickCreateForm } from "@/components/admin/route-sections/RouteProductQuickCreateForm";
+import { RouteSectionProductPicker } from "@/components/admin/route-sections/RouteSectionProductPicker";
+import type {
+  ProductUsage,
+  RouteSectionDraft,
+} from "@/components/admin/route-sections/helpers";
+import { Button } from "@/components/ui/button";
+
+export function RouteSectionProductEditor({
+  draft,
+  products,
+  productUsage,
+  saving,
+  onCreateProduct,
+  onProductIdsChange,
+  onClose,
+}: {
+  draft: RouteSectionDraft;
+  products: Product[];
+  productUsage: Map<string, ProductUsage>;
+  saving: boolean;
+  onCreateProduct: (input: ProductInput) => Promise<void>;
+  onProductIdsChange: (productIds: string[]) => Promise<void>;
+  onClose: () => void;
+}) {
+  const createSubmitRef = useRef<(() => Promise<void>) | null>(null);
+  const updateProductIds = (productIds: string[]) => {
+    void onProductIdsChange(productIds);
+  };
+  const addProduct = (productId: string) => {
+    if (draft.productIds.includes(productId)) return;
+    updateProductIds([...draft.productIds, productId]);
+  };
+  const removeProduct = (productId: string) => {
+    updateProductIds(draft.productIds.filter((candidate) => candidate !== productId));
+  };
+  const moveProduct = (productId: string, direction: -1 | 1) => {
+    const currentIndex = draft.productIds.indexOf(productId);
+    const nextIndex = currentIndex + direction;
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= draft.productIds.length) return;
+
+    const nextProductIds = [...draft.productIds];
+    [nextProductIds[currentIndex], nextProductIds[nextIndex]] = [
+      nextProductIds[nextIndex],
+      nextProductIds[currentIndex],
+    ];
+    updateProductIds(nextProductIds);
+  };
+
+  return (
+    <div className="mapped-editor route-section-editor">
+      <header className="editor-head">
+        <span>
+          <h3 id="route-section-product-editor-title">关联线路</h3>
+          <small>{draft.title} 的首页展示线路、快捷创建和排序。</small>
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          aria-label="关闭关联线路抽屉"
+        >
+          <X size={18} />
+        </Button>
+      </header>
+      <RouteProductQuickCreateForm
+        onCreate={onCreateProduct}
+        onSubmitRef={createSubmitRef}
+      />
+      <RouteSectionProductPicker
+        products={products}
+        productIds={draft.productIds}
+        productUsage={productUsage}
+        onAdd={addProduct}
+        onRemove={removeProduct}
+        onMove={moveProduct}
+      />
+      <footer className="drawer-editor-footer">
+        <Button variant="outline" onClick={onClose} disabled={saving}>
+          取消
+        </Button>
+        <Button
+          className="primary-action compact"
+          onClick={() => createSubmitRef.current?.()}
+          disabled={saving}
+        >
+          <Save size={17} />
+          {saving ? "创建中" : "创建并关联"}
+        </Button>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/components/admin/route-sections/RouteSectionProductPicker.tsx b/src/components/admin/route-sections/RouteSectionProductPicker.tsx
new file mode 100644
index 0000000..57f83e9
--- /dev/null
+++ b/src/components/admin/route-sections/RouteSectionProductPicker.tsx
@@ -0,0 +1,160 @@
+import { ArrowDown, ArrowUp, Lock, Minus, Plus } from "lucide-react";
+import { useMemo } from "react";
+import type { ReactNode } from "react";
+
+import type { Product } from "@/api";
+import type { ProductUsage } from "@/components/admin/route-sections/helpers";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { productStatusLabels } from "@/lib/admin-utils";
+
+export function RouteSectionProductPicker({
+  products,
+  productIds,
+  productUsage,
+  onAdd,
+  onRemove,
+  onMove,
+}: {
+  products: Product[];
+  productIds: string[];
+  productUsage: Map<string, ProductUsage>;
+  onAdd: (productId: string) => void;
+  onRemove: (productId: string) => void;
+  onMove: (productId: string, direction: -1 | 1) => void;
+}) {
+  const productById = useMemo(
+    () => new Map(products.map((product) => [product.id, product])),
+    [products],
+  );
+  const selectedIdSet = useMemo(() => new Set(productIds), [productIds]);
+  const selectedProducts = productIds
+    .map((productId) => productById.get(productId))
+    .filter((product): product is Product => Boolean(product));
+  const availableProducts = products.filter((product) => product.status === "published");
+
+  return (
+    <div className="route-product-picker">
+      <section className="route-product-block">
+        <div className="route-product-list selected">
+          {selectedProducts.map((product, index) => (
+            <ProductRow
+              key={product.id}
+              product={product}
+              trailing={
+                <div className="mapped-list-actions">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    disabled={index === 0}
+                    onClick={() => onMove(product.id, -1)}
+                    aria-label={`上移 ${product.title}`}
+                  >
+                    <ArrowUp size={15} />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    disabled={index === selectedProducts.length - 1}
+                    onClick={() => onMove(product.id, 1)}
+                    aria-label={`下移 ${product.title}`}
+                  >
+                    <ArrowDown size={15} />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => onRemove(product.id)}
+                    aria-label={`移除 ${product.title}`}
+                  >
+                    <Minus size={15} />
+                  </Button>
+                </div>
+              }
+            />
+          ))}
+        </div>
+      </section>
+      <section className="route-product-block">
+        <div className="route-product-list">
+          {availableProducts.map((product) => {
+            const usage = productUsage.get(product.id);
+            const selected = selectedIdSet.has(product.id);
+            const disabled = Boolean(usage) || selected;
+            const disabledText =
+              usage
+                ? `已在「${usage.sectionTitle}」`
+                : selected
+                  ? "已添加"
+                  : "";
+
+            return (
+              <ProductRow
+                key={product.id}
+                product={product}
+                disabledText={disabledText}
+                trailing={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={disabled}
+                    onClick={() => onAdd(product.id)}
+                  >
+                    {disabledText ? <Lock size={14} /> : <Plus size={14} />}
+                    {disabledText || "添加"}
+                  </Button>
+                }
+              />
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function ProductRow({
+  product,
+  disabledText,
+  trailing,
+}: {
+  product: Product;
+  disabledText?: string;
+  trailing: ReactNode;
+}) {
+  return (
+    <div className="route-product-row">
+      {product.coverImage ? (
+        <img src={product.coverImage} alt="" />
+      ) : (
+        <span className="image-placeholder" />
+      )}
+      <span className="route-product-main">
+        <b>{product.title}</b>
+        <small>
+          {product.destination?.name || "未绑定目的地"}
+          {typeof product.priceAmount === "number"
+            ? ` / ¥${product.priceAmount}${product.priceUnit}`
+            : ""}
+        </small>
+        <span className="route-product-tags">
+          <Badge
+            className={`status-chip ${product.status}`}
+            variant={product.status === "published" ? "success" : product.status === "draft" ? "warning" : "muted"}
+          >
+            {productStatusLabels[product.status]}
+          </Badge>
+          {product.tags.slice(0, 2).map((tag) => (
+            <em key={tag}>{tag}</em>
+          ))}
+          {disabledText ? <em className="muted">{disabledText}</em> : null}
+        </span>
+      </span>
+      {trailing}
+    </div>
+  );
+}
diff --git a/src/components/admin/route-sections/RouteSectionsPanel.tsx b/src/components/admin/route-sections/RouteSectionsPanel.tsx
new file mode 100644
index 0000000..1e28aac
--- /dev/null
+++ b/src/components/admin/route-sections/RouteSectionsPanel.tsx
@@ -0,0 +1,521 @@
+import { ArrowDown, ArrowUp, Link2, Pencil, Route, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import type { Product, RouteSection } from "@/api";
+import {
+  createProduct,
+  createSiteConfigItem,
+  deleteSiteConfigItem,
+  reorderSiteConfigItems,
+  updateSiteConfigItem,
+} from "@/api";
+import type { ProductInput } from "@/api";
+import { RouteSectionEditor } from "@/components/admin/route-sections/RouteSectionEditor";
+import {
+  buildProductUsageMap,
+  compactRouteSectionDraft,
+  createEmptyRouteSectionDraft,
+  createRouteSectionDraft,
+  type RouteSectionDraft,
+} from "@/components/admin/route-sections/helpers";
+import { RouteSectionProductEditor } from "@/components/admin/route-sections/RouteSectionProductEditor";
+import { compactProductPayload } from "@/lib/admin-utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { DirtyChangeHandler, Notify } from "@/types/admin";
+
+export function RouteSectionsPanel({
+  routeSections,
+  products,
+  moduleLabel,
+  onDirtyChange,
+  notify,
+  onReload,
+  createRequestKey,
+}: {
+  routeSections: RouteSection[];
+  products: Product[];
+  moduleLabel: string;
+  onDirtyChange: DirtyChangeHandler;
+  notify: Notify;
+  onReload: () => Promise<unknown>;
+  createRequestKey: number;
+}) {
+  const [selectedId, setSelectedId] = useState("");
+  const [expandedId, setExpandedId] = useState("");
+  const [draft, setDraft] = useState<RouteSectionDraft | null>(null);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [productEditorOpen, setProductEditorOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState("");
+  const createRequestSeen = useRef(createRequestKey);
+
+  const sortedSections = useMemo(
+    () => [...routeSections].sort((left, right) => left.sortOrder - right.sortOrder),
+    [routeSections],
+  );
+  const productById = useMemo(
+    () => new Map(products.map((product) => [product.id, product])),
+    [products],
+  );
+  const selectedSection =
+    sortedSections.find((section) => section.id === selectedId) ??
+    sortedSections[0];
+  const productUsage = useMemo(
+    () => buildProductUsageMap(routeSections, draft?.id ?? selectedSection?.id ?? ""),
+    [draft?.id, routeSections, selectedSection?.id],
+  );
+
+  useEffect(() => {
+    const firstSection = sortedSections[0];
+    if (!firstSection) {
+      setSelectedId("");
+      setExpandedId("");
+      setDraft(null);
+      setEditorOpen(false);
+      setProductEditorOpen(false);
+      return;
+    }
+
+    const nextSection =
+      sortedSections.find((section) => section.id === selectedId) ?? firstSection;
+    setSelectedId(nextSection.id);
+    setExpandedId((current) =>
+      sortedSections.some((section) => section.id === current) ? current : nextSection.id,
+    );
+    setDraft(createRouteSectionDraft(nextSection));
+    setEditorOpen(false);
+    setProductEditorOpen(false);
+    setCreating(false);
+    setMessage("");
+  }, [routeSections]);
+
+  useEffect(() => {
+    if (createRequestSeen.current === createRequestKey) return;
+    createRequestSeen.current = createRequestKey;
+
+    setSelectedId("");
+    setDraft(createEmptyRouteSectionDraft(sortedSections.length));
+    setEditorOpen(true);
+    setProductEditorOpen(false);
+    setCreating(true);
+    setMessage("");
+    onDirtyChange(false);
+  }, [createRequestKey, notify, onDirtyChange, sortedSections.length]);
+
+  const openEditor = (section: RouteSection) => {
+    setSelectedId(section.id);
+    setExpandedId(section.id);
+    setDraft(createRouteSectionDraft(section));
+    setMessage("");
+    setEditorOpen(true);
+    setProductEditorOpen(false);
+    setCreating(false);
+    onDirtyChange(false);
+  };
+
+  const openProductEditor = (section: RouteSection) => {
+    setSelectedId(section.id);
+    setExpandedId(section.id);
+    setDraft(createRouteSectionDraft(section));
+    setMessage("");
+    setEditorOpen(false);
+    setProductEditorOpen(true);
+    setCreating(false);
+    onDirtyChange(false);
+  };
+
+  const closeEditor = () => {
+    if (!creating && selectedSection) {
+      setDraft(createRouteSectionDraft(selectedSection));
+    }
+    setEditorOpen(false);
+    setProductEditorOpen(false);
+    setCreating(false);
+    setMessage("");
+    onDirtyChange(false);
+  };
+
+  const updateDraft = (nextDraft: RouteSectionDraft) => {
+    setDraft(nextDraft);
+    onDirtyChange(true);
+  };
+
+  const saveSection = async () => {
+    if (!draft || saving) return;
+
+    const payload = compactRouteSectionDraft(draft);
+    if (!payload.title) {
+      notify({
+        tone: "warning",
+        title: "内容未保存",
+        message: "请先填写精选线路子分组标题。",
+      });
+      return;
+    }
+
+    setSaving(true);
+    setMessage("");
+
+    try {
+      const saved = creating
+        ? await createSiteConfigItem("routeSections", payload)
+        : await updateSiteConfigItem("routeSections", draft.id, payload);
+      notify({
+        tone: "success",
+        title: creating ? "子分组已新增" : "精选线路已保存",
+        message: creating
+          ? `${draft.title} 已保存，可继续配置关联线路。`
+          : `${draft.title} 的标题、状态和关联商品已更新。`,
+      });
+      if ("id" in saved) {
+        setSelectedId(saved.id);
+        setExpandedId(saved.id);
+      }
+      setCreating(false);
+      setEditorOpen(false);
+      onDirtyChange(false);
+      await onReload();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "保存失败";
+      setMessage(messageText);
+      notify({
+        tone: "danger",
+        title: "精选线路保存失败",
+        message: messageText,
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const updateProductLinks = async (productIds: string[]) => {
+    if (!draft || saving || !draft.id) return;
+
+    setSaving(true);
+    setMessage("");
+
+    try {
+      const nextDraft = { ...draft, productIds: Array.from(new Set(productIds)) };
+      setDraft(nextDraft);
+      await updateSiteConfigItem(
+        "routeSections",
+        draft.id,
+        compactRouteSectionDraft(nextDraft),
+      );
+      notify({
+        tone: "success",
+        title: "关联线路已保存",
+        message: `${draft.title} 的关联线路已更新。`,
+      });
+      onDirtyChange(false);
+      await onReload();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "保存失败";
+      setMessage(messageText);
+      notify({
+        tone: "danger",
+        title: "关联线路保存失败",
+        message: messageText,
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const createAndLinkProduct = async (input: ProductInput) => {
+    if (!draft || saving || !draft.id) return;
+
+    setSaving(true);
+    setMessage("");
+
+    try {
+      const product = await createProduct(compactProductPayload(input));
+      const nextDraft = {
+        ...draft,
+        productIds: Array.from(new Set([...draft.productIds, product.id])),
+      };
+
+      await updateSiteConfigItem(
+        "routeSections",
+        draft.id,
+        compactRouteSectionDraft(nextDraft),
+      );
+      setDraft(nextDraft);
+      notify({
+        tone: "success",
+        title: "关联线路已创建",
+        message: `${product.title} 已创建并加入 ${draft.title}。`,
+      });
+      onDirtyChange(false);
+      await onReload();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "创建失败";
+      setMessage(messageText);
+      notify({
+        tone: "danger",
+        title: "关联线路创建失败",
+        message: messageText,
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const moveSection = async (section: RouteSection, direction: -1 | 1) => {
+    const currentIndex = sortedSections.findIndex((candidate) => candidate.id === section.id);
+    const nextIndex = currentIndex + direction;
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= sortedSections.length) return;
+
+    const nextIds = sortedSections.map((candidate) => candidate.id);
+    [nextIds[currentIndex], nextIds[nextIndex]] = [
+      nextIds[nextIndex],
+      nextIds[currentIndex],
+    ];
+
+    try {
+      await reorderSiteConfigItems("routeSections", nextIds);
+      notify({
+        tone: "success",
+        title: "精选线路顺序已更新",
+        message: `${moduleLabel} 已按新的分组顺序保存。`,
+      });
+      onDirtyChange(false);
+      await onReload();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "排序失败";
+      setMessage(messageText);
+      notify({
+        tone: "danger",
+        title: "精选线路排序失败",
+        message: messageText,
+      });
+    }
+  };
+
+  const deleteSection = async (section: RouteSection) => {
+    if (saving) return;
+
+    const confirmed = window.confirm(
+      `确认删除「${section.title}」？删除后该分组不会在首页展示，已创建的线路商品不会被删除。`,
+    );
+    if (!confirmed) return;
+
+    setSaving(true);
+    setMessage("");
+
+    try {
+      await deleteSiteConfigItem("routeSections", section.id);
+      notify({
+        tone: "success",
+        title: "精选线路已删除",
+        message: `${section.title} 已从精选线路分组中移除。`,
+      });
+      setSelectedId("");
+      setExpandedId("");
+      setDraft(null);
+      setEditorOpen(false);
+      setProductEditorOpen(false);
+      setCreating(false);
+      onDirtyChange(false);
+      await onReload();
+    } catch (err) {
+      const messageText = err instanceof Error ? err.message : "删除失败";
+      setMessage(messageText);
+      notify({
+        tone: "danger",
+        title: "精选线路删除失败",
+        message: messageText,
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const sectionProducts = (section: RouteSection) =>
+    section.productIds
+      .map((productId) => productById.get(productId))
+      .filter((product): product is Product => Boolean(product));
+
+  return (
+    <>
+      <div className="route-section-console">
+        {sortedSections.length ? (
+          <div className="route-section-card-list">
+            {sortedSections.map((section, index) => {
+              const previewProducts = sectionProducts(section);
+              const missingProductCount = Math.max(0, section.productIds.length - previewProducts.length);
+
+              return (
+                <article
+                  className={`route-section-accordion ${expandedId === section.id ? "open" : ""}`}
+                  key={section.id}
+                >
+                  <div className="route-section-accordion-head">
+                    <button
+                      type="button"
+                      className="route-section-accordion-toggle"
+                      onClick={() =>
+                        setExpandedId((current) => (current === section.id ? "" : section.id))
+                      }
+                    >
+                      <span className="route-section-order">
+                        <Route size={18} />
+                        {index + 1}
+                      </span>
+                        <span className="route-section-card-copy">
+                          <span className="route-section-card-titleline">
+                            <b>{section.title}</b>
+                          </span>
+                          <small>{section.subtitle || "未填写副文案"}</small>
+                        </span>
+                      </button>
+                  </div>
+                  {expandedId === section.id ? (
+                    <div className="route-section-accordion-body">
+                      <div className="route-section-preview">
+                        {previewProducts.slice(0, 3).map((product) => (
+                          <span key={product.id}>
+                            {product.coverImage ? (
+                              <img src={product.coverImage} alt="" />
+                            ) : (
+                              <i />
+                            )}
+                            <b>{product.title}</b>
+                          </span>
+                        ))}
+                        {!previewProducts.length ? (
+                          <p>暂无关联线路</p>
+                        ) : null}
+                        {missingProductCount ? (
+                          <p>{missingProductCount} 条已配置商品暂未从商品库返回详情</p>
+                        ) : null}
+                      </div>
+                    </div>
+                  ) : null}
+                  <footer className="route-section-card-actions">
+                    <Badge
+                      variant={section.isActive ? "success" : "muted"}
+                      className={`status-chip ${section.isActive ? "published" : "archived"}`}
+                    >
+                      {section.isActive ? "已启用" : "已停用"}
+                    </Badge>
+                    <div className="route-section-card-action-tools">
+                      <div className="route-section-card-primary-actions">
+                        <Button
+                          variant="ghost"
+                          className="route-section-delete-text"
+                          onClick={() => deleteSection(section)}
+                        >
+                          <Trash2 size={13} />
+                          删除
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          className="route-section-edit-text"
+                          onClick={() => openEditor(section)}
+                        >
+                          <Pencil size={13} />
+                          编辑
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          className="route-section-link-text"
+                          onClick={() => openProductEditor(section)}
+                        >
+                          <Link2 size={13} />
+                          关联线路
+                        </Button>
+                      </div>
+                      <div className="mapped-list-actions">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          disabled={index === 0}
+                          onClick={() => moveSection(section, -1)}
+                          aria-label={`上移 ${section.title}`}
+                        >
+                          <ArrowUp size={15} />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          disabled={index === sortedSections.length - 1}
+                          onClick={() => moveSection(section, 1)}
+                          aria-label={`下移 ${section.title}`}
+                        >
+                          <ArrowDown size={15} />
+                        </Button>
+                      </div>
+                    </div>
+                  </footer>
+                </article>
+              );
+            })}
+          </div>
+        ) : (
+          <p className="mapped-empty route-section-message">
+            暂无已保存子分组，点击标题右侧“新增”创建第一个。
+          </p>
+        )}
+        {message ? (
+          <p className="mapped-empty route-section-message">
+            {message}
+          </p>
+        ) : null}
+      </div>
+      {editorOpen && draft ? (
+        <div className="edit-drawer-layer">
+          <button
+            className="edit-drawer-backdrop"
+            type="button"
+            aria-label="关闭精选线路编辑抽屉"
+            onClick={closeEditor}
+          />
+          <section
+            className="edit-rail edit-drawer"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="route-section-editor-title"
+          >
+            <RouteSectionEditor
+              draft={draft}
+              mode={creating ? "create" : "edit"}
+              saving={saving}
+              onDraft={updateDraft}
+              onSave={saveSection}
+              onClose={closeEditor}
+            />
+          </section>
+        </div>
+      ) : null}
+      {productEditorOpen && draft ? (
+        <div className="edit-drawer-layer">
+          <button
+            className="edit-drawer-backdrop"
+            type="button"
+            aria-label="关闭关联线路抽屉"
+            onClick={closeEditor}
+          />
+          <section
+            className="edit-rail edit-drawer"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="route-section-product-editor-title"
+          >
+            <RouteSectionProductEditor
+              draft={draft}
+              products={products}
+              productUsage={productUsage}
+              saving={saving}
+              onCreateProduct={createAndLinkProduct}
+              onProductIdsChange={updateProductLinks}
+              onClose={closeEditor}
+            />
+          </section>
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/src/components/admin/route-sections/helpers.ts b/src/components/admin/route-sections/helpers.ts
new file mode 100644
index 0000000..6276c12
--- /dev/null
+++ b/src/components/admin/route-sections/helpers.ts
@@ -0,0 +1,63 @@
+import type { RouteSection, SiteItemPatch } from "@/api";
+
+export type RouteSectionDraft = {
+  id: string;
+  title: string;
+  subtitle: string;
+  productIds: string[];
+  isActive: boolean;
+  sortOrder: number;
+};
+
+export type ProductUsage = {
+  sectionId: string;
+  sectionTitle: string;
+};
+
+export function createRouteSectionDraft(section: RouteSection): RouteSectionDraft {
+  return {
+    id: section.id,
+    title: section.title,
+    subtitle: section.subtitle ?? "",
+    productIds: [...section.productIds],
+    isActive: section.isActive,
+    sortOrder: section.sortOrder,
+  };
+}
+
+export function createEmptyRouteSectionDraft(sortOrder: number): RouteSectionDraft {
+  return {
+    id: "",
+    title: "",
+    subtitle: "",
+    productIds: [],
+    isActive: true,
+    sortOrder,
+  };
+}
+
+export function compactRouteSectionDraft(draft: RouteSectionDraft): SiteItemPatch {
+  return {
+    title: draft.title.trim(),
+    subtitle: draft.subtitle.trim(),
+    productIds: Array.from(new Set(draft.productIds.filter(Boolean))),
+    isActive: draft.isActive,
+    sortOrder: draft.sortOrder,
+  };
+}
+
+export function buildProductUsageMap(routeSections: RouteSection[], currentSectionId: string) {
+  const usage = new Map<string, ProductUsage>();
+
+  routeSections.forEach((section) => {
+    if (section.id === currentSectionId) return;
+    section.productIds.forEach((productId) => {
+      usage.set(productId, {
+        sectionId: section.id,
+        sectionTitle: section.title,
+      });
+    });
+  });
+
+  return usage;
+}
diff --git a/src/lib/admin-utils.ts b/src/lib/admin-utils.ts
index 8ec2b2e..22fb025 100644
--- a/src/lib/admin-utils.ts
+++ b/src/lib/admin-utils.ts
@@ -132,6 +132,7 @@ export function siteItemPrimaryKey(moduleId: SiteModule): keyof SiteItemPatch {
   if (moduleId === "map") return "image";
   if (moduleId === "themes") return "label";
   if (moduleId === "campaigns") return "title";
+  if (moduleId === "routeSections") return "title";
   return "alt";
 }
 
@@ -175,6 +176,9 @@ export function createEmptySiteItemDraft(moduleId: SiteModule, sortOrder: number
       endsAt: "",
     };
   }
+  if (moduleId === "routeSections") {
+    return { title: "", subtitle: "", productIds: [], isActive: true, sortOrder };
+  }
   return { alt: "", image: "", isActive: false, sortOrder };
 }
 
@@ -219,6 +223,15 @@ export function compactSiteItemPayload(moduleId: SiteModule, draft: SiteItemPatc
     payload.targetType = undefined;
     payload.targetValue = undefined;
   }
+  if (moduleId === "routeSections") {
+    payload.title = draft.title?.trim();
+    payload.subtitle = draft.subtitle?.trim() || "";
+    payload.productIds = Array.from(new Set((draft.productIds ?? []).filter(Boolean)));
+    payload.image = undefined;
+    payload.kicker = undefined;
+    payload.targetType = undefined;
+    payload.targetValue = undefined;
+  }
   if (moduleId === "ctaBanners") {
     payload.alt = draft.alt?.trim();
   }
@@ -258,6 +271,7 @@ export function itemMeta(item: EditableSiteItem): string {
     const status = "status" in item && typeof item.status === "string" ? item.status : "";
     return typeof item.priceAmount === "number" ? `¥${item.priceAmount}${priceUnit}` : description || status;
   }
+  if ("productIds" in item) return `${item.productIds.length} 条线路 / ${item.subtitle || "精选线路子分组"}`;
   if ("description" in item) {
     const description = typeof item.description === "string" ? item.description : "";
     const status = "status" in item && typeof item.status === "string" ? item.status : "";
@@ -269,7 +283,8 @@ export function itemMeta(item: EditableSiteItem): string {
 
 export function itemImage(item: EditableSiteItem) {
   if ("coverImage" in item) return item.coverImage || "";
-  return item.image || "";
+  if ("image" in item) return item.image || "";
+  return "";
 }
 
 export function itemTags(item: EditableSiteItem) {
@@ -287,5 +302,5 @@ export function moduleItems(config: SiteConfig, moduleId: SiteModule): EditableS
 }
 
 export function moduleEditable(moduleId: ModuleId): moduleId is SiteModule {
-  return moduleId === "heroSlides" || moduleId === "destinations" || moduleId === "map" || moduleId === "themes" || moduleId === "campaigns" || moduleId === "ctaBanners";
+  return moduleId === "heroSlides" || moduleId === "destinations" || moduleId === "map" || moduleId === "themes" || moduleId === "campaigns" || moduleId === "routeSections" || moduleId === "ctaBanners";
 }
diff --git a/src/pages/structure/StructurePage.tsx b/src/pages/structure/StructurePage.tsx
index 6e8392e..a75d6ea 100644
--- a/src/pages/structure/StructurePage.tsx
+++ b/src/pages/structure/StructurePage.tsx
@@ -25,6 +25,7 @@ import {
 import type { Product, SiteConfig, SiteItemPatch, SiteModule } from "@/api";
 import { AdminDisclosure } from "@/components/admin/AdminDisclosure";
 import { EmptyState } from "@/components/admin/EmptyState";
+import { RouteSectionsPanel } from "@/components/admin/route-sections/RouteSectionsPanel";
 import { SingleImageUploader } from "@/components/admin/SingleImageUploader";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -102,9 +103,9 @@ const pageSpecs: {
         frontPosition: "首页「特价优惠」",
       },
       {
-        id: "routeProducts",
+        id: "routeSections",
         label: "精选线路",
-        hint: "从商品库选择上架线路，决定首页线路池。",
+        hint: "按运营任务新增精选线路分组，维护标题、副文案、启用状态和关联线路顺序。",
         frontPosition: "首页精选线路",
       },
       {
@@ -217,20 +218,25 @@ export function StructurePage({
   const [message, setMessage] = useState("");
   const [editorOpen, setEditorOpen] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [routeSectionCreateRequest, setRouteSectionCreateRequest] = useState(0);
 
   const activePage =
     pageSpecs.find((page) => page.id === (fixedPage ?? pageId)) ?? pageSpecs[0];
   const activeModule =
     activePage.modules.find((module) => module.id === moduleId) ??
     activePage.modules[0];
+  const isRouteSectionsModule = moduleId === "routeSections";
   const editableItems =
-    config && moduleEditable(moduleId) ? moduleItems(config, moduleId) : [];
+    config && moduleEditable(moduleId) && !isRouteSectionsModule
+      ? moduleItems(config, moduleId)
+      : [];
   const isMapModule = moduleId === "map";
   const isCampaignModule = moduleId === "campaigns";
   const canReorderSiteItems =
-    moduleEditable(moduleId) && !isMapModule && !isCampaignModule;
+    moduleEditable(moduleId) && !isRouteSectionsModule && !isMapModule && !isCampaignModule;
   const canCreateSiteItem =
-    moduleEditable(moduleId) && (!isMapModule || editableItems.length === 0);
+    moduleEditable(moduleId) && !isRouteSectionsModule && (!isMapModule || editableItems.length === 0);
+  const showRouteSectionCreateButton = isRouteSectionsModule;
   const isCreatingSiteItem = selectedId === NEW_SITE_ITEM_ID;
   const selectedItem = isCreatingSiteItem
     ? undefined
@@ -239,6 +245,7 @@ export function StructurePage({
   const showEditorDrawer =
     editorOpen &&
     moduleEditable(moduleId) &&
+    !isRouteSectionsModule &&
     (isCreatingSiteItem || Boolean(selectedItem));
   const gridClassName = [
     "maintenance-grid",
@@ -271,7 +278,7 @@ export function StructurePage({
     });
   };
 
-  const load = async () => {
+  const load = async (): Promise<SiteConfig> => {
     const [site, productResult] = await Promise.all([
       getSiteConfig(),
       getProducts(),
@@ -291,6 +298,7 @@ export function StructurePage({
         setDraftFromItem(first);
       }
     }
+    return site;
   };
 
   useEffect(() => {
@@ -309,7 +317,7 @@ export function StructurePage({
   }, [fixedPage]);
 
   useEffect(() => {
-    if (!config || !moduleEditable(moduleId)) {
+    if (!config || !moduleEditable(moduleId) || isRouteSectionsModule) {
       setSelectedId("");
       setDraft({});
       setEditorOpen(false);
@@ -338,7 +346,7 @@ export function StructurePage({
   };
 
   const startCreateSiteItem = () => {
-    if (!moduleEditable(moduleId)) return;
+    if (!moduleEditable(moduleId) || isRouteSectionsModule) return;
     setSelectedId(NEW_SITE_ITEM_ID);
     setDraft(createEmptySiteItemDraft(moduleId, editableItems.length));
     setMessage("");
@@ -375,6 +383,7 @@ export function StructurePage({
       saving ||
       !config ||
       !moduleEditable(moduleId) ||
+      isRouteSectionsModule ||
       (!selectedId && !isCreatingSiteItem)
     )
       return;
@@ -451,7 +460,7 @@ export function StructurePage({
   };
 
   const removeSiteItem = async (item: EditableSiteItem) => {
-    if (!moduleEditable(moduleId)) return;
+    if (!moduleEditable(moduleId) || isRouteSectionsModule) return;
     const confirmed = window.confirm(
       `确认删除「${itemName(item)}」吗？删除后需要后端同步移除对应模块配置。`,
     );
@@ -477,7 +486,7 @@ export function StructurePage({
   };
 
   const moveSiteItem = async (item: EditableSiteItem, direction: -1 | 1) => {
-    if (!moduleEditable(moduleId)) return;
+    if (!moduleEditable(moduleId) || isRouteSectionsModule) return;
     const currentIndex = editableItems.findIndex(
       (candidate) => candidate.id === item.id,
     );
@@ -621,9 +630,27 @@ export function StructurePage({
                 <Plus size={16} />
                 {isMapModule ? "上传地图" : "新增"}
               </Button>
+            ) : showRouteSectionCreateButton ? (
+              <Button
+                className="primary-action compact"
+                onClick={() => setRouteSectionCreateRequest((current) => current + 1)}
+              >
+                <Plus size={16} />
+                新增
+              </Button>
             ) : null}
           </header>
-          {moduleEditable(moduleId) ? (
+          {isRouteSectionsModule ? (
+            <RouteSectionsPanel
+              routeSections={config.routeSections}
+              products={products}
+              moduleLabel={activeModule.label}
+              onDirtyChange={onDirtyChange}
+              notify={notify}
+              onReload={load}
+              createRequestKey={routeSectionCreateRequest}
+            />
+          ) : moduleEditable(moduleId) ? (
             <div className="mapped-list">
               {editableItems.map((item, index) => (
                 <div className="mapped-list-row" key={item.id}>
diff --git a/src/styles.css b/src/styles.css
index 818dca2..3fc5ad3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1111,6 +1111,418 @@ textarea {
   white-space: nowrap;
 }
 
+.route-section-console {
+  min-height: 0;
+  height: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: 12px;
+}
+
+.route-section-card-list {
+  min-height: 0;
+  min-width: 0;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.route-section-accordion {
+  min-width: 0;
+  display: grid;
+  padding: 10px;
+  border: 1px solid #dce3e8;
+  border-radius: 8px;
+  background: #fff;
+  transition:
+    border-color 0.16s ease,
+    background-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.route-section-accordion:hover {
+  border-color: #b8d5d1;
+  background: #fbfefd;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
+}
+
+.route-section-accordion.open {
+  border-color: #247d79;
+  background: #f8fdfc;
+}
+
+.route-section-accordion-head {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+}
+
+.route-section-accordion-toggle {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.route-section-accordion-toggle:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.route-section-accordion-toggle:hover .route-section-card-titleline b {
+  color: #176c68;
+}
+
+.route-section-delete-text,
+.route-section-edit-text,
+.route-section-link-text {
+  height: 32px;
+  padding: 0 6px;
+  color: #176c68;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.route-section-delete-text {
+  color: #c43b32;
+}
+
+.route-section-edit-text:hover,
+.route-section-link-text:hover {
+  color: #0f5f5b;
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.route-section-delete-text:hover,
+.route-section-delete-text:focus-visible,
+.route-section-delete-text:active {
+  color: #c43b32;
+  background: transparent;
+  text-decoration: none;
+}
+
+.route-section-delete-text:focus-visible {
+  outline: 2px solid rgba(196, 59, 50, 0.28);
+  outline-offset: 2px;
+}
+
+.route-section-edit-text:focus-visible,
+.route-section-link-text:focus-visible {
+  color: #0f5f5b;
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.route-section-edit-text:active,
+.route-section-link-text:active {
+  color: #0b4d49;
+}
+
+.route-section-order {
+  width: 64px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  gap: 2px;
+  border: 1px solid #cfe5e2;
+  border-radius: 6px;
+  color: #176c68;
+  background: #edf8f6;
+  font-weight: 800;
+}
+
+.route-section-card-copy {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+}
+
+.route-section-card-titleline {
+  min-width: 0;
+  display: block;
+}
+
+.route-section-card-titleline b {
+  min-width: 0;
+  overflow: hidden;
+  display: block;
+  color: #1f2a31;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.route-section-card-copy small {
+  overflow: hidden;
+  display: -webkit-box;
+  color: #68747d;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.route-section-accordion .status-chip {
+  min-height: 22px;
+}
+
+.route-section-accordion-body {
+  min-width: 0;
+  display: grid;
+  gap: 10px;
+  margin-left: 74px;
+  padding-top: 10px;
+}
+
+.route-section-preview {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.route-section-preview span {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  padding: 5px 6px;
+  border: 1px solid #edf2f4;
+  border-radius: 6px;
+  background: #f8fafb;
+}
+
+.route-section-preview img,
+.route-section-preview i {
+  width: 34px;
+  height: 26px;
+  border-radius: 4px;
+  background: #d7dee3;
+  object-fit: cover;
+}
+
+.route-section-preview i {
+  display: block;
+}
+
+.route-section-preview b {
+  min-width: 0;
+  overflow: hidden;
+  color: #34414a;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.route-section-preview p {
+  margin: 0;
+  padding: 8px;
+  border: 1px dashed #d4dee5;
+  border-radius: 6px;
+  color: #68747d;
+  background: #f8fafb;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.route-section-card-actions {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #e4ecef;
+}
+
+.route-section-card-action-tools,
+.route-section-card-primary-actions {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.route-section-card-action-tools {
+  justify-content: flex-end;
+  gap: 12px;
+  margin-left: auto;
+}
+
+.route-section-card-primary-actions {
+  gap: 8px;
+}
+
+.route-section-card-actions .mapped-list-actions {
+  display: inline-flex;
+  gap: 12px;
+  margin-left: 0;
+  justify-content: flex-end;
+}
+
+.route-section-card-actions .mapped-list-actions button,
+.route-section-card-actions .mapped-list-actions button:last-child {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  color: #7f8c95;
+  background: transparent;
+}
+
+.route-section-card-actions .mapped-list-actions button:not(:disabled):hover {
+  color: #1f2a31;
+  background: transparent;
+}
+
+.route-section-card-actions .mapped-list-actions button:disabled {
+  color: #c0c8ce;
+  opacity: 1;
+}
+
+.route-section-message {
+  border-color: #efcfc7;
+  color: #9c3d2f;
+  background: #fff8f6;
+}
+
+.route-product-picker {
+  min-width: 0;
+  display: grid;
+  gap: 14px;
+}
+
+.route-product-block {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.route-product-block header {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.route-product-block header span {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.route-product-block header b {
+  color: #1f2a31;
+}
+
+.route-product-block header small {
+  color: #68747d;
+  line-height: 1.45;
+}
+
+.route-product-search {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+}
+
+.route-product-search svg {
+  color: #68747d;
+}
+
+.route-product-list {
+  max-height: 340px;
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.route-product-list.selected {
+  max-height: 300px;
+}
+
+.route-product-row {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid #dbe3e8;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.route-product-row img,
+.route-product-row .image-placeholder {
+  width: 56px;
+  height: 42px;
+}
+
+.route-product-main {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.route-product-main b,
+.route-product-main small {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.route-product-main small {
+  color: #68747d;
+}
+
+.route-product-tags {
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.route-product-tags em {
+  max-width: 100px;
+  overflow: hidden;
+  padding: 1px 6px;
+  border: 1px solid #d8e3e8;
+  border-radius: 4px;
+  color: #46656a;
+  background: #f7fafb;
+  font-size: 11px;
+  font-style: normal;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.route-product-tags em.muted {
+  color: #68747d;
+  background: #eef2f4;
+}
+
 .admin-toast-stack {
   position: fixed;
   right: 18px;
diff --git a/src/types/admin.ts b/src/types/admin.ts
index ef17bb0..6a51c66 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -20,4 +20,5 @@ export type EditableSiteItem =
   | SiteConfig["map"][number]
   | SiteConfig["themes"][number]
   | SiteConfig["campaigns"][number]
+  | SiteConfig["routeSections"][number]
   | SiteConfig["ctaBanners"][number];