新功能(#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,14 +174,12 @@ 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({
-        ctx.addIssue({
+        code: z.ZodIssueCode.custom,
-          code: z.ZodIssueCode.custom,
+        message: "收款账号和备注至少填一项",
-          message: "收款账号和备注至少填一项",
+        path: ["account"],
-          path: ["account"],
+      });
-        });
-      }
     }
   });
 
@@ -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,107 +578,218 @@ export default function Affiliate() {
           </div>
         </CardContent>
       </Card>
-      <ProList<API.WithdrawalLog, Record<string, unknown>>
+      <Card>
-        action={withdrawalListActionRef}
+        <CardHeader className="gap-3">
-        header={{
+          <CardTitle>{t("withdrawRecords", "Withdrawal Records")}</CardTitle>
-          title: t("withdrawal.records", "Withdrawal Records"),
+          <CardDescription>
-        }}
+            {activeRecordTab === "withdrawal"
-        renderItem={(item) => {
+              ? t(
-          const statusMeta = getWithdrawalStatusMeta(item.status, t);
+                  "withdrawalRecordsDescription",
-          return (
+                  "Review your withdrawal requests, statuses, and payout details."
-            <Card className="overflow-hidden">
+                )
-              <CardContent className="space-y-3 p-4 text-sm">
+              : t(
-                <div className="flex flex-wrap items-center justify-between gap-2">
+                  "commissionReturn.description",
-                  <div className="font-semibold text-lg">
+                  "Review order refunds and returned withdrawal commissions."
-                    <Display type="currency" value={item.amount} />
+                )}
-                  </div>
+          </CardDescription>
-                  <div className="flex items-center gap-2">
+          <Tabs
-                    <span
+            defaultValue="withdrawal"
-                      className={`inline-flex rounded-full px-3 py-1 font-medium text-xs ${statusMeta.className}`}
+            onValueChange={setActiveRecordTab}
-                    >
+            value={activeRecordTab}
-                      {statusMeta.label}
+          >
-                    </span>
+            <TabsList className="grid w-full grid-cols-2 md:w-fit">
-                    {item.status === 0 && (
+              <TabsTrigger value="withdrawal">
-                      <ConfirmButton
+                {t("recordsTabs.withdrawal", "Withdrawal Records")}
-                        cancelText="取消"
+              </TabsTrigger>
-                        confirmText="确认取消"
+              <TabsTrigger value="refund">
-                        description="取消后该提现申请将关闭，佣金不会退还。确定取消吗？"
+                {t("recordsTabs.refund", "Refund Records")}
-                        onConfirm={async () => {
+              </TabsTrigger>
-                          await cancelMutation.mutateAsync(item.id);
+            </TabsList>
-                        }}
+
-                        title="取消提现申请"
+            <TabsContent className="mt-4" value="withdrawal">
-                        trigger={
+              <ProList<API.WithdrawalLog, Record<string, unknown>>
-                          <Button
+                action={withdrawalListActionRef}
-                            disabled={cancelMutation.isPending}
+                empty={
-                            size="sm"
+                  <Empty
-                            variant="outline"
+                    description={t(
-                          >
+                      "withdrawalEmpty",
-                            取消申请
+                      "No withdrawal records yet"
-                          </Button>
-                        }
-                      />
                     )}
-                  </div>
+                  />
-                </div>
+                }
-                <ul className="grid gap-3 md:grid-cols-2">
+                renderItem={(item) => {
-                  <li className="flex flex-col gap-1">
+                  const statusMeta = getWithdrawalStatusMeta(item.status, t);
-                    <span className="text-muted-foreground">收款方式</span>
+                  return (
-                    <span>{getWithdrawalMethodLabel(item.method)}</span>
+                    <Card className="overflow-hidden">
-                  </li>
+                      <CardContent className="space-y-3 p-4 text-sm">
-                  {item.account && (
+                        <div className="flex flex-wrap items-center justify-between gap-2">
-                    <li className="flex flex-col gap-1">
+                          <div className="font-semibold text-lg">
-                      <span className="text-muted-foreground">收款账号</span>
+                            <Display type="currency" value={item.amount} />
-                      <span className="break-all">{item.account}</span>
+                          </div>
-                    </li>
+                          <div className="flex items-center gap-2">
-                  )}
+                            <span
-                  {item.qr_code_url && (
+                              className={`inline-flex rounded-full px-3 py-1 font-medium text-xs ${statusMeta.className}`}
-                    <li className="flex flex-col gap-1">
+                            >
-                      <span className="text-muted-foreground">收款码</span>
+                              {statusMeta.label}
-                      <QrCodeView url={item.qr_code_url} />
+                            </span>
-                    </li>
+                            {item.status === 0 && (
-                  )}
+                              <ConfirmButton
-                  {item.content && (
+                                cancelText="取消"
-                    <li className="flex flex-col gap-1">
+                                confirmText="确认取消"
-                      <span className="text-muted-foreground">
+                                description="取消后该提现申请将关闭，佣金不会退还。确定取消吗？"
-                        {t("withdrawal.record.content", "Payout Information")}
+                                onConfirm={async () => {
-                      </span>
+                                  await cancelMutation.mutateAsync(item.id);
-                      <span className="whitespace-pre-wrap break-words">
+                                }}
-                        {item.content}
+                                title="取消提现申请"
-                      </span>
+                                trigger={
-                    </li>
+                                  <Button
-                  )}
+                                    disabled={cancelMutation.isPending}
-                  <li className="flex flex-col gap-1">
+                                    size="sm"
-                    <span className="text-muted-foreground">
+                                    variant="outline"
-                      {t("withdrawal.record.createdAt", "Created At")}
+                                  >
-                    </span>
+                                    取消申请
-                    <time>{formatDate(item.created_at)}</time>
+                                  </Button>
-                  </li>
+                                }
-                  {item.reason && (
+                              />
-                    <li className="flex flex-col gap-1 md:col-span-2">
+                            )}
-                      <span className="text-muted-foreground">
+                          </div>
-                        {t("withdrawal.record.reason", "Reject Reason")}
+                        </div>
-                      </span>
+                        <ul className="grid gap-3 md:grid-cols-2">
-                      <span className="whitespace-pre-wrap break-words text-destructive">
+                          <li className="flex flex-col gap-1">
-                        {item.reason}
+                            <span className="text-muted-foreground">
-                      </span>
+                              收款方式
-                    </li>
+                            </span>
-                  )}
+                            <span>{getWithdrawalMethodLabel(item.method)}</span>
-                </ul>
+                          </li>
-              </CardContent>
+                          {item.account && (
-            </Card>
+                            <li className="flex flex-col gap-1">
-          );
+                              <span className="text-muted-foreground">
-        }}
+                                收款账号
-        request={async (pagination) => {
+                              </span>
-          const response = await queryWithdrawalLog({
+                              <span className="break-all">{item.account}</span>
-            page: pagination.page,
+                            </li>
-            size: pagination.size,
+                          )}
-          });
+                          {item.qr_code_url && (
-          return {
+                            <li className="flex flex-col gap-1">
-            list: response.data.data?.list || [],
+                              <span className="text-muted-foreground">
-            total: response.data.data?.total || 0,
+                                收款码
-          };
+                              </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"
+                                )}
+                              </span>
+                              <span className="whitespace-pre-wrap break-words">
+                                {item.content}
+                              </span>
+                            </li>
+                          )}
+                          <li className="flex flex-col gap-1">
+                            <span className="text-muted-foreground">
+                              {t("withdrawal.record.createdAt", "Created At")}
+                            </span>
+                            <time>{formatDate(item.created_at)}</time>
+                          </li>
+                          {item.reason && (
+                            <li className="flex flex-col gap-1 md:col-span-2">
+                              <span className="text-muted-foreground">
+                                {t("withdrawal.record.reason", "Reject Reason")}
+                              </span>
+                              <span className="whitespace-pre-wrap break-words text-destructive">
+                                {item.reason}
+                              </span>
+                            </li>
+                          )}
+                        </ul>
+                      </CardContent>
+                    </Card>
+                  );
+                }}
+                request={async (pagination) => {
+                  const response = await queryWithdrawalLog({
+                    page: pagination.page,
+                    size: pagination.size,
+                  });
+                  return {
+                    list: response.data.data?.list || [],
+                    total: response.data.data?.total || 0,
+                  };
+                }}
+              />
+            </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,