压缩历史至 95081aff

2026-10-13 18:36:37 +08:00 · 2026-06-08 20:34:27 +08:00
commit 8a782525de
435 changed files with 71146 additions and 0 deletions
@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { AllActivity } from "@/components/common/trade/all-activity"
+import { Community } from "@/components/common/trade/community"
+import { Payment } from "@/components/common/trade/payment"
+import { Receive } from "@/components/common/trade/receive"
+import { TradeTable } from "@/components/common/trade/trade-table"
+import { Online } from "@/components/common/trade/online"
+import { RedEnvelope, RedEnvelopeList } from "@/components/common/trade/red-envelope"
+import { TransactionProvider } from "@/contexts/transaction-context"
+import services from "@/lib/services"
+
+/** 标签触发器样式 */
+const TAB_TRIGGER_STYLES =
+  "data-[state=active]:bg-transparent " +
+  "data-[state=active]:shadow-none " +
+  "data-[state=active]:border-0 " +
+  "data-[state=active]:border-b-2 " +
+  "data-[state=active]:border-indigo-500 " +
+  "bg-transparent " +
+  "rounded-none " +
+  "border-0 " +
+  "border-b-2 " +
+  "border-transparent " +
+  "px-0 " +
+  "text-sm " +
+  "font-bold " +
+  "text-muted-foreground " +
+  "data-[state=active]:text-indigo-500 " +
+  "-mb-[2px] " +
+  "relative " +
+  "hover:text-foreground " +
+  "transition-colors " +
+  "flex-none"
+
+/** 标签值类型 */
+type TabValue = 'receive' | 'payment' | 'community' | 'online' | 'all' | 'redenvelope'
+
+/** 页面组件映射表 */
+const PAGE_COMPONENTS: Record<TabValue, React.ComponentType> = {
+  receive: Receive,
+  payment: Payment,
+  community: Community,
+  online: Online,
+  redenvelope: RedEnvelope,
+  all: AllActivity,
+}
+
+/**
+ * 活动交易主页面组件
+ * 
+ * 负责组装活动交易中心的各个子组件
+ */
+export function TradeMain() {
+  const [activeTab, setActiveTab] = React.useState<TabValue>('receive')
+  const [mounted, setMounted] = React.useState(false)
+  const [refreshKey, setRefreshKey] = React.useState(0)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const [redEnvelopeEnabled, setRedEnvelopeEnabled] = React.useState(false)
+
+  React.useEffect(() => {
+    /* 获取红包状态 */
+    services.config.getPublicConfig()
+      .then(res => setRedEnvelopeEnabled(res.red_envelope_enabled))
+      .catch(() => setRedEnvelopeEnabled(false))
+  }, [])
+
+  /* 获取活动类型 */
+  const getOrderType = (tab: TabValue) => {
+    if (tab === 'all' || tab === 'redenvelope') return undefined
+    return tab
+  }
+
+  /* 渲染活动页面内容 */
+  const renderPageContent = () => {
+    if (activeTab === 'redenvelope') {
+      return <RedEnvelope onSuccess={() => setRefreshKey(prev => prev + 1)} />
+    }
+    const Component = PAGE_COMPONENTS[activeTab]
+    return Component ? <Component /> : null
+  }
+
+  if (!mounted) {
+    return (
+      <div className="py-6">
+        <h1 className="text-2xl font-semibold mb-4">积分活动</h1>
+        <div className="animate-pulse space-y-4">
+          <div className="h-10 bg-muted rounded" />
+          <div className="h-64 bg-muted rounded" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <TransactionProvider defaultParams={{ page_size: 20 }}>
+      <div className="py-6">
+        <h1 className="text-2xl font-semibold mb-4">积分活动</h1>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as TabValue)}
+          className="w-full"
+        >
+          <TabsList className="flex p-0 gap-4 rounded-none w-full bg-transparent justify-start border-b border-border overflow-x-auto overflow-y-hidden">
+            <TabsTrigger value="receive" className={TAB_TRIGGER_STYLES}>积分收益</TabsTrigger>
+            <TabsTrigger value="payment" className={TAB_TRIGGER_STYLES}>积分消耗</TabsTrigger>
+            <TabsTrigger value="community" className={TAB_TRIGGER_STYLES}>社区划转</TabsTrigger>
+            <TabsTrigger value="online" className={TAB_TRIGGER_STYLES}>在线流转</TabsTrigger>
+            {redEnvelopeEnabled && (
+              <TabsTrigger value="redenvelope" className={TAB_TRIGGER_STYLES}>积分红包</TabsTrigger>
+            )}
+            <TabsTrigger value="all" className={TAB_TRIGGER_STYLES}>所有活动</TabsTrigger>
+          </TabsList>
+
+          <div className="pt-2 space-y-8">
+            {renderPageContent()}
+
+            <div className="space-y-4">
+              <h2 className="font-semibold">活动记录</h2>
+              {activeTab === 'redenvelope' ? (
+                <RedEnvelopeList refreshTrigger={refreshKey} />
+              ) : (
+                <TradeTable key={activeTab} type={getOrderType(activeTab)} />
+              )}
+            </div>
+          </div>
+        </Tabs>
+      </div>
+    </TransactionProvider>
+  )
+}