feat: 落地打赏(个人码捐赠)模式并将付费面改为免费+赞助(无ICP证合规)

- 新增 Donation 模型/迁移/后端 API(GET,POST /donations)
- 新增前端 /donate 页:收款码+感谢留言+感谢墙
- 会员页/技能广场/用量包 下架付费,改免费开放+赞助入口
- 沙箱用量耗尽引导至 /donate 赞助
- 导航与页脚新增 赞助/联盟返佣 入口,补充 i18n

frontend/src/app/marketplace/page.tsx

@@ -2,16 +2,12 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { apiFetch } from '@/lib/auth';
-import { useAuth } from '@/lib/auth-context';
-import PaymentModal from '@/components/ui/payment-modal';
 import { useT } from '@/i18n';
 import { API_BASE } from '@/lib/config';
-import { ShoppingBag, CheckCircle, Lock, Sparkles } from 'lucide-react';
+import { ShoppingBag, CheckCircle, Heart } from 'lucide-react';
 
 interface MarketplaceSkill {
   id: string; name: string; description: string; icon: string;
@@ -19,221 +15,108 @@ interface MarketplaceSkill {
   price: number | null; purchased: boolean; sortOrder: number;
 }
 
-type FilterMode = 'all' | 'free' | 'premium' | 'purchased';
-
 export default function MarketplacePage() {
   const t = useT();
-  const router = useRouter();
-  const { isLoggedIn } = useAuth();
   const [skills, setSkills] = useState<MarketplaceSkill[]>([]);
   const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState<FilterMode>('all');
-  const [payLoading, setPayLoading] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-  const [paymentModal, setPaymentModal] = useState<{
-    open: boolean; orderNo: string; payResult: any; payChannel: 'wxpay' | 'alipay';
-  }>({ open: false, orderNo: '', payResult: {}, payChannel: 'alipay' });
 
   useEffect(() => {
     const url = `${API_BASE}/skills/marketplace`;
     fetch(url, { credentials: 'include' })
-      .then(r => r.json())
-      .then(data => {
+      .then((r) => r.json())
+      .then((data) => {
         setSkills(Array.isArray(data) ? data : []);
       })
       .catch(() => {})
       .finally(() => setLoading(false));
   }, []);
 
-  const filtered = skills.filter(s => {
-    if (filter === 'free') return !s.price;
-    if (filter === 'premium') return !!s.price;
-    if (filter === 'purchased') return s.purchased;
-    return true;
-  });
-
-  async function handleBuy(skill: MarketplaceSkill) {
-    if (!isLoggedIn) { router.push('/auth'); return; }
-    setPayLoading(skill.id);
-    setSuccess(null);
-    try {
-      const res = await apiFetch('/orders/create', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          amount: skill.price,
-          planType: 'SKILL',
-          skillId: skill.id,
-          payChannel: 'alipay',
-        }),
-      });
-      const data = await res.json();
-      if (data.order && data.payResult) {
-        const payUrl = data.payResult.payUrl || data.payResult.redirectUrl;
-        const qrCode = data.payResult.qrcode || data.payResult.codeUrl;
-        if (payUrl || qrCode) {
-          setPaymentModal({ open: true, orderNo: data.order.orderNo, payResult: data.payResult, payChannel: 'alipay' });
-        }
-      }
-    } catch (e) {
-      console.error(e);
-    }
-    setPayLoading(null);
-  }
-
-  function handlePaymentPaid() {
-    setPaymentModal(prev => ({ ...prev, open: false }));
-    setSuccess(t.marketplace.purchaseSuccess);
-  }
-
-  const filters: { key: FilterMode; label: string }[] = [
-    { key: 'all', label: t.common.viewAll },
-    { key: 'free', label: t.marketplace.free },
-    { key: 'premium', label: t.marketplace.locked },
-    { key: 'purchased', label: t.marketplace.purchased },
-  ];
-
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <div className="mb-8">
+      <div className="mb-6">
         <h1 className="text-3xl font-bold text-foreground">{t.marketplace.title}</h1>
         <p className="mt-2 text-muted-foreground">{t.marketplace.desc}</p>
       </div>
 
-      <div className="flex flex-wrap gap-2 mb-8">
-        {filters.map(f => (
-          <button
-            key={f.key}
-            onClick={() => setFilter(f.key)}
-            className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
-              filter === f.key
-                ? 'bg-foreground text-background'
-                : 'bg-muted text-muted-foreground hover:text-foreground'
-            }`}
-          >
-            {f.label}
-          </button>
-        ))}
-      </div>
-
-      {success && (
-        <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 mb-6 flex items-center gap-3">
-          <CheckCircle className="h-5 w-5 text-green-600 shrink-0" />
-          <span className="text-sm text-green-800 dark:text-green-300">{success}</span>
+      <div className="flex items-center justify-between gap-3 bg-rose-50 dark:bg-rose-950/20 border border-rose-200 dark:border-rose-900 rounded-xl p-4 mb-8">
+        <div className="flex items-center gap-3">
+          <Heart className="w-5 h-5 text-rose-600 dark:text-rose-400 shrink-0" />
+          <p className="text-sm text-foreground">{t.marketplace.freeNote}</p>
         </div>
-      )}
+        <Link
+          href="/donate"
+          className="shrink-0 text-sm font-medium text-rose-600 dark:text-rose-400 hover:underline"
+        >
+          {t.donate.toDonate} →
+        </Link>
+      </div>
 
       {loading ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {[1,2,3,4,5,6].map(i => <Skeleton key={i} className="h-52 rounded-2xl" />)}
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <Skeleton key={i} className="h-52 rounded-2xl" />
+          ))}
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filtered.map(skill => {
-            const isPremium = !!skill.price;
-            const isOwned = skill.purchased;
-            return (
-              <div key={skill.id}
-                className={`bg-card rounded-2xl border-2 p-6 transition-all hover:shadow-md flex flex-col ${
-                  isPremium && !isOwned ? 'border-amber-500/40' : 'border-border'
-                }`}
-              >
-                {isPremium && !isOwned && (
-                  <div className="flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400 mb-2">
-                    <Sparkles className="h-3.5 w-3.5" />
-                    <span>{t.marketplace.locked}</span>
-                  </div>
-                )}
-
-                <div className="flex items-start gap-3 mb-3">
-                  <span className="text-3xl">{skill.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <h3 className="font-semibold text-foreground">{skill.name}</h3>
-                    <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">{skill.description}</p>
-                  </div>
-                </div>
-
-                <div className="flex items-center gap-2 mb-3">
-                  <span className={`text-xs px-2 py-0.5 rounded-full ${
-                    skill.difficulty === 'beginner' ? 'bg-green-100 text-green-700' :
-                    skill.difficulty === 'intermediate' ? 'bg-yellow-100 text-yellow-700' :
-                    'bg-red-100 text-red-700'
-                  }`}>
-                    {(t.skills as any)[skill.difficulty]}
-                  </span>
-                  <span className="text-xs text-muted-foreground">{(t.skills.categories as any)[skill.category] || skill.category}</span>
-                </div>
-
-                <div className="flex flex-wrap gap-1 mb-4">
-                  {skill.tags.slice(0, 3).map(tag => (
-                    <span key={tag} className="text-xs px-1.5 py-0.5 bg-muted text-muted-foreground rounded">{tag}</span>
-                  ))}
-                </div>
-
-                <div className="mt-auto flex items-center gap-2">
-                  {isOwned ? (
-                    <>
-                      <Badge variant="secondary" className="gap-1">
-                        <CheckCircle className="h-3.5 w-3.5" />
-                        {t.marketplace.purchased}
-                      </Badge>
-                      <Button asChild size="sm" variant="default" className="ml-auto">
-                        <Link href={`/sandbox?skill=${skill.id}`}>
-                          {t.skills.apply}
-                        </Link>
-                      </Button>
-                    </>
-                  ) : isPremium ? (
-                    <>
-                      <span className="text-lg font-bold text-foreground">¥{skill.price}</span>
-                      <Button
-                        size="sm"
-                        onClick={() => handleBuy(skill)}
-                        disabled={payLoading === skill.id}
-                        className="ml-auto"
-                      >
-                        {payLoading === skill.id ? (
-                          <span className="flex items-center gap-1">
-                            <span className="animate-spin h-3 w-3 border-2 border-current border-t-transparent rounded-full" />
-                            {t.marketplace.buying}
-                          </span>
-                        ) : (
-                          <span className="flex items-center gap-1">
-                            <ShoppingBag className="h-3.5 w-3.5" />
-                            {t.marketplace.buy.replace('{price}', String(skill.price))}
-                          </span>
-                        )}
-                      </Button>
-                    </>
-                  ) : (
-                    <Button asChild size="sm" variant="outline" className="ml-auto">
-                      <Link href={`/sandbox?skill=${skill.id}`}>
-                        {t.skills.apply}
-                      </Link>
-                    </Button>
-                  )}
+          {skills.map((skill) => (
+            <div
+              key={skill.id}
+              className="bg-card rounded-2xl border-2 border-border p-6 transition-all hover:shadow-md flex flex-col"
+            >
+              <div className="flex items-start gap-3 mb-3">
+                <span className="text-3xl">{skill.icon}</span>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-foreground">{skill.name}</h3>
+                  <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">{skill.description}</p>
                 </div>
               </div>
-            );
-          })}
+
+              <div className="flex items-center gap-2 mb-3">
+                <span
+                  className={`text-xs px-2 py-0.5 rounded-full ${
+                    skill.difficulty === 'beginner'
+                      ? 'bg-green-100 text-green-700'
+                      : skill.difficulty === 'intermediate'
+                      ? 'bg-yellow-100 text-yellow-700'
+                      : 'bg-red-100 text-red-700'
+                  }`}
+                >
+                  {(t.skills as any)[skill.difficulty]}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {(t.skills.categories as any)[skill.category] || skill.category}
+                </span>
+              </div>
+
+              <div className="flex flex-wrap gap-1 mb-4">
+                {skill.tags.slice(0, 3).map((tag) => (
+                  <span key={tag} className="text-xs px-1.5 py-0.5 bg-muted text-muted-foreground rounded">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+
+              <div className="mt-auto flex items-center gap-2">
+                <Badge variant="secondary" className="gap-1">
+                  <CheckCircle className="h-3.5 w-3.5" />
+                  {t.marketplace.free}
+                </Badge>
+                <Button asChild size="sm" variant="default" className="ml-auto">
+                  <Link href={`/sandbox?skill=${skill.id}`}>{t.skills.apply}</Link>
+                </Button>
+              </div>
+            </div>
+          ))}
         </div>
       )}
 
-      {!loading && filtered.length === 0 && (
+      {!loading && skills.length === 0 && (
         <div className="text-center py-20">
           <ShoppingBag className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
           <p className="text-muted-foreground">{t.common.noData}</p>
         </div>
       )}
-
-      <PaymentModal
-        open={paymentModal.open}
-        orderNo={paymentModal.orderNo}
-        payResult={paymentModal.payResult}
-        payChannel={paymentModal.payChannel}
-        onClose={() => setPaymentModal(prev => ({ ...prev, open: false }))}
-        onPaid={handlePaymentPaid}
-      />
     </div>
   );
 }