From c143b67275548bd0aebede197df70ae9926856c6 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Wed, 19 Aug 2026 21:20:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(route-detail):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E8=B7=AF=E7=BA=BF=E8=AF=A6=E6=83=85=E7=8B=AC=E7=AB=8B=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=85=A8=E9=93=BE=E8=B7=AF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加`DetailRecord`数据库模型、迁移脚本及完整的CRUD管理接口，将路线详情从玩法路线表解耦，实现独立存储。
在Admin UI的路线编辑器中集成详情配置面板，支持编辑详情文案、图片等展示内容。
完善MiniAPP路线详情页，新增导航函数、API调用及数据归一化逻辑，并添加对应单元测试。
更新所有相关文档，明确领域边界、联调流程及接口契约规范。
调整首页和玩法页的点击跳转逻辑，优先跳转路线详情页而非原需求页。
新增数值格式化工具函数优化内容展示效果。
---
 .../state/server-info                         |   1 -
 .../state/server-stopped                      |   1 +
 WonderQ-Admin-UI/src/api.ts                   |  58 +++++
 .../admin/WanfaRouteDetailFields.tsx          | 121 ++++++++++
 .../src/components/admin/WanfaRouteEditor.tsx | 109 +++++++--
 .../src/components/admin/WanfaRouteRail.tsx   |  27 ++-
 .../src/pages/structure/WanfaPage.tsx         |  66 +++--
 .../alembic/versions/0021_detail_records.py   |  97 ++++++++
 WonderQ-Admin/app/models.py                   |  21 ++
 WonderQ-Admin/app/routers/admin.py            | 113 ++++++++-
 WonderQ-Admin/app/routers/public.py           |  16 +-
 WonderQ-Admin/app/schemas.py                  |  77 ++++++
 WonderQ-Admin/app/serializers.py              |  20 ++
 WonderQ-Admin/tests/test_details.py           | 225 ++++++++++++++++++
 WonderQ-MiniAPP/src/lib/api.ts                |   5 +
 WonderQ-MiniAPP/src/lib/data.ts               |   4 +
 WonderQ-MiniAPP/src/lib/navigation.ts         |   4 +
 WonderQ-MiniAPP/src/lib/types.ts              |  14 ++
 WonderQ-MiniAPP/src/pages.json                |   6 +
 .../detail/components/DetailOverviewCard.vue  |  55 ++---
 .../detail/components/detailPresentation.ts   | 167 ++++++-------
 WonderQ-MiniAPP/src/pages/detail/index.vue    | 199 ++++++++++------
 WonderQ-MiniAPP/src/pages/home/index.vue      |  13 +-
 WonderQ-MiniAPP/src/pages/play/index.vue      |   4 +-
 WonderQ-MiniAPP/tests/detail-data.test.ts     |  54 +++++
 WonderQ-MiniAPP/tests/navigation.test.ts      |  20 ++
 docs/README.md                                |   8 +-
 docs/detail-api.md                            |  57 ++++-
 docs/home-api.md                              |   2 +
 docs/integration-workflow.md                  |  13 +
 docs/public-api.md                            |  23 ++
 docs/wanfa-api.md                             |   2 +
 32 files changed, 1343 insertions(+), 259 deletions(-)
 delete mode 100644 .superpowers/brainstorm/team-building-20260819-visual/state/server-info
 create mode 100644 .superpowers/brainstorm/team-building-20260819-visual/state/server-stopped
 create mode 100644 WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx
 create mode 100644 WonderQ-Admin/alembic/versions/0021_detail_records.py
 create mode 100644 WonderQ-Admin/tests/test_details.py
 create mode 100644 WonderQ-MiniAPP/tests/detail-data.test.ts
 create mode 100644 WonderQ-MiniAPP/tests/navigation.test.ts

diff --git a/.superpowers/brainstorm/team-building-20260819-visual/state/server-info b/.superpowers/brainstorm/team-building-20260819-visual/state/server-info
deleted file mode 100644
index 496ad36..0000000
--- a/.superpowers/brainstorm/team-building-20260819-visual/state/server-info
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"server-started","port":63862,"host":"0.0.0.0","url_host":"127.0.0.1","url":"http://127.0.0.1:63862","screen_dir":"D:\\www\\znkj\\WonderQ-Project\\.superpowers\\brainstorm\\team-building-20260819-visual\\content","state_dir":"D:\\www\\znkj\\WonderQ-Project\\.superpowers\\brainstorm\\team-building-20260819-visual\\state"}
diff --git a/.superpowers/brainstorm/team-building-20260819-visual/state/server-stopped b/.superpowers/brainstorm/team-building-20260819-visual/state/server-stopped
new file mode 100644
index 0000000..c0242e3
--- /dev/null
+++ b/.superpowers/brainstorm/team-building-20260819-visual/state/server-stopped
@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1787142361651}
diff --git a/WonderQ-Admin-UI/src/api.ts b/WonderQ-Admin-UI/src/api.ts
index ab49cd5..0dbbd7d 100644
--- a/WonderQ-Admin-UI/src/api.ts
+++ b/WonderQ-Admin-UI/src/api.ts
@@ -120,6 +120,31 @@ export type WanfaRouteCreate = {
 
 export type WanfaRoutePatch = Partial<WanfaRouteCreate>;
 
+export type DetailRecord = {
+  id: string;
+  key: string;
+  eyebrow: string;
+  duration: string;
+  title: string;
+  subtitle: string;
+  intro: string;
+  highlights: string[];
+  included: string[];
+  excluded: string[];
+  notes: string[];
+  gallery: string[];
+  isActive: boolean;
+  sortOrder: number;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type DetailCreate = Omit<DetailRecord, "id" | "createdAt" | "updatedAt" | "sortOrder"> & {
+  sortOrder?: number;
+};
+
+export type DetailPatch = Partial<DetailCreate>;
+
 export type ConciergeDetail = {
   icon: string;
   label: string;
@@ -391,6 +416,39 @@ export async function reorderWanfaRoutes(categoryId: string, itemIds: string[])
   });
 }
 
