新功能(#25): 用户中心拆分提现/退款 tab 并适配新接口

apps/user/public/assets/locales/en-US/affiliate.json

@@ -16,6 +16,10 @@
   "inviteCode": "Invite Code",
   "inviteRecords": "Invite Records",
   "noReason": "None",
+  "recordsTabs": {
+    "withdrawal": "Withdrawal Records",
+    "refund": "Refund Records"
+  },
   "rejectReason": "Reject Reason",
   "registrationTime": "Registration Time",
   "submitWithdraw": "Submit Request",
@@ -28,10 +32,27 @@
   "withdrawDescription": "Submit the withdrawal amount and payout details, then wait for review.",
   "withdrawError": "Failed to submit withdrawal request",
   "withdrawRecords": "Withdrawal Records",
+  "withdrawalRecordsDescription": "Review your withdrawal requests, statuses, and payout details.",
+  "withdrawalEmpty": "No withdrawal records yet",
   "withdrawStatus": {
     "approved": "Approved",
     "pending": "Pending Review",
     "rejected": "Rejected"
   },
-  "withdrawSuccess": "Withdrawal request submitted"
+  "withdrawSuccess": "Withdrawal request submitted",
+  "commissionReturn": {
+    "description": "Review order refunds and returned withdrawal commissions.",
+    "empty": "No refund records yet",
+    "eventType": {
+      "orderRefund": "Order Refund",
+      "withdrawRejectReturn": "Withdrawal Rejected Return",
+      "withdrawCancelReturn": "Withdrawal Cancel Return",
+      "unknown": "Commission Return"
+    },
+    "fields": {
+      "eventType": "Type",
+      "orderNo": "Order No.",
+      "createdAt": "Created At"
+    }
+  }
 }

apps/user/public/assets/locales/zh-CN/affiliate.json

@@ -16,6 +16,10 @@
   "inviteCode": "邀请码",
   "inviteRecords": "邀请记录",
   "noReason": "无",
+  "recordsTabs": {
+    "withdrawal": "提现记录",
+    "refund": "退款记录"
+  },
   "rejectReason": "拒绝原因",
   "registrationTime": "注册时间",
   "submitWithdraw": "提交申请",
@@ -28,10 +32,27 @@
   "withdrawDescription": "填写提现金额和收款信息后提交申请，等待后台审核。",
   "withdrawError": "提现申请提交失败",
   "withdrawRecords": "提现记录",
+  "withdrawalRecordsDescription": "查看你的提现申请、审核状态和收款信息。",
+  "withdrawalEmpty": "暂无提现记录",
   "withdrawStatus": {
     "approved": "已通过",
     "pending": "审核中",
     "rejected": "已拒绝"
   },
-  "withdrawSuccess": "提现申请已提交"
+  "withdrawSuccess": "提现申请已提交",
+  "commissionReturn": {
+    "description": "查看订单退款和提现退回记录。",
+    "empty": "暂无退款记录",
+    "eventType": {
+      "orderRefund": "订单退款",
+      "withdrawRejectReturn": "提现拒绝退回",
+      "withdrawCancelReturn": "用户取消提现退回",
+      "unknown": "佣金返回"
+    },
+    "fields": {
+      "eventType": "类型",
+      "orderNo": "订单号",
+      "createdAt": "创建时间"
+    }
+  }
 }

apps/user/src/sections/user/affiliate/commission-return.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it, vi } from "vitest";
+import { getCommissionReturnEventLabel } from "./commission-return";
+
+const translations = {
+  "commissionReturn.eventType.orderRefund": "订单退款",
+  "commissionReturn.eventType.withdrawRejectReturn": "提现拒绝退回",
+  "commissionReturn.eventType.withdrawCancelReturn": "用户取消提现退回",
+  "commissionReturn.eventType.unknown": "佣金返回",
+} as const;
+
+describe("getCommissionReturnEventLabel", () => {
+  const t = (key: string, defaultValue: string) =>
+    translations[key as keyof typeof translations] ?? defaultValue ?? key;
+
+  it("maps 333 to order refund", () => {
+    expect(getCommissionReturnEventLabel(333, t)).toBe("订单退款");
+  });
+
+  it("maps 337 to withdraw reject return", () => {
+    expect(getCommissionReturnEventLabel(337, t)).toBe("提现拒绝退回");
+  });
+
+  it("maps 338 to withdraw cancel return", () => {
+    expect(getCommissionReturnEventLabel(338, t)).toBe("用户取消提现退回");
+  });
+
+  it("falls back for unknown event types and warns", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {
+      /* intentional noop */
+    });
+
+    expect(getCommissionReturnEventLabel(999, t)).toBe("佣金返回");
+    expect(warnSpy).toHaveBeenCalledWith(999);
+
+    warnSpy.mockRestore();
+  });
+});

