+
+
+ {title}
+ {description}
+
+
+ {meta}
+
+
+ );
+}
+
+function ToastStack({ toasts, onClose }: { toasts: Toast[]; onClose: (id: string) => void }) {
+ if (!toasts.length) return null;
+ return (
+
+
+ {title}
+ {description}
+
+
+ {meta}
+
+ {children}
+
+ {toasts.map((toast) => (
+
+ {toast.tone === "success" ?
+ ))}
+
+ );
+}
+
+function LoginScreen({ onDone }: { onDone: () => void }) {
+ const [email, setEmail] = useState("admin@example.com");
+ const [password, setPassword] = useState("ChangeMe123!");
+ const [error, setError] = useState("");
+ const [loading, setLoading] = useState(false);
+
+ const submit = async (event: FormEvent) => {
+ event.preventDefault();
+ setLoading(true);
+ setError("");
+ try {
+ const result = await login(email, password);
+ setToken(result.token);
+ onDone();
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "登录失败");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+ {fixedPage ? activePage.title : "小程序维护地图"}
+{fixedPage ? activePage.subtitle : "按用户看到的前台页面组织后台，逐层展开到可维护内容。"}
+
+
+
+
+
+ {message}
: null} +
+ {!fixedPage ? (
+
+ ) : (
+
+ 当前维护页面
+
+ )}
+
+
+
+
+
+ {moduleEditable(moduleId) && selectedItem ? (
+ {
+ setDraft(nextDraft);
+ onDirtyChange(true);
+ }}
+ onSave={save}
+ />
+ ) : (
+
+
+ {activePage.title}
+{activePage.frontPath}
+ {activePage.subtitle} +
+
+ 页面模块
+ {activePage.modules.map((module, index) => ( + + ))} +{activeModule.label}
+{activeModule.hint}
+ {moduleEditable(moduleId) ? ( +
+ {editableItems.map((item) => (
+
+ ))}
+
+ ) : (
+
+
+ );
+ }
+
+ return (
+ 这个模块由客户需求列表维护，重点是状态流转、服务管家跟进和来源追踪。
+ +
+
+ );
+}
+
+function SiteItemEditor({
+ moduleId,
+ draft,
+ onDraft,
+ onSave,
+}: {
+ moduleId: SiteModule;
+ draft: SiteItemPatch;
+ onDraft: (draft: SiteItemPatch) => void;
+ onSave: () => void;
+}) {
+ const primaryKey = moduleId === "heroSlides" ? "title" : moduleId === "destinations" ? "name" : moduleId === "themes" ? "label" : "alt";
+ const primaryLabel = moduleId === "heroSlides" ? "轮播标题" : moduleId === "destinations" ? "目的地名称" : moduleId === "themes" ? "主题名称" : "入口文案";
+
+ return (
+ 这个模块引用商品库。编辑商品后，首页商品卡、搜索结果和详情页会同步使用同一份数据。
+
+ {products.slice(0, 4).map((product) => (
+
+ 
+ {product.title}
+
+ ))}
+
+
+
+
+
+
+
+ );
+}
+
+function FrontPreview({ config, moduleId, products }: { config: SiteConfig; moduleId: ModuleId; products: Product[] }) {
+ return (
+ 编辑当前内容
+ 保存后会影响对应前台模块 + + +
+
+
+ {moduleId === "heroSlides" ? (
+
+ ) : null}
+
+
+
+ {moduleId !== "destinations" ? (
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+ {draft.image ? 
:
+
+ 万趣贵州
+
+ );
+}
+
+function ProductManager({
+ destinations,
+ onDirtyChange,
+ notify,
+}: {
+ destinations: Destination[];
+ onDirtyChange: (dirty: boolean) => void;
+ notify: (toast: Omit
+ 
+ {config.heroSlides[0]?.title}
+
+
+ 探索贵州
+ 主题甄选
+ 精选线路
+
+
+ {config.destinations.slice(0, 6).map((destination) => (
+ {destination.name}
+ ))}
+
+
+ {products.slice(0, 2).map((product) => (
+
+
+ {product.subtitle || product.title}
+
+ ))}
+
+
+
+
+ {message ?
+
+
+
+ 商品维护
+先管理商品列表，再点击单个商品进入详情维护。
+{message}
: null} +
+
+ {products.length}
+ 当前列表
+
+
+ {publishedCount}
+ 已上架
+
+
+ {draftCount}
+ 草稿
+
+
+
+
+ {products.map((product) => (
+
+ ))}
+ {!products.length ?
+ 暂无商品，点击右上角新建商品。
: null} +
+
+
+ {message ?
+
+ {selected ? "商品详情维护" : "新建商品"}
+把列表卡片、销售信息、详情图文拆成可单独维护的模块。
+
+
+
+
+ {message}
: null} +
+
+
+
+
+
+