diff --git a/WonderQ-Admin-UI/src/components/admin/ConciergeAdvisorEditor.tsx b/WonderQ-Admin-UI/src/components/admin/ConciergeAdvisorEditor.tsx
index 100cb87..775df2a 100644
--- a/WonderQ-Admin-UI/src/components/admin/ConciergeAdvisorEditor.tsx
+++ b/WonderQ-Admin-UI/src/components/admin/ConciergeAdvisorEditor.tsx
@@ -89,6 +89,7 @@ export function ConciergeAdvisorEditor({
               value={draft.avatar}
               onChange={(value) => update("avatar", value ?? "")}
               group="concierge"
+              aspectRatio="square"
             />
           </div>
           <div>
@@ -97,6 +98,7 @@ export function ConciergeAdvisorEditor({
               value={draft.qrImage}
               onChange={(value) => update("qrImage", value ?? "")}
               group="concierge"
+              aspectRatio="square"
             />
           </div>
         </div>
diff --git a/WonderQ-Admin-UI/src/components/admin/HomeWanfaRecommendationRail.tsx b/WonderQ-Admin-UI/src/components/admin/HomeWanfaRecommendationRail.tsx
index bdebb6d..7b231f4 100644
--- a/WonderQ-Admin-UI/src/components/admin/HomeWanfaRecommendationRail.tsx
+++ b/WonderQ-Admin-UI/src/components/admin/HomeWanfaRecommendationRail.tsx
@@ -3,7 +3,7 @@ import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
 
 import type { HomeWanfaRecommendation, WanfaCategory } from "@/api";
 import { Button } from "@/components/ui/button";
-import { NativeSelect } from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 
 export function HomeWanfaRecommendationRail({
@@ -35,20 +35,23 @@ export function HomeWanfaRecommendationRail({
           <p>关联玩法分类，维护首页推荐入口和展示顺序。</p>
         </span>
         <div className="flex items-center gap-2">
-          <NativeSelect
+          <Select
             aria-label="选择要推荐的玩法分类"
-            className="h-10 min-w-[148px] py-1.5 text-xs"
             value={selectedCategoryId}
             disabled={!availableCategories.length || savingKey === "add"}
-            onChange={(event) => setSelectedCategoryId(event.target.value)}
+            onValueChange={setSelectedCategoryId}
           >
-            <option value="">关联分类</option>
-            {availableCategories.map((category) => (
-              <option value={category.id} key={category.id}>
-                {category.label}
-              </option>
-            ))}
-          </NativeSelect>
+            <SelectTrigger className="h-10 min-w-[148px] py-1.5 text-xs">
+              <SelectValue placeholder="关联分类" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              {availableCategories.map((category) => (
+                <SelectItem value={category.id} key={category.id}>
+                  {category.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           <Button
             type="button"
             className="primary-action compact"
diff --git a/WonderQ-Admin-UI/src/components/admin/ImageGalleryUploader.tsx b/WonderQ-Admin-UI/src/components/admin/ImageGalleryUploader.tsx
new file mode 100644
index 0000000..242c2e3
--- /dev/null
+++ b/WonderQ-Admin-UI/src/components/admin/ImageGalleryUploader.tsx
@@ -0,0 +1,137 @@
+import { ChangeEvent, useRef, useState } from "react";
+import { ImagePlus, LoaderCircle, Trash2 } from "lucide-react";
+
+import { uploadMediaAsset } from "@/api";
+
+const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+const ALLOWED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
+
+export function ImageGalleryUploader({
+  id,
+  value,
+  onChange,
+  group = "wanfa-detail",
+}: {
+  id: string;
+  value: string[];
+  onChange: (value: string[]) => void;
+  group?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState("");
+  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
+  const [uploadingTotal, setUploadingTotal] = useState(0);
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    if (!files.length) return;
+
+    const invalidFile = files.find(
+      (file) => !ALLOWED_IMAGE_TYPES.has(file.type) || file.size > MAX_IMAGE_BYTES,
+    );
+    if (invalidFile) {
+      setError(
+        ALLOWED_IMAGE_TYPES.has(invalidFile.type)
+          ? `「${invalidFile.name}」超过 5MB，请压缩后重新上传。`
+          : `「${invalidFile.name}」不是支持的图片格式，请选择 JPG、PNG、WebP 或 GIF。`,
+      );
+      return;
+    }
+
+    setError("");
+    let nextGallery = [...value];
+    setUploadingTotal(files.length);
+    try {
+      for (const [index, file] of files.entries()) {
+        setUploadingIndex(index);
+        const asset = await uploadMediaAsset(file, group);
+        nextGallery = [...nextGallery, asset.url];
+        onChange(nextGallery);
+      }
+    } catch (uploadError) {
+      setError(uploadError instanceof Error ? uploadError.message : "图片上传失败，请重试。");
+    } finally {
+      setUploadingIndex(null);
+      setUploadingTotal(0);
+    }
+  };
+
+  const removeImage = (index: number) => {
+    onChange(value.filter((_, itemIndex) => itemIndex !== index));
+  };
+
+  const uploadTile = (
+    <li className="single-image-card">
+      <label
+        htmlFor={id}
+        className={`single-image-preview ${uploadingIndex !== null ? "pointer-events-none opacity-60" : ""}`}
+      >
+      <input
+        ref={inputRef}
+        id={id}
+        className="single-image-input"
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/gif"
+        multiple
+        onChange={handleFileChange}
+        disabled={uploadingIndex !== null}
+      />
+      <span className="single-image-placeholder">
+        {uploadingIndex === null ? <ImagePlus size={30} /> : <LoaderCircle className="animate-spin" size={30} />}
+        <b>
+          {uploadingIndex === null
+            ? value.length
+              ? "继续上传图片"
+              : "暂无图片"
+            : `上传中 ${uploadingIndex + 1}/${uploadingTotal}`}
+        </b>
+        <small>
+          {uploadingIndex === null ? "上传后在这里预览详情素材" : "正在上传到媒体资源库"}
+        </small>
+      </span>
+      </label>
+    </li>
+  );
+
+  return (
+    <section className="grid gap-3 rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm">
+      <div className="border-b border-slate-100 bg-slate-50/80 px-3 py-2.5">
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-slate-900">详情图片画廊</p>
+          <p className="mt-1 text-xs font-normal leading-5 text-slate-500">
+            支持多选上传，单张不超过 5MB；图片会按当前顺序保存到路线详情。
+          </p>
+        </div>
+      </div>
+
+      <ul className="grid gap-3 px-1" aria-label="详情图片列表">
+        {value.map((image, index) => (
+          <li className="single-image-card has-image" key={`${image}-${index}`}>
+            <div className="single-image-preview has-image">
+              <img src={image} alt={`详情图片 ${index + 1}`} loading="lazy" />
+            </div>
+            <div className="single-image-actions">
+              <button
+                type="button"
+                className="single-image-remove-button"
+                onClick={() => removeImage(index)}
+                aria-label={`移除第 ${index + 1} 张图片`}
+                title={`移除第 ${index + 1} 张图片`}
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </li>
+        ))}
+        {uploadTile}
+      </ul>
+
+      {error ? (
+        <p className="text-xs font-medium leading-5 text-rose-600" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </section>
+  );
+}
diff --git a/WonderQ-Admin-UI/src/components/admin/SingleImageUploader.tsx b/WonderQ-Admin-UI/src/components/admin/SingleImageUploader.tsx
index 325af75..cc51f72 100644
--- a/WonderQ-Admin-UI/src/components/admin/SingleImageUploader.tsx
+++ b/WonderQ-Admin-UI/src/components/admin/SingleImageUploader.tsx
@@ -10,10 +10,12 @@ export function SingleImageUploader({
   value,
   onChange,
   group = "site-config",
+  aspectRatio = "landscape",
 }: {
   value?: string | null;
   onChange: (value: string | null) => void;
   group?: string;
+  aspectRatio?: "landscape" | "square";
 }) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [error, setError] = useState("");
@@ -53,7 +55,7 @@ export function SingleImageUploader({
   };
 
   return (
-    <div className="single-image-uploader">
+    <div className={`single-image-uploader single-image-uploader--${aspectRatio}`}>
       <input
         ref={inputRef}
         className="single-image-input"
diff --git a/WonderQ-Admin-UI/src/components/admin/ToastStack.tsx b/WonderQ-Admin-UI/src/components/admin/ToastStack.tsx
index ea7b7bf..195bb70 100644
--- a/WonderQ-Admin-UI/src/components/admin/ToastStack.tsx
+++ b/WonderQ-Admin-UI/src/components/admin/ToastStack.tsx
@@ -1,25 +1,30 @@
-import { AlertTriangle, CheckCircle2, X } from "lucide-react";
+import { AlertTriangle, CheckCircle2 } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import type { Toast } from "@/types/admin";
+import { Toast, ToastClose, ToastDescription, ToastTitle, ToastViewport } from "@/components/ui/toast";
+import type { Toast as AdminToast } from "@/types/admin";
 
-export function ToastStack({ toasts, onClose }: { toasts: Toast[]; onClose: (id: string) => void }) {
+export function ToastStack({ toasts, onClose }: { toasts: AdminToast[]; onClose: (id: string) => void }) {
   if (!toasts.length) return null;
 
   return (
-    <div className="admin-toast-stack" role="status" aria-live="polite">
+    <ToastViewport>
       {toasts.map((toast) => (
-        <article className={`admin-toast ${toast.tone}`} key={toast.id}>
-          {toast.tone === "success" ? <CheckCircle2 size={20} /> : <AlertTriangle size={20} />}
-          <span>
-            <strong>{toast.title}</strong>
-            <small>{toast.message}</small>
-          </span>
-          <Button variant="ghost" size="icon" onClick={() => onClose(toast.id)} aria-label="关闭提示">
-            <X size={16} />
-          </Button>
-        </article>
+        <Toast tone={toast.tone} key={toast.id}>
+          {toast.tone === "success" ? (
+            <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-emerald-700" aria-hidden="true" />
+          ) : (
+            <AlertTriangle
+              className={`mt-0.5 size-5 shrink-0 ${toast.tone === "danger" ? "text-red-700" : "text-amber-700"}`}
+              aria-hidden="true"
+            />
+          )}
+          <div className="min-w-0">
+            <ToastTitle>{toast.title}</ToastTitle>
+            <ToastDescription>{toast.message}</ToastDescription>
+          </div>
+          <ToastClose onClick={() => onClose(toast.id)} />
+        </Toast>
       ))}
-    </div>
+    </ToastViewport>
   );
 }
diff --git a/WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx b/WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx
index 56ed514..a947239 100644
--- a/WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx
+++ b/WonderQ-Admin-UI/src/components/admin/WanfaRouteDetailFields.tsx
@@ -1,5 +1,7 @@
 import type { DetailCreate } from "@/api";
+import { ImageGalleryUploader } from "@/components/admin/ImageGalleryUploader";
 import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 
 const detailArrayFields = [
@@ -7,7 +9,6 @@ const detailArrayFields = [
   ["included", "费用包含", "每行填写一项包含内容"],
   ["excluded", "费用不含", "每行填写一项不包含内容"],
   ["notes", "注意事项", "每行填写一项注意事项"],
-  ["gallery", "详情图片画廊", "每行填写一个 http(s) 图片地址"],
 ] as const;
 
 type DetailArrayField = (typeof detailArrayFields)[number][0];
@@ -100,21 +101,39 @@ export function WanfaRouteDetailFields({
             <Textarea
               id={`wanfa-detail-${key}`}
               value={detail[key].join("\n")}
-              rows={key === "gallery" ? 3 : 4}
+              rows={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)}
+        <div className="sm:col-span-2">
+          <ImageGalleryUploader
+            id="wanfa-detail-gallery"
+            value={detail.gallery}
+            onChange={(value) => onChange("gallery", value)}
           />
-          启用路线详情
-        </label>
+        </div>
+        <div className="sm:col-span-2 rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm">
+          <div className="flex items-center justify-between gap-4">
+            <div className="min-w-0">
+              <p id="wanfa-detail-active-label" className="text-sm font-semibold text-slate-900">
+                启用路线详情
+              </p>
+              <p id="wanfa-detail-active-description" className="mt-1 text-xs leading-5 text-slate-500">
+                {detail.isActive ? "前台详情页会展示这条路线的完整内容。" : "暂不对前台展示路线详情，可随时重新启用。"}
+              </p>
+            </div>
+            <Switch
+              id="wanfa-detail-active"
+              checked={detail.isActive}
+              onCheckedChange={(checked) => onChange("isActive", checked)}
+              aria-labelledby="wanfa-detail-active-label"
+              aria-describedby="wanfa-detail-active-description"
+              className="data-[state=checked]:bg-teal-700 data-[state=unchecked]:bg-slate-300"
+            />
+          </div>
+        </div>
       </div>
     </section>
   );
diff --git a/WonderQ-Admin-UI/src/components/ui/select.tsx b/WonderQ-Admin-UI/src/components/ui/select.tsx
index db56dd2..845088e 100644
--- a/WonderQ-Admin-UI/src/components/ui/select.tsx
+++ b/WonderQ-Admin-UI/src/components/ui/select.tsx
@@ -1,7 +1,129 @@
 import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-11 w-full items-center justify-between gap-2 rounded-lg border border-slate-300 bg-white px-3.5 py-2 text-sm font-medium text-slate-950 shadow-sm outline-none transition-[background-color,border-color,box-shadow] duration-150 hover:border-slate-400 focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20 data-[placeholder]:text-slate-400 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500 [&>span]:line-clamp-1 [&>span]:flex [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 text-slate-500" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex h-6 cursor-default items-center justify-center text-slate-500", className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex h-6 cursor-default items-center justify-center text-slate-500", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      position={position}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-slate-200 bg-white text-slate-950 shadow-lg outline-none data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+        position === "popper" && "translate-y-1",
+        className,
+      )}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-xs font-semibold text-slate-500", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4 text-teal-700" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-slate-100", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
 const NativeSelect = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(({ className, children, ...props }, ref) => (
   <select
     ref={ref}
@@ -17,3 +139,16 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttribu
 NativeSelect.displayName = "NativeSelect";
 
 export { NativeSelect };
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/WonderQ-Admin-UI/src/components/ui/toast.tsx b/WonderQ-Admin-UI/src/components/ui/toast.tsx
new file mode 100644
index 0000000..7db7bb7
--- /dev/null
+++ b/WonderQ-Admin-UI/src/components/ui/toast.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const toastVariants = cva(
+  "pointer-events-auto relative grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-xl border p-4 text-sm shadow-lg",
+  {
+    variants: {
+      tone: {
+        success: "border-emerald-200 bg-emerald-50 text-emerald-950",
+        warning: "border-amber-200 bg-amber-50 text-amber-950",
+        danger: "border-red-200 bg-red-50 text-red-950",
+      },
+    },
+    defaultVariants: {
+      tone: "success",
+    },
+  },
+);
+
+const Toast = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & VariantProps<typeof toastVariants>>(
+  ({ className, tone, ...props }, ref) => <article ref={ref} role="status" className={cn(toastVariants({ tone }), className)} {...props} />,
+);
+Toast.displayName = "Toast";
+
+const ToastTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h3 ref={ref} className={cn("font-semibold leading-5", className)} {...props} />
+));
+ToastTitle.displayName = "ToastTitle";
+
+const ToastDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("mt-1 text-sm leading-5 text-slate-600", className)} {...props} />
+));
+ToastDescription.displayName = "ToastDescription";
+
+const ToastClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ className, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    aria-label="关闭提示"
+    className={cn(
+      "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-500 transition-colors hover:bg-black/5 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+      className,
+    )}
+    {...props}
+  >
+    <X className="size-4" aria-hidden="true" />
+  </button>
+));
+ToastClose.displayName = "ToastClose";
+
+const ToastViewport = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="status"
+    aria-live="polite"
+    className={cn("fixed right-4 top-4 z-[80] grid w-[min(360px,calc(100vw-2rem))] gap-3", className)}
+    {...props}
+  />
+));
+ToastViewport.displayName = "ToastViewport";
+
+export { Toast, ToastClose, ToastDescription, ToastTitle, ToastViewport };
diff --git a/WonderQ-Admin-UI/src/styles.css b/WonderQ-Admin-UI/src/styles.css
index 04efd65..330008a 100644
--- a/WonderQ-Admin-UI/src/styles.css
+++ b/WonderQ-Admin-UI/src/styles.css
@@ -617,6 +617,542 @@ textarea {
   }
 }
 
+/* Unified visual system: calm teal, clear hierarchy, compact workspace surfaces. */
+:root {
+  --surface-subtle: #f8fafc;
+  --surface-muted: #f1f5f9;
+  --text-subtle: #64748b;
+  --border-soft: #e2e8f0;
+  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.035);
+  --shadow-popover: 0 18px 48px rgba(15, 23, 42, 0.14);
+  --radius-panel: 16px;
+  --radius-control: 10px;
+}
+
+html {
+  background: var(--surface-subtle);
+}
+
+body {
+  min-width: 320px;
+  color: var(--foreground);
+  background: var(--surface-subtle);
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+a,
+input,
+select,
+textarea {
+  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+.login-shell {
+  background: var(--surface-subtle);
+}
+
+.login-panel {
+  width: min(420px, calc(100vw - 32px));
+  gap: 20px;
+  padding: 32px;
+  border: 1px solid var(--border-soft);
+  border-radius: 20px;
+  box-shadow: var(--shadow-card);
+}
+
+.login-panel h3 {
+  font-size: 24px;
+  letter-spacing: -0.02em;
+}
+
+.login-note {
+  color: var(--text-subtle);
+  line-height: 1.6;
+}
+
+.admin-shell {
+  grid-template-columns: 248px minmax(0, 1fr);
+  background: var(--surface-subtle);
+}
+
+.sidebar {
+  border-right: 1px solid var(--border-soft);
+  background: #fff;
+  color: var(--foreground);
+  box-shadow: 8px 0 28px rgba(15, 23, 42, 0.025);
+}
+
+.brand-block {
+  margin: 0 0 18px;
+  padding: 14px 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: 16px;
+  background: #fff;
+}
+
+.brand-block .brand-mark {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.16);
+}
+
+.brand-block > b {
+  font-size: 17px;
+  letter-spacing: -0.01em;
+}
+
+.sidebar nav {
+  gap: 8px;
+}
+
+.sidebar-group {
+  gap: 6px;
+}
+
+.sidebar-group > small,
+.sidebar-group > h4 {
+  padding-inline: 10px;
+  color: #94a3b8;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.sidebar-group > button {
+  min-height: 48px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  color: #334155;
+}
+
+.sidebar-group > button:hover {
+  border-color: #ccfbf1;
+  background: #f0fdfa;
+  color: #115e59;
+}
+
+.sidebar-group > button.active {
+  border-color: #99f6e4;
+  background: #f0fdfa;
+  color: #0f766e;
+  box-shadow: inset 3px 0 0 #0f766e;
+}
+
+.sidebar-group > button > span:last-child {
+  min-width: 0;
+  text-align: left;
+}
+
+.sidebar-footer {
+  padding-top: 16px;
+  border-top: 1px solid var(--border-soft);
+}
+
+.main-panel {
+  min-width: 0;
+  background: var(--surface-subtle);
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  min-height: 68px;
+  border-color: var(--border-soft);
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
+}
+
+.topbar span {
+  font-size: 18px;
+  letter-spacing: -0.02em;
+}
+
+.topbar small {
+  color: var(--text-subtle);
+  line-height: 1.45;
+}
+
+.topbar-actions {
+  gap: 10px;
+}
+
+.work-area {
+  min-width: 0;
+  padding: clamp(16px, 2.5vw, 28px);
+}
+
+.section-head,
+.toolbar,
+.metric-card,
+.data-panel,
+.editor-pane,
+.list-pane,
+.module-rail,
+.item-rail,
+.front-context {
+  border-color: var(--border-soft);
+  border-radius: var(--radius-panel);
+  box-shadow: var(--shadow-card);
+}
+
+.section-head {
+  padding: 20px;
+}
+
+.section-head h2,
+.editor-head h3,
+.data-panel h3,
+.module-rail h3,
+.item-rail h3 {
+  letter-spacing: -0.02em;
+}
+
+.section-head p,
+.module-data-head p,
+.field-help,
+.muted,
+.empty-state {
+  color: var(--text-subtle);
+}
+
+.home-module-grid,
+.maintenance-grid {
+  gap: 16px;
+}
+
+.module-rail,
+.item-rail {
+  padding: 16px;
+  background: #fff;
+}
+
+.module-rail > h3,
+.item-rail > header,
+.module-data-head {
+  margin-bottom: 12px;
+}
+
+.module-rail-item,
+.home-module-item {
+  min-height: 52px;
+  border-color: var(--border-soft);
+  border-radius: 11px;
+  background: var(--surface-subtle);
+}
+
+.module-rail-item:hover,
+.home-module-item:hover {
+  border-color: #99f6e4;
+  background: #f0fdfa;
+}
+
+.module-rail-item.active,
+.home-module-item.active {
+  border-color: #5eead4;
+  background: #f0fdfa;
+  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
+}
+
+.module-index,
+.module-rail em {
+  border-radius: 9px;
+  background: #ecfdf5;
+  color: #0f766e;
+  font-weight: 800;
+}
+
+.module-data-head {
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.module-data-head h3 {
+  font-size: 18px;
+}
+
+.module-data-head p {
+  margin-top: 4px;
+  line-height: 1.55;
+}
+
+.mapped-list {
+  gap: 10px;
+}
+
+.mapped-list-row {
+  gap: 8px;
+  min-width: 0;
+}
+
+.mapped-list-main {
+  min-width: 0;
+  border-color: var(--border-soft);
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
+}
+
+.mapped-list-main:hover,
+.mapped-list-main.selected {
+  border-color: #99f6e4;
+  background: #f0fdfa;
+  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.08);
+}
+
+.mapped-list-actions {
+  gap: 4px;
+}
+
+.mapped-list-actions button,
+.module-rail-action,
+.icon-action,
+.inline-action {
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  min-height: 34px;
+  border-radius: 9px;
+}
+
+.mapped-list-actions button:hover,
+.module-rail-action:hover,
+.icon-action:hover,
+.inline-action:hover {
+  border-color: #99f6e4;
+  background: #f0fdfa;
+  color: #0f766e;
+}
+
+.mapped-list-actions button:last-child:hover,
+.icon-action.danger-icon:hover {
+  border-color: var(--destructive-border);
+  background: var(--destructive-muted);
+  color: var(--destructive);
+}
+
+.primary-action {
+  border-radius: var(--radius-control);
+  background: var(--primary);
+  box-shadow: 0 5px 12px rgba(15, 118, 110, 0.14);
+}
+
+.primary-action:hover {
+  background: var(--primary-hover);
+  box-shadow: 0 7px 16px rgba(15, 118, 110, 0.18);
+}
+
+.primary-action.compact {
+  min-height: 40px;
+  border-radius: var(--radius-control);
+}
+
+input,
+select,
+textarea {
+  min-height: 42px;
+  border-color: var(--input);
+  border-radius: var(--radius-control);
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: #14b8a6;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14), 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #94a3b8;
+}
+
+label {
+  color: #475569;
+  font-weight: 700;
+}
+
+.status-chip {
+  min-height: 26px;
+  border-radius: 999px;
+  padding-inline: 10px;
+}
+
+.notice,
+.form-error {
+  border-radius: 12px;
+  line-height: 1.5;
+}
+
+.edit-drawer-backdrop {
+  background: rgba(15, 23, 42, 0.24);
+  backdrop-filter: blur(4px);
+}
+
+.edit-rail.edit-drawer {
+  border: 1px solid var(--border-soft);
+  border-right: 0;
+  border-radius: 20px 0 0 20px;
+  box-shadow: var(--shadow-popover);
+}
+
+.edit-drawer .editor-head {
+  min-height: 88px;
+  padding: 18px 20px;
+  border-color: var(--border-soft);
+}
+
+.edit-drawer .editor-head h3 {
+  font-size: 18px;
+}
+
+.edit-drawer .admin-disclosure-stack {
+  gap: 14px;
+  padding: 18px 20px 22px;
+  background: var(--surface-subtle);
+}
+
+.edit-drawer .admin-disclosure {
+  border-color: var(--border-soft);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.edit-drawer .admin-disclosure-head {
+  min-height: 54px;
+  padding: 14px 16px;
+  background: #fff;
+}
+
+.edit-drawer .admin-disclosure-body {
+  padding: 16px;
+}
+
+.drawer-editor-footer {
+  min-height: 76px;
+  padding: 14px 20px;
+  border-color: var(--border-soft);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.single-image-card,
+.image-editor-row,
+.image-placeholder,
+.image-editor-preview {
+  border-radius: 12px;
+}
+
+.switch-line {
+  border-radius: 11px;
+  border-color: var(--border-soft);
+  background: var(--surface-subtle);
+}
+
+.toast-viewport,
+[role="status"].fixed {
+  z-index: 80;
+}
+
+@media (max-width: 1100px) {
+  .maintenance-grid,
+  .home-module-grid {
+    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 980px) {
+  .admin-shell {
+    grid-template-columns: 72px minmax(0, 1fr);
+  }
+
+  .sidebar {
+    padding: 14px 10px;
+  }
+
+  .brand-block {
+    margin-bottom: 14px;
+    padding: 10px 6px 14px;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .sidebar-group > button {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .sidebar-group > button > span:last-child {
+    display: none;
+  }
+
+  .work-area {
+    padding: 16px;
+  }
+
+  .topbar {
+    min-height: 60px;
+    padding-inline: 16px;
+  }
+
+  .maintenance-grid,
+  .home-module-grid {
+    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 700px) {
+  .maintenance-grid,
+  .home-module-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .module-rail,
+  .item-rail {
+    width: 100%;
+  }
+
+  .topbar span {
+    font-size: 16px;
+  }
+
+  .topbar small {
+    max-width: 54vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 560px) {
+  .edit-rail.edit-drawer {
+    border-radius: 0;
+  }
+
+  .edit-drawer .editor-head,
+  .drawer-editor-footer {
+    padding-inline: 16px;
+  }
+
+  .edit-drawer .admin-disclosure-stack {
+    padding-inline: 12px;
+  }
+}
+
 @keyframes drawer-slide-in {
   from {
     transform: translateX(18px);
@@ -1148,60 +1684,6 @@ textarea {
   line-height: 1.6;
 }
 
-.admin-toast-stack {
-  position: fixed;
-  right: 18px;
-  bottom: 18px;
-  z-index: 80;
-  display: grid;
-  gap: 10px;
-  width: min(360px, calc(100vw - 36px));
-}
-
-.admin-toast {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: start;
-  padding: 12px;
-  border: 1px solid #d5dde3;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 18px 46px rgba(24, 34, 42, 0.16);
-}
-
-.admin-toast.success svg {
-  color: #176c68;
-}
-
-.admin-toast.warning svg,
-.admin-toast.danger svg {
-  color: #b66b00;
-}
-
-.admin-toast span {
-  display: grid;
-  gap: 3px;
-}
-
-.admin-toast strong {
-  font-size: 13px;
-}
-
-.admin-toast small {
-  color: #66727b;
-  line-height: 1.4;
-}
-
-.admin-toast button {
-  width: 24px;
-  height: 24px;
-  border: 0;
-  border-radius: 5px;
-  background: #f1f4f6;
-  color: #66727b;
-}
-
 .toolbar {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -2217,8 +2699,6 @@ textarea:hover {
   @apply border-b border-slate-200 bg-white px-5 py-4;
 }
 
-.drawer-editor-footer,
-
 .metric-card strong {
   @apply text-2xl font-black text-slate-950;
 }
@@ -2257,26 +2737,6 @@ textarea:hover {
   @apply border-slate-200 bg-slate-100 text-slate-500;
 }
 
-.admin-toast-stack {
-  @apply right-5 top-5 gap-3;
-}
-
-.admin-toast {
-  @apply min-w-80 rounded-2xl border border-slate-200 bg-white p-4 text-slate-900 shadow-xl;
-}
-
-.admin-toast.success {
-  @apply border-emerald-200 bg-emerald-50;
-}
-
-.admin-toast.warning {
-  @apply border-amber-200 bg-amber-50;
-}
-
-.admin-toast.danger {
-  @apply border-red-200 bg-red-50;
-}
-
 @media (max-width: 980px) {
   .admin-shell {
     grid-template-columns: 72px minmax(0, 1fr);
@@ -2412,6 +2872,16 @@ textarea:hover {
   object-fit: cover;
 }
 
+.edit-drawer .single-image-uploader--square .single-image-card {
+  width: min(100%, 280px);
+}
+
+.edit-drawer .single-image-uploader--square .single-image-preview {
+  aspect-ratio: 1;
+  min-height: 220px;
+  max-height: 280px;
+}
+
 .edit-drawer .switch-line {
   min-height: 46px;
   justify-content: flex-start;
diff --git a/WonderQ-Admin/app/routers/public.py b/WonderQ-Admin/app/routers/public.py
index dcc93ad..536ce93 100644
--- a/WonderQ-Admin/app/routers/public.py
+++ b/WonderQ-Admin/app/routers/public.py
@@ -5,11 +5,10 @@ from .shared import site_config
 from ..auth import create_customer_token, require_customer
 from ..api_response import success_response
 from ..database import get_db
-from ..models import ConciergeAdvisor, Customer, DetailRecord, HomeExperience, HomeTeamBuilding, HomeWanfaRecommendation, HomeWildArchive, Lead, WanfaCategory
+from ..models import ConciergeAdvisor, Customer, DetailRecord, HomeTeamBuilding, HomeWanfaRecommendation, HomeWildArchive, Lead, WanfaCategory
 from ..schemas import LeadCreateIn, PhoneLoginIn
 from ..serializers import (
     public_concierge_advisor_dict,
-    public_home_experience_dict,
     public_home_team_building_dict,
     public_home_team_building_detail_dict,
     public_home_wanfa_recommendation_dict,
@@ -80,11 +79,6 @@ def get_public_concierge_advisors(db: Session = Depends(get_db)):
 
 @router.get("/api/public/home")
 def get_public_home(db: Session = Depends(get_db)):
-    experiences = db.scalars(
-        select(HomeExperience)
-        .where(HomeExperience.isActive.is_(True))
-        .order_by(HomeExperience.sortOrder.asc())
-    ).all()
     team_buildings = db.scalars(
         select(HomeTeamBuilding)
         .where(HomeTeamBuilding.isActive.is_(True))
@@ -103,10 +97,9 @@ def get_public_home(db: Session = Depends(get_db)):
     ).all()
     return success_response(
         {
-            "experiences": [public_home_experience_dict(item) for item in experiences],
+            "experiences": [public_home_wanfa_recommendation_dict(item) for item in play_recommendations],
             "teamBuildings": [public_home_team_building_dict(item) for item in team_buildings],
             "wildArchives": [public_home_wild_archive_dict(item) for item in wild_archives],
-            "playRecommendations": [public_home_wanfa_recommendation_dict(item) for item in play_recommendations],
         }
     )
 
diff --git a/WonderQ-Admin/app/wechat.py b/WonderQ-Admin/app/wechat.py
index 2e025a4..0911547 100644
--- a/WonderQ-Admin/app/wechat.py
+++ b/WonderQ-Admin/app/wechat.py
@@ -44,6 +44,7 @@ def get_access_token(settings: Settings | None = None) -> str:
             "https://api.weixin.qq.com/cgi-bin/token",
             params={"grant_type": "client_credential", "appid": appid, "secret": secret},
             timeout=8,
+            trust_env=True,
         )
     except httpx.HTTPError as exc:
         raise WechatApiError("微信登录服务暂时不可用") from exc
@@ -66,6 +67,7 @@ def exchange_phone_code(code: str, settings: Settings | None = None) -> str:
             params={"access_token": access_token},
             json={"code": code},
             timeout=8,
+            trust_env=True,
         )
     except httpx.HTTPError as exc:
         raise WechatApiError("手机号授权服务暂时不可用") from exc
diff --git a/WonderQ-Admin/pyproject.toml b/WonderQ-Admin/pyproject.toml
index a4efe32..9209897 100644
--- a/WonderQ-Admin/pyproject.toml
+++ b/WonderQ-Admin/pyproject.toml
@@ -13,6 +13,7 @@ dependencies = [
   "PyJWT>=2.10,<2.11",
   "bcrypt>=4.2,<4.3",
   "email-validator>=2.2,<2.3",
+  "socksio>=1.0.0,<2.0.0",
 ]
 
 [project.optional-dependencies]
diff --git a/WonderQ-Admin/requirements.txt b/WonderQ-Admin/requirements.txt
index 1fcd0cb..7edcd38 100644
--- a/WonderQ-Admin/requirements.txt
+++ b/WonderQ-Admin/requirements.txt
@@ -10,3 +10,4 @@ bcrypt>=4.2,<4.3
 email-validator>=2.2,<2.3
 pytest>=8.3,<8.4
 httpx>=0.27,<0.28
+socksio>=1.0.0,<2.0.0
diff --git a/WonderQ-Admin/tests/test_home.py b/WonderQ-Admin/tests/test_home.py
index 813a79f..e560750 100644
--- a/WonderQ-Admin/tests/test_home.py
+++ b/WonderQ-Admin/tests/test_home.py
@@ -381,7 +381,7 @@ def test_admin_home_wanfa_recommendation_create_links_existing_category():
     assert fake_db.added[0].categoryId == "family-route"
 
 
-def test_public_home_returns_active_wanfa_category_recommendations():
+def test_public_home_places_active_wanfa_category_recommendations_in_experiences():
     recommendation = make_wanfa_recommendation()
     app = create_app()
     fake_db = FakeDb(
@@ -399,7 +399,8 @@ def test_public_home_returns_active_wanfa_category_recommendations():
         app.dependency_overrides.clear()
 
     assert response.status_code == 200
-    assert response.json()["data"]["playRecommendations"] == [
+    payload = response.json()["data"]
+    assert payload["experiences"] == [
         {
             "id": "recommendation-1",
             "categoryId": "family-route",
@@ -416,6 +417,7 @@ def test_public_home_returns_active_wanfa_category_recommendations():
             ],
         }
     ]
+    assert "playRecommendations" not in payload
 
 
 def test_public_home_returns_rendering_fields_for_all_sections():
@@ -438,17 +440,7 @@ def test_public_home_returns_rendering_fields_for_all_sections():
         "code": 200,
         "msg": "success",
         "data": {
-            "experiences": [
-                {
-                    "id": "waterfall-descent",
-                    "badge": "玩过推荐",
-                    "category": "瀑降体验",
-                    "title": "悬崖瀑降",
-                    "englishTitle": "WATERFALL DESCENT",
-                    "image": "https://example.test/waterfall.jpg",
-                    "demandKeyword": "悬崖瀑降",
-                }
-            ],
+            "experiences": [],
             "teamBuildings": [
                 {
                     "id": "wild-challenge",
@@ -468,7 +460,6 @@ def test_public_home_returns_rendering_fields_for_all_sections():
                     "photoCount": 2,
                 }
             ],
-            "playRecommendations": [],
         },
     }
 
diff --git a/WonderQ-Admin/tests/test_wechat.py b/WonderQ-Admin/tests/test_wechat.py
new file mode 100644
index 0000000..8831f8d
--- /dev/null
+++ b/WonderQ-Admin/tests/test_wechat.py
@@ -0,0 +1,48 @@
+from app import wechat
+from app.config import Settings
+
+
+class FakeResponse:
+    def __init__(self, payload: dict):
+        self.payload = payload
+
+    def json(self):
+        return self.payload
+
+
+def test_get_access_token_uses_configured_process_proxy(monkeypatch):
+    call = {}
+
+    def fake_get(_url, *, params, timeout, **kwargs):
+        call.update(params=params, timeout=timeout, **kwargs)
+        return FakeResponse({"access_token": "test-access-token", "expires_in": 7200})
+
+    monkeypatch.setattr(wechat.httpx, "get", fake_get)
+
+    token = wechat.get_access_token(
+        Settings(_env_file=None, wechat_miniapp_appid="wx-proxy-test", wechat_miniapp_secret="test-secret")
+    )
+
+    assert token == "test-access-token"
+    assert call["trust_env"] is True
+
+
+def test_exchange_phone_code_uses_configured_process_proxy(monkeypatch):
+    call = {}
+
+    def fake_post(_url, *, params, json, timeout, **kwargs):
+        call.update(params=params, json=json, timeout=timeout, **kwargs)
+        return FakeResponse(
+            {
+                "errcode": 0,
+                "phone_info": {"phoneNumber": "10000000000"},
+            }
+        )
+
+    monkeypatch.setattr(wechat, "get_access_token", lambda _settings=None: "test-access-token")
+    monkeypatch.setattr(wechat.httpx, "post", fake_post)
+
+    phone = wechat.exchange_phone_code("phone-code")
+
+    assert phone == "10000000000"
+    assert call["trust_env"] is True
diff --git a/WonderQ-MiniAPP/src/lib/store.ts b/WonderQ-MiniAPP/src/lib/store.ts
index 335da74..9b1f15e 100644
--- a/WonderQ-MiniAPP/src/lib/store.ts
+++ b/WonderQ-MiniAPP/src/lib/store.ts
@@ -1,7 +1,6 @@
 import { reactive } from "vue";
 import { createPublicLead, fetchPublicContent, fetchPublicHome } from "./api";
 import { fallbackData, getSubmitErrorMessage, normalizeSiteConfig } from "./data";
-import { homeExperienceFallback, normalizeHomeExperiences } from "@/pages/home/components/homeExperienceData";
 import { homeTeamBuildingFallback, normalizeHomeTeamBuildings } from "@/pages/home/components/homeTeamBuildingData";
 import { homeWildArchiveFallback, normalizeHomeWildArchives } from "@/pages/home/components/homeWildArchivesData";
 import { normalizeHomeWanfaRecommendations } from "@/pages/home/components/homeWanfaRecommendationData";
@@ -16,10 +15,9 @@ export const appState = reactive({
 });
 
 export const homeContentState = reactive({
-  experiences: homeExperienceFallback.map((item) => ({ ...item })),
+  experiences: [] as HomeWanfaRecommendation[],
   teamBuildings: homeTeamBuildingFallback.map((item) => ({ ...item })),
   wildArchives: homeWildArchiveFallback.map((item) => ({ ...item })),
-  playRecommendations: [] as HomeWanfaRecommendation[],
   loading: false,
   loaded: false,
   loadError: "",
@@ -48,16 +46,14 @@ export async function loadHomeContent() {
   homeContentState.loadError = "";
   try {
     const home = await fetchPublicHome();
-    homeContentState.experiences = normalizeHomeExperiences(home.experiences);
+    homeContentState.experiences = normalizeHomeWanfaRecommendations(home.experiences);
     homeContentState.teamBuildings = normalizeHomeTeamBuildings(home.teamBuildings);
     homeContentState.wildArchives = normalizeHomeWildArchives(home.wildArchives);
-    homeContentState.playRecommendations = normalizeHomeWanfaRecommendations(home.playRecommendations);
     homeContentState.loaded = true;
   } catch (error) {
-    homeContentState.experiences = homeExperienceFallback.map((item) => ({ ...item }));
+    homeContentState.experiences = [];
     homeContentState.teamBuildings = homeTeamBuildingFallback.map((item) => ({ ...item }));
     homeContentState.wildArchives = homeWildArchiveFallback.map((item) => ({ ...item }));
-    homeContentState.playRecommendations = [];
     homeContentState.loadError = getSubmitErrorMessage(error);
     homeContentState.loaded = true;
   } finally {
diff --git a/WonderQ-MiniAPP/src/lib/types.ts b/WonderQ-MiniAPP/src/lib/types.ts
index dac5e48..07f6ecc 100644
--- a/WonderQ-MiniAPP/src/lib/types.ts
+++ b/WonderQ-MiniAPP/src/lib/types.ts
@@ -95,10 +95,9 @@ export type PublicHomeWanfaRecommendation = {
 };
 
 export type PublicHomeResponse = {
-  experiences: PublicHomeExperience[];
+  experiences: PublicHomeWanfaRecommendation[];
   teamBuildings: PublicHomeTeamBuilding[];
   wildArchives: PublicHomeWildArchive[];
-  playRecommendations: PublicHomeWanfaRecommendation[];
 };
 
 export type PublicHomeWildArchivesResponse = {
diff --git a/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue b/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue
index 9b79fb8..628ff0b 100644
--- a/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue
+++ b/WonderQ-MiniAPP/src/pages/detail/components/DetailOverviewCard.vue
@@ -1,14 +1,6 @@
 <template>
   <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>
-    <text class="mt-3 block text-[24px] font-bold leading-8 text-[#24211f]">{{ presentation.title }}</text>
+    <text class="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">
diff --git a/WonderQ-MiniAPP/src/pages/home/components/HomeWanfaRecommendations.vue b/WonderQ-MiniAPP/src/pages/home/components/HomeWanfaRecommendations.vue
index af1bb4c..04b2754 100644
--- a/WonderQ-MiniAPP/src/pages/home/components/HomeWanfaRecommendations.vue
+++ b/WonderQ-MiniAPP/src/pages/home/components/HomeWanfaRecommendations.vue
@@ -1,30 +1,27 @@
 <template>
-  <view v-if="items.length" class="bg-[#fffdf9] px-[8.5%] pb-8 pt-7">
-    <view class="mb-[14px] flex items-end justify-between gap-4">
-      <view>
-        <text class="block font-serif text-[21px] font-semibold leading-7 tracking-[0.04em] text-[#18212a]">玩法推荐</text>
-        <text class="mt-1 block text-[12px] leading-[18px] text-[#7a7d78]">按主题挑选适合你的旅行方式</text>
-      </view>
-      <text class="shrink-0 font-sans text-[9px] leading-4 tracking-[0.18em] text-[#a3988e]">WAYS TO GO</text>
-    </view>
-
-    <view class="grid grid-cols-2 gap-3">
-      <view
-        v-for="item in items"
-        :key="item.id"
-        class="min-w-0 overflow-hidden rounded-[12px] border border-[#e8e1d7] bg-white tap-feedback active:border-[#b97b5f] active:bg-[#fffaf4]"
-        :aria-label="`${item.label}，${item.routes.length} 条路线`"
-        @click="$emit('select', item)"
-      >
-        <image class="block h-[112px] w-full bg-[#ebe8e2] min-[431px]:h-[126px]" :src="item.routes[0].image" mode="aspectFill" />
-        <view class="p-[11px_10px_13px]">
-          <view class="flex min-h-[22px] items-center justify-between gap-1.5">
-            <text class="min-w-0 flex-1 font-serif text-[15px] font-semibold leading-[22px] text-[#1c252d]">{{ item.label }}</text>
-            <uni-icons type="right" :size="16" color="#b5aaa0" />
+  <view v-if="items.length" class="bg-[#fffdf9] px-[8.5%] pb-[26px]">
+    <view
+      v-for="item in items"
+      :key="item.id"
+      class="w-full bg-[#fffdf9] pt-[18px] tap-feedback min-[431px]:pt-[22px]"
+      :aria-label="`${item.label}，${item.routes.length} 条路线`"
+      @click="$emit('select', item)"
+    >
+      <view class="flex items-start justify-between gap-4 pr-[18px] min-[431px]:pr-[22px]">
+        <view class="min-w-0 flex-1">
+          <view class="flex min-h-5 items-center gap-[10px]">
+            <text class="inline-flex min-h-5 items-center rounded-[12px] border border-[#eadfce] bg-[#f8f1e8] px-[6px] text-[10px] leading-[18px] tracking-[0.06em] text-[#98744b]">玩法推荐</text>
+            <text class="min-w-0 truncate text-[13px] font-semibold leading-5 text-[#283b4d]">{{ item.label }} · {{ item.routes.length }} 条路线</text>
           </view>
-          <text class="mt-1.5 block text-[11px] leading-[17px] text-[#7a7d78]">{{ item.routes.length }} 条路线可选</text>
+          <text class="mt-[10px] block whitespace-pre-line font-serif text-[25px] font-medium leading-8 tracking-[0.04em] text-[#18212a]">{{ item.routes[0].title }}</text>
+          <text class="mt-0.5 block font-sans text-[11px] font-medium leading-[18px] tracking-[0.08em] text-[#a7a0a0]">{{ item.routes[0].subtitle }}</text>
+        </view>
+        <view class="mt-8 flex h-10 w-6 shrink-0 items-center justify-center" aria-hidden="true">
+          <uni-icons type="right" :size="24" color="#c8c8c8" />
         </view>
       </view>
+
+      <image class="mt-[17px] block h-[174px] w-full rounded-[12px] bg-[#eae7e1] min-[431px]:h-[190px]" :src="item.routes[0].image" mode="aspectFill" />
     </view>
   </view>
 </template>
diff --git a/WonderQ-MiniAPP/src/pages/home/index.vue b/WonderQ-MiniAPP/src/pages/home/index.vue
index b0a3eec..56b7c55 100644
--- a/WonderQ-MiniAPP/src/pages/home/index.vue
+++ b/WonderQ-MiniAPP/src/pages/home/index.vue
@@ -3,7 +3,7 @@
     <view class="wq-phone">
       <scroll-view scroll-y class="h-screen no-scrollbar" :show-scrollbar="false">
         <HomeHeroCarousel :slides="appState.data.heroSlides" />
-        <HomeExperienceList :items="homeContentState.experiences" @select="openExperience" />
+        <HomeWanfaRecommendations :items="homeContentState.experiences" @select="openWanfaRecommendation" />
         <HomeVehicleGrid :vehicle-options="vehicleOptions" @select="openVehicle" />
         <HomeTeamBuilding :items="homeContentState.teamBuildings" @select="openTeamBuilding" />
         <HomeWildArchives :items="homeContentState.wildArchives" @select="openWildArchive" @more="openWildArchives" />
@@ -16,13 +16,13 @@
 import { computed } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import HomeHeroCarousel from "./components/HomeHeroCarousel.vue";
-import HomeExperienceList from "./components/HomeExperienceList.vue";
+import HomeWanfaRecommendations from "./components/HomeWanfaRecommendations.vue";
 import HomeTeamBuilding from "./components/HomeTeamBuilding.vue";
 import HomeWildArchives from "./components/HomeWildArchives.vue";
 import HomeVehicleGrid from "./components/HomeVehicleGrid.vue";
-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 {
   goTeamBuildingDetail,
   goWanfaRouteDetail,
@@ -38,8 +38,11 @@ onShow(() => {
   void loadHomeContent();
 });
 
-function openExperience(item: HomeExperience) {
-  goWanfaRouteDetail(item.id);
+function openWanfaRecommendation(item: HomeWanfaRecommendation) {
+  const route = item.routes[0];
+  if (route) {
+    goWanfaRouteDetail(route.id);
+  }
 }
 
 function openVehicle(item: any) {
diff --git a/WonderQ-MiniAPP/src/pages/mine/components/MineMember.vue b/WonderQ-MiniAPP/src/pages/mine/components/MineMember.vue
index 5caf17b..4bfafc4 100644
--- a/WonderQ-MiniAPP/src/pages/mine/components/MineMember.vue
+++ b/WonderQ-MiniAPP/src/pages/mine/components/MineMember.vue
@@ -1,6 +1,5 @@
 <template>
   <view class="min-h-screen bg-transparent">
-    <TopHeader title="我的" subtitle="需求与服务管家" @back="$emit('backHome')" />
     <view class="px-4 pt-4">
       <view class="brand-panel rounded-[26px] p-5 text-white">
         <text class="block text-[12px] font-semibold uppercase tracking-[0.12em] text-[#f6dfb7]">万趣旅行</text>
@@ -8,21 +7,9 @@
         <text class="mt-2 block text-[12px] leading-5 text-white/80">{{ customerLine }}</text>
       </view>
     </view>
-    <view class="px-4 py-4">
-      <view class="elevated-card rounded-[22px] p-5">
-        <text class="block text-[17px] font-bold text-[#1f2c25]">已登录</text>
-        <text class="mt-2 block text-[13px] leading-6 text-[#718073]">你的手机号已完成绑定，后续可通过服务管家沟通出行日期、人数与偏好。</text>
-      </view>
-    </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import TopHeader from "@/components/TopHeader.vue";
-
 defineProps<{ customerLine: string }>();
-
-defineEmits<{
-  backHome: [];
-}>();
 </script>
diff --git a/WonderQ-MiniAPP/src/pages/mine/index.vue b/WonderQ-MiniAPP/src/pages/mine/index.vue
index a2776d1..85e4889 100644
--- a/WonderQ-MiniAPP/src/pages/mine/index.vue
+++ b/WonderQ-MiniAPP/src/pages/mine/index.vue
@@ -3,7 +3,7 @@
     <view class="wq-phone h-screen overflow-hidden">
       <MineGuest v-if="!session" @login="goLogin" />
       <scroll-view v-else scroll-y class="h-full no-scrollbar">
-        <MineMember :customer-line="customerLine" @back-home="goRoot('/pages/home/index')" />
+        <MineMember :customer-line="customerLine" />
       </scroll-view>
     </view>
   </view>
@@ -13,7 +13,6 @@
 import { ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import { getAuthSession, loginWithPhoneCode } from "@/lib/auth";
-import { goRoot } from "@/lib/navigation";
 import { loadAppData } from "@/lib/store";
 import type { AuthSession } from "@/lib/types";
 import MineGuest from "./components/MineGuest.vue";
diff --git a/docs/home-api.md b/docs/home-api.md
index eda596c..3fdb075 100644
--- a/docs/home-api.md
+++ b/docs/home-api.md
@@ -23,7 +23,7 @@
 
 首页正式接口返回的所有资源 `id` 都是稳定 UUID 字符串。不要把下方 fallback 文件中的语义 ID 当作服务端 ID，也不要在接口序列化时重新生成 ID；首页卡片跳转详情、排序和删除必须复用接口返回的同一 ID。
 
-当前首页通过 `GET /api/public/home` 消费四类内容；三个卡片 mock 数组仍作为接口失败、空响应或字段缺失时的前台 fallback，玩法推荐无本地模拟数据时保持空态。Admin UI 通过本文件列出的 Admin API 维护正式数据。
+当前首页通过 `GET /api/public/home` 消费三类内容；团队共创和极境视界 mock 数组仍作为接口失败、空响应或字段缺失时的前台 fallback，`experiences` 中的玩法推荐无本地模拟数据时保持空态。Admin UI 仍通过本文件列出的 Admin API 分别维护体验推荐和玩法推荐关联。
 
 本文件所有 JSON 示例的业务对象均位于统一响应的 `data` 字段内，完整包裹格式见 [api-response-contract.md](./api-response-contract.md)。
 
@@ -289,14 +289,13 @@ Content-Type: application/json
 GET /api/public/home
 ```
 
-无需鉴权。接口只返回 `isActive === true` 的记录，首页卡片和玩法推荐分别按 `sortOrder` 升序返回，并移除管理端状态、排序和审计时间字段：
+无需鉴权。接口只返回 `isActive === true` 的记录，并移除管理端状态、排序和审计时间字段。为统一三端首页消费模型，玩法推荐数据放入 `experiences` 字段，响应中不再返回 `playRecommendations`：
 
 ```ts
 type PublicHomeResponse = {
-  experiences: HomeExperience[];
+  experiences: HomeWanfaRecommendation[];
   teamBuildings: HomeTeamBuilding[];
   wildArchives: HomeWildArchive[];
-  playRecommendations: HomeWanfaRecommendation[];
 };
 
 type HomeWanfaRecommendation = {
@@ -316,7 +315,9 @@ type WanfaRoute = {
 };
 ```
 
-四组列表始终返回数组；没有可用内容时返回空数组。玩法推荐只返回启用的关联记录，并展开关联分类当前的路线。MiniAPP 应在数据层归一化字段并保留对应 mock fallback，不在页面组件内直接请求接口。
+注意：`/api/admin/home/experiences` 仍是后台体验推荐 CRUD 资源；Public `/api/public/home` 的 `experiences` 字段已统一承载玩法推荐数据，不能按后台体验推荐字段解读。
+
+三组列表始终返回数组；没有可用内容时返回空数组。`experiences` 只返回启用的玩法推荐关联记录，并展开关联分类当前的路线。MiniAPP 应在数据层将 `experiences` 归一化为玩法推荐，不再读取或维护 `playRecommendations` 字段。
 
 首页玩法推荐点击行为：当 `routes` 存在第一条路线时，MiniAPP 使用该路线的 `id` 调用 `goWanfaRouteDetail`，进入 `/pages/detail/index?routeId={route.id}`；没有关联路线时才使用 `demandKeyword` 或分类名称进入需求页。路线详情字段和 Public 详情接口以 [详情展示契约](./detail-api.md) 为准。
 
@@ -434,7 +435,7 @@ reorderHomeWanfaRecommendations(itemIds: string[]);
 
 - Admin API 返回启用和停用的完整记录，供管理端维护。
 - 未来 Public API 只返回已发布且启用的首页内容；Public API 的响应字段应与本契约的渲染字段兼容，但不应暴露 `createdAt`、`updatedAt` 等管理元数据。
-- MiniAPP 已在 `src/lib/api.ts`、`src/lib/types.ts` 和 `src/lib/store.ts` 接入 Public API；首页组件通过共享状态消费归一化后的四类内容，玩法推荐按关联分类展示。
+- MiniAPP 已在 `src/lib/api.ts`、`src/lib/types.ts` 和 `src/lib/store.ts` 接入 Public API；首页组件通过共享状态消费归一化后的三类内容，`experiences` 按关联分类展示玩法推荐。
 - 后端不得把 `demandKeyword` 解析成 Product 或订单关联；如需线路、详情或预订能力，应另立领域契约。
 
 ## 团队共创详情
diff --git a/docs/images/2026-08-18_220929.png b/docs/images/2026-08-18_220929.png
deleted file mode 100644
index 45c36b2..0000000
Binary files a/docs/images/2026-08-18_220929.png and /dev/null differ
diff --git a/docs/images/2026-08-18_221642.png b/docs/images/2026-08-18_221642.png
deleted file mode 100644
index 8b46f34..0000000
Binary files a/docs/images/2026-08-18_221642.png and /dev/null differ
diff --git a/docs/images/2e901149-1329-42d3-b335-3a2bafdcf8e6.png b/docs/images/2e901149-1329-42d3-b335-3a2bafdcf8e6.png
deleted file mode 100644
index c7d764e..0000000
Binary files a/docs/images/2e901149-1329-42d3-b335-3a2bafdcf8e6.png and /dev/null differ
diff --git a/docs/public-api.md b/docs/public-api.md
index f834d10..e668cb5 100644
--- a/docs/public-api.md
+++ b/docs/public-api.md
@@ -145,14 +145,13 @@ type PublicConciergeResponse = {
 
 ### `GET /api/public/home`
 
-无需鉴权。接口只返回后台启用的首页体验推荐、团队共创和极境视界内容，按后台排序返回，不暴露管理元数据。
+无需鉴权。接口只返回后台启用的首页玩法推荐、团队共创和极境视界内容，按后台排序返回，不暴露管理元数据。为统一前台消费模型，玩法推荐列表放在 `experiences` 字段，响应中不再返回 `playRecommendations`。
 
 ```ts
 type PublicHomeResponse = {
-  experiences: HomeExperience[];
+  experiences: HomeWanfaRecommendation[];
   teamBuildings: HomeTeamBuilding[];
   wildArchives: HomeWildArchive[];
-  playRecommendations: HomeWanfaRecommendation[];
 };
 
 type HomeWanfaRecommendation = {
@@ -171,16 +170,6 @@ type WanfaRoute = {
   demandKeyword: string;
 };
 
-type HomeExperience = {
-  id: string;
-  badge: string;
-  category: string;
-  title: string;
-  englishTitle: string;
-  image: string;
-  demandKeyword: string;
-};
-
 type HomeTeamBuilding = {
   id: string;
   tag: string;
@@ -204,7 +193,7 @@ type HomeWildArchive = {
 };
 ```
 
-无可用内容时，`experiences`、`teamBuildings`、`wildArchives` 和 `playRecommendations` 均返回空数组。玩法推荐由首页内容域关联玩法分类后生成，接口只返回启用的关联及分类当前路线；MiniAPP 接口失败或字段不完整时使用首页对应 fallback，玩法推荐缺省为空态。
+无可用内容时，`experiences`、`teamBuildings` 和 `wildArchives` 均返回空数组。`experiences` 实际承载首页玩法推荐，由首页内容域关联玩法分类后生成，接口只返回启用的关联及分类当前路线；MiniAPP 接口失败或字段不完整时使用对应空态，不再读取 `playRecommendations`。
 
 客片案例更多列表使用 `GET /api/public/home/wild-archives`，返回同样的摘要字段；详情使用 `GET /api/public/home/wild-archives/{archiveId}`，在摘要字段基础上增加 `images: string[]`。首页卡片点击详情，`查看更多` 点击案例列表，不再跳转需求页。