apps/user/src/sections/user/affiliate/commission-return.ts

@@ -0,0 +1,27 @@
+export type AffiliateTranslation = (
+  key: string,
+  defaultValue: string
+) => string;
+
+export function getCommissionReturnEventLabel(
+  eventType: number,
+  t: AffiliateTranslation
+) {
+  switch (eventType) {
+    case 333:
+      return t("commissionReturn.eventType.orderRefund", "Order Refund");
+    case 337:
+      return t(
+        "commissionReturn.eventType.withdrawRejectReturn",
+        "Withdrawal Rejected Return"
+      );
+    case 338:
+      return t(
+        "commissionReturn.eventType.withdrawCancelReturn",
+        "Withdrawal Cancel Return"
+      );
+    default:
+      console.warn(eventType);
+      return t("commissionReturn.eventType.unknown", "Commission Return");
+  }
+}

apps/user/src/sections/user/affiliate/index.tsx

@@ -35,13 +35,21 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@workspace/ui/components/select";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@workspace/ui/components/tabs";
 import { Textarea } from "@workspace/ui/components/textarea";
 import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
+import Empty from "@workspace/ui/composed/empty";
 import type { ProListActions } from "@workspace/ui/composed/pro-list/pro-list";
 import { ProList } from "@workspace/ui/composed/pro-list/pro-list";
 import { UploadImage } from "@workspace/ui/composed/upload-image";
 import {
   commissionWithdraw,
+  queryCommissionReturnLog,
   queryUserAffiliate,
   queryUserAffiliateList,
   queryWithdrawalLog,
@@ -59,6 +67,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Display } from "@/components/display";
 import { useGlobalStore } from "@/stores/global";
+import { getCommissionReturnEventLabel } from "./commission-return";
 
 const WITHDRAWAL_METHODS = [
   { value: 1, label: "支付宝" },
@@ -111,13 +120,21 @@ function QrCodeView({ url }: { url: string }) {
         <img
           alt="收款码"
           className="h-16 w-16 cursor-zoom-in object-cover"
+          height={64}
           src={url}
+          width={64}
         />
       </button>
       {zoomOpen && (
         <Dialog onOpenChange={setZoomOpen} open={zoomOpen}>
           <DialogContent className="max-w-sm">
-            <img alt="收款码" className="w-full" src={url} />
+            <img
+              alt="收款码"
+              className="w-full"
+              height={512}
+              src={url}
+              width={512}
+            />
           </DialogContent>
         </Dialog>
       )}
@@ -157,15 +174,13 @@ const withdrawalFormSchema = z
           path: ["account"],
         });
       }
-    } else if (data.method === 0) {
+    } else if (data.method === 0 && !(data.account || data.content)) {
-      if (!data.account && !data.content) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: "收款账号和备注至少填一项",
         path: ["account"],
       });
     }
-    }
   });
 
 type WithdrawalFormValues = z.infer<typeof withdrawalFormSchema>;
