fix(shop): load orders and income from backend

app/(dashboard)/dashboard/shop/income/page.tsx

@@ -10,30 +10,34 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { requestWithAuth } from "@/lib/api"
+import { getShopIncomeStats } from "@/lib/api"
+import type { ShopIncomeStats } from "@/lib/api/shops"
 import { listWalletTransactions } from "@/lib/api/transactions"
-import { isActiveOrder, isCompletedOrder } from "@/lib/domain/order-filters"
-import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
 import { toApiError } from "@/lib/errors"
+import { useMyShop } from "@/lib/hooks/use-my-shop"
 import type { WalletTransaction } from "@/lib/types"
-import { useAuthStore } from "@/store/auth"
-import { useOrderStore } from "@/store/orders"
-import { useShopStore } from "@/store/shops"
 import { ArrowDownLeft, ArrowUpRight, CreditCard, DollarSign } from "lucide-react"
 import { useEffect, useState } from "react"
 
+const emptyStats: ShopIncomeStats = {
+  monthlyIncome: "0",
+  pendingSettlement: "0",
+  totalWithdrawn: "0",
+  totalOrders: 0,
+  completedOrders: 0,
+}
+
 export default function ShopIncomePage() {
-  const userId = useAuthStore((state) => state.user?.id)
-  const shops = useShopStore((state) => state.shops)
-  const orders = useOrderStore((state) => state.orders)
-  const shop = resolveOwnerShop(userId, shops)
+  const { shop, loading, error } = useMyShop()
 
   const [transactions, setTransactions] = useState<WalletTransaction[]>([])
+  const [stats, setStats] = useState<ShopIncomeStats>(emptyStats)
   const [isLoading, setIsLoading] = useState(false)
   const [loadError, setLoadError] = useState<string | null>(null)
 
   useEffect(() => {
     if (!shop) return
+    const shopId = shop.id
 
     let cancelled = false
 
@@ -41,14 +45,13 @@ export default function ShopIncomePage() {
       setIsLoading(true)
       setLoadError(null)
       try {
-        const res = await requestWithAuth(() => listWalletTransactions({ offset: 0, limit: 1000 }))
+        const [nextStats, nextTransactions] = await Promise.all([
+          getShopIncomeStats(shopId),
+          listWalletTransactions({ offset: 0, limit: 1000 }),
+        ])
         if (cancelled) return
-        if (!res) {
-          setLoadError("请先登录")
-          setTransactions([])
-          return
-        }
-        setTransactions(res)
+        setStats(nextStats)
+        setTransactions(nextTransactions)
       } catch (error) {
         if (cancelled) return
         setLoadError(toApiError(error).msg)
@@ -63,34 +66,21 @@ export default function ShopIncomePage() {
     }
   }, [shop])
 
+  if (loading) {
+    return <div className="text-sm text-muted-foreground">加载中...</div>
+  }
+
+  if (error) {
+    return <div className="text-sm text-muted-foreground">{error}</div>
+  }
+
   if (!shop) {
     return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
   }
 
-  const shopOrders = orders.filter((order) => order.shopId === shop?.id)
-  const completedOrders = shopOrders.filter((o) => isCompletedOrder(o.status))
-  const totalIncome = completedOrders.reduce((acc, order) => acc + order.totalPrice, 0)
-
-  const currentMonth = new Date().getMonth()
-  const thisMonthIncome = completedOrders
-    .filter((o) => new Date(o.completedAt || "").getMonth() === currentMonth)
-    .reduce((acc, order) => acc + order.totalPrice, 0)
-
-  const pendingSettlement = shopOrders
-    .filter(
-      (o) =>
-        isActiveOrder(o.status) && o.status !== "pending_payment" && o.status !== "pending_accept",
+  const relatedTransactions = transactions.filter(
+    (transaction) => transaction.type === "income" || transaction.type === "withdrawal",
   )
-    .reduce((acc, order) => acc + order.totalPrice, 0)
-
-  const shopOrderIds = new Set(shopOrders.map((order) => order.id))
-  const relatedTransactions = transactions.filter((transaction) => {
-    if (transaction.type === "withdrawal") return true
-    if (transaction.type !== "income") return false
-    const match = transaction.description.match(/ord[-\d]+/)
-    if (!match) return false
-    return shopOrderIds.has(match[0])
-  })
 
   return (
     <div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
@@ -99,29 +89,29 @@ export default function ShopIncomePage() {
       <div className="grid gap-4 sm:grid-cols-3">
         <Card className="hover:shadow-card-hover">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">总收入</CardTitle>
+            <CardTitle className="text-sm font-medium">本月收入</CardTitle>
             <DollarSign className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">¥{totalIncome.toFixed(2)}</div>
-          </CardContent>
-        </Card>
-        <Card className="hover:shadow-card-hover">
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">本月收入</CardTitle>
-            <CreditCard className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">¥{thisMonthIncome.toFixed(2)}</div>
+            <div className="text-2xl font-bold">¥{stats.monthlyIncome}</div>
           </CardContent>
         </Card>
         <Card className="hover:shadow-card-hover">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">待结算</CardTitle>
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">¥{stats.pendingSettlement}</div>
+          </CardContent>
+        </Card>
+        <Card className="hover:shadow-card-hover">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">累计提现</CardTitle>
             <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">¥{pendingSettlement.toFixed(2)}</div>
+            <div className="text-2xl font-bold">¥{stats.totalWithdrawn}</div>
           </CardContent>
         </Card>
       </div>

app/(dashboard)/dashboard/shop/orders/page.tsx

@@ -11,27 +11,62 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { listOrders } from "@/lib/api"
 import { statusLabels } from "@/lib/constants"
 import { isActiveOrder, isCompletedOrder, isDisputedOrder } from "@/lib/domain/order-filters"
-import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
-import { useAuthStore } from "@/store/auth"
-import { useOrderStore } from "@/store/orders"
-import { useShopStore } from "@/store/shops"
+import { toApiError } from "@/lib/errors"
+import { useMyShop } from "@/lib/hooks/use-my-shop"
+import { notifyInfo } from "@/lib/toast"
 import { AlertCircle, CheckCircle, Clock, ListOrdered } from "lucide-react"
 import Link from "next/link"
+import { useEffect, useMemo, useState } from "react"
 
 export default function ShopOrdersPage() {
-  const userId = useAuthStore((state) => state.user?.id)
-  const shops = useShopStore((state) => state.shops)
-  const orders = useOrderStore((state) => state.orders)
-  const shop = resolveOwnerShop(userId, shops)
+  const { shop, loading, error } = useMyShop()
+  const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
+  const [ordersLoading, setOrdersLoading] = useState(true)
+
+  useEffect(() => {
+    if (!shop) return
+
+    let cancelled = false
+
+    listOrders({ role: "owner" })
+      .then((items) => {
+        if (cancelled) return
+        setOrders(items)
+      })
+      .catch((error) => {
+        if (cancelled) return
+        notifyInfo(toApiError(error).msg)
+      })
+      .finally(() => {
+        if (cancelled) return
+        setOrdersLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [shop])
+
+  const shopOrders = useMemo(
+    () => (shop ? orders.filter((order) => order.shopId === shop.id) : []),
+    [orders, shop],
+  )
+
+  if (loading) {
+    return <div className="text-sm text-muted-foreground">加载中...</div>
+  }
+
+  if (error) {
+    return <div className="text-sm text-muted-foreground">{error}</div>
+  }
 
   if (!shop) {
     return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
   }
 
-  const shopOrders = orders.filter((order) => order.shopId === shop?.id)
-
   const totalOrders = shopOrders.length
   const activeOrders = shopOrders.filter((o) => isActiveOrder(o.status)).length
   const completedOrders = shopOrders.filter((o) => isCompletedOrder(o.status)).length
@@ -100,7 +135,20 @@ export default function ShopOrdersPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {shopOrders.map((order) => (
+              {ordersLoading ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center text-sm text-muted-foreground">
+                    加载中...
+                  </TableCell>
+                </TableRow>
+              ) : shopOrders.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center text-sm text-muted-foreground">
+                    暂无订单
+                  </TableCell>
+                </TableRow>
+              ) : (
+                shopOrders.map((order) => (
                   <TableRow key={order.id}>
                     <TableCell className="font-medium">{order.service.title}</TableCell>
                     <TableCell>{order.consumerId}</TableCell>
@@ -116,7 +164,8 @@ export default function ShopOrdersPage() {
                       </Button>
                     </TableCell>
                   </TableRow>
-              ))}
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>