@lmy54321/design-system 1.1.4 → 1.2.0

package/template/src/pages/MePage.tsx

@@ -0,0 +1,196 @@
+import { useState } from "react";
+import { motion } from "motion/react";
+import { Switch } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { Dialog } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { BottomNavigationBar } from "@lmy54321/design-system";
+import type { TabId } from "@lmy54321/design-system";
+import { ImageWithFallback } from "@lmy54321/design-system";
+import { DraggablePanel, DRAWER_STATES } from "@lmy54321/design-system";
+
+/* ── 四个入口模块数据 ── */
+const entryModules = [
+  {
+    value: "12",
+    desc: "足迹城市",
+    image: "/images/city-footprint.png",
+    rotate: "-8deg",
+  },
+  {
+    value: "3,280",
+    desc: "行程公里",
+    image: "/images/km-journey.png",
+    rotate: "6deg",
+  },
+  {
+    value: "48",
+    desc: "收藏地点",
+    image: "/images/fav-places.png",
+    rotate: "-5deg",
+  },
+  {
+    value: "26",
+    desc: "评价数",
+    image: "/images/reviews-count.png",
+    rotate: "7deg",
+  },
+];
+
+const menuItems = [
+  { icon: "bookmark", label: "我的收藏", badge: "48" },
+  { icon: "history", label: "历史记录", badge: "" },
+  { icon: "download", label: "离线地图", badge: "2" },
+  { icon: "map-setting", label: "地图设置", badge: "" },
+  { icon: "help-circle", label: "帮助与反馈", badge: "" },
+];
+
+interface MePageProps {
+  activeTab: TabId;
+  onTabChange: (id: TabId) => void;
+}
+
+export function MePage({ activeTab, onTabChange }: MePageProps) {
+  const [darkMode, setDarkMode] = useState(false);
+  const [notifications, setNotifications] = useState(true);
+  const [showLogout, setShowLogout] = useState(false);
+
+  const meContent = (
+    <div className="pb-[80px]">
+      {/* User Profile Card */}
+      <div className="px-[16px] pt-[8px] pb-[16px]">
+        <div className="flex items-center gap-[14px] p-[16px] rounded-[24px] bg-card-muted">
+          <div className="size-[56px] rounded-full bg-primary/15 flex items-center justify-center shrink-0">
+            <IconFont name="user" size="28px" className="text-primary" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-[8px]">
+              <span className="text-[18px] font-medium text-foreground leading-[24px]">探索者</span>
+              <Tag label="VIP" size="sm" className="bg-[#FFB800]/15 text-[#FFB800] border-transparent" />
+            </div>
+            <p className="text-[12px] text-muted-foreground leading-[16px] mt-[2px]">用脚步丈量世界</p>
+          </div>
+          <Btn size="small" variant="secondary" label="编辑" icon={null} />
+        </div>
+      </div>
+
+      {/* Entry Modules — 1×4 横向小卡片 */}
+      <div className="px-[16px] mb-[20px]">
+        <div className="flex gap-[8px]">
+          {entryModules.map((mod, i) => (
+            <motion.div
+              key={mod.desc}
+              className="relative flex-1 min-w-0 rounded-[16px] overflow-hidden bg-black/[0.04] p-[10px] pb-[20px] cursor-pointer active:scale-[0.97] transition-transform"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.05 * i, duration: 0.3, type: "spring" }}
+            >
+              <div className="relative z-[1]">
+                <div className="text-[20px] font-semibold leading-[26px] tracking-tight text-foreground">
+                  {mod.value}
+                </div>
+                <div className="text-[10px] text-muted-foreground leading-[14px] mt-[2px]">
+                  {mod.desc}
+                </div>
+              </div>
+              <div className="absolute right-[-2px] bottom-[-2px] size-[36px] z-0">
+                <div
+                  className="size-full rounded-[8px] overflow-hidden"
+                  style={{ transform: `rotate(${mod.rotate})` }}
+                >
+                  <ImageWithFallback
+                    src={mod.image}
+                    alt={mod.desc}
+                    className="size-full object-cover"
+                  />
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      {/* Menu List */}
+      <div className="px-[16px] mb-[20px]">
+        <div className="rounded-[20px] bg-card-muted overflow-hidden">
+          {menuItems.map((item, index) => (
+            <div key={item.label}>
+              <div className="flex items-center gap-[12px] px-[16px] py-[14px] active:bg-black/[0.03] cursor-pointer transition-colors">
+                <IconFont name={item.icon} size="20px" className="text-foreground shrink-0" />
+                <span className="flex-1 text-[14px] text-foreground leading-[20px]">{item.label}</span>
+                {item.badge && (
+                  <Tag label={item.badge} size="sm" className="bg-black/[0.04] text-muted-foreground border-transparent" />
+                )}
+                <IconFont name="chevron-right" size="16px" className="text-muted-foreground" />
+              </div>
+              {index < menuItems.length - 1 && (
+                <div className="mx-[16px] h-px bg-black/[0.04]" />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Settings */}
+      <div className="px-[16px] mb-[20px]">
+        <span className="text-[14px] font-medium text-muted-foreground mb-[8px] block">设置</span>
+        <div className="rounded-[20px] bg-card-muted overflow-hidden">
+          <div className="flex items-center gap-[12px] px-[16px] py-[14px]">
+            <IconFont name="notification" size="20px" className="text-foreground" />
+            <span className="flex-1 text-[14px] text-foreground leading-[20px]">消息通知</span>
+            <Switch checked={notifications} onCheckedChange={setNotifications} />
+          </div>
+          <div className="mx-[16px] h-px bg-black/[0.04]" />
+          <div className="flex items-center gap-[12px] px-[16px] py-[14px]">
+            <IconFont name="mode-dark" size="20px" className="text-foreground" />
+            <span className="flex-1 text-[14px] text-foreground leading-[20px]">深色模式</span>
+            <Switch checked={darkMode} onCheckedChange={setDarkMode} />
+          </div>
+        </div>
+      </div>
+
+      {/* Logout */}
+      <div className="px-[16px] pb-[16px]">
+        <Btn
+          variant="secondary"
+          label="退出登录"
+          icon={null}
+          onClick={() => setShowLogout(true)}
+          className="w-full"
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="relative w-full h-[100dvh] bg-background" style={{ fontFamily: "var(--font-family-sans)" }}>
+      {/* Logout Dialog */}
+      <Dialog
+        open={showLogout}
+        onOpenChange={setShowLogout}
+        variant="warning"
+        title="退出登录"
+        description="确定要退出当前账号吗？"
+        mainActionText="退出"
+        secondaryActionText="取消"
+        onMainAction={() => setShowLogout(false)}
+        onSecondaryAction={() => setShowLogout(false)}
+      />
+
+      <DraggablePanel
+        state={DRAWER_STATES.FULL}
+        fullScreenContent={meContent}
+        topToolbar={{ mode: "center-title", title: "我的", showBack: false, rightActionCount: 1 }}
+        showTopToolbarInStates={[DRAWER_STATES.FULL]}
+      >
+        {null}
+      </DraggablePanel>
+
+      {/* Bottom Navigation */}
+      <div className="absolute bottom-[16px] left-1/2 -translate-x-1/2 z-[1000]">
+        <BottomNavigationBar activeTab={activeTab} onTabChange={onTabChange} />
+      </div>
+    </div>
+  );
+}