@@ -173,6 +188,7 @@ type WithdrawalFormValues = z.infer<typeof withdrawalFormSchema>;
 export default function Affiliate() {
   const { t } = useTranslation("affiliate");
   const { user, common, getUserInfo } = useGlobalStore();
+  const [activeRecordTab, setActiveRecordTab] = useState("withdrawal");
   const [withdrawalOpen, setWithdrawalOpen] = useState(false);
   const [submitting, startTransition] = useTransition();
   const [qrUploading, setQrUploading] = useState(false);
@@ -421,9 +437,7 @@ export default function Affiliate() {
                             <FormItem>
                               <FormLabel>
                                 收款码
-                                <span className="ml-1 text-destructive">
+                                <span className="ml-1 text-destructive">*</span>
-                                  *
-                                </span>
                               </FormLabel>
                               {watchedQrCodeUrl ? (
                                 <div className="relative inline-block">
@@ -446,7 +460,9 @@ export default function Affiliate() {
                                   returnType="file"
                                 >
                                   <div className="flex h-24 w-24 flex-col items-center justify-center rounded border-2 border-dashed text-muted-foreground text-xs">
-                                    {qrUploading ? "上传中..." : "点击上传\n收款码"}
+                                    {qrUploading
+                                      ? "上传中..."
+                                      : "点击上传\n收款码"}
                                   </div>
                                 </UploadImage>
                               )}
@@ -519,9 +535,7 @@ export default function Affiliate() {
                     </Button>
                     <Button
                       disabled={
-                        submitting ||
+                        submitting || qrUploading || availableCommission <= 0
-                        qrUploading ||
-                        availableCommission <= 0
                       }
                       form="withdrawal-form"
                       type="submit"
@@ -564,11 +578,45 @@ export default function Affiliate() {
           </div>
         </CardContent>
       </Card>
+      <Card>
+        <CardHeader className="gap-3">
+          <CardTitle>{t("withdrawRecords", "Withdrawal Records")}</CardTitle>
+          <CardDescription>
+            {activeRecordTab === "withdrawal"
+              ? t(
+                  "withdrawalRecordsDescription",
+                  "Review your withdrawal requests, statuses, and payout details."
+                )
+              : t(
+                  "commissionReturn.description",
+                  "Review order refunds and returned withdrawal commissions."
+                )}
+          </CardDescription>
+          <Tabs
+            defaultValue="withdrawal"
+            onValueChange={setActiveRecordTab}
+            value={activeRecordTab}
+          >
+            <TabsList className="grid w-full grid-cols-2 md:w-fit">
+              <TabsTrigger value="withdrawal">
+                {t("recordsTabs.withdrawal", "Withdrawal Records")}
+              </TabsTrigger>
+              <TabsTrigger value="refund">
+                {t("recordsTabs.refund", "Refund Records")}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent className="mt-4" value="withdrawal">
               <ProList<API.WithdrawalLog, Record<string, unknown>>
                 action={withdrawalListActionRef}
-        header={{
+                empty={
-          title: t("withdrawal.records", "Withdrawal Records"),
+                  <Empty
-        }}
+                    description={t(
+                      "withdrawalEmpty",
+                      "No withdrawal records yet"
+                    )}
+                  />
+                }
                 renderItem={(item) => {
                   const statusMeta = getWithdrawalStatusMeta(item.status, t);
                   return (
@@ -608,25 +656,34 @@ export default function Affiliate() {
                         </div>
                         <ul className="grid gap-3 md:grid-cols-2">
                           <li className="flex flex-col gap-1">
-                    <span className="text-muted-foreground">收款方式</span>
+                            <span className="text-muted-foreground">
+                              收款方式
+                            </span>
                             <span>{getWithdrawalMethodLabel(item.method)}</span>
                           </li>
                           {item.account && (
                             <li className="flex flex-col gap-1">
-                      <span className="text-muted-foreground">收款账号</span>
+                              <span className="text-muted-foreground">
+                                收款账号
+                              </span>
                               <span className="break-all">{item.account}</span>
                             </li>
                           )}
                           {item.qr_code_url && (
                             <li className="flex flex-col gap-1">
-                      <span className="text-muted-foreground">收款码</span>
+                              <span className="text-muted-foreground">
+                                收款码
+                              </span>
                               <QrCodeView url={item.qr_code_url} />
                             </li>
                           )}
                           {item.content && (
                             <li className="flex flex-col gap-1">
                               <span className="text-muted-foreground">
-                        {t("withdrawal.record.content", "Payout Information")}
+                                {t(
+                                  "withdrawal.record.content",
+                                  "Payout Information"
+                                )}
                               </span>
                               <span className="whitespace-pre-wrap break-words">
                                 {item.content}
@@ -665,6 +722,74 @@ export default function Affiliate() {
                   };
                 }}
               />
+            </TabsContent>
+
+            <TabsContent className="mt-4" value="refund">
+              <ProList<API.CommissionReturnLog, Record<string, unknown>>
+                empty={
+                  <Empty
+                    description={t(
+                      "commissionReturn.empty",
+                      "No refund records yet"
+                    )}
+                  />
+                }
+                renderItem={(item) => (
+                  <Card className="overflow-hidden">
+                    <CardContent className="space-y-3 p-4 text-sm">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <div className="font-semibold text-lg">
+                          <Display type="currency" value={item.amount} />
+                        </div>
+                        <span className="inline-flex rounded-full bg-primary/10 px-3 py-1 font-medium text-primary text-xs">
+                          {getCommissionReturnEventLabel(item.event_type, t)}
+                        </span>
+                      </div>
+                      <ul className="grid gap-3 md:grid-cols-2">
+                        <li className="flex flex-col gap-1">
+                          <span className="text-muted-foreground">
+                            {t("commissionReturn.fields.eventType", "Type")}
+                          </span>
+                          <span>
+                            {getCommissionReturnEventLabel(item.event_type, t)}
+                          </span>
+                        </li>
+                        <li className="flex flex-col gap-1">
+                          <span className="text-muted-foreground">
+                            {t("commissionReturn.fields.orderNo", "Order No.")}
+                          </span>
+                          <span className="break-all">
+                            {item.order_no || "-"}
+                          </span>
+                        </li>
+                        <li className="flex flex-col gap-1">
+                          <span className="text-muted-foreground">
+                            {t(
+                              "commissionReturn.fields.createdAt",
+                              "Created At"
+                            )}
+                          </span>
+                          <time>{formatDate(item.created_at)}</time>
+                        </li>
+                      </ul>
+                    </CardContent>
+                  </Card>
+                )}
+                request={async (pagination) => {
+                  const response = await queryCommissionReturnLog({
+                    page: pagination.page,
+                    size: pagination.size,
+                  });
+                  return {
+                    list: response.data.data?.list || [],
+                    total: response.data.data?.total || 0,
+                  };
+                }}
+              />
+            </TabsContent>
+          </Tabs>
+        </CardHeader>
+      </Card>
       <ProList<API.UserAffiliate, Record<string, unknown>>
         header={{
           title: t("inviteRecords", "Invite Records"),

packages/ui/src/services/user/typings.d.ts

@@ -170,6 +170,17 @@ declare namespace API {
     timestamp: number;
   };
 
+  type CommissionReturnLog = {
+    id: number;
+    user_id: number;
+    amount: number;
+    event_type: number;
+    order_no?: string;
+    content?: string;
+    created_at: number;
+    updated_at: number;
+  };
+
   type CommissionWithdrawRequest = {
     amount: number;
     method: number;
@@ -821,6 +832,21 @@ declare namespace API {
     size: number;
   };
 
+  type QueryCommissionReturnLogListRequest = {
+    page: number;
+    size: number;
+  };
+
+  type QueryCommissionReturnLogListResponse = {
+    list: CommissionReturnLog[];
+    total: number;
+  };
+
+  type QueryCommissionReturnLogParams = {
+    page: number;
+    size: number;
+  };
+
   type QueryUserSubscribeListResponse = {
     list: UserSubscribe[];
     total: number;

packages/ui/src/services/user/user.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 
@@ -471,6 +470,25 @@ export async function queryWithdrawalLog(
   );
 }
 
+/** Query Commission Return Log GET /v1/public/user/commission_return_log */
+export async function queryCommissionReturnLog(
+  params: API.QueryCommissionReturnLogParams,
+  options?: { [key: string]: any }
+) {
+  return request<
+    API.Response & { data?: API.QueryCommissionReturnLogListResponse }
+  >(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/public/user/commission_return_log`,
+    {
+      method: "GET",
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}
+
 /** Cancel Withdrawal POST /v1/public/user/withdrawal_cancel */
 export async function withdrawalCancel(
   body: API.WithdrawalCancelRequest,