@lmy54321/design-system 1.1.4 → 1.3.0

package/template/src/pages/CommuteFoodPage.tsx

@@ -0,0 +1,548 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Toast } from "@lmy54321/design-system";
+import { ImageWithFallback } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { TencentMap } from "@lmy54321/design-system";
+import { cdnImage } from "../config/cdn";
+
+/* ══════════════════════════════════════════
+   数据
+   ══════════════════════════════════════════ */
+
+const commuteInfo = {
+  greeting: "早上好",
+  remainKm: 8.6,
+  estimateMin: 16,
+  nearestStore: 2.3,
+  fastestPickup: 15,
+  time: "08:32",
+  date: "3月2日 周一",
+  weather: "晴 12°C",
+};
+
+interface BrandStore {
+  id: string;
+  brand: string;
+  logo: string;
+  branch: string;
+  distance: string;
+  type: "destination" | "enroute" | "nearby";
+  suggestion: string;
+  color: string;
+}
+
+const brandStores: BrandStore[] = [
+  {
+    id: "1",
+    brand: "麦当劳",
+    logo: cdnImage("/images/scene/hamburger.png"),
+    branch: "人民广场店",
+    distance: "3.3km",
+    type: "destination",
+    suggestion: ""来份麦辣鸡腿堡套餐"",
+    color: "bg-[#DA291C]/10",
+  },
+  {
+    id: "2",
+    brand: "瑞幸咖啡",
+    logo: cdnImage("/images/scene/pour-coffee.png"),
+    branch: "人民广场店",
+    distance: "3.1km",
+    type: "destination",
+    suggestion: ""来杯冰拿铁换燕麦奶"",
+    color: "bg-[#00609C]/10",
+  },
+  {
+    id: "3",
+    brand: "达美乐披萨",
+    logo: cdnImage("/images/scene/pizza.png"),
+    branch: "科技广场店",
+    distance: "2.6km",
+    type: "enroute",
+    suggestion: ""点个8寸的肉酱披萨"",
+    color: "bg-[#006491]/10",
+  },
+  {
+    id: "4",
+    brand: "奈雪の茶",
+    logo: cdnImage("/images/scene/matcha.png"),
+    branch: "科技广场店",
+    distance: "1.3km",
+    type: "nearby",
+    suggestion: ""我要超浓千层抹"",
+    color: "bg-[#B71C2B]/10",
+  },
+  {
+    id: "5",
+    brand: "星巴克",
+    logo: cdnImage("/images/scene/cafe.png"),
+    branch: "CBD中心店",
+    distance: "2.9km",
+    type: "destination",
+    suggestion: ""大杯美式不加糖"",
+    color: "bg-[#00704A]/10",
+  },
+  {
+    id: "6",
+    brand: "肯德基",
+    logo: cdnImage("/images/scene/hamburger.png"),
+    branch: "太古里店",
+    distance: "1.8km",
+    type: "enroute",
+    suggestion: ""要份早餐帕尼尼"",
+    color: "bg-[#E4002B]/10",
+  },
+];
+
+interface DealItem {
+  id: string;
+  rank: number;
+  name: string;
+  store: string;
+  distance: string;
+  image: string;
+  price: number;
+  originalPrice: number;
+  actionLabel: string;
+  isFrequent?: boolean;
+}
+
+const dealItems: DealItem[] = [
+  {
+    id: "d1",
+    rank: 1,
+    name: "大堡口福套餐",
+    store: "麦当劳三诺大厦店",
+    distance: "2.1km",
+    image: cdnImage("/images/scene/hamburger.png"),
+    price: 22.9,
+    originalPrice: 39.9,
+    actionLabel: "选 1 号",
+  },
+  {
+    id: "d2",
+    rank: 2,
+    name: "大橘美式咖啡",
+    store: "瑞幸万豪店",
+    distance: "1.1km",
+    image: cdnImage("/images/scene/pour-coffee.png"),
+    price: 12.9,
+    originalPrice: 23.9,
+    actionLabel: "选 2 号",
+    isFrequent: true,
+  },
+  {
+    id: "d3",
+    rank: 3,
+    name: "照烧风味牛肉披萨",
+    store: "达美乐江夏店",
+    distance: "1.2km",
+    image: cdnImage("/images/scene/pizza.png"),
+    price: 59,
+    originalPrice: 88.9,
+    actionLabel: "选 3 号",
+    isFrequent: true,
+  },
+  {
+    id: "d4",
+    rank: 4,
+    name: "超浓千层抹茶拿铁",
+    store: "奈雪の茶科技广场店",
+    distance: "1.3km",
+    image: cdnImage("/images/scene/matcha.png"),
+    price: 18.9,
+    originalPrice: 32,
+    actionLabel: "选 4 号",
+  },
+];
+
+const typeLabels: Record<string, { text: string; cls: string }> = {
+  destination: { text: "目的地", cls: "bg-accent/10 text-accent" },
+  enroute: { text: "沿途", cls: "bg-chart-4/15 text-chart-4" },
+  nearby: { text: "附近", cls: "bg-muted text-muted-foreground" },
+};
+
+/* ══════════════════════════════════════════
+   左侧面板 — 地图 + 通勤状态 + 语音点餐
+   ══════════════════════════════════════════ */
+
+function LeftPanel({ onToast }: { onToast: (t: string) => void }) {
+  return (
+    <div className="flex flex-col h-full">
+      {/* 地图区域 */}
+      <div className="flex-1 relative rounded-[24px] overflow-hidden border border-card-border shadow-[var(--elevation-sm)]">
+        <TencentMap className="absolute inset-0 w-full h-full" center={{ lat: 31.23, lng: 121.47 }} />
+
+        {/* 左上角标注 */}
+        <div className="absolute top-[20px] left-[20px] z-10 flex items-center gap-[10px]">
+          <div className="flex items-center gap-[6px] px-[12px] py-[8px] rounded-[14px] bg-white/85 backdrop-blur-sm shadow-sm">
+            <div className="size-[10px] rounded-full bg-accent" />
+            <span className="text-[15px] text-foreground font-medium">当前位置</span>
+          </div>
+          <div className="flex items-center gap-[6px] px-[12px] py-[8px] rounded-[14px] bg-white/85 backdrop-blur-sm shadow-sm">
+            <div className="size-[10px] rounded-full bg-destructive" />
+            <span className="text-[15px] text-foreground font-medium">公司</span>
+          </div>
+        </div>
+
+        {/* 右下角 */}
+        <button
+          onClick={() => onToast("查看完整地图")}
+          className="absolute bottom-[20px] right-[20px] z-10 flex items-center gap-[8px] px-[16px] py-[10px] rounded-[14px] bg-white/85 backdrop-blur-sm shadow-sm active:bg-white/70 transition-colors"
+        >
+          <IconFont name="vehicle" size="16px" className="text-accent" />
+          <span className="text-[15px] text-foreground font-medium">查看完整路线</span>
+          <IconFont name="chevron-right" size="14px" />
+        </button>
+      </div>
+
+      {/* 底部通勤信息 + 语音 */}
+      <div className="mt-[20px] flex gap-[16px]">
+        {/* 通勤状态卡片 */}
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4 }}
+          className="flex-1"
+        >
+          <div
+            className={cn(
+              "relative p-[24px] rounded-[24px] h-full",
+              "bg-card border border-card-border shadow-[var(--elevation-sm)]",
+              "overflow-hidden"
+            )}
+          >
+            <div className="absolute top-0 right-0 w-[100px] h-[100px] bg-chart-4/8 rounded-full blur-[40px] -translate-y-1/3 translate-x-1/4" />
+            <div className="relative">
+              <div className="flex items-center gap-[10px] mb-[8px]">
+                <SunIcon size={30} />
+                <div>
+                  <h2 className="text-[26px] font-semibold text-foreground leading-[34px]">
+                    {commuteInfo.greeting}
+                  </h2>
+                  <p className="text-[14px] text-muted-foreground leading-[18px] mt-[2px]">
+                    {commuteInfo.date} · {commuteInfo.weather}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-[20px] mt-[16px]">
+                <div className="flex items-center gap-[6px]">
+                  <NavigationIcon size={16} />
+                  <span className="text-[16px] text-foreground leading-[22px]">
+                    剩余 <span className="font-bold text-[20px]">{commuteInfo.remainKm}</span> km
+                  </span>
+                </div>
+                <div className="w-px h-[18px] bg-border/40" />
+                <div className="flex items-center gap-[6px]">
+                  <IconFont name="time" size="16px" />
+                  <span className="text-[16px] text-foreground leading-[22px]">
+                    约 <span className="font-bold text-[20px]">{commuteInfo.estimateMin}</span> 分钟
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* 语音点餐按钮 */}
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.06, duration: 0.4 }}
+          className="w-[220px]"
+        >
+          <button
+            onClick={() => onToast("开始语音点餐")}
+            className={cn(
+              "w-full h-full flex flex-col items-center justify-center gap-[12px] rounded-[24px]",
+              "bg-gradient-to-br from-accent/10 to-accent/5",
+              "border border-accent/15",
+              "active:scale-[0.97] transition-transform",
+              "group"
+            )}
+          >
+            <div
+              className={cn(
+                "size-[64px] rounded-full flex items-center justify-center",
+                "bg-accent text-accent-foreground",
+                "shadow-[0_6px_24px_rgba(54,123,246,0.35)]",
+                "group-active:shadow-[0_3px_12px_rgba(54,123,246,0.2)] transition-shadow"
+              )}
+            >
+              <MicIcon size={28} />
+            </div>
+            <div className="text-center">
+              <p className="text-[18px] font-semibold text-foreground leading-[24px]">语音点餐</p>
+              <p className="text-[13px] text-muted-foreground leading-[18px] mt-[2px]">说出你想吃的</p>
+            </div>
+            <div className="text-accent/30">
+              <WaveformIcon size={28} />
+            </div>
+          </button>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   中间面板 — 品牌门店（纵向列表）
+   ══════════════════════════════════════════ */
+
+function CenterPanel({ onToast }: { onToast: (t: string) => void }) {
+  const destCount = brandStores.filter((s) => s.type === "destination").length;
+  const enrouteCount = brandStores.filter((s) => s.type === "enroute").length;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* 标题 */}
+      <div className="flex items-center gap-[10px] mb-[16px] shrink-0">
+        <IconFont name="shop" size="20px" className="text-muted-foreground" />
+        <span className="text-[20px] font-semibold text-foreground leading-[28px]">品牌门店</span>
+        <div className="flex items-center gap-[8px] ml-[8px]">
+          <Tag label={`目的地 ${destCount}`} size="sm" className="bg-accent/10 text-accent border-transparent" />
+          <Tag label={`沿途 ${enrouteCount}`} size="sm" className="bg-chart-4/15 text-chart-4 border-transparent" />
+        </div>
+      </div>
+
+      {/* 门店列表 */}
+      <div className="flex-1 overflow-y-auto pr-[4px]" style={{ scrollbarWidth: "thin" }}>
+        <div className="flex flex-col gap-[12px]">
+          {brandStores.map((store, index) => {
+            const tl = typeLabels[store.type];
+            return (
+              <motion.button
+                key={store.id}
+                initial={{ opacity: 0, x: -12 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.1 + index * 0.05, duration: 0.3 }}
+                onClick={() => onToast(`查看${store.brand} ${store.branch}`)}
+                className={cn(
+                  "w-full flex items-center gap-[16px] p-[16px] rounded-[20px] text-left",
+                  "bg-card border border-card-border shadow-[var(--elevation-sm)]",
+                  "active:scale-[0.98] transition-transform hover:shadow-md"
+                )}
+              >
+                {/* Logo */}
+                <div
+                  className={cn(
+                    "size-[56px] rounded-[14px] overflow-hidden border border-card-border shrink-0",
+                    store.color
+                  )}
+                >
+                  <ImageWithFallback
+                    src={store.logo}
+                    alt={store.brand}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+
+                {/* 信息 */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-[8px]">
+                    <span className="text-[17px] font-semibold text-foreground leading-[24px] truncate">
+                      {store.brand}
+                    </span>
+                    <Tag label={tl.text} size="xs" className={cn("border-transparent shrink-0", tl.cls)} />
+                  </div>
+                  <div className="flex items-center gap-[6px] mt-[4px]">
+                    <IconFont name="location" size="13px" className="text-muted-foreground" />
+                    <span className="text-[14px] text-muted-foreground leading-[18px] truncate">
+                      {store.branch}
+                    </span>
+                    <span className="text-[13px] text-muted-foreground/60 shrink-0">{store.distance}</span>
+                  </div>
+                  {/* 语音建议 */}
+                  <div className="mt-[6px] px-[10px] py-[4px] rounded-[10px] bg-card-muted inline-block">
+                    <p className="text-[13px] text-accent leading-[18px] italic">
+                      {store.suggestion}
+                    </p>
+                  </div>
+                </div>
+
+                <IconFont name="chevron-right" size="18px" className="text-muted-foreground" />
+              </motion.button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   右侧面板 — 今日特惠 + 猜你喜欢
+   ══════════════════════════════════════════ */
+
+function RightPanel({ onToast }: { onToast: (t: string) => void }) {
+  return (
+    <div className="flex flex-col h-full">
+      {/* 标题 */}
+      <div className="flex items-center gap-[20px] mb-[16px] shrink-0">
+        <div className="flex items-center gap-[6px]">
+          <IconFont name="trending-up" size="18px" className="text-destructive" />
+          <span className="text-[20px] font-semibold text-foreground leading-[28px]">今日特惠</span>
+        </div>
+        <div className="flex items-center gap-[6px]">
+          <IconFont name="star" size="16px" className="text-chart-4" />
+          <span className="text-[16px] text-muted-foreground leading-[22px]">猜你喜欢</span>
+        </div>
+      </div>
+
+      {/* 商品列表 */}
+      <div className="flex-1 overflow-y-auto pr-[4px]" style={{ scrollbarWidth: "thin" }}>
+        <div className="flex flex-col gap-[12px]">
+          {dealItems.map((deal, index) => (
+            <motion.div
+              key={deal.id}
+              initial={{ opacity: 0, x: 12 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.15 + index * 0.06, duration: 0.3 }}
+              className={cn(
+                "w-full rounded-[20px] overflow-hidden",
+                "bg-card border border-card-border shadow-[var(--elevation-sm)]",
+                "hover:shadow-md transition-shadow"
+              )}
+            >
+              {/* 图片 */}
+              <div className="relative h-[140px] overflow-hidden">
+                <ImageWithFallback
+                  src={deal.image}
+                  alt={deal.name}
+                  className="w-full h-full object-cover"
+                />
+                {/* 排名角标 */}
+                <div
+                  className={cn(
+                    "absolute top-0 left-0 px-[10px] py-[4px] rounded-br-[12px] text-[14px] font-bold",
+                    deal.rank === 1
+                      ? "bg-destructive text-destructive-foreground"
+                      : deal.rank === 2
+                      ? "bg-chart-4 text-white"
+                      : "bg-primary text-primary-foreground"
+                  )}
+                >
+                  NO.{deal.rank}
+                </div>
+                {deal.isFrequent && (
+                  <div className="absolute top-[8px] right-[8px]">
+                    <Tag label="常点" size="xs" className="bg-white/85 text-accent border-transparent backdrop-blur-sm" />
+                  </div>
+                )}
+              </div>
+
+              {/* 详情 */}
+              <div className="p-[16px]">
+                <h4 className="text-[17px] font-semibold text-foreground leading-[24px] truncate">
+                  {deal.name}
+                </h4>
+                <div className="flex items-center gap-[8px] mt-[4px]">
+                  <span className="text-[14px] text-muted-foreground leading-[18px] truncate">
+                    {deal.store}
+                  </span>
+                  <span className="text-[13px] text-muted-foreground/60 shrink-0">{deal.distance}</span>
+                </div>
+
+                <div className="flex items-end justify-between mt-[12px]">
+                  <div className="flex items-baseline gap-[4px]">
+                    <span className="text-[14px] text-destructive font-medium">¥</span>
+                    <span className="text-[26px] text-destructive font-bold leading-[30px]">{deal.price}</span>
+                    <span className="text-[14px] text-muted-foreground/50 line-through ml-[6px]">
+                      ¥{deal.originalPrice}
+                    </span>
+                  </div>
+                  <Btn
+                    variant="primary"
+                    size="small"
+                    label={deal.actionLabel}
+                    icon={null}
+                    onClick={() => onToast(`下单「${deal.name}」`)}
+                  />
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   主页面 — 车机端 1920x1080
+   ══════════════════════════════════════════ */
+
+export function CommuteFoodPage() {
+  const [toastText, setToastText] = useState<string | null>(null);
+  const showToast = useCallback((text: string) => setToastText(text), []);
+
+  useEffect(() => {
+    if (!toastText) return;
+    const timer = setTimeout(() => setToastText(null), 2200);
+    return () => clearTimeout(timer);
+  }, [toastText]);
+
+  return (
+    <div
+      className="relative w-[1920px] h-[1080px] overflow-hidden flex flex-col"
+      style={{ fontFamily: "var(--font-family-sans)" }}
+    >
+      {/* 渐变背景 */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[#FFF8ED] via-[#FDF6F0] to-background" />
+      <div className="absolute top-[-60px] right-[200px] w-[300px] h-[300px] bg-chart-4/6 rounded-full blur-[100px]" />
+      <div className="absolute bottom-[-60px] left-[100px] w-[250px] h-[250px] bg-accent/4 rounded-full blur-[80px]" />
+      <div className="absolute top-[400px] right-[-60px] w-[200px] h-[200px] bg-destructive/4 rounded-full blur-[70px]" />
+
+      {/* 顶栏 */}
+      <div className="relative z-10 flex items-center justify-between px-[40px] h-[72px] shrink-0">
+        <div className="flex items-center gap-[16px]">
+          <div className="flex items-center gap-[8px]">
+            <div className="size-[36px] rounded-full bg-accent flex items-center justify-center">
+              <CarIcon size={18} />
+            </div>
+            <span className="text-[22px] font-semibold text-foreground">通勤点餐</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-[24px]">
+          <span className="text-[16px] text-muted-foreground">{commuteInfo.date}</span>
+          <span className="text-[16px] text-muted-foreground">{commuteInfo.weather}</span>
+          <span className="text-[28px] font-semibold text-foreground tabular-nums">{commuteInfo.time}</span>
+        </div>
+      </div>
+
+      {/* 三栏主体 */}
+      <div className="relative z-10 flex-1 flex gap-[24px] px-[40px] pb-[32px] min-h-0">
+        {/* 左侧：地图 + 通勤状态 + 语音入口 — 占 ~45% */}
+        <div className="w-[48%] shrink-0">
+          <LeftPanel onToast={showToast} />
+        </div>
+
+        {/* 中间：品牌门店列表 — 占 ~28% */}
+        <div className="flex-1 min-w-0">
+          <CenterPanel onToast={showToast} />
+        </div>
+
+        {/* 右侧：特惠推荐 — 占 ~27% */}
+        <div className="w-[360px] shrink-0">
+          <RightPanel onToast={showToast} />
+        </div>
+      </div>
+
+      {/* Toast */}
+      <div className="absolute top-[100px] left-0 right-0 z-[200] flex justify-center pointer-events-none">
+        <AnimatePresence>
+          {toastText && (
+            <div className="pointer-events-auto">
+              <Toast lines={[toastText]} showIcon showClose onClose={() => setToastText(null)} />
+            </div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}