feat: add role-based wallet view for consumer vs player/owner

app/(account)/wallet/page.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import {
   ArrowDownLeft,
   ArrowUpRight,
@@ -12,6 +14,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
 import { mockTransactions, walletBalance } from "@/lib/mock-data"
+import { useAuthStore } from "@/store/auth"
 
 const typeLabels: Record<string, string> = {
   topup: "充值",
@@ -30,6 +33,20 @@ const typeIcons: Record<string, typeof ArrowUpRight> = {
 }
 
 export default function WalletPage() {
+  const { currentRole } = useAuthStore()
+  const isConsumer = currentRole === "consumer"
+
+  const filteredTransactions = mockTransactions.filter((tx) => {
+    if (isConsumer) {
+      return ["topup", "payment", "refund"].includes(tx.type)
+    }
+    return ["income", "withdrawal"].includes(tx.type)
+  })
+
+  const incomeBalance = mockTransactions
+    .filter((tx) => tx.type === "income")
+    .reduce((acc, tx) => acc + tx.amount, 0)
+
   return (
     <div className="max-w-2xl space-y-6">
       <h1 className="text-2xl font-bold">钱包</h1>
@@ -38,24 +55,32 @@ export default function WalletPage() {
         <CardContent className="pt-6">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-muted-foreground">账户余额</p>
-              <p className="text-3xl font-bold mt-1">¥{walletBalance.toFixed(2)}</p>
+              <p className="text-sm text-muted-foreground">
+                {isConsumer ? "账户余额" : "收入余额"}
+              </p>
+              <p className="text-3xl font-bold mt-1">
+                ¥{isConsumer ? walletBalance.toFixed(2) : incomeBalance.toFixed(2)}
+              </p>
             </div>
             <Wallet className="h-10 w-10 text-muted-foreground" />
           </div>
           <div className="flex gap-2 mt-4">
+            {isConsumer ? (
               <Button>
                 <DollarSign className="mr-1 h-4 w-4" />
                 充值
               </Button>
+            ) : (
               <Button variant="outline">
                 <CreditCard className="mr-1 h-4 w-4" />
                 提现
               </Button>
+            )}
           </div>
         </CardContent>
       </Card>
 
+      {isConsumer ? (
         <Card>
           <CardHeader>
             <CardTitle className="text-base">快捷充值</CardTitle>
@@ -75,6 +100,29 @@ export default function WalletPage() {
             </div>
           </CardContent>
         </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">收入概览</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-3 gap-4 text-center">
+              <div>
+                <p className="text-xs text-muted-foreground">本月收入</p>
+                <p className="text-lg font-bold">¥1,280.00</p>
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground">待结算</p>
+                <p className="text-lg font-bold">¥320.00</p>
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground">已提现</p>
+                <p className="text-lg font-bold">¥5,400.00</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
 
       <Card>
         <CardHeader className="flex flex-row items-center justify-between">
@@ -85,7 +133,8 @@ export default function WalletPage() {
           </Button>
         </CardHeader>
         <CardContent className="space-y-3">
-          {mockTransactions.map((tx) => {
+          {filteredTransactions.length > 0 ? (
+            filteredTransactions.map((tx) => {
               const Icon = typeIcons[tx.type]
               const isIncome = tx.amount > 0
               return (
@@ -111,7 +160,10 @@ export default function WalletPage() {
                   </div>
                 </div>
               )
-          })}
+            })
+          ) : (
+            <div className="text-center py-8 text-muted-foreground text-sm">暂无交易记录</div>
+          )}
         </CardContent>
       </Card>
     </div>