chore: 恢复上传 components 目录到 GitHub

2025-12-29 19:06:29 +08:00
parent 5dfc9b2898
commit 0bee46d58d
35 changed files with 3255 additions and 1 deletions
--- a/components/modules/marketing/qr-code-modal.tsx
+++ b/components/modules/marketing/qr-code-modal.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { X, MessageCircle, Users, Music } from "lucide-react"
+import { useStore } from "@/lib/store"
+import { Button } from "@/components/ui/button"
+import Image from "next/image"
+import { useState, useEffect } from "react"
+
+interface QRCodeModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function QRCodeModal({ isOpen, onClose }: QRCodeModalProps) {
+  const { settings, getLiveQRCodeUrl } = useStore()
+  const [isJoining, setIsJoining] = useState(false)
+  const [qrCodeUrl, setQrCodeUrl] = useState("/images/party-group-qr.png") // Default fallback
+
+  // Fetch config on mount
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const res = await fetch('/api/config')
+        const data = await res.json()
+        if (data.marketing?.partyGroup?.qrCode) {
+           setQrCodeUrl(data.marketing.partyGroup.qrCode)
+        }
+      } catch (e) {
+        console.error("Failed to load QR config", e)
+      }
+    }
+    fetchConfig()
+  }, [])
+
+  if (!isOpen) return null
+
+  const handleJoin = () => {
+    setIsJoining(true)
+    // 获取活码随机URL
+    const url = getLiveQRCodeUrl("party-group")
+    if (url) {
+      window.open(url, "_blank")
+    }
+    setTimeout(() => setIsJoining(false), 1000)
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/80 backdrop-blur-md" onClick={onClose} />
+      
+      {/* iOS Style Modal */}
+      <div className="relative w-full max-w-[320px] bg-[#1a1a1a] rounded-3xl border border-white/10 overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-200">
+        
+        {/* Header Background Effect */}
+        <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#7000ff]/20 to-transparent pointer-events-none" />
+
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-2 text-white/50 hover:text-white transition-colors z-10 bg-black/20 rounded-full backdrop-blur-sm"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="p-8 flex flex-col items-center text-center relative">
+          
+          {/* Icon Badge */}
+          <div className="w-16 h-16 mb-6 rounded-full bg-gradient-to-tr from-[#7000ff] to-[#bd00ff] p-[2px] shadow-lg shadow-purple-500/20">
+            <div className="w-full h-full rounded-full bg-[#1a1a1a] flex items-center justify-center">
+              <Music className="w-8 h-8 text-[#bd00ff]" />
+            </div>
+          </div>
+
+          <h3 className="text-xl font-bold text-white mb-2 tracking-tight">
+            Soul 创业派对
+          </h3>
+          
+          <div className="flex items-center gap-2 mb-6">
+            <span className="px-2 py-0.5 rounded-full bg-white/10 text-[10px] text-white/70 border border-white/5">
+              Live
+            </span>
+            <p className="text-white/60 text-xs">
+              {settings.authorInfo?.liveTime || "06:00-09:00"} · {settings.authorInfo?.name || "卡若"}
+            </p>
+          </div>
+
+          {/* QR Code Container - Enhanced Visibility */}
+          <div className="bg-white p-3 rounded-2xl shadow-xl mb-6 transform transition-transform hover:scale-105 duration-300">
+            <div className="relative w-48 h-48">
+                <Image
+                src={qrCodeUrl}
+                alt="派对群二维码"
+                fill
+                className="object-contain"
+                />
+            </div>
+          </div>
+
+          <p className="text-white/40 text-xs mb-6 px-4">
+            扫码加入私域流量实战群<br/>获取《私域运营100问》
+          </p>
+
+          <Button
+            onClick={handleJoin}
+            disabled={isJoining}
+            className="w-full bg-gradient-to-r from-[#7000ff] to-[#bd00ff] hover:opacity-90 text-white font-medium rounded-xl h-12 shadow-lg shadow-purple-900/20 border-0 transition-all active:scale-95"
+          >
+            {isJoining ? (
+                <span className="flex items-center gap-2">
+                    <Users className="w-4 h-4 animate-pulse" />
+                    跳转中...
+                </span>
+            ) : (
+                <span className="flex items-center gap-2">
+                    <MessageCircle className="w-4 h-4" />
+                    立即加入
+                </span>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}