压缩历史至 95081aff

frontend/components/common/balance/balance-main.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { CountingNumber } from "@/components/animate-ui/primitives/texts/counting-number"
+import { BalanceReport } from "@/components/common/balance/balance-report"
+import { BalanceSummary } from "@/components/common/balance/balance-summary"
+import { BalanceTable } from "@/components/common/balance/balance-table"
+import { useUser } from "@/contexts/user-context"
+
+/**
+ * 积分余额主页面组件
+ *
+ * 负责组装积分余额页面的各个子组件,包括积分余额总览、积分余额摘要、近期活动和报告侧边栏
+ */
+export function BalanceMain() {
+  const { user, loading } = useUser()
+
+  /** 计算总余额 */
+  const totalBalance = React.useMemo(() => {
+    return parseFloat(user?.available_balance || '0')
+  }, [user?.available_balance])
+
+  return (
+    <div className="py-6">
+      <div className="flex items-center gap-2  pb-2">
+        <h1 className="text-3xl">
+          <span className="font-semibold">积分</span>
+          <span className="pl-2">LDC</span>
+          <span className="pl-2">
+            {loading ? "-" : <CountingNumber number={totalBalance} decimalPlaces={2} />}
+          </span>
+        </h1>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 pt-4">
+        <div className="lg:col-span-2 space-y-12">
+          <section aria-labelledby="balance-summary-title">
+            <h2 id="balance-summary-title" className="font-semibold mb-4">积分摘要</h2>
+            <BalanceSummary />
+          </section>
+
+          <section aria-labelledby="recent-activity-title">
+            <h2 id="recent-activity-title" className="font-semibold mb-2">近期活动</h2>
+            <BalanceTable />
+          </section>
+        </div>
+
+        <aside className="lg:col-span-1" aria-labelledby="reports-title">
+          <BalanceReport />
+        </aside>
+      </div>
+    </div>
+  )
+}