+export async function getDetails() {
+  return request<{ details: DetailRecord[] }>("/api/admin/details");
+}
+
+export async function getDetail(detailId: string) {
+  return request<DetailRecord>(`/api/admin/details/${detailId}`);
+}
+
+export async function createDetail(input: DetailCreate) {
+  return request<DetailRecord>("/api/admin/details", {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
+
+export async function updateDetail(detailId: string, input: DetailPatch) {
+  return request<DetailRecord>(`/api/admin/details/${detailId}`, {
+    method: "PATCH",
+    body: JSON.stringify(input),
+  });
+}
+
+export async function deleteDetail(detailId: string) {
+  return request<{ id: string }>(`/api/admin/details/${detailId}`, { method: "DELETE" });
+}
+
+export async function reorderDetails(itemIds: string[]) {
+  return request<{ items: DetailRecord[] }>("/api/admin/details/reorder", {
+    method: "PATCH",
+    body: JSON.stringify({ itemIds }),
+  });
+}
+
 export async function getConciergeAdvisors() {
   return request<{ advisors: ConciergeAdvisor[] }>('/api/admin/concierge/advisors');
 }
diff --git a/WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx b/WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx
new file mode 100644
index 0000000..56ed514
--- /dev/null
+++ b/WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx
@@ -0,0 +1,121 @@
+import type { DetailCreate } from "@/api";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+const detailArrayFields = [
+  ["highlights", "行程亮点", "每行填写一项亮点"],
+  ["included", "费用包含", "每行填写一项包含内容"],
+  ["excluded", "费用不含", "每行填写一项不包含内容"],
+  ["notes", "注意事项", "每行填写一项注意事项"],
+  ["gallery", "详情图片画廊", "每行填写一个 http(s) 图片地址"],
+] as const;
+
+type DetailArrayField = (typeof detailArrayFields)[number][0];
+
+export function WanfaRouteDetailFields({
+  detail,
+  onChange,
+}: {
+  detail: DetailCreate;
+  onChange: <K extends keyof DetailCreate>(key: K, value: DetailCreate[K]) => void;
+}) {
+  const updateLines = (key: DetailArrayField, value: string) => {
+    onChange(
+      key,
+      value
+        .split("\n")
+        .map((item) => item.trim())
+        .filter(Boolean),
+    );
+  };
+
+  return (
+    <section className="grid gap-4 border-t border-slate-100 pt-5">
+      <div>
+        <h4 className="text-base font-semibold text-slate-900">路线详情</h4>
+        <p className="mt-1 text-xs leading-5 text-slate-500">
+          详情内容由独立详情接口维护，数组字段按每行一项保存。
+        </p>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="grid gap-2 text-sm font-medium text-slate-800" htmlFor="wanfa-detail-eyebrow">
+          详情眉标
+          <Input
+            id="wanfa-detail-eyebrow"
+            value={detail.eyebrow}
+            maxLength={40}
+            placeholder="例如：亲子路线"
+            onChange={(event) => onChange("eyebrow", event.target.value)}
+          />
+        </label>
+        <label className="grid gap-2 text-sm font-medium text-slate-800" htmlFor="wanfa-detail-duration">
+          出行时长
+          <Input
+            id="wanfa-detail-duration"
+            value={detail.duration}
+            maxLength={40}
+            placeholder="例如：5天4晚"
+            onChange={(event) => onChange("duration", event.target.value)}
+          />
+        </label>
+        <label className="grid gap-2 text-sm font-medium text-slate-800 sm:col-span-2" htmlFor="wanfa-detail-title">
+          详情标题
+          <Input
+            id="wanfa-detail-title"
+            value={detail.title}
+            maxLength={120}
+            placeholder="例如：贵州亲子玩水路线"
+            onChange={(event) => onChange("title", event.target.value)}
+          />
+        </label>
+        <label className="grid gap-2 text-sm font-medium text-slate-800 sm:col-span-2" htmlFor="wanfa-detail-subtitle">
+          详情副标题
+          <Textarea
+            id="wanfa-detail-subtitle"
+            value={detail.subtitle}
+            maxLength={240}
+            rows={2}
+            placeholder="用于详情页标题下方的补充说明"
+            onChange={(event) => onChange("subtitle", event.target.value)}
+          />
+        </label>
+        <label className="grid gap-2 text-sm font-medium text-slate-800 sm:col-span-2" htmlFor="wanfa-detail-intro">
+          详情介绍
+          <Textarea
+            id="wanfa-detail-intro"
+            value={detail.intro}
+            maxLength={1000}
+            rows={5}
+            placeholder="介绍路线的整体体验和适合人群"
+            onChange={(event) => onChange("intro", event.target.value)}
+          />
+        </label>
+        {detailArrayFields.map(([key, label, placeholder]) => (
+          <label
+            className="grid gap-2 text-sm font-medium text-slate-800 sm:col-span-2"
+            htmlFor={`wanfa-detail-${key}`}
+            key={key}
+          >
+            {label}
+            <Textarea
+              id={`wanfa-detail-${key}`}
+              value={detail[key].join("\n")}
+              rows={key === "gallery" ? 3 : 4}
+              placeholder={placeholder}
+              onChange={(event) => updateLines(key, event.target.value)}
+            />
+          </label>
+        ))}
+        <label className="flex items-center gap-3 text-sm font-medium text-slate-800 sm:col-span-2">
+          <input
+            type="checkbox"
+            className="h-4 w-4 rounded border-slate-300 text-teal-700 focus:ring-teal-600"
+            checked={detail.isActive}
+            onChange={(event) => onChange("isActive", event.target.checked)}
+          />
+          启用路线详情
+        </label>
+      </div>
+    </section>
+  );
+}
diff --git a/WonderQ-Admin-UI/src/components/admin/WanfaRouteEditor.tsx b/WonderQ-Admin-UI/src/components/admin/WanfaRouteEditor.tsx
index 118383c..95d671b 100644
--- a/WonderQ-Admin-UI/src/components/admin/WanfaRouteEditor.tsx
+++ b/WonderQ-Admin-UI/src/components/admin/WanfaRouteEditor.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { Save, X } from "lucide-react";
 
-import type { WanfaRoute, WanfaRouteCreate } from "@/api";
+import type { DetailCreate, DetailRecord, WanfaRoute, WanfaRouteCreate } from "@/api";
 import { SingleImageUploader } from "@/components/admin/SingleImageUploader";
+import { WanfaRouteDetailFields } from "@/components/admin/WanfaRouteDetailFields";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -15,6 +16,21 @@ const emptyRoute = (): WanfaRouteCreate => ({
   demandKeyword: "",
 });
 
+const emptyDetail = (): DetailCreate => ({
+  key: "",
+  eyebrow: "玩法路线",
+  duration: "",
+  title: "",
+  subtitle: "",
+  intro: "",
+  highlights: [],
+  included: [],
+  excluded: [],
+  notes: [],
+  gallery: [],
+  isActive: true,
+});
+
 const routeDraft = (route?: WanfaRoute): WanfaRouteCreate =>
   route
     ? {
@@ -26,10 +42,35 @@ const routeDraft = (route?: WanfaRoute): WanfaRouteCreate =>
       }
     : emptyRoute();
 
+const detailDraft = (detail?: DetailRecord): DetailCreate =>
+  detail
+    ? {
+        key: detail.key,
+        eyebrow: detail.eyebrow,
+        duration: detail.duration,
+        title: detail.title,
+        subtitle: detail.subtitle,
+        intro: detail.intro,
+        highlights: detail.highlights ?? [],
+        included: detail.included ?? [],
+        excluded: detail.excluded ?? [],
+        notes: detail.notes ?? [],
+        gallery: detail.gallery ?? [],
+        isActive: detail.isActive,
+        sortOrder: detail.sortOrder,
+      }
+    : emptyDetail();
+
+export type WanfaRouteEditorValue = {
+  route: WanfaRouteCreate;
+  detail: DetailCreate;
+};
+
 export function WanfaRouteEditor({
   mode,
   categoryLabel,
   initialRoute,
+  initialDetail,
   saving,
   onSave,
   onClose,
@@ -37,34 +78,69 @@ export function WanfaRouteEditor({
   mode: "create" | "edit";
   categoryLabel: string;
   initialRoute?: WanfaRoute;
+  initialDetail?: DetailRecord;
   saving: boolean;
-  onSave: (input: WanfaRouteCreate) => void;
+  onSave: (input: WanfaRouteEditorValue) => void;
   onClose: () => void;
 }) {
-  const [draft, setDraft] = useState<WanfaRouteCreate>(() => routeDraft(initialRoute));
+  const [draft, setDraft] = useState<WanfaRouteEditorValue>(() => ({
+    route: routeDraft(initialRoute),
+    detail: detailDraft(initialDetail),
+  }));
   const [error, setError] = useState("");
 
   const update = <K extends keyof WanfaRouteCreate>(key: K, value: WanfaRouteCreate[K]) => {
-    setDraft((current) => ({ ...current, [key]: value }));
+    setDraft((current) => ({ ...current, route: { ...current.route, [key]: value } }));
+    if (error) setError("");
+  };
+
+  const updateDetail = <K extends keyof DetailCreate>(key: K, value: DetailCreate[K]) => {
+    setDraft((current) => ({ ...current, detail: { ...current.detail, [key]: value } }));
     if (error) setError("");
   };
 
   const submit = () => {
     const nextDraft = {
-      ...draft,
-      title: draft.title.trim(),
-      subtitle: draft.subtitle.trim(),
-      image: draft.image.trim(),
-      demandKeyword: draft.demandKeyword.trim(),
+      route: {
+        ...draft.route,
+        title: draft.route.title.trim(),
+        subtitle: draft.route.subtitle.trim(),
+        image: draft.route.image.trim(),
+        demandKeyword: draft.route.demandKeyword.trim(),
+      },
+      detail: {
+        ...draft.detail,
+        key: draft.detail.key.trim(),
+        eyebrow: draft.detail.eyebrow.trim(),
+        duration: draft.detail.duration.trim(),
+        title: draft.detail.title.trim(),
+        subtitle: draft.detail.subtitle.trim(),
+        intro: draft.detail.intro.trim(),
+      },
     };
-    if (!nextDraft.title || !nextDraft.subtitle || !nextDraft.image || !nextDraft.demandKeyword) {
+    if (
+      !nextDraft.route.title ||
+      !nextDraft.route.subtitle ||
+      !nextDraft.route.image ||
+      !nextDraft.route.demandKeyword
+    ) {
       setError("请完整填写标题、副标题、封面和需求关键词。");
       return;
     }
-    if (!Number.isInteger(nextDraft.routeCount) || nextDraft.routeCount < 0) {
+    if (!Number.isInteger(nextDraft.route.routeCount) || nextDraft.route.routeCount < 0) {
       setError("路线数量必须是大于等于 0 的整数。");
       return;
     }
+    if (
+      !nextDraft.detail.eyebrow ||
+      !nextDraft.detail.duration ||
+      !nextDraft.detail.title ||
+      !nextDraft.detail.subtitle ||
+      !nextDraft.detail.intro
+    ) {
+      setError("请完整填写详情眉标、时长、标题、副标题和详情介绍。");
+      return;
+    }
     setError("");
     onSave(nextDraft);
   };
@@ -98,7 +174,7 @@ export function WanfaRouteEditor({
             <Input
               id="wanfa-route-title"
               autoFocus
-              value={draft.title}
+              value={draft.route.title}
               maxLength={80}
               placeholder="例如：亲子玩水"
               onChange={(event) => update("title", event.target.value)}
@@ -108,7 +184,7 @@ export function WanfaRouteEditor({
             副标题/目的地说明
             <Textarea
               id="wanfa-route-subtitle"
-              value={draft.subtitle}
+              value={draft.route.subtitle}
               maxLength={160}
               placeholder="例如：贵州·轻松节奏与自然课堂"
               rows={3}
@@ -122,7 +198,7 @@ export function WanfaRouteEditor({
               type="number"
               min={0}
               step={1}
-              value={draft.routeCount}
+              value={draft.route.routeCount}
               onChange={(event) => update("routeCount", Number(event.target.value))}
             />
           </label>
@@ -130,7 +206,7 @@ export function WanfaRouteEditor({
             需求关键词
             <Input
               id="wanfa-route-keyword"
-              value={draft.demandKeyword}
+              value={draft.route.demandKeyword}
               maxLength={60}
               placeholder="例如：亲子玩水"
               onChange={(event) => update("demandKeyword", event.target.value)}
@@ -140,11 +216,12 @@ export function WanfaRouteEditor({
         <div className="grid gap-2 text-sm font-medium text-slate-800">
           <span>路线封面</span>
           <SingleImageUploader
-            value={draft.image}
+            value={draft.route.image}
             onChange={(image) => update("image", image ?? "")}
             group="wanfa"
           />
         </div>
+        <WanfaRouteDetailFields detail={draft.detail} onChange={updateDetail} />
         {error ? <p className="text-sm leading-5 text-rose-600">{error}</p> : null}
       </div>
       <footer className="flex justify-end gap-3 border-t border-slate-100 px-5 py-4">
diff --git a/WonderQ-Admin-UI/src/components/admin/WanfaRouteRail.tsx b/WonderQ-Admin-UI/src/components/admin/WanfaRouteRail.tsx
index e146eff..8987e27 100644
--- a/WonderQ-Admin-UI/src/components/admin/WanfaRouteRail.tsx
+++ b/WonderQ-Admin-UI/src/components/admin/WanfaRouteRail.tsx
@@ -1,11 +1,12 @@
 import { ArrowDown, ArrowUp, Pencil, Plus, Trash2 } from "lucide-react";
 
-import type { WanfaCategory, WanfaRoute } from "@/api";
+import type { DetailRecord, WanfaCategory, WanfaRoute } from "@/api";
 import { EmptyState } from "@/components/admin/EmptyState";
 import { Button } from "@/components/ui/button";
 
 export function WanfaRouteRail({
   category,
+  details,
   onCreate,
   onEdit,
   onDelete,
@@ -13,6 +14,7 @@ export function WanfaRouteRail({
   movingId,
 }: {
   category?: WanfaCategory;
+  details: DetailRecord[];
   onCreate: () => void;
   onEdit: (route: WanfaRoute) => void;
   onDelete: (route: WanfaRoute) => void;
@@ -35,18 +37,22 @@ export function WanfaRouteRail({
       </header>
       {category ? (
         <div className="mapped-list">
-          {category.routes.map((route, index) => (
-            <div className="mapped-list-row" key={route.id}>
-              <div className="mapped-list-main">
+          {category.routes.map((route, index) => {
+            const hasDetail = details.some((detail) => detail.key === route.id);
+            return (
+              <div className="mapped-list-row" key={route.id}>
+                <div className="mapped-list-main">
                 {route.image ? <img src={route.image} alt="" /> : <span className="image-placeholder" />}
                 <span>
                   <b>{route.title}</b>
                   <small>{route.subtitle} · 路线 {route.routeCount} 条 · 需求：{route.demandKeyword}</small>
                 </span>
-              </div>
-              <div className="flex items-center gap-1">
-                <span className="hidden rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 sm:inline-flex">
-                  已配置
+                </div>
+                <div className="flex items-center gap-1">
+                <span
+                  className={`hidden rounded-full px-2.5 py-1 text-xs font-semibold sm:inline-flex ${hasDetail ? "bg-emerald-50 text-emerald-700" : "bg-amber-50 text-amber-700"}`}
+                >
+                  {hasDetail ? "详情已配置" : "详情未配置"}
                 </span>
                 <Button
                   type="button"
@@ -94,9 +100,10 @@ export function WanfaRouteRail({
                 >
                   <Trash2 size={15} />
                 </Button>
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
           {!category.routes.length ? (
             <div className="rounded-xl border border-dashed border-slate-300 bg-slate-50 p-8 text-center">
               <p className="text-sm font-medium text-slate-700">暂无路线</p>
diff --git a/WonderQ-Admin-UI/src/pages/structure/WanfaPage.tsx b/WonderQ-Admin-UI/src/pages/structure/WanfaPage.tsx
index da6b380..7a200e3 100644
--- a/WonderQ-Admin-UI/src/pages/structure/WanfaPage.tsx
+++ b/WonderQ-Admin-UI/src/pages/structure/WanfaPage.tsx
@@ -1,21 +1,24 @@
 import { useEffect, useMemo, useState } from "react";
 
 import {
+  createDetail,
   createWanfaCategory,
   createWanfaRoute,
   deleteWanfaCategory,
   deleteWanfaRoute,
+  getDetails,
   getWanfaCategories,
   reorderWanfaCategories,
   reorderWanfaRoutes,
+  updateDetail,
   updateWanfaCategory,
   updateWanfaRoute,
 } from "@/api";
-import type { WanfaCategory, WanfaRoute, WanfaRouteCreate } from "@/api";
+import type { DetailRecord, WanfaCategory, WanfaRoute } from "@/api";
 import { WanfaCategoryEditor } from "@/components/admin/WanfaCategoryEditor";
 import { WanfaCategoryRail } from "@/components/admin/WanfaCategoryRail";
 import { WanfaConfirmDialog } from "@/components/admin/WanfaConfirmDialog";
-import { WanfaRouteEditor } from "@/components/admin/WanfaRouteEditor";
+import { WanfaRouteEditor, type WanfaRouteEditorValue } from "@/components/admin/WanfaRouteEditor";
 import { WanfaRouteRail } from "@/components/admin/WanfaRouteRail";
 import { Button } from "@/components/ui/button";
 import type { Notify } from "@/types/admin";
@@ -42,6 +45,7 @@ function swap<T>(items: T[], index: number, direction: -1 | 1) {
 
 export function WanfaPage({ notify }: { notify: Notify }) {
   const [categories, setCategories] = useState<WanfaCategory[] | null>(null);
+  const [details, setDetails] = useState<DetailRecord[]>([]);
   const [selectedCategoryId, setSelectedCategoryId] = useState("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -59,9 +63,10 @@ export function WanfaPage({ notify }: { notify: Notify }) {
   const loadCategories = async () => {
     setLoading(true);
     try {
-      const response = await getWanfaCategories();
-      const nextCategories = response.categories ?? [];
+      const [categoryResponse, detailResponse] = await Promise.all([getWanfaCategories(), getDetails()]);
+      const nextCategories = categoryResponse.categories ?? [];
       setCategories(nextCategories);
+      setDetails(detailResponse.details ?? []);
       setSelectedCategoryId((current) =>
         nextCategories.some((category) => category.id === current)
           ? current
@@ -152,27 +157,50 @@ export function WanfaPage({ notify }: { notify: Notify }) {
     }
   };
 
-  const saveRoute = async (input: WanfaRouteCreate) => {
+  const saveRoute = async ({ route, detail }: WanfaRouteEditorValue) => {
     if (!selectedCategory || !routeEditor) return;
     const isCreating = routeEditor.mode === "create";
     setSavingKey("route");
+    let saved: WanfaRoute;
     try {
-      const saved = isCreating
-        ? await createWanfaRoute(selectedCategory.id, input)
-        : await updateWanfaRoute(selectedCategory.id, routeEditor.route.id, input);
-      setRouteEditor(null);
-      notify({
-        tone: "success",
-        title: isCreating ? "路线已新增" : "路线已修改",
-        message: `「${saved.title}」已同步到「${selectedCategory.label}」。`,
-      });
-      await loadCategories();
+      saved = isCreating
+        ? await createWanfaRoute(selectedCategory.id, route)
+        : await updateWanfaRoute(selectedCategory.id, routeEditor.route.id, route);
     } catch (saveError) {
       const message = getErrorMessage(saveError, "路线保存失败，请稍后重试。");
       notify({ tone: "danger", title: "路线保存失败", message });
-    } finally {
       setSavingKey("");
+      return;
     }
+
+    try {
+      const detailPayload = { ...detail, key: saved.id };
+      const currentDetail = details.find((item) => item.key === saved.id);
+      if (currentDetail) {
+        await updateDetail(currentDetail.id, detailPayload);
+      } else {
+        await createDetail(detailPayload);
+      }
+    } catch (detailError) {
+      setRouteEditor(null);
+      notify({
+        tone: "danger",
+        title: "路线摘要已保存",
+        message: `详情保存失败：${getErrorMessage(detailError, "请稍后重试。")}`,
+      });
+      await loadCategories();
+      setSavingKey("");
+      return;
+    }
+
+    setRouteEditor(null);
+    notify({
+      tone: "success",
+      title: isCreating ? "路线已新增" : "路线已修改",
+      message: `「${saved.title}」及详情已同步到「${selectedCategory.label}」。`,
+    });
+    await loadCategories();
+    setSavingKey("");
   };
 
   const moveRoute = async (routeId: string, direction: -1 | 1) => {
@@ -249,6 +277,7 @@ export function WanfaPage({ notify }: { notify: Notify }) {
         />
         <WanfaRouteRail
           category={selectedCategory}
+          details={details}
           onCreate={() => setRouteEditor({ mode: "create" })}
           onEdit={(route) => setRouteEditor({ mode: "edit", route })}
           onDelete={setDeleteRouteTarget}
@@ -291,6 +320,11 @@ export function WanfaPage({ notify }: { notify: Notify }) {
               mode={routeEditor.mode}
               categoryLabel={selectedCategory.label}
               initialRoute={routeEditor.route}
+              initialDetail={
+                routeEditor.route
+                  ? details.find((detail) => detail.key === routeEditor.route?.id)
+                  : undefined
+              }
               saving={savingKey === "route"}
               onSave={(input) => void saveRoute(input)}
               onClose={() => setRouteEditor(null)}
diff --git a/WonderQ-Admin/alembic/versions/0021_detail_records.py b/WonderQ-Admin/alembic/versions/0021_detail_records.py
new file mode 100644
index 0000000..e9e5c22
--- /dev/null
+++ b/WonderQ-Admin/alembic/versions/0021_detail_records.py
@@ -0,0 +1,97 @@
+"""Create independent detail presentation records for frontend pages.
+
+Revision ID: 0021_detail_records
+Revises: 0020_home_team_building_details
+"""
+
+from datetime import datetime
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects import postgresql
+
+
+revision = "0021_detail_records"
+down_revision = "0020_home_team_building_details"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        "DetailRecord",
+        sa.Column("id", sa.String(), nullable=False),
+        sa.Column("key", sa.String(), nullable=False),
+        sa.Column("eyebrow", sa.String(), nullable=False),
+        sa.Column("duration", sa.String(), nullable=False),
+        sa.Column("title", sa.String(), nullable=False),
+        sa.Column("subtitle", sa.Text(), nullable=False),
+        sa.Column("intro", sa.Text(), nullable=False),
+        sa.Column("highlights", postgresql.JSONB(astext_type=sa.Text()), nullable=False, server_default=sa.text("'[]'::jsonb")),
+        sa.Column("included", postgresql.JSONB(astext_type=sa.Text()), nullable=False, server_default=sa.text("'[]'::jsonb")),
+        sa.Column("excluded", postgresql.JSONB(astext_type=sa.Text()), nullable=False, server_default=sa.text("'[]'::jsonb")),
+        sa.Column("notes", postgresql.JSONB(astext_type=sa.Text()), nullable=False, server_default=sa.text("'[]'::jsonb")),
+        sa.Column("gallery", postgresql.JSONB(astext_type=sa.Text()), nullable=False, server_default=sa.text("'[]'::jsonb")),
+        sa.Column("isActive", sa.Boolean(), nullable=False, server_default=sa.text("true")),
+        sa.Column("sortOrder", sa.Integer(), nullable=False, server_default="0"),
+        sa.Column("createdAt", sa.DateTime(), nullable=False),
+        sa.Column("updatedAt", sa.DateTime(), nullable=False),
+        sa.PrimaryKeyConstraint("id"),
+        sa.UniqueConstraint("key"),
+    )
+    op.create_index("ix_DetailRecord_isActive", "DetailRecord", ["isActive"])
+    op.create_index("ix_DetailRecord_sortOrder", "DetailRecord", ["sortOrder"])
+
+    detail_table = sa.table(
+        "DetailRecord",
+        sa.column("id", sa.String()),
+        sa.column("key", sa.String()),
+        sa.column("eyebrow", sa.String()),
+        sa.column("duration", sa.String()),
+        sa.column("title", sa.String()),
+        sa.column("subtitle", sa.Text()),
+        sa.column("intro", sa.Text()),
+        sa.column("highlights", postgresql.JSONB()),
+        sa.column("included", postgresql.JSONB()),
+        sa.column("excluded", postgresql.JSONB()),
+        sa.column("notes", postgresql.JSONB()),
+        sa.column("gallery", postgresql.JSONB()),
+        sa.column("isActive", sa.Boolean()),
+        sa.column("sortOrder", sa.Integer()),
+        sa.column("createdAt", sa.DateTime()),
+        sa.column("updatedAt", sa.DateTime()),
+    )
+    routes = op.get_bind().execute(
+        sa.text('SELECT "id", "title", "subtitle", "image", "sortOrder" FROM "WanfaRoute" ORDER BY "sortOrder" ASC')
+    ).mappings().all()
+    timestamp = datetime(2026, 1, 1)
+    op.bulk_insert(
+        detail_table,
+        [
+            {
+                "id": f"detail-{route['id']}",
+                "key": route["id"],
+                "eyebrow": "玩法推荐",
+                "duration": "5天4晚",
+                "title": route["title"],
+                "subtitle": route["subtitle"],
+                "intro": route["subtitle"],
+                "highlights": ["核心景观串联", "小团出行，按同行人的节奏灵活调整"],
+                "included": ["行程内用车与接送服务"],
+                "excluded": ["往返大交通及个人消费"],
+                "notes": ["最终方案以出行日期、人数和资源确认结果为准。"],
+                "gallery": [route["image"]],
+                "isActive": True,
+                "sortOrder": route["sortOrder"],
+                "createdAt": timestamp,
+                "updatedAt": timestamp,
+            }
+            for route in routes
+        ],
+    )
+
+
+def downgrade() -> None:
+    op.drop_index("ix_DetailRecord_sortOrder", table_name="DetailRecord")
+    op.drop_index("ix_DetailRecord_isActive", table_name="DetailRecord")
+    op.drop_table("DetailRecord")
diff --git a/WonderQ-Admin/app/models.py b/WonderQ-Admin/app/models.py
index 88df43f..62bc461 100644
--- a/WonderQ-Admin/app/models.py
+++ b/WonderQ-Admin/app/models.py
@@ -191,6 +191,27 @@ class WanfaRoute(Base):
     category: Mapped[WanfaCategory] = relationship(back_populates="routes")
 
 
+class DetailRecord(Base):
+    __tablename__ = "DetailRecord"
+
+    id: Mapped[str] = mapped_column(String, primary_key=True, default=new_id)
+    key: Mapped[str] = mapped_column(String, nullable=False, unique=True)
+    eyebrow: Mapped[str] = mapped_column(String, nullable=False)
+    duration: Mapped[str] = mapped_column(String, nullable=False)
+    title: Mapped[str] = mapped_column(String, nullable=False)
+    subtitle: Mapped[str] = mapped_column(Text, nullable=False)
+    intro: Mapped[str] = mapped_column(Text, nullable=False)
+    highlights: Mapped[list[str]] = mapped_column(JSONB, default=list, nullable=False)
+    included: Mapped[list[str]] = mapped_column(JSONB, default=list, nullable=False)
+    excluded: Mapped[list[str]] = mapped_column(JSONB, default=list, nullable=False)
+    notes: Mapped[list[str]] = mapped_column(JSONB, default=list, nullable=False)
+    gallery: Mapped[list[str]] = mapped_column(JSONB, default=list, nullable=False)
+    isActive: Mapped[bool] = mapped_column(Boolean, default=True, nullable=False, index=True)
+    sortOrder: Mapped[int] = mapped_column(Integer, default=0, nullable=False, index=True)
+    createdAt: Mapped[datetime] = mapped_column(DateTime, default=utc_now, nullable=False)
+    updatedAt: Mapped[datetime] = mapped_column(DateTime, default=utc_now, onupdate=utc_now, nullable=False)
+
+
 class ConciergeAdvisor(Base):
     __tablename__ = "ConciergeAdvisor"
 
diff --git a/WonderQ-Admin/app/routers/admin.py b/WonderQ-Admin/app/routers/admin.py
index 0b374c4..f858215 100644
--- a/WonderQ-Admin/app/routers/admin.py
+++ b/WonderQ-Admin/app/routers/admin.py
@@ -17,6 +17,7 @@ from ..models import (
     AdminUser,
     AuditLog,
     ConciergeAdvisor,
+    DetailRecord,
     DemandFeatureCard,
     DemandForm,
     DemandHero,
@@ -57,9 +58,11 @@ from ..schemas import (
     WanfaRoutePatch,
     ConciergeAdvisorCreate,
     ConciergeAdvisorPatch,
+    DetailCreate,
+    DetailPatch,
 )
 from ..seed import create_media, reset_guizhou_content
-from ..serializers import concierge_advisor_dict, encode_value, lead_dict, model_dict
+from ..serializers import concierge_advisor_dict, detail_record_dict, encode_value, lead_dict, model_dict
 from .shared import site_config
 
 
@@ -820,6 +823,114 @@ def apply_concierge_order(items: list[ConciergeAdvisor], item_ids: list[str]) ->
     return ordered
 
 
+def detail_error(status_code: int, message: str, code: str, details: dict | None = None) -> None:
+    site_config_error(status_code, message, code, details)
+
+
+def detail_or_error(db: Session, detail_id: str) -> DetailRecord:
+    detail = db.get(DetailRecord, detail_id)
+    if not detail:
+        detail_error(404, "详情记录不存在", "DETAIL_NOT_FOUND", {"detailId": detail_id})
+    return detail
+
+
+def detail_key_conflict(db: Session, key: str, current_id: str | None = None) -> None:
+    existing = db.scalar(select(DetailRecord).where(DetailRecord.key == key))
+    if existing and existing.id != current_id:
+        detail_error(409, "详情 key 已存在", "DETAIL_KEY_EXISTS", {"key": key})
+
+
+def validate_detail_order(item_ids: list[str], current_ids: list[str]) -> None:
+    validate_wanfa_order(item_ids, current_ids, "DETAIL_REORDER_INVALID")
+
+
+@router.get("/details")
+def list_details(_user: AdminUser = Depends(require_admin), db: Session = Depends(get_db)):
+    details = db.scalars(select(DetailRecord).order_by(DetailRecord.sortOrder.asc())).all()
+    return {"details": [detail_record_dict(detail) for detail in details]}
+
+
+@router.patch("/details/reorder")
+def reorder_details(
+    body: WanfaReorderIn,
+    request: Request,
+    _user: AdminUser = Depends(require_admin),
+    db: Session = Depends(get_db),
+):
+    details = db.scalars(select(DetailRecord).order_by(DetailRecord.sortOrder.asc())).all()
+    validate_detail_order(body.itemIds, [detail.id for detail in details])
+    ordered = apply_wanfa_order(details, body.itemIds)
+    db.flush()
+    after = [detail_record_dict(detail) for detail in ordered]
+    audit(db, get_actor_id(request), "reorder", "detail_record", after=after)
+    db.commit()
+    return {"items": after}
+
+
+@router.get("/details/{detail_id}")
+def get_detail(detail_id: str, _user: AdminUser = Depends(require_admin), db: Session = Depends(get_db)):
+    return detail_record_dict(detail_or_error(db, detail_id))
+
+
+@router.post("/details", status_code=status.HTTP_201_CREATED)
+def create_detail(
+    body: DetailCreate,
+    request: Request,
+    _user: AdminUser = Depends(require_admin),
+    db: Session = Depends(get_db),
+):
+    detail_key_conflict(db, body.key)
+    detail = DetailRecord(
+        **body.model_dump(exclude={"sortOrder"}),
+        sortOrder=body.sortOrder if body.sortOrder is not None else next_site_sort_order(db, DetailRecord),
+    )
+    db.add(detail)
+    db.flush()
+    after = detail_record_dict(detail)
+    audit(db, get_actor_id(request), "create", "detail_record", detail.id, after=after)
+    db.commit()
+    return after
+
+
+@router.patch("/details/{detail_id}")
+def update_detail(
+    detail_id: str,
+    body: DetailPatch,
+    request: Request,
+    _user: AdminUser = Depends(require_admin),
+    db: Session = Depends(get_db),
+):
+    detail = detail_or_error(db, detail_id)
+    before = detail_record_dict(detail)
+    if "key" in body.model_fields_set:
+        detail_key_conflict(db, body.key or "", detail.id)
+    for field in body.model_fields_set:
+        setattr(detail, field, getattr(body, field))
+    db.flush()
+    after = detail_record_dict(detail)
+    audit(db, get_actor_id(request), "update", "detail_record", detail.id, after=after, before=before)
+    db.commit()
+    return after
+
+
+@router.delete("/details/{detail_id}")
+def delete_detail(
+    detail_id: str,
+    request: Request,
+    _user: AdminUser = Depends(require_admin),
+    db: Session = Depends(get_db),
+):
+    detail = detail_or_error(db, detail_id)
+    before = detail_record_dict(detail)
+    db.delete(detail)
+    remaining = db.scalars(select(DetailRecord).where(DetailRecord.id != detail.id).order_by(DetailRecord.sortOrder.asc())).all()
+    for index, item in enumerate(remaining):
+        item.sortOrder = index
+    audit(db, get_actor_id(request), "delete", "detail_record", detail.id, before=before)
+    db.commit()
+    return {"id": detail.id}
+
+
 @router.get("/wanfa/categories")
 def list_wanfa_categories(_user: AdminUser = Depends(require_admin), db: Session = Depends(get_db)):
     categories = db.scalars(
diff --git a/WonderQ-Admin/app/routers/public.py b/WonderQ-Admin/app/routers/public.py
index 96db66d..2f0aaeb 100644
--- a/WonderQ-Admin/app/routers/public.py
+++ b/WonderQ-Admin/app/routers/public.py
@@ -4,7 +4,7 @@ from sqlalchemy.orm import Session, selectinload
 from .shared import site_config
 from ..auth import create_customer_token, require_customer
 from ..database import get_db
-from ..models import ConciergeAdvisor, Customer, HomeExperience, HomeTeamBuilding, HomeWanfaRecommendation, HomeWildArchive, Lead, WanfaCategory
+from ..models import ConciergeAdvisor, Customer, DetailRecord, HomeExperience, HomeTeamBuilding, HomeWanfaRecommendation, HomeWildArchive, Lead, WanfaCategory
 from ..schemas import LeadCreateIn, PhoneLoginIn
 from ..serializers import (
     public_concierge_advisor_dict,
@@ -14,6 +14,7 @@ from ..serializers import (
     public_home_wanfa_recommendation_dict,
     public_home_wild_archive_detail_dict,
     public_home_wild_archive_dict,
+    public_detail_dict,
     public_wanfa_category_dict,
 )
 from ..wechat import WechatApiError, WechatConfigError, exchange_phone_code
@@ -53,6 +54,19 @@ def get_public_wanfa_categories(db: Session = Depends(get_db)):
     return {"categories": [public_wanfa_category_dict(category) for category in categories]}
 
 
+@router.get("/api/public/details/{detail_key}")
+def get_public_detail(detail_key: str, db: Session = Depends(get_db)):
+    detail = db.scalar(
+        select(DetailRecord).where(
+            DetailRecord.key == detail_key,
+            DetailRecord.isActive.is_(True),
+        )
+    )
+    if not detail:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="详情不存在")
+    return public_detail_dict(detail)
+
+
 @router.get("/api/public/concierge/advisors")
 def get_public_concierge_advisors(db: Session = Depends(get_db)):
     advisors = db.scalars(
diff --git a/WonderQ-Admin/app/schemas.py b/WonderQ-Admin/app/schemas.py
index 116adca..0c05730 100644
--- a/WonderQ-Admin/app/schemas.py
+++ b/WonderQ-Admin/app/schemas.py
@@ -172,6 +172,83 @@ class WanfaReorderIn(BaseModel):
         return [item.strip() for item in value]
 
 
+def normalize_detail_list(value: list[str]) -> list[str]:
+    return [normalize_required_text(item) for item in value if item.strip()]
+
+
+def normalize_detail_gallery(value: list[str]) -> list[str]:
+    normalized = [normalize_required_url(item) for item in value if item.strip()]
+    return normalized
+
+
+class DetailCreate(BaseModel):
+    key: str = Field(min_length=1, max_length=120)
+    eyebrow: str = Field(min_length=1, max_length=80)
+    duration: str = Field(min_length=1, max_length=80)
+    title: str = Field(min_length=1, max_length=160)
+    subtitle: str = Field(min_length=1, max_length=240)
+    intro: str = Field(min_length=1, max_length=4000)
+    highlights: list[str] = Field(default_factory=list)
+    included: list[str] = Field(default_factory=list)
+    excluded: list[str] = Field(default_factory=list)
+    notes: list[str] = Field(default_factory=list)
+    gallery: list[str] = Field(default_factory=list)
+    isActive: bool = True
+    sortOrder: int | None = Field(default=None, ge=0)
+
+    @field_validator("key", "eyebrow", "duration", "title", "subtitle", "intro")
+    @classmethod
+    def normalize_detail_text(cls, value: str) -> str:
+        return normalize_required_text(value)
+
+    @field_validator("highlights", "included", "excluded", "notes")
+    @classmethod
+    def normalize_detail_lists(cls, value: list[str]) -> list[str]:
+        return normalize_detail_list(value)
+
+    @field_validator("gallery")
+    @classmethod
+    def validate_detail_gallery(cls, value: list[str]) -> list[str]:
+        return normalize_detail_gallery(value)
+
+
+class DetailPatch(BaseModel):
+    key: str | None = Field(default=None, min_length=1, max_length=120)
+    eyebrow: str | None = Field(default=None, min_length=1, max_length=80)
+    duration: str | None = Field(default=None, min_length=1, max_length=80)
+    title: str | None = Field(default=None, min_length=1, max_length=160)
+    subtitle: str | None = Field(default=None, min_length=1, max_length=240)
+    intro: str | None = Field(default=None, min_length=1, max_length=4000)
+    highlights: list[str] | None = None
+    included: list[str] | None = None
+    excluded: list[str] | None = None
+    notes: list[str] | None = None
+    gallery: list[str] | None = None
+    isActive: bool | None = None
+    sortOrder: int | None = Field(default=None, ge=0)
+
+    @field_validator("key", "eyebrow", "duration", "title", "subtitle", "intro", mode="before")
+    @classmethod
+    def normalize_optional_detail_text(cls, value: str | None) -> str | None:
+        if value is None:
+            raise ValueError("字段不能为空")
+        return normalize_required_text(value)
+
+    @field_validator("highlights", "included", "excluded", "notes", mode="before")
+    @classmethod
+    def normalize_optional_detail_lists(cls, value: list[str] | None) -> list[str] | None:
+        if value is None:
+            raise ValueError("字段不能为空")
+        return normalize_detail_list(value)
+
+    @field_validator("gallery", mode="before")
+    @classmethod
+    def validate_optional_detail_gallery(cls, value: list[str] | None) -> list[str] | None:
+        if value is None:
+            raise ValueError("字段不能为空")
+        return normalize_detail_gallery(value)
+
+
 class HomeExperienceCreate(BaseModel):
     badge: str = Field(min_length=1, max_length=40)
     category: str = Field(min_length=1, max_length=80)
diff --git a/WonderQ-Admin/app/serializers.py b/WonderQ-Admin/app/serializers.py
index 5392a8e..5cd3af0 100644
--- a/WonderQ-Admin/app/serializers.py
+++ b/WonderQ-Admin/app/serializers.py
@@ -46,6 +46,26 @@ def public_wanfa_category_dict(category) -> dict:
     }
 
 
+def detail_record_dict(detail) -> dict:
+    return model_dict(detail)
+
+
+def public_detail_dict(detail) -> dict:
+    return {
+        "key": detail.key,
+        "eyebrow": detail.eyebrow,
+        "duration": detail.duration,
+        "title": detail.title,
+        "subtitle": detail.subtitle,
+        "intro": detail.intro,
+        "highlights": detail.highlights or [],
+        "included": detail.included or [],
+        "excluded": detail.excluded or [],
+        "notes": detail.notes or [],
+        "gallery": detail.gallery or [],
+    }
+
+
 def public_home_wanfa_recommendation_dict(item) -> dict:
     return {
         "id": item.id,
diff --git a/WonderQ-Admin/tests/test_details.py b/WonderQ-Admin/tests/test_details.py
new file mode 100644
index 0000000..308ce0b
--- /dev/null
+++ b/WonderQ-Admin/tests/test_details.py
@@ -0,0 +1,225 @@
+from datetime import datetime
+
+from fastapi.testclient import TestClient
+from pydantic import ValidationError
+import pytest
+
+from app.auth import require_admin
+from app.database import get_db
+from app.main import create_app
+from app.models import AdminUser, DetailRecord
+from app.schemas import DetailCreate
+
+
+class FakeScalarResult:
+    def __init__(self, items):
+        self.items = items
+
+    def all(self):
+        return self.items
+
+
+class FakeDb:
+    def __init__(self, *, scalar_results=None, scalar_values=None, get_results=None):
+        self.scalar_results = list(scalar_results or [])
+        self.scalar_values = list(scalar_values or [])
+        self.get_results = get_results or {}
+        self.added = []
+        self.deleted = []
+        self.committed = False
+
+    def scalars(self, _statement):
+        return FakeScalarResult(self.scalar_results.pop(0) if self.scalar_results else [])
+
+    def scalar(self, _statement):
+        return self.scalar_values.pop(0) if self.scalar_values else None
+
+    def get(self, model, item_id):
+        return self.get_results.get((model, item_id))
+
+    def add(self, item):
+        self.added.append(item)
+
+    def delete(self, item):
+        self.deleted.append(item)
+
+    def flush(self):
+        for item in self.added:
+            if not getattr(item, "id", None):
+                item.id = "detail-test-id"
+
+    def commit(self):
+        self.committed = True
+
+
+def make_admin_user():
+    return AdminUser(
+        id="admin-test",
+        email="admin@example.test",
+        name="Admin",
+        role="admin",
+        passwordHash="not-used",
+        isActive=True,
+    )
+
+
+def make_detail(**overrides):
+    values = {
+        "id": "detail-family-water",
+        "key": "family-water",
+        "eyebrow": "玩法推荐",
+        "duration": "5天4晚",
+        "title": "亲子玩水",
+        "subtitle": "贵州·轻松节奏与自然课堂",
+        "intro": "沿着贵州山地的自然纹理深入探索。",
+        "highlights": ["核心景观串联"],
+        "included": ["行程内用车与接送服务"],
+        "excluded": ["往返大交通"],
+        "notes": ["请准备轻便雨具。"],
+        "gallery": ["https://example.test/family-water.jpg"],
+        "isActive": True,
+        "sortOrder": 0,
+        "createdAt": datetime(2026, 1, 1),
+        "updatedAt": datetime(2026, 1, 2),
+    }
+    values.update(overrides)
+    return DetailRecord(**values)
+
+
+def authenticated_app(fake_db):
+    app = create_app()
+    app.dependency_overrides[get_db] = lambda: fake_db
+    app.dependency_overrides[require_admin] = make_admin_user
+    return app
+
+
+def test_detail_schema_trims_text_and_array_items():
+    detail = DetailCreate(
+        key=" family-water ",
+        eyebrow=" 玩法推荐 ",
+        duration=" 5天4晚 ",
+        title=" 亲子玩水 ",
+        subtitle=" 贵州·轻松节奏与自然课堂 ",
+        intro=" 沿着山地深入探索。 ",
+        highlights=[" 核心景观串联 ", "", " 小团出行 "],
+        included=[" 行程内用车 "],
+        excluded=[" 往返大交通 "],
+        notes=[" 请准备雨具。 "],
+        gallery=[" https://example.test/family-water.jpg "],
+    )
+
+    assert detail.key == "family-water"
+    assert detail.highlights == ["核心景观串联", "小团出行"]
+    assert detail.gallery == ["https://example.test/family-water.jpg"]
+
+
+def test_detail_schema_rejects_invalid_gallery_url():
+    with pytest.raises(ValidationError):
+        DetailCreate(
+            key="family-water",
+            eyebrow="玩法推荐",
+            duration="5天4晚",
+            title="亲子玩水",
+            subtitle="贵州路线",
+            intro="介绍",
+            highlights=["亮点"],
+            included=["包含"],
+            excluded=["不含"],
+            notes=["注意"],
+            gallery=["not-a-url"],
+        )
+
+
+def test_public_detail_returns_frontend_contract_without_auth():
+    fake_db = FakeDb(scalar_values=[make_detail()])
+    app = create_app()
+    app.dependency_overrides[get_db] = lambda: fake_db
+
+    try:
+        response = TestClient(app).get("/api/public/details/family-water")
+    finally:
+        app.dependency_overrides.clear()
+
+    assert response.status_code == 200
+    assert response.json() == {
+        "key": "family-water",
+        "eyebrow": "玩法推荐",
+        "duration": "5天4晚",
+        "title": "亲子玩水",
+        "subtitle": "贵州·轻松节奏与自然课堂",
+        "intro": "沿着贵州山地的自然纹理深入探索。",
+        "highlights": ["核心景观串联"],
+        "included": ["行程内用车与接送服务"],
+        "excluded": ["往返大交通"],
+        "notes": ["请准备轻便雨具。"],
+        "gallery": ["https://example.test/family-water.jpg"],
+    }
+
+
+def test_public_detail_returns_not_found_for_missing_key():
+    fake_db = FakeDb(scalar_values=[None])
+    app = create_app()
+    app.dependency_overrides[get_db] = lambda: fake_db
+
+    try:
+        response = TestClient(app).get("/api/public/details/missing")
+    finally:
+        app.dependency_overrides.clear()
+
+    assert response.status_code == 404
+
+
+def test_public_detail_returns_not_found_for_inactive_record():
+    # The query filters inactive rows, so an inactive match is represented as no scalar result.
+    fake_db = FakeDb(scalar_values=[None])
+    app = create_app()
+    app.dependency_overrides[get_db] = lambda: fake_db
+
+    try:
+        response = TestClient(app).get("/api/public/details/family-water")
+    finally:
+        app.dependency_overrides.clear()
+
+    assert response.status_code == 404
+
+
+def test_admin_detail_list_includes_inactive_records():
+    fake_db = FakeDb(scalar_results=[[make_detail(isActive=False)]])
+    app = authenticated_app(fake_db)
+
+    try:
+        response = TestClient(app).get("/api/admin/details")
+    finally:
+        app.dependency_overrides.clear()
+
+    assert response.status_code == 200
+    assert response.json()["details"][0]["isActive"] is False
+
+
+def test_admin_detail_create_normalizes_key_and_appends():
+    fake_db = FakeDb(scalar_values=[None, 2])
+    app = authenticated_app(fake_db)
+
+    try:
+        response = TestClient(app).post(
+            "/api/admin/details",
+            json={
+                "key": " family-water ",
+                "eyebrow": "玩法推荐",
+                "duration": "5天4晚",
+                "title": "亲子玩水",
+                "subtitle": "贵州路线",
+                "intro": "沿着山地深入探索。",
+                "highlights": ["核心景观串联"],
+                "included": [],
+                "excluded": [],
+                "notes": [],
+                "gallery": ["https://example.test/family-water.jpg"],
+            },
+        )
+    finally:
+        app.dependency_overrides.clear()
+
+    assert response.status_code == 201
+    assert response.json()["key"] == "family-water"
+    assert fake_db.added[0].sortOrder == 3
diff --git a/WonderQ-MiniAPP/src/lib/api.ts b/WonderQ-MiniAPP/src/lib/api.ts
index ad48a97..04e201b 100644
--- a/WonderQ-MiniAPP/src/lib/api.ts
+++ b/WonderQ-MiniAPP/src/lib/api.ts
@@ -3,6 +3,7 @@ import type {
   AuthSession,
   PhoneLoginPayload,
   PublicConciergeResponse,
+  PublicDetail,
   PublicHomeResponse,
   PublicHomeTeamBuildingDetail,
   PublicHomeWildArchiveDetail,
@@ -98,6 +99,10 @@ export async function fetchPublicTeamBuildingDetail(teamBuildingId: string) {
   return request<PublicHomeTeamBuildingDetail>(`/api/public/home/team-buildings/${encodeURIComponent(teamBuildingId)}`);
 }
 
+export async function fetchPublicDetail(key: string) {
+  return request<PublicDetail>(`/api/public/details/${encodeURIComponent(key)}`);
+}
+
 export async function createPublicLead(payload: PublicLeadPayload) {
   return request<{ id: string; status: string }>("/api/public/leads", {
     method: "POST",
diff --git a/WonderQ-MiniAPP/src/lib/data.ts b/WonderQ-MiniAPP/src/lib/data.ts
index dbbe896..3aeddee 100644
--- a/WonderQ-MiniAPP/src/lib/data.ts
+++ b/WonderQ-MiniAPP/src/lib/data.ts
@@ -117,3 +117,7 @@ export const fallbackData: AppData = {
 export function getSubmitErrorMessage(error: unknown) {
   return error instanceof Error && error.message ? error.message : "提交失败，请稍后再试。";
 }
+
+export function formatWan(value: number) {
+  return Number.isFinite(value) ? value.toFixed(2).replace(/\.00$/, "") : "0";
+}
diff --git a/WonderQ-MiniAPP/src/lib/navigation.ts b/WonderQ-MiniAPP/src/lib/navigation.ts
index 3ce76d6..34bebf9 100644
--- a/WonderQ-MiniAPP/src/lib/navigation.ts
+++ b/WonderQ-MiniAPP/src/lib/navigation.ts
@@ -43,6 +43,10 @@ export function goTeamBuildingDetail(teamBuildingId: string) {
   go("/pages/team-buildings/detail", { id: teamBuildingId });
 }
 
+export function goWanfaRouteDetail(routeId: string) {
+  go("/pages/detail/index", { routeId });
+}
+
 export function goMine() {
   if (requireLogin("/pages/mine/index")) {
     goRoot("/pages/mine/index");
diff --git a/WonderQ-MiniAPP/src/lib/types.ts b/WonderQ-MiniAPP/src/lib/types.ts
index 16b87f2..4c1a158 100644
--- a/WonderQ-MiniAPP/src/lib/types.ts
+++ b/WonderQ-MiniAPP/src/lib/types.ts
@@ -108,6 +108,20 @@ export type PublicWanfaResponse = {
   categories: PublicWanfaCategory[];
 };
 
+export type PublicDetail = {
+  key: string;
+  eyebrow: string;
+  duration: string;
+  title: string;
+  subtitle: string;
+  intro: string;
+  highlights: string[];
+  included: string[];
+  excluded: string[];
+  notes: string[];
+  gallery: string[];
+};
+
 export type PublicConciergeDetail = {
   icon: string;
   label: string;
diff --git a/WonderQ-MiniAPP/src/pages.json b/WonderQ-MiniAPP/src/pages.json
index 65305fd..cba216f 100644
--- a/WonderQ-MiniAPP/src/pages.json
+++ b/WonderQ-MiniAPP/src/pages.json
@@ -13,6 +13,12 @@
         "navigationBarTitleText": "玩法"
       }
     },
+    {
+      "path": "pages/detail/index",
+      "style": {
+        "navigationBarTitleText": "路线详情"
+      }
+    },
     {
       "path": "pages/concierge/index",
       "style": {
diff --git a/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue b/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue
index 70b20b5..9b79fb8 100644
--- a/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue
+++ b/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue
@@ -1,49 +1,32 @@
 <template>
-  <view
-    class="relative z-10 -mt-4 mx-3 rounded-[12px] border border-[#e8e2da] bg-white p-4 shadow-[0_8px_24px_rgba(63,48,37,0.08)]">
-    <text class="block text-[22px] font-bold leading-7 text-[#24211f]">{{ presentation.title }}</text>
-
-    <view class="mt-4 flex items-end justify-between gap-3 border-t border-[#f0ebe5] pt-3">
-      <view>
-        <text class="block text-[11px] text-[#a69d95]">参考起价</text>
-        <view class="mt-1 flex items-baseline gap-1">
-          <text class="text-[25px] font-bold leading-none text-[#e96635]">¥{{ formatWan(product.price) }}</text>
-          <text class="text-[11px] text-[#8f857d]">万起/人</text>
-        </view>
-      </view>
+  <view class="relative z-10 -mt-5 mx-3 rounded-[14px] bg-white px-4 py-5 shadow-[0_8px_24px_rgba(63,48,37,0.08)]">
+    <view class="flex flex-wrap items-center gap-2">
+      <text class="rounded-full bg-[#eaf6f1] px-2.5 py-1 text-[10px] font-semibold text-[#16806d]">
+        {{ presentation.eyebrow }}
+      </text>
+      <text class="rounded-full bg-[#f3f0eb] px-2.5 py-1 text-[10px] font-medium text-[#746c64]">
+        {{ presentation.duration }}
+      </text>
     </view>
-
-    <view class="mt-4 grid grid-cols-3 gap-2">
-      <view v-for="item in quickFacts" :key="item.label" class="rounded-[8px] bg-[#f8f6f2] px-2 py-2.5">
-        <text class="block text-[10px] text-[#a39a91]">{{ item.label }}</text>
-        <text class="mt-1 block truncate text-[12px] font-medium text-[#3d3833]">{{ item.value }}</text>
+    <text class="mt-3 block text-[24px] font-bold leading-8 text-[#24211f]">{{ presentation.title }}</text>
+    <text class="mt-2 block text-[13px] leading-6 text-[#756d65]">{{ presentation.subtitle }}</text>
+    <view class="mt-4 grid grid-cols-2 gap-2 border-t border-[#f0ebe5] pt-3">
+      <view class="rounded-[8px] bg-[#f8f6f2] px-3 py-2.5">
+        <text class="block text-[10px] text-[#a39a91]">路线状态</text>
+        <text class="mt-1 block text-[12px] font-medium text-[#3d3833]">可咨询规划</text>
+      </view>
+      <view class="rounded-[8px] bg-[#f8f6f2] px-3 py-2.5">
+        <text class="block text-[10px] text-[#a39a91]">详情图片</text>
+        <text class="mt-1 block text-[12px] font-medium text-[#3d3833]">{{ presentation.gallery.length }} 张</text>
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { toRefs } from "vue";
-import { formatWan } from "@/lib/data";
-import type { Product } from "@/lib/types";
 import type { DetailPresentation } from "./detailPresentation";
 
-const props = defineProps<{
-  product: Product;
-  meta: { location: string; summary: string };
+defineProps<{
   presentation: DetailPresentation;
-  favorite: boolean;
 }>();
-
-defineEmits<{
-  toggleFavorite: [];
-}>();
-
-const quickFacts = [
-  { label: "出行方式", value: "小包团" },
-  { label: "适合人数", value: "2-8人" },
-  { label: "服务方式", value: "管家跟进" },
-];
-
-const { product, meta, presentation, favorite } = toRefs(props);
 </script>
diff --git a/WonderQ-MiniAPP/src/pages/detail/components/detailPresentation.ts b/WonderQ-MiniAPP/src/pages/detail/components/detailPresentation.ts
index 11a3f6f..472dc97 100644
--- a/WonderQ-MiniAPP/src/pages/detail/components/detailPresentation.ts
+++ b/WonderQ-MiniAPP/src/pages/detail/components/detailPresentation.ts
@@ -1,93 +1,96 @@
-import { stripTitle } from "@/lib/data";
-import type { Product } from "@/lib/types";
+import { playCategories, type PlayRoute } from "../../play/components/playData";
+import type { PublicDetail } from "@/lib/types";
 
-export type DetailPresentation = {
-  eyebrow: string;
-  duration: string;
-  title: string;
-  subtitle: string;
-  intro: string;
-  highlights: string[];
-  included: string[];
-  excluded: string[];
-  notes: string[];
-  gallery: string[];
-};
+export type DetailPresentation = PublicDetail;
 
-const fallbackGallery = [
-  "https://www.zurnal24.si/media/img/5e/d5/9526a56dba168aa136f3.jpeg",
-  "https://genk.mediacdn.vn/139269124445442048/2024/4/27/10-23-sinkhole-1714189653945948438879.jpg",
-  "https://p2.cri.cn/M00/89/21/rBABC2aHnWeACxj5AAAAAAAAAAA159.1000x566.jpg",
-  "https://dimg04.c-ctrip.com/images/0EQ5712000ca7t504EC0E_W_640_10000.jpg?proc=autoorient",
+const sharedGallery = [
+  "https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&fm=jpg&q=80&w=1200&h=800",
+  "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&fm=jpg&q=80&w=1200&h=800",
 ];
 
-function getDuration(title: string) {
-  return title.match(/\d+天\d+晚/)?.[0] ?? "5天4晚";
-}
-
-function getTextBlocks(product: Product) {
-  return (product.detailSections ?? [])
-    .flatMap((section) => section.blocks)
-    .filter(
-      (block): block is { type: "text"; text: string } => block.type === "text",
-    )
-    .map((block) => block.text.trim())
-    .filter(Boolean);
-}
-
-export function createDetailPresentation(product: Product): DetailPresentation {
-  const title = stripTitle(product.title);
-  const combinedText = `${product.title} ${product.summary ?? ""}`;
-  const isCaveRoute =
-    combinedText.includes("洞") || combinedText.includes("探险");
-  const detailTexts = getTextBlocks(product);
-  const apiImages = (product.images ?? [])
-    .slice()
-    .sort((left, right) => left.sortOrder - right.sortOrder)
-    .map((image) => image.url.trim())
-    .filter(Boolean);
-
+function createRouteFallback(route: PlayRoute): DetailPresentation {
   return {
-    eyebrow: product.tags[0] || "玩法推荐",
-    duration: getDuration(product.title),
-    title: isCaveRoute ? "地心探险大环线" : title,
-    subtitle:
-      product.subtitle || `${product.destinationName || "贵州"}·小包团路线`,
-    intro:
-      detailTexts[0] ||
-      product.summary ||
-      "沿着贵州山地的自然纹理深入探索，把核心景观、在地体验和轻户外节奏安排在一条线路里。",
-    highlights: isCaveRoute
-      ? [
-          "深入喀斯特洞穴与地下河，安排专业向导陪同",
-          "小团出行，按同行人的体力和兴趣灵活调整",
-          "山野咖啡与自然景观穿插，留出松弛的停留时间",
-          "行程前由服务管家确认天气、装备和接送细节",
-        ]
-      : [
-          "核心景观串联，减少无效往返和重复换乘",
-          "小团出行，按同行人的节奏灵活调整",
-          "在地体验与舒适住宿合理衔接",
-          "行程前由服务管家确认天气、装备和接送细节",
-        ],
-    included: [
-      "行程内用车与接送服务",
-      "列明景点门票和体验项目",
-      "服务管家行前确认与途中跟进",
-      "行程内住宿及方案中注明的服务",
-    ],
-    excluded: [
-      "往返大交通及个人消费",
-      "未列明餐食和自选体验",
-      "因个人原因产生的额外费用",
+    key: route.id,
+    eyebrow: "玩法推荐",
+    duration: "5天4晚",
+    title: route.title,
+    subtitle: route.subtitle,
+    intro: `围绕${route.title}安排一段节奏舒适的贵州探索，把自然景观、在地体验和小团服务串成一条完整路线。`,
+    highlights: [
+      "核心景观串联，减少无效往返和重复换乘",
+      "小团出行，按同行人的节奏灵活调整",
+      "在地体验与舒适停留合理衔接",
+      "行程前确认天气、装备和接送细节",
     ],
+    included: ["行程内用车与接送服务", "方案中注明的景点门票和体验项目", "行前服务管家确认与途中跟进"],
+    excluded: ["往返大交通及个人消费", "未列明餐食和自选体验", "因个人原因产生的额外费用"],
     notes: [
       "贵州多山多雨，请准备防滑鞋、轻便雨具和薄外套。",
-      "溶洞、漂流、徒步等体验会根据天气和同行人体力适当调整。",
-      "页面价格为参考起价，最终方案以出行日期、人数和资源确认结果为准。",
+      "户外体验会根据天气和同行人体力适当调整。",
+      "最终行程以出行日期、人数和资源确认结果为准。",
     ],
-    gallery: Array.from(
-      new Set([product.image, ...apiImages, ...fallbackGallery]),
-    ).slice(0, 6),
+    gallery: Array.from(new Set([route.image, ...sharedGallery])).slice(0, 5),
+  };
+}
+
+const routeFallbacks = new Map(
+  playCategories.flatMap((category) => category.routes).map((route) => [route.id, createRouteFallback(route)]),
+);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object";
+}
+
+function cleanText(value: unknown) {
+  return typeof value === "string" && value.trim() ? value.trim() : "";
+}
+
+function cleanList(value: unknown) {
+  return Array.isArray(value)
+    ? value.map((item) => cleanText(item)).filter(Boolean)
+    : [];
+}
+
+function cleanGallery(value: unknown) {
+  return Array.from(
+    new Set(
+      cleanList(value).filter((item) => /^https?:\/\//i.test(item)),
+    ),
+  );
+}
+
+export function findWanfaRouteDetailFallback(routeId: string) {
+  return routeFallbacks.get(routeId) ?? null;
+}
+
+export function normalizeDetailPresentation(
+  value: unknown,
+  fallback: DetailPresentation | null = null,
+): DetailPresentation | null {
+  const source = isRecord(value) ? value : {};
+  const key = cleanText(source.key) || fallback?.key || "";
+  const eyebrow = cleanText(source.eyebrow) || fallback?.eyebrow || "";
+  const duration = cleanText(source.duration) || fallback?.duration || "";
+  const title = cleanText(source.title) || fallback?.title || "";
+  const subtitle = cleanText(source.subtitle) || fallback?.subtitle || "";
+  const intro = cleanText(source.intro) || fallback?.intro || "";
+  const gallery = cleanGallery(source.gallery);
+
+  if (!key || !eyebrow || !duration || !title || !subtitle || !intro) {
+    return fallback;
+  }
+
+  return {
+    key,
+    eyebrow,
+    duration,
+    title,
+    subtitle,
+    intro,
+    highlights: cleanList(source.highlights).length ? cleanList(source.highlights) : fallback?.highlights ?? [],
+    included: cleanList(source.included).length ? cleanList(source.included) : fallback?.included ?? [],
+    excluded: cleanList(source.excluded).length ? cleanList(source.excluded) : fallback?.excluded ?? [],
+    notes: cleanList(source.notes).length ? cleanList(source.notes) : fallback?.notes ?? [],
+    gallery: gallery.length ? gallery : fallback?.gallery ?? [],
   };
 }
diff --git a/WonderQ-MiniAPP/src/pages/detail/index.vue b/WonderQ-MiniAPP/src/pages/detail/index.vue
index 92279d7..14d7217 100644
--- a/WonderQ-MiniAPP/src/pages/detail/index.vue
+++ b/WonderQ-MiniAPP/src/pages/detail/index.vue
@@ -1,25 +1,48 @@
 <template>
   <view class="wq-phone flex h-screen flex-col bg-[#f5f3ef]">
     <scroll-view scroll-y class="min-h-0 flex-1">
-      <DetailHero :image="product.image" :presentation="presentation" @back="goBack()" />
-
-      <DetailOverviewCard :product="product" :meta="meta" :presentation="presentation" :favorite="favorite"
-        @toggle-favorite="toggleFavorite" />
-
-      <view class="mt-4">
-        <DetailInfoCard title="详细介绍" eyebrow="ABOUT THIS ROUTE" :paragraphs="introParagraphs" />
-        <DetailInfoCard title="行程亮点" eyebrow="HIGHLIGHTS" :bullets="presentation.highlights" />
-        <DetailInfoCard title="费用明细" eyebrow="PRICE DETAILS" :paragraphs="priceParagraphs"
-          :included="presentation.included" :excluded="presentation.excluded" />
-        <DetailInfoCard title="注意事项" eyebrow="NOTES" :paragraphs="presentation.notes" />
-        <DetailInfoCard title="用户评价" eyebrow="REVIEWS" empty />
+      <view v-if="loading" class="flex min-h-[520px] items-center justify-center px-8 text-center">
+        <view>
+          <view class="mx-auto h-8 w-8 animate-pulse rounded-full bg-[#d8e8e1]" />
+          <text class="mt-3 block text-[13px] text-[#8c857e]">正在加载路线详情…</text>
+        </view>
       </view>
 
-      <DetailMediaGallery :images="presentation.gallery" />
+      <view v-else-if="!presentation" class="flex min-h-[520px] flex-col items-center justify-center px-8 text-center">
+        <text class="text-[16px] font-semibold text-[#2c2824]">路线详情暂时不可用</text>
+        <text class="mt-2 text-[12px] leading-5 text-[#8c857e]">{{ errorMessage || "暂未配置这条路线的详情内容。" }}</text>
+        <button
+          type="button"
+          class="mt-5 rounded-[10px] border border-[#d9d1c7] bg-white px-5 py-2.5 text-[13px] font-medium text-[#3d3731]"
+          @click="loadDetail"
+        >
+          重试
+        </button>
+      </view>
+
+      <view v-else>
+        <view v-if="usingFallback" class="bg-[#fff8e8] px-4 py-2 text-[11px] leading-5 text-[#8c6a2c]">
+          当前显示本地模拟详情，服务恢复后可重试获取最新内容。
+        </view>
+
+        <DetailHero :image="heroImage" :presentation="presentation" @back="goBack()" />
+
+        <DetailOverviewCard :presentation="presentation" />
+
+        <view class="mt-4">
+          <DetailInfoCard title="详细介绍" eyebrow="ABOUT THIS ROUTE" :paragraphs="[presentation.intro]" />
+          <DetailInfoCard title="行程亮点" eyebrow="HIGHLIGHTS" :bullets="presentation.highlights" />
+          <DetailInfoCard title="费用明细" eyebrow="PRICE DETAILS" :paragraphs="priceParagraphs"
+            :included="presentation.included" :excluded="presentation.excluded" />
+          <DetailInfoCard title="注意事项" eyebrow="NOTES" :paragraphs="presentation.notes" />
+          <DetailInfoCard title="用户评价" eyebrow="REVIEWS" empty />
+        </view>
+
+        <DetailMediaGallery :images="presentation.gallery" />
+      </view>
     </scroll-view>
 
-    <DetailActionBar :price="1.68" :favorite="favorite" @call="goCall" @concierge="goConcierge"
-      @booking="goBooking(product)" />
+    <DetailActionBar :price="1.68" :favorite="false" @call="goCall" @concierge="goConcierge" />
 
     <ConciergeContactSheet :open="Boolean(selectedAdvisor)" :advisor="selectedAdvisor" @close="handleConciergeClosed" />
   </view>
@@ -27,74 +50,29 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { onLoad, onShareAppMessage, onShow } from "@dcloudio/uni-app";
+import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
+import ConciergeContactSheet from "@/components/ConciergeContactSheet.vue";
+import { fetchPublicDetail } from "@/lib/api";
+import { goBack } from "@/lib/navigation";
+import { SUPPORT_PHONE } from "@/lib/types";
+import type { ConciergeAdvisor } from "../concierge/components/conciergeTypes";
 import DetailActionBar from "./components/DetailActionBar.vue";
 import DetailHero from "./components/DetailHero.vue";
 import DetailInfoCard from "./components/DetailInfoCard.vue";
 import DetailMediaGallery from "./components/DetailMediaGallery.vue";
 import DetailOverviewCard from "./components/DetailOverviewCard.vue";
-import ConciergeContactSheet from "@/components/ConciergeContactSheet.vue";
-import type { ConciergeAdvisor } from "../concierge/components/conciergeTypes";
-import { createDetailPresentation } from "./components/detailPresentation";
-import { getDetailMeta, getProductDetailSections, productKey } from "@/lib/data";
-import { goBack, goBooking } from "@/lib/navigation";
-import { findProduct, isProductFavorite, loadAppData, rememberProduct, toggleFavoriteProduct } from "@/lib/store";
-import type { Product } from "@/lib/types";
+import {
+  findWanfaRouteDetailFallback,
+  normalizeDetailPresentation,
+  type DetailPresentation,
+} from "./components/detailPresentation";
 
-const product = ref<Product>(findProduct());
-
-onLoad((query) => {
-  product.value = findProduct(typeof query?.product === "string" ? decodeURIComponent(query.product) : undefined);
-  rememberProduct(product.value);
-});
-
-onShow(() => {
-  void loadAppData();
-});
-
-onShareAppMessage(() => ({
-  title: presentation.value.title,
-  path: `/pages/detail/index?product=${encodeURIComponent(productKey(product.value))}`,
-  imageUrl: product.value.image,
-}));
-
-const meta = computed(() => getDetailMeta(product.value));
-const presentation = computed(() => createDetailPresentation(product.value));
-const detailSections = computed(() => getProductDetailSections(product.value, meta.value));
-const favorite = computed(() => isProductFavorite(product.value));
-
-const introParagraphs = computed(() => getSectionTexts(["overview", "itinerary"], presentation.value.intro));
-const priceParagraphs = computed(() => getSectionTexts(["service", "price"], "最终价格会根据出行日期、人数、酒店和体验资源确认后生成。"));
-
-function getSectionTexts(keys: string[], fallback: string) {
-  const paragraphs = detailSections.value
-    .filter((section) => keys.includes(section.key))
-    .flatMap((section) => section.blocks)
-    .filter((block): block is { type: "text"; text: string } => block.type === "text")
-    .map((block) => block.text.trim())
-    .filter(Boolean);
-  return paragraphs.length ? paragraphs : [fallback];
-}
-
-function toggleFavorite() {
-  const wasFavorite = favorite.value;
-  toggleFavoriteProduct(product.value);
-  uni.showToast({ title: wasFavorite ? "已取消收藏" : "已收藏", icon: "none" });
-}
-
-
-
-function goCall() {
-  uni.makePhoneCall({ phoneNumber: '13800000000' });
-}
-
-function goConcierge() {
-  selectedAdvisor.value = conciergeAdvisor;
-}
-
-function handleConciergeClosed() {
-  selectedAdvisor.value = null;
-}
+const routeId = ref("");
+const presentation = ref<DetailPresentation | null>(null);
+const loading = ref(true);
+const usingFallback = ref(false);
+const errorMessage = ref("");
+const selectedAdvisor = ref<ConciergeAdvisor | null>(null);
 
 const conciergeAdvisor: ConciergeAdvisor = {
   avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&fm=jpg&q=80&w=240&h=240",
@@ -107,5 +85,70 @@ const conciergeAdvisor: ConciergeAdvisor = {
   ],
 };
 
-const selectedAdvisor = ref<ConciergeAdvisor | null>(null);
+const heroImage = computed(() => presentation.value?.gallery[0] ?? "");
+const priceParagraphs = computed(() => ["最终价格会根据出行日期、人数和资源确认结果生成。"]);
+
+function parseRouteId(value: unknown) {
+  if (typeof value !== "string") return "";
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+async function loadDetail() {
+  if (!routeId.value) {
+    presentation.value = null;
+    errorMessage.value = "缺少路线 ID，无法读取详情。";
+    loading.value = false;
+    return;
+  }
+
+  loading.value = true;
+  errorMessage.value = "";
+  usingFallback.value = false;
+  const fallback = findWanfaRouteDetailFallback(routeId.value);
+
+  try {
+    const response = await fetchPublicDetail(routeId.value);
+    const normalized = normalizeDetailPresentation(response, fallback);
+    if (normalized) {
+      presentation.value = normalized;
+      usingFallback.value = normalized === fallback;
+    } else {
+      presentation.value = null;
+      errorMessage.value = "详情内容为空。";
+    }
+  } catch (cause) {
+    presentation.value = fallback;
+    usingFallback.value = Boolean(fallback);
+    errorMessage.value = cause instanceof Error ? cause.message : "路线详情接口暂时不可用。";
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goCall() {
+  uni.makePhoneCall({ phoneNumber: SUPPORT_PHONE });
+}
+
+function goConcierge() {
+  selectedAdvisor.value = conciergeAdvisor;
+}
+
+function handleConciergeClosed() {
+  selectedAdvisor.value = null;
+}
+
+onLoad((query) => {
+  routeId.value = parseRouteId(query?.routeId);
+  void loadDetail();
+});
+
+onShareAppMessage(() => ({
+  title: presentation.value?.title ?? "路线详情",
+  path: `/pages/detail/index?routeId=${encodeURIComponent(routeId.value)}`,
+  imageUrl: heroImage.value,
+}));
 </script>
diff --git a/WonderQ-MiniAPP/src/pages/home/index.vue b/WonderQ-MiniAPP/src/pages/home/index.vue
index 7c18eb2..3a295c6 100644
--- a/WonderQ-MiniAPP/src/pages/home/index.vue
+++ b/WonderQ-MiniAPP/src/pages/home/index.vue
@@ -26,7 +26,13 @@ import type { HomeExperience } from "./components/homeExperienceData";
 import type { HomeTeamBuilding as HomeTeamBuildingItem } from "./components/homeTeamBuildingData";
 import type { HomeWildArchive } from "./components/homeWildArchivesData";
 import type { HomeWanfaRecommendation } from "./components/homeWanfaRecommendationData";
-import { goDemand, goTeamBuildingDetail, goWildArchiveDetail, goWildArchives } from "@/lib/navigation";
+import {
+  goDemand,
+  goTeamBuildingDetail,
+  goWanfaRouteDetail,
+  goWildArchiveDetail,
+  goWildArchives,
+} from "@/lib/navigation";
 import { appState, homeContentState, loadAppData, loadHomeContent } from "@/lib/store";
 
 const vehicleOptions = computed(() => appState.data.vehicleOptions);
@@ -45,6 +51,11 @@ function openExperience(item: HomeExperience) {
 }
 
 function openWanfaRecommendation(item: HomeWanfaRecommendation) {
+  const route = item.routes[0];
+  if (route) {
+    goWanfaRouteDetail(route.id);
+    return;
+  }
   goDemand(item.label);
 }
 
diff --git a/WonderQ-MiniAPP/src/pages/play/index.vue b/WonderQ-MiniAPP/src/pages/play/index.vue
index 36bef98..ee81202 100644
--- a/WonderQ-MiniAPP/src/pages/play/index.vue
+++ b/WonderQ-MiniAPP/src/pages/play/index.vue
@@ -34,7 +34,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { fetchPublicWanfaCategories } from "@/lib/api";
-import { goDemand } from "@/lib/navigation";
+import { goWanfaRouteDetail } from "@/lib/navigation";
 import PlayCategorySidebar from "./components/PlayCategorySidebar.vue";
 import PlayRouteCard from "./components/PlayRouteCard.vue";
 import { normalizePlayCategories, type PlayCategory, type PlayRoute } from "./components/playTypes";
@@ -50,7 +50,7 @@ function selectCategory(id: string) {
 }
 
 function selectRoute(route: PlayRoute) {
-  goDemand(route.demandKeyword);
+  goWanfaRouteDetail(route.id);
 }
 
 async function loadCategories() {
diff --git a/WonderQ-MiniAPP/tests/detail-data.test.ts b/WonderQ-MiniAPP/tests/detail-data.test.ts
new file mode 100644
index 0000000..823d7e5
--- /dev/null
+++ b/WonderQ-MiniAPP/tests/detail-data.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  findWanfaRouteDetailFallback,
+  normalizeDetailPresentation,
+} from "@/pages/detail/components/detailPresentation";
+
+describe("wanfa route detail presentation", () => {
+  it("normalizes a complete public response", () => {
+    expect(
+      normalizeDetailPresentation({
+        key: "family-water",
+        eyebrow: " 玩法推荐 ",
+        duration: " 5天4晚 ",
+        title: " 亲子玩水 ",
+        subtitle: " 贵州路线 ",
+        intro: " 沿着山地深入探索。 ",
+        highlights: [" 核心景观串联 ", "", " 小团出行 "],
+        included: [" 行程内用车 "],
+        excluded: [" 往返大交通 "],
+        notes: [" 请准备雨具。 "],
+        gallery: [" https://example.test/cover.jpg "],
+      }),
+    ).toEqual({
+      key: "family-water",
+      eyebrow: "玩法推荐",
+      duration: "5天4晚",
+      title: "亲子玩水",
+      subtitle: "贵州路线",
+      intro: "沿着山地深入探索。",
+      highlights: ["核心景观串联", "小团出行"],
+      included: ["行程内用车"],
+      excluded: ["往返大交通"],
+      notes: ["请准备雨具。"],
+      gallery: ["https://example.test/cover.jpg"],
+    });
+  });
+
+  it("uses the route fallback for invalid or incomplete API data", () => {
+    const fallback = findWanfaRouteDetailFallback("family-water");
+
+    expect(fallback).not.toBeNull();
+    expect(
+      normalizeDetailPresentation(
+        { key: "family-water", title: "", gallery: [] },
+        fallback,
+      ),
+    ).toEqual(fallback);
+  });
+
+  it("returns no fallback for an unknown route", () => {
+    expect(findWanfaRouteDetailFallback("missing-route")).toBeNull();
+  });
+});
diff --git a/WonderQ-MiniAPP/tests/navigation.test.ts b/WonderQ-MiniAPP/tests/navigation.test.ts
new file mode 100644
index 0000000..de82058
--- /dev/null
+++ b/WonderQ-MiniAPP/tests/navigation.test.ts
@@ -0,0 +1,20 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { goWanfaRouteDetail } from "@/lib/navigation";
+
+describe("wanfa route detail navigation", () => {
+  const navigateTo = vi.fn();
+
+  beforeEach(() => {
+    navigateTo.mockReset();
+    vi.stubGlobal("uni", { navigateTo });
+  });
+
+  it("encodes the route id in the detail page URL", () => {
+    goWanfaRouteDetail("family water");
+
+    expect(navigateTo).toHaveBeenCalledWith({
+      url: "/pages/detail/index?routeId=family%20water",
+    });
+  });
+});
diff --git a/docs/README.md b/docs/README.md
index 99f87d5..d553cc9 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -28,9 +28,11 @@
 MiniAPP 前台开发：
 
 1. `integration-workflow.md`
-2. `team-building-api.md`
-3. `public-api.md`
-4. `development-status.md`
+2. `wanfa-api.md`
+3. `detail-api.md`
+4. `team-building-api.md`
+5. `public-api.md`
+6. `development-status.md`
 
 ## 文档清单
 
diff --git a/docs/detail-api.md b/docs/detail-api.md
index b78edb2..34b8520 100644
--- a/docs/detail-api.md
+++ b/docs/detail-api.md
@@ -2,7 +2,7 @@
 
 > 适用端：`WonderQ-Admin`、`WonderQ-Admin-UI`。
 >
-> 状态：待实现契约。本文件参考 `WonderQ-MiniAPP/src/pages/detail/components/detailPresentation.ts` 定义详情页展示数据。当前 `detailPresentation.ts` 仍依赖已移除的 `Product` 类型，后端也没有详情管理接口；本契约采用与商品领域解耦的详情展示模型，不恢复 Product、ProductImage 或订单关联。
+> 状态：已实现契约。本文件定义独立路线详情展示模型，供 `WonderQ-Admin`、`WonderQ-Admin-UI` 和 `WonderQ-MiniAPP` 三端联调使用。详情不恢复 Product、ProductImage 或订单关联。
 
 ## 领域边界
 
@@ -20,16 +20,15 @@
 - 订单、预订、收藏、评价或线索。
 - 详情页底部的电话、管家联系和预订动作。
 
-`key` 是详情展示内容自己的稳定业务键，不得设计为 Product ID 外键。详情页如何从玩法、页面入口或其他前台上下文定位 `key`，由前台导航契约另行约定。
+`key` 固定使用玩法路线 ID（即 `WanfaRoute.id`，例如 `family-water`），但 `DetailRecord` 不建立数据库外键。详情页通过 `/pages/detail/index?routeId={key}` 定位内容；详情记录删除不会跨领域级联删除路线或其他数据。
 
 ## 与 `detailPresentation.ts` 的关系
 
-`detailPresentation.ts` 当前是前台展示适配器，不是持久化模型：
+`detailPresentation.ts` 是前台展示适配器，不是持久化模型：
 
 - `eyebrow`、`duration`、`title`、`subtitle`、`intro`、`highlights`、`included`、`excluded`、`notes`、`gallery` 组成最终展示对象。
-- 当前实现从 `Product` 的标题、摘要、标签、详情区块和图片数组推导部分字段。
-- 当前实现对洞穴/探险路线生成另一组固定亮点，并使用固定费用说明和注意事项。
-- 当前实现会将主图、接口图片和 fallback 图片去重后截取前 6 张。
+- 当前实现优先消费 Public API 返回的最终展示字段。
+- 接口失败、字段不完整或详情未配置时，MiniAPP 按路线 ID 使用本地网络图片和模拟文案兜底。
 
 新的 Admin API 应直接维护最终展示字段；Admin UI 不应复刻这些推导逻辑，也不应依赖已移除的 Product 字段。
 
@@ -63,6 +62,7 @@ API 前缀为 `/api/admin`，除登录接口外均需要后台 JWT。
 
 ```ts
 type DetailPresentation = {
+  key: string;
   eyebrow: string;
   duration: string;
   title: string;
@@ -84,6 +84,10 @@ type DetailRecord = DetailPresentation & {
   updatedAt: string;
 };
 
+type PublicDetail = Omit<DetailPresentation, "key"> & {
+  key: string;
+};
+
 type DetailCreate = DetailPresentation & {
   key: string;
   isActive?: boolean;
@@ -106,7 +110,7 @@ type DetailReorderRequest = {
 | 字段 | 类型 | 必填 | 约束和用途 |
 | --- | --- | --- | --- |
 | `id` | `string` | 响应必填 | 后端生成的记录 ID，仅供管理端识别记录。 |
-| `key` | `string` | 是 | 详情展示稳定键；建议使用小写字母、数字和中划线，例如 `classic-panorama`。不得关联 Product 表。 |
+| `key` | `string` | 是 | 玩法路线 ID，例如 `family-water`；必须唯一，不建立数据库外键。 |
 | `eyebrow` | `string` | 是 | 详情页顶部眉标，例如“玩法推荐”。 |
 | `duration` | `string` | 是 | 展示用时长，例如“5天4晚”；接口保存最终文案，不要求前端从标题正则提取。 |
 | `title` | `string` | 是 | 详情页主标题。 |
@@ -226,6 +230,34 @@ Content-Type: application/json
 
 其中 `items` 为更新 `sortOrder` 后的 `DetailRecord[]`。缺少 ID、包含未知 ID 或出现重复 ID 时返回 `400 DETAIL_REORDER_INVALID`。
 
+## MiniAPP Public API
+
+### 获取路线详情
+
+```http
+GET /api/public/details/{key}
+```
+
+无需鉴权。`key` 为 `WanfaRoute.id`，例如 `family-water`。接口只返回启用且已配置的展示字段，不返回管理端 ID、状态、排序和审计时间：
+
+```ts
+type PublicDetail = {
+  key: string;
+  eyebrow: string;
+  duration: string;
+  title: string;
+  subtitle: string;
+  intro: string;
+  highlights: string[];
+  included: string[];
+  excluded: string[];
+  notes: string[];
+  gallery: string[];
+};
+```
+
+不存在、停用或未配置详情时返回 `404`。MiniAPP 请求失败或字段不完整时，按 `key` 查找本地 fallback；找不到 fallback 时展示未找到和重试状态。该页面暂不提供价格、收藏、在线订阅、预订、订单或管家联系动作。
+
 ## 图片与素材
 
 Admin UI 使用现有素材上传接口获取图片 URL：
@@ -242,14 +274,14 @@ POST /api/admin/media-assets/upload
 
 Admin UI 应按以下方式调用：
 
-1. 进入详情管理页时调用 `GET /api/admin/details`，按 `sortOrder` 渲染详情列表。
-2. 新增和编辑表单维护 `key`、眉标、时长、标题、副标题、介绍和四组列表文案。
+1. 玩法页加载时同时调用玩法分类和 `GET /api/admin/details`；详情编辑器嵌入现有路线编辑抽屉，不新增侧边菜单。
+2. 新增和编辑表单维护眉标、时长、标题、副标题、介绍和四组列表文案；保存路线时以已保存的路线 ID 作为详情 `key`。
 3. `highlights`、`included`、`excluded`、`notes` 使用可增删的重复字段编辑器，提交时保留数组顺序，不拼接成换行字符串。
 4. 使用图片上传接口维护 `gallery`，支持新增、删除和调整图片顺序。
 5. 上移或下移详情时提交完整详情 ID 列表，不直接修改本地 `sortOrder` 后假设保存成功。
 6. 删除前要求二次确认；删除成功后以接口返回或重新查询的数据更新列表。
 7. 处理 `401`、`404`、`409`、`422` 和 `5xx`，保存、上传或排序进行中禁用重复提交。
-8. 详情编辑器不得出现 Product ID、ProductImage ID、库存、订单或预订字段。
+8. 详情编辑器不得出现 Product ID、ProductImage ID、库存、订单、价格或预订字段；详情保存失败时明确提示路线摘要已保存、详情需要重试。
 
 建议的 Admin UI API 封装函数：
 
@@ -268,6 +300,7 @@ Admin API 返回的 `DetailRecord` 可以映射为 `DetailPresentation`：
 
 ```ts
 const presentation: DetailPresentation = {
+  key: record.key,
   eyebrow: record.eyebrow,
   duration: record.duration,
   title: record.title,
@@ -281,11 +314,11 @@ const presentation: DetailPresentation = {
 };
 ```
 
-接入时应优先使用接口已保存的最终文案和图片顺序，不再依赖 `stripTitle`、标题时长正则、洞穴路线分支或 fallbackGallery 生成同一字段。
+接入时应优先使用接口已保存的最终文案和图片顺序；本地 fallback 只用于接口失败、字段不完整或详情未配置的前台容错。
 
 ## 后端落地边界
 
-本契约落地时需要由 `WonderQ-Admin` 补充对应 ORM 模型、迁移、schema、路由、序列化和审计日志；由 `WonderQ-Admin-UI` 补充 API 类型、请求封装、详情列表、编辑器、图片管理和排序交互。当前后端没有 `/api/admin/details` 路由，Admin UI 没有详情管理入口，`detailPresentation.ts` 也不是可直接作为后端契约的完整类型来源。
+当前实现由 `WonderQ-Admin` 的 `DetailRecord` 模型、`0021_detail_records` 迁移、Admin/Public 路由和审计日志提供能力；由 `WonderQ-Admin-UI` 在玩法路线编辑抽屉中维护详情；由 `WonderQ-MiniAPP` 调用 Public 详情接口并按路线 ID fallback。迁移文件只负责生成和初始化详情记录，不自动执行数据库升级。
 
 相关文档：
 
diff --git a/docs/home-api.md b/docs/home-api.md
index 559c423..82dc952 100644
--- a/docs/home-api.md
+++ b/docs/home-api.md
@@ -310,6 +310,8 @@ type WanfaRoute = {
 
 四组列表始终返回数组；没有可用内容时返回空数组。玩法推荐只返回启用的关联记录，并展开关联分类当前的路线。MiniAPP 应在数据层归一化字段并保留对应 mock fallback，不在页面组件内直接请求接口。
 
+首页玩法推荐点击行为：当 `routes` 存在第一条路线时，MiniAPP 使用该路线的 `id` 调用 `goWanfaRouteDetail`，进入 `/pages/detail/index?routeId={route.id}`；没有关联路线时才使用 `demandKeyword` 或分类名称进入需求页。路线详情字段和 Public 详情接口以 [详情展示契约](./detail-api.md) 为准。
+
 ### 玩法推荐关联
 
 `POST /api/admin/home/play-recommendations` 请求体：
diff --git a/docs/integration-workflow.md b/docs/integration-workflow.md
index 9197d10..642d195 100644
--- a/docs/integration-workflow.md
+++ b/docs/integration-workflow.md
@@ -85,6 +85,19 @@ MiniAPP 联调重点：
 - 首页模块按 Public API 字段渲染，不依赖后台未发布或未启用数据。
 - 线索提交调用 `POST /api/public/leads`，失败时显示可理解错误。
 
+## 路线详情三端联调
+
+路线详情使用独立 `DetailRecord`，不修改 `WanfaRoute` 表结构，也不建立商品、订单或预订关联。联调顺序如下：
+
+1. 执行数据库迁移，确认 `0021_detail_records` 已创建详情表并为已有路线生成基础记录；生产环境执行前按迁移规范单独确认。
+2. 在 Admin UI 进入“玩法”，编辑路线摘要和详情字段，保存时先保存路线，再以路线 ID 作为 `DetailRecord.key` 创建或更新详情。
+3. 检查 `GET /api/public/wanfa/categories` 仍只返回路线摘要；检查 `GET /api/public/home` 的玩法推荐携带关联路线摘要。
+4. 在 MiniAPP 首页玩法推荐或玩法页点击路线，确认跳转 `/pages/detail/index?routeId={routeId}`，并请求 `GET /api/public/details/{routeId}`。
+5. 修改 Admin UI 的详情内容后刷新 MiniAPP，确认标题、正文、费用说明、注意事项和画廊更新；停用或删除详情时确认 Public API 返回 `404`。
+6. 关闭后端接口，确认 MiniAPP 按路线 ID 展示本地网络图片和模拟文案，并提示当前为模拟数据；未知路线展示未找到和重试状态。
+
+路线详情页当前不包含价格、收藏、在线订阅、预订、订单或管家联系动作。字段和错误约定以 `detail-api.md`、`public-api.md` 为准。
+
 ## 接口变更流程
 
 1. 先更新契约文档。
diff --git a/docs/public-api.md b/docs/public-api.md
index bea6d95..87be1ad 100644
--- a/docs/public-api.md
+++ b/docs/public-api.md
@@ -20,6 +20,7 @@
 | `GET`  | `/api/public/home/wild-archives` | 否           | 获取客片案例更多列表 |
 | `GET`  | `/api/public/home/wild-archives/{archiveId}` | 否           | 获取客片案例详情和图片 |
 | `GET`  | `/api/public/wanfa/categories` | 否           | 获取玩法分类和路线 |
+| `GET`  | `/api/public/details/{key}` | 否           | 获取玩法路线详情 |
 | `GET`  | `/api/public/concierge/advisors` | 否           | 获取已启用的管家顾问 |
 | `POST` | `/api/public/auth/phone-login` | 否           | 微信手机号登录     |
 | `GET`  | `/api/public/auth/me`          | Customer JWT | 获取当前客户       |
@@ -73,6 +74,28 @@ type PublicWanfaRoute = {
 
 MiniAPP 使用 `demandKeyword` 作为需求页预填关键词；接口失败或响应为空时，玩法页展示对应的错误、重试或空态，不再读取 `playData.ts` 模拟数据。
 
+### 路线详情
+
+`GET /api/public/details/{key}` 无需鉴权，`key` 使用玩法路线 ID，例如 `family-water`。成功响应只返回详情展示字段：
+
+```ts
+type PublicDetail = {
+  key: string;
+  eyebrow: string;
+  duration: string;
+  title: string;
+  subtitle: string;
+  intro: string;
+  highlights: string[];
+  included: string[];
+  excluded: string[];
+  notes: string[];
+  gallery: string[];
+};
+```
+
+不存在、停用或未配置详情返回 `404`。MiniAPP 路线详情页通过 `/pages/detail/index?routeId={key}` 进入；接口失败或字段不完整时按路线 ID 使用本地网络图片和模拟文案。该详情页暂不提供价格、收藏、在线订阅、预订、订单或管家联系动作。
+
 ## 管家展示
 
 ### `GET /api/public/concierge/advisors`
diff --git a/docs/wanfa-api.md b/docs/wanfa-api.md
index e93bdac..a526c22 100644
--- a/docs/wanfa-api.md
+++ b/docs/wanfa-api.md
@@ -6,6 +6,8 @@
 
 当前实现：`WonderQ-Admin` 通过迁移 `0015_wanfa` 创建 `WanfaCategory`、`WanfaRoute` 表并导入稳定初始 ID；`WonderQ-Admin-UI` 已接入分类和路线的查询、新增、编辑、删除及排序操作。
 
+路线接口只维护分类和路线摘要字段。路线详情不写入 `WanfaRoute`，由独立 `DetailRecord` 通过 `docs/detail-api.md` 管理，详情记录的 `key` 等于路线 ID。首页玩法推荐和玩法页路线点击后统一跳转 `/pages/detail/index?routeId={route.id}`；无关联路线时才回退到需求页。
+
 ## 领域边界
 
 玩法管理只维护玩法分类和路线卡片内容：