@lmy54321/design-system 1.1.4 → 1.2.0

package/template/src/pages/TemplateDetailPage.tsx

@@ -0,0 +1,287 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { Toast } from "@lmy54321/design-system";
+import { DraggablePanel, DRAWER_STATES } from "@lmy54321/design-system";
+import { TencentMap } from "@lmy54321/design-system";
+
+export interface TemplateData {
+  icon: string;
+  label: string;
+  desc: string;
+  color: string;
+  fullDesc: string;
+  duration: string;
+  distance: string;
+  difficulty: string;
+  stops: { name: string; icon: string; dur: string; desc: string }[];
+}
+
+interface Props {
+  template: TemplateData;
+  onBack: () => void;
+  onCreatePlan: (plan: {
+    title: string;
+    spots: number;
+    image: string;
+    stops: { name: string; icon: string; dur: string }[];
+  }) => void;
+}
+
+export function TemplateDetailPage({ template, onBack, onCreatePlan }: Props) {
+  const [panelState, setPanelState] = useState(DRAWER_STATES.MEDIUM);
+  const [toast, setToast] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  const showToast = useCallback((t: string) => setToast(t), []);
+  useEffect(() => {
+    if (!toast) return;
+    const id = setTimeout(() => setToast(null), 2200);
+    return () => clearTimeout(id);
+  }, [toast]);
+
+  const handleCreate = useCallback(() => {
+    setCreating(true);
+    setTimeout(() => {
+      onCreatePlan({
+        title: template.label,
+        spots: template.stops.length,
+        image: "/images/scene/trip-culture.png",
+        stops: template.stops,
+      });
+    }, 800);
+  }, [template, onCreatePlan]);
+
+  /* 计算总时长（小时） */
+  const totalHours = template.stops.reduce((sum, s) => {
+    const match = s.dur.match(/(\d+(\.\d+)?)/);
+    return sum + (match ? parseFloat(match[1]) : 0);
+  }, 0);
+
+  return (
+    <div
+      className="relative w-full h-[100dvh] overflow-hidden bg-background"
+      style={{ fontFamily: "var(--font-family-sans)" }}
+    >
+      {/* 地图背景 */}
+      <TencentMap className="absolute inset-0 w-full h-full" center={{ lat: 39.909, lng: 116.397 }} />
+
+      {/* 地图上的站点标记 */}
+      <div className="absolute inset-0 pointer-events-none z-[5]">
+        {template.stops.map((stop, i) => {
+          const angle = (i / template.stops.length) * Math.PI * 1.2 + 0.3;
+          const r = 15 + i * 3;
+          const top = 45 + Math.sin(angle) * r;
+          const left = 30 + (i / (template.stops.length - 1 || 1)) * 40;
+          return (
+            <div
+              key={stop.name}
+              className="absolute flex flex-col items-center pointer-events-auto"
+              style={{ top: `${top}%`, left: `${left}%`, transform: "translate(-50%,-100%)" }}
+            >
+              <div className="bg-black/60 text-white text-[9px] font-medium px-[5px] py-[1px] rounded-[5px] mb-[2px] whitespace-nowrap backdrop-blur-sm">
+                {stop.name}
+              </div>
+              <div
+                className={cn(
+                  "size-[22px] rounded-full flex items-center justify-center text-white text-[10px] font-bold shadow-md",
+                  i === 0 && "ring-2 ring-white/60"
+                )}
+                style={{ backgroundColor: template.color }}
+              >
+                {i + 1}
+              </div>
+              {i < template.stops.length - 1 && (
+                <div className="w-[1.5px] h-[20px]" style={{ backgroundColor: `${template.color}40` }} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* DraggablePanel */}
+      <DraggablePanel
+        state={panelState}
+        onStateChange={setPanelState}
+        customSmallHeight={280}
+        customMediumHeight={480}
+        topToolbar={{
+          mode: "center-title",
+          title: template.label,
+          showBack: true,
+          onBack,
+        }}
+        showTopToolbarInStates={[DRAWER_STATES.SMALL, DRAWER_STATES.MEDIUM, DRAWER_STATES.LARGE]}
+        bottomBar={
+          <div className="px-[var(--spacing-base)] pb-[var(--spacing-base)] pt-[var(--spacing-xs)] border-t border-black/[0.04] shrink-0">
+            <div className="flex gap-[var(--spacing-xs)]">
+              <Btn
+                size="large"
+                variant="secondary"
+                label="收藏模板"
+                icon={<IconFont name="star" size="18px" />}
+                onClick={() => showToast("已收藏模板")}
+                className="flex-1"
+              />
+              <Btn
+                size="large"
+                variant="primary"
+                label={creating ? "生成中..." : "一键生成计划"}
+                icon={creating ? null : <IconFont name="add" size="18px" />}
+                onClick={handleCreate}
+                className="flex-[2]"
+                disabled={creating}
+              />
+            </div>
+          </div>
+        }
+      >
+        {/* 模板头部信息 */}
+        <div className="px-[var(--spacing-base)] shrink-0">
+          {/* 彩色头部横幅 */}
+          <div className="rounded-[16px] overflow-hidden mb-[12px]">
+            <div
+              className="relative h-[120px] flex items-end p-[14px]"
+              style={{ background: `linear-gradient(135deg, ${template.color}20, ${template.color}08)` }}
+            >
+              <div className="absolute top-[12px] right-[14px] opacity-10">
+                <IconFont name={template.icon} size="80px" style={{ color: template.color }} />
+              </div>
+              <div className="relative z-[1]">
+                <div className="flex items-center gap-[6px] mb-[6px]">
+                  <div
+                    className="size-[28px] rounded-[8px] flex items-center justify-center"
+                    style={{ backgroundColor: `${template.color}20` }}
+                  >
+                    <IconFont name={template.icon} size="16px" style={{ color: template.color }} />
+                  </div>
+                  <Tag
+                    label={template.difficulty}
+                    size="sm"
+                    className="border-transparent"
+                    style={{ backgroundColor: `${template.color}15`, color: template.color }}
+                  />
+                </div>
+                <p className="text-[13px] text-foreground/70 leading-[18px]">{template.fullDesc}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* 路线摘要 */}
+          <div className="flex items-center gap-[16px] mb-[14px]">
+            <div className="flex items-center gap-[4px]">
+              <IconFont name="location" size="14px" style={{ color: template.color }} />
+              <span className="text-[13px] text-foreground font-medium">{template.stops.length}站</span>
+            </div>
+            <div className="flex items-center gap-[4px]">
+              <IconFont name="map-navigation" size="14px" className="text-muted-foreground" />
+              <span className="text-[13px] text-muted-foreground">{template.distance}</span>
+            </div>
+            <div className="flex items-center gap-[4px]">
+              <IconFont name="time" size="14px" className="text-muted-foreground" />
+              <span className="text-[13px] text-muted-foreground">{template.duration}</span>
+            </div>
+            <div className="flex items-center gap-[4px] ml-auto">
+              <IconFont name="time" size="13px" className="text-muted-foreground" />
+              <span className="text-[13px] text-muted-foreground">约{totalHours}h</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 分割线 */}
+        <div className="mx-[var(--spacing-base)] h-px bg-black/[0.06] shrink-0" />
+
+        {/* 站点列表 */}
+        <div className="overflow-y-auto flex-1 min-h-0 px-[var(--spacing-base)] pt-[12px]">
+          <p className="text-[14px] font-medium text-foreground mb-[10px]">推荐路线</p>
+          {template.stops.map((stop, i) => (
+            <motion.div
+              key={stop.name}
+              className="flex gap-[var(--spacing-sm)]"
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.06 * i, duration: 0.25 }}
+            >
+              <div className="flex flex-col items-center w-[24px] shrink-0">
+                <div
+                  className="size-[24px] rounded-full flex items-center justify-center shrink-0 text-white text-[11px] font-bold"
+                  style={{ backgroundColor: template.color }}
+                >
+                  {i + 1}
+                </div>
+                {i < template.stops.length - 1 && (
+                  <div className="w-[1.5px] flex-1 min-h-[24px]" style={{ backgroundColor: `${template.color}30` }} />
+                )}
+              </div>
+              <div className="flex-1 min-w-0 pb-[var(--spacing-sm)]">
+                <div className="flex items-center gap-[6px] rounded-[14px] p-[10px] bg-card-muted">
+                  <div
+                    className="size-[32px] rounded-[10px] flex items-center justify-center shrink-0"
+                    style={{ backgroundColor: `${template.color}12` }}
+                  >
+                    <IconFont name={stop.icon} size="18px" style={{ color: template.color }} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <span className="text-[14px] font-medium text-foreground leading-[20px] block truncate">{stop.name}</span>
+                    <span className="text-[12px] text-muted-foreground leading-[16px]">{stop.desc} · {stop.dur}</span>
+                  </div>
+                  <IconFont name="chevron-right" size="16px" className="text-muted-foreground shrink-0" />
+                </div>
+              </div>
+            </motion.div>
+          ))}
+
+          {/* 模板说明 */}
+          <div className="flex items-center gap-[8px] p-[12px] rounded-[14px] bg-accent/[0.04] mt-[4px] mb-[16px]">
+            <IconFont name="lightbulb" size="16px" className="text-accent shrink-0" />
+            <p className="text-[12px] text-accent/70 leading-[17px]">
+              一键生成计划后，可在行程详情中自由调整站点顺序和停留时间
+            </p>
+          </div>
+        </div>
+      </DraggablePanel>
+
+      {/* Toast */}
+      <div className="fixed top-[120px] left-0 right-0 z-[200] flex justify-center pointer-events-none">
+        <AnimatePresence>
+          {toast && (
+            <motion.div
+              className="pointer-events-auto"
+              initial={{ y: -10, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: -10, opacity: 0 }}
+            >
+              <Toast lines={[toast]} showIcon showClose onClose={() => setToast(null)} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {/* 生成中遮罩 */}
+      <AnimatePresence>
+        {creating && (
+          <motion.div
+            className="absolute inset-0 z-[300] bg-black/40 flex flex-col items-center justify-center"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <div className="bg-card rounded-[20px] p-[24px] flex flex-col items-center shadow-xl">
+              <div
+                className="size-[48px] rounded-full flex items-center justify-center mb-[12px] animate-pulse"
+                style={{ backgroundColor: `${template.color}15` }}
+              >
+                <IconFont name={template.icon} size="24px" style={{ color: template.color }} />
+              </div>
+              <p className="text-[15px] font-medium text-foreground">正在生成计划...</p>
+              <p className="text-[12px] text-muted-foreground mt-[4px]">基于「{template.label}」创建行程</p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/template/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    host: "0.0.0.0",
+    port: 5173,
+    allowedHosts: "all",
+  },
+});