个人中心主页面

src/components/customer/SettingModal.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+export default function SettingModal({
+  visible,
+  onClose,
+}: {
+  visible: boolean;
+  onClose: () => void;
+}) {
+  // 如果不显示，直接 return null
+  if (!visible) return null;
+
+  return (
+    // 全屏遮罩
+    <div className="fixed inset-0 z-50 bg-black/50">
+      {/* 弹框主体 - 从底部滑上来 */}
+      <div className="absolute bottom-0 left-0 right-0 w-full h-full bg-white rounded-t-2xl overflow-auto">
+        <div className="flex flex-col">
+          {/* 顶部导航 */}
+          <header className="bg-black text-white py-4 px-4 flex items-center">
+            <button onClick={onClose} className="mr-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
+            <h1 className="text-lg font-medium">Setting</h1>
+          </header>
+
+          {/* 头像区域 */}
+          <div className="bg-[#FFF5F0] py-8 flex flex-col items-center">
+            <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center border-2 border-black">
+              <span className="text-black font-bold text-lg">LOGO</span>
+            </div>
+          </div>
+
+          {/* 菜单列表 */}
+          <div className="px-4 py-2">
+            {/* Information */}
+            <div className="py-4 border-b border-gray-100 flex justify-between items-center">
+              <span className="text-black font-medium">Information</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </div>
+
+            {/* Subscribe 开关 */}
+            <div className="py-4 border-b border-gray-100 flex justify-between items-center">
+              <span className="text-black font-medium">Subscribe</span>
+              <div className="relative w-12 h-6 rounded-full bg-black">
+                <div className="absolute right-0.5 top-0.5 w-5 h-5 bg-white rounded-full"></div>
+              </div>
+            </div>
+
+            {/* Log Out */}
+            <div className="py-4 border-b border-gray-100">
+              <button className="text-black font-medium w-full text-left">
+                Log Out
+              </button>
+            </div>
+          </div>
+
+          {/* 版本号 */}
+          <div className="py-6 text-center text-gray-400 text-sm">v1.1.0</div>
+        </div>
+      </div>
+    </div>
+  );
+}