修复(#22): 收口后台订单状态6退款入口

apps/admin/public/assets/locales/en-US/order.json

@@ -16,10 +16,11 @@
     "0": "Status",
     "1": "Pending",
     "2": "Paid",
-    "3": "Cancelled",
-    "4": "Closed",
-    "5": "Completed",
-    "6": "Refunded"
+    "3": "Closed",
+    "4": "Failed",
+    "5": "Finished",
+    "6": "Claimed",
+    "7": "Refunded"
   },
   "subscribe": "Subscribe",
   "subscribePrice": "Subscription Price",
@@ -33,5 +34,8 @@
     "4": "Recharge"
   },
   "updateTime": "Update Time",
-  "user": "User"
+  "user": "User",
+  "refundFailed": "Refund failed. Please try again.",
+  "statusClaimedBlocked": "Claimed and refunded states must use the dedicated processing flow.",
+  "statusUpdateFailed": "Status update failed. Please try again."
 }

apps/admin/public/assets/locales/zh-CN/order.json

@@ -16,10 +16,11 @@
     "0": "状态",
     "1": "待支付",
     "2": "已支付",
-    "3": "已取消",
-    "4": "已关闭",
+    "3": "已关闭",
+    "4": "失败",
     "5": "已完成",
-    "6": "已退费"
+    "6": "处理中",
+    "7": "已退费"
   },
   "subscribe": "订阅",
   "subscribePrice": "订阅价格",
@@ -33,5 +34,8 @@
     "4": "充值"
   },
   "updateTime": "更新时间",
-  "user": "用户"
+  "user": "用户",
+  "refundFailed": "退费失败，请重试。",
+  "statusClaimedBlocked": "处理中和已退费状态必须走专用流程，不能通过通用改状态提交。",
+  "statusUpdateFailed": "状态更新失败，请重试。"
 }

apps/admin/src/sections/order/index.test.tsx

@@ -0,0 +1,466 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import {
+  activateOrder,
+  getOrderList,
+  refundOrder,
+  updateOrderStatus,
+} from "@workspace/ui/services/admin/order";
+import type { AxiosResponse } from "axios";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import Order, { canManuallyUpdateOrderStatus, canRefundOrderStatus } from ".";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback: string): string => fallback,
+  }),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  useSearch: () => ({}),
+}));
+
+vi.mock("@/stores/global", () => ({
+  useGlobalStore: (
+    selector?: (state: {
+      user: { is_admin: boolean };
+      common: { currency: { currency_symbol: string } };
+    }) => unknown
+  ) => {
+    const state = {
+      user: {
+        is_admin: true,
+      },
+      common: {
+        currency: {
+          currency_symbol: "$",
+        },
+      },
+    };
+
+    return typeof selector === "function" ? selector(state) : state;
+  },
+}));
+
+vi.mock("@/stores/subscribe", () => ({
+  useSubscribe: () => ({
+    subscribes: [
+      {
+        id: 9,
+        name: "Pro Plan",
+      },
+    ],
+    getSubscribeName: (id?: number) => (id === 9 ? "Pro Plan" : "--"),
+  }),
+}));
+
+vi.mock("@/utils/common", () => ({
+  formatDate: (timestamp: number) => `date-${timestamp}`,
+}));
+
+vi.mock("../user/user-detail", () => ({
+  UserDetail: ({ id }: { id: number }) => <span>User #{id}</span>,
+}));
+
+vi.mock("@/components/display", () => ({
+  Display: ({ value }: { value: number }) => <span>{value}</span>,
+}));
+
+const toastSuccess = vi.fn();
+const toastError = vi.fn();
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: (...args: unknown[]) => toastSuccess(...args),
+    error: (...args: unknown[]) => toastError(...args),
+  },
+}));
+
+vi.mock("@workspace/ui/services/admin/order", () => ({
+  activateOrder: vi.fn(),
+  getOrderList: vi.fn(),
+  refundOrder: vi.fn(),
+  updateOrderStatus: vi.fn(),
+}));
+
+vi.mock("@workspace/ui/components/alert-dialog", () => ({
+  AlertDialog: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogFooter: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogCancel: ({
+    children,
+    ...props
+  }: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
+  AlertDialogAction: ({
+    children,
+    ...props
+  }: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
+}));
+
+vi.mock("@workspace/ui/composed/combobox", () => ({
+  Combobox: ({
+    options = [],
+    value,
+    onChange,
+    placeholder,
+  }: {
+    options?: Array<{ label: string; value: number | string }>;
+    value?: number | string;
+    onChange: (value: number) => void;
+    placeholder?: string;
+  }) => (
+    <label>
+      <span>{placeholder}</span>
+      <select
+        aria-label={placeholder}
+        onChange={(event) => onChange(Number(event.target.value))}
+        value={String(value ?? "")}
+      >
+        {options.map((option) => (
+          <option key={String(option.value)} value={String(option.value)}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  ),
+}));
+
+vi.mock("@workspace/ui/composed/pro-table/pro-table", async () => {
+  const React = await import("react");
+
+  type Column = {
+    accessorKey?: string;
+    cell?: (props: {
+      row: {
+        original: Record<string, unknown>;
+        getValue: (key: string) => unknown;
+      };
+    }) => React.ReactNode;
+  };
+
+  return {
+    ProTable: ({
+      columns,
+      request,
+      actions,
+    }: {
+      columns: Column[];
+      request: (
+        pagination: { page: number; size: number },
+        filter: Record<string, unknown>
+      ) => Promise<{ list: Record<string, unknown>[]; total: number }>;
+      actions?: {
+        render?: (row: Record<string, unknown>) => React.ReactNode[];
+      };
+    }) => {
+      const [state, setState] = React.useState<{
+        data: Record<string, unknown>[];
+        error: boolean;
+        loading: boolean;
+      }>({
+        data: [],
+        error: false,
+        loading: true,
+      });
+
+      React.useEffect(() => {
+        let cancelled = false;
+        request({ page: 1, size: 200 }, {})
+          .then((response) => {
+            if (cancelled) return;
+            setState({
+              data: response.list,
+              error: false,
+              loading: false,
+            });
+          })
+          .catch(() => {
+            if (cancelled) return;
+            setState({
+              data: [],
+              error: true,
+              loading: false,
+            });
+          });
+
+        return () => {
+          cancelled = true;
+        };
+      }, [request]);
+
+      if (state.loading) {
+        return <div aria-label="Loading data" role="status" />;
+      }
+
+      if (state.error) {
+        return <div>Failed to load orders</div>;
+      }
+
+      if (state.data.length === 0) {
+        return <div>No orders</div>;
+      }
+
+      return (
+        <div>
+          {state.data.map((row) => (
+            <article key={String(row.id)}>
+              {columns.map((column, index) => {
+                const value = column.accessorKey
+                  ? row[column.accessorKey]
+                  : undefined;
+                const rowApi = {
+                  original: row,
+                  getValue: (key: string) => row[key],
+                };
+
+                return (
+                  <div key={`${row.id}-${index}`}>
+                    {column.cell
+                      ? column.cell({ row: rowApi })
+                      : typeof value === "object"
+                        ? JSON.stringify(value)
+                        : String(value ?? "")}
+                  </div>
+                );
+              })}
+              <div>{actions?.render?.(row)}</div>
+            </article>
+          ))}
+        </div>
+      );
+    },
+  };
+});
+
+const mockedGetOrderList = vi.mocked(getOrderList);
+const mockedRefundOrder = vi.mocked(refundOrder);
+const mockedUpdateOrderStatus = vi.mocked(updateOrderStatus);
+const mockedActivateOrder = vi.mocked(activateOrder);
+
+function createOrderListResponse(
+  list: API.Order[]
+): AxiosResponse<API.Response & { data?: API.GetOrderListResponse }> {
+  return {
+    data: {
+      code: 200,
+      data: {
+        list,
+        total: list.length,
+      },
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+function createSuccessResponse(): AxiosResponse<
+  API.Response & { data?: unknown }
+> {
+  return {
+    data: {
+      code: 200,
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+function createOrder(status: number): API.Order {
+  return {
+    id: status,
+    amount: 1999,
+    coupon_discount: 0,
+    discount: 0,
+    fee_amount: 0,
+    order_no: `ORDER-${status}`,
+    payment: {
+      name: "Stripe",
+      platform: "stripe",
+    },
+    price: 1999,
+    quantity: 1,
+    status,
+    status_name:
+      status === 6 ? "claimed" : status === 7 ? "refunded" : "pending",
+    subscribe_id: 9,
+    trade_no: `TRADE-${status}`,
+    type: 1,
+    updated_at: 1_716_800_000,
+    user_id: 88,
+  } as API.Order;
+}
+
+function renderOrderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <Order />
+    </QueryClientProvider>
+  );
+}
+
+beforeEach(() => {
+  localStorage.setItem("timezone", "UTC");
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("Order", () => {
+  it("uses the dedicated refund endpoint for refundable orders", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(2)])
+    );
+    mockedRefundOrder.mockResolvedValue(createSuccessResponse());
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-2")).not.toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
+
+    await waitFor(() =>
+      expect(mockedRefundOrder).toHaveBeenCalledWith(
+        { id: 2 },
+        { skipErrorHandler: true }
+      )
+    );
+    expect(toastSuccess).toHaveBeenCalledWith("Refund completed.");
+  });
+
+  it("blocks status 6 and 7 from the generic status editor", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(1)])
+    );
+    mockedUpdateOrderStatus.mockResolvedValue(createSuccessResponse());
+
+    renderOrderPage();
+
+    const statusSelect = await screen.findByLabelText("Status");
+    const optionValues = Array.from(
+      statusSelect.querySelectorAll("option")
+    ).map((option) => option.textContent);
+
+    expect(optionValues).not.toContain("Claimed");
+    expect(optionValues).not.toContain("Refunded");
+    expect(canManuallyUpdateOrderStatus(6)).toBe(false);
+    expect(canManuallyUpdateOrderStatus(7)).toBe(false);
+
+    fireEvent.change(statusSelect, { target: { value: "2" } });
+
+    await waitFor(() =>
+      expect(mockedUpdateOrderStatus).toHaveBeenCalledWith(
+        { id: 1, status: 2 },
+        { skipErrorHandler: true }
+      )
+    );
+  });
+
+  it("renders loading state while orders are being fetched", () => {
+    mockedGetOrderList.mockReturnValue(
+      new Promise(() => {
+        // Keep the request pending so the loading UI remains visible.
+      }) as ReturnType<typeof getOrderList>
+    );
+
+    renderOrderPage();
+
+    expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
+  });
+
+  it("renders the empty state when there are no orders", async () => {
+    mockedGetOrderList.mockResolvedValue(createOrderListResponse([]));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("No orders")).not.toBeNull();
+  });
+
+  it("shows an error toast when refund fails", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(5)])
+    );
+    mockedRefundOrder.mockRejectedValue(new Error("refund failed"));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-5")).not.toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
+
+    await waitFor(() =>
+      expect(toastError).toHaveBeenCalledWith(
+        "Refund failed. Please try again."
+      )
+    );
+  });
+
+  it("renders the error state when the order list request fails", async () => {
+    mockedGetOrderList.mockRejectedValue(new Error("network failed"));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("Failed to load orders")).not.toBeNull();
+  });
+
+  it("keeps the order actions visible on a narrow viewport", async () => {
+    window.innerWidth = 375;
+    window.dispatchEvent(new Event("resize"));
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(2), createOrder(6), createOrder(7)])
+    );
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-2")).not.toBeNull();
+    expect(screen.getByText("Claimed")).not.toBeNull();
+    expect(screen.getAllByText("Refund").length).toBe(1);
+    expect(canRefundOrderStatus(2)).toBe(true);
+    expect(canRefundOrderStatus(6)).toBe(false);
+    expect(canRefundOrderStatus(7)).toBe(false);
+    expect(mockedActivateOrder).not.toHaveBeenCalled();
+  });
+});

apps/admin/src/sections/order/index.tsx

@@ -40,7 +40,31 @@ import { useSubscribe } from "@/stores/subscribe";
 import { formatDate } from "@/utils/common";
 import { UserDetail } from "../user/user-detail";
 
-const REFUNDED_ORDER_STATUS = 6;
+const ORDER_STATUS_PENDING = 1;
+const ORDER_STATUS_PAID = 2;
+const ORDER_STATUS_CLOSED = 3;
+const ORDER_STATUS_FAILED = 4;
+const ORDER_STATUS_FINISHED = 5;
+const ORDER_STATUS_CLAIMED = 6;
+const ORDER_STATUS_REFUNDED = 7;
+
+const MANUALLY_EDITABLE_ORDER_STATUSES = [
+  ORDER_STATUS_PENDING,
+  ORDER_STATUS_PAID,
+  ORDER_STATUS_CLOSED,
+  ORDER_STATUS_FAILED,
+  ORDER_STATUS_FINISHED,
+] as const;
+
+export function canManuallyUpdateOrderStatus(status: number) {
+  return MANUALLY_EDITABLE_ORDER_STATUSES.includes(
+    status as (typeof MANUALLY_EDITABLE_ORDER_STATUSES)[number]
+  );
+}
+
+export function canRefundOrderStatus(status: number) {
+  return [ORDER_STATUS_PAID, ORDER_STATUS_FINISHED].includes(status);
+}
 
 export default function Order() {
   const { t } = useTranslation("order");
@@ -56,30 +80,46 @@ export default function Order() {
     subscribe_id: sp.subscribe_id || undefined,
   };
 
-  const statusOptions = [
+  const displayStatusOptions = [
     {
-      value: 1,
+      value: ORDER_STATUS_PENDING,
       label: t("status.1", "Pending"),
       className: "bg-orange-500",
     },
-    { value: 2, label: t("status.2", "Paid"), className: "bg-green-500" },
     {
-      value: 3,
-      label: t("status.3", "Cancelled"),
-      className: "bg-gray-500",
-    },
-    { value: 4, label: t("status.4", "Closed"), className: "bg-red-500" },
-    {
-      value: 5,
-      label: t("status.5", "Completed"),
+      value: ORDER_STATUS_PAID,
+      label: t("status.2", "Paid"),
       className: "bg-green-500",
     },
     {
-      value: REFUNDED_ORDER_STATUS,
-      label: t("status.6", "Refunded"),
+      value: ORDER_STATUS_CLOSED,
+      label: t("status.3", "Closed"),
+      className: "bg-gray-500",
+    },
+    {
+      value: ORDER_STATUS_FAILED,
+      label: t("status.4", "Failed"),
+      className: "bg-red-500",
+    },
+    {
+      value: ORDER_STATUS_FINISHED,
+      label: t("status.5", "Finished"),
+      className: "bg-green-500",
+    },
+    {
+      value: ORDER_STATUS_CLAIMED,
+      label: t("status.6", "Claimed"),
+      className: "bg-amber-500",
+    },
+    {
+      value: ORDER_STATUS_REFUNDED,
+      label: t("status.7", "Refunded"),
       className: "bg-red-500",
     },
   ];
+  const editableStatusOptions = displayStatusOptions.filter((option) =>
+    canManuallyUpdateOrderStatus(option.value)
+  );
 
   const typeOptions = [
     { value: 1, label: t("type.1", "New Purchase") },
@@ -95,29 +135,36 @@ export default function Order() {
 
   const refundMutation = useMutation({
     mutationFn: async (order: API.Order) => {
-      await refundOrder({ id: order.id });
+      await refundOrder(
+        { id: order.id },
+        {
+          skipErrorHandler: true,
+        }
+      );
     },
     onSuccess: () => {
       toast.success(t("refundSuccess", "Refund completed."));
       setConfirmingOrderId(null);
       ref.current?.refresh();
     },
-    onError: (error) => {
-      console.error("Refund order failed", error);
+    onError: () => {
+      toast.error(t("refundFailed", "Refund failed. Please try again."));
       setConfirmingOrderId(null);
     },
   });
 
   const isRefundedOrder = (order: API.Order) =>
-    order.status === REFUNDED_ORDER_STATUS ||
-    order.status_name === t("status.6", "Refunded") ||
+    order.status === ORDER_STATUS_REFUNDED ||
+    order.status_name === t("status.7", "Refunded") ||
     order.status_name?.toLowerCase() === "refunded";
 
   const canRefundOrder = (order: API.Order) =>
-    canRefundOrders && !isRefundedOrder(order);
+    canRefundOrders &&
+    canRefundOrderStatus(order.status) &&
+    !isRefundedOrder(order);
 
   return (
-    <ProTable<API.Order, any>
+    <ProTable<API.Order, Record<string, unknown>>
       action={ref}
       actions={{
         render: (order) => {
@@ -173,7 +220,11 @@ export default function Order() {
                     onClick={async (event) => {
                       event.preventDefault();
                       if (isPending) return;
-                      await refundMutation.mutateAsync(order);
+                      try {
+                        await refundMutation.mutateAsync(order);
+                      } catch {
+                        // Errors are surfaced through the mutation onError handler.
+                      }
                     }}
                   >
                     {isPending
@@ -335,26 +386,55 @@ export default function Order() {
           header: t("status.0", "Status"),
           cell: ({ row }) => {
             const order = row.original as API.Order;
-            const option = statusOptions.find(
+            const option = displayStatusOptions.find(
               (opt) => opt.value === order.status
             );
-            if ([1, 3, 4].includes(row.getValue("status"))) {
+            if (
+              [ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED, ORDER_STATUS_FAILED]
+                .map(String)
+                .includes(String(row.getValue("status")))
+            ) {
               return (
                 <div className="flex items-center gap-1">
                   <Combobox<number, false>
                     className={cn(option?.className)}
                     onChange={async (value) => {
-                      await updateOrderStatus({
-                        id: order.id,
-                        status: value,
-                      });
-                      ref.current?.refresh();
+                      if (!canManuallyUpdateOrderStatus(value)) {
+                        toast.error(
+                          t(
+                            "statusClaimedBlocked",
+                            "Claimed and refunded states must use the dedicated processing flow."
+                          )
+                        );
+                        return;
+                      }
+                      try {
+                        await updateOrderStatus(
+                          {
+                            id: order.id,
+                            status: value,
+                          },
+                          {
+                            skipErrorHandler: true,
+                          }
+                        );
+                        ref.current?.refresh();
+                      } catch {
+                        toast.error(
+                          t(
+                            "statusUpdateFailed",
+                            "Status update failed. Please try again."
+                          )
+                        );
+                      }
                     }}
-                    options={statusOptions}
+                    options={editableStatusOptions}
                     placeholder={t("status.0", "Status")}
                     value={order.status}
                   />
-                  {[1, 3].includes(order.status) && (
+                  {[ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED].includes(
+                    order.status
+                  ) && (
                     <Button
                       onClick={async () => {
                         await activateOrder({ order_no: order.order_no });
@@ -387,7 +467,7 @@ export default function Order() {
         {
           key: "status",
           placeholder: t("status.0", "Status"),
-          options: statusOptions.map((item) => ({
+          options: displayStatusOptions.map((item) => ({
             label: item.label,
             value: String(item.value),
           })),

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

@@ -33,64 +33,5 @@
     "pending": "Pending Review",
     "rejected": "Rejected"
   },
-  "withdrawSuccess": "Withdrawal request submitted",
-  "withdrawal": {
-    "amount": "Amount",
-    "amountHint": "Available",
-    "amountPlaceholder": "Enter withdrawal amount",
-    "apply": "Apply for Withdrawal",
-    "applyDescription": "Enter the withdrawal amount and payout details.",
-    "applyTitle": "Apply for Withdrawal",
-    "availableCommission": "Available for withdrawal",
-    "cancel": "Cancel",
-    "empty": {
-      "refund": "No refund records yet.",
-      "withdrawal": "No withdrawal records yet."
-    },
-    "error": {
-      "refundDescription": "Please try again later.",
-      "refundTitle": "Failed to load refund records",
-      "withdrawalDescription": "Please try again later.",
-      "withdrawalTitle": "Failed to load withdrawal records"
-    },
-    "record": {
-      "account": "Payout Account",
-      "content": "Payout Information",
-      "createdAt": "Created At",
-      "method": "Payout Method",
-      "qrCode": "Payment QR Code",
-      "reason": "Reject Reason"
-    },
-    "records": "Withdrawal Records",
-    "recordsDescription": "View withdrawal and refund records separately.",
-    "refund": {
-      "amount": "Amount",
-      "content": "Description",
-      "createdAt": "Created At",
-      "event": {
-        "333": "Order refund",
-        "337": "Withdrawal rejected refund",
-        "338": "Withdrawal cancelled refund",
-        "other": "Other refund"
-      },
-      "eventType": "Type"
-    },
-    "retry": "Retry",
-    "status": {
-      "approved": "Approved",
-      "cancelled": "Cancelled",
-      "pending": "Pending",
-      "rejected": "Rejected"
-    },
-    "submit": "Submit Withdrawal",
-    "submitSuccess": "Withdrawal request submitted",
-    "submitting": "Submitting...",
-    "tabs": {
-      "refund": "Refund Records",
-      "withdrawal": "Withdrawal Records"
-    },
-    "validation": {
-      "amountExceeded": "Amount cannot exceed available commission"
-    }
-  }
+  "withdrawSuccess": "Withdrawal request submitted"
 }

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

@@ -33,64 +33,5 @@
     "pending": "审核中",
     "rejected": "已拒绝"
   },
-  "withdrawSuccess": "提现申请已提交",
-  "withdrawal": {
-    "amount": "金额",
-    "amountHint": "可提现",
-    "amountPlaceholder": "请输入提现金额",
-    "apply": "申请提现",
-    "applyDescription": "填写提现金额和收款信息后提交，等待审核。",
-    "applyTitle": "申请提现",
-    "availableCommission": "可提现佣金",
-    "cancel": "取消",
-    "empty": {
-      "refund": "暂无退款记录。",
-      "withdrawal": "暂无提现记录。"
-    },
-    "error": {
-      "refundDescription": "请稍后重试。",
-      "refundTitle": "退款记录加载失败",
-      "withdrawalDescription": "请稍后重试。",
-      "withdrawalTitle": "提现记录加载失败"
-    },
-    "record": {
-      "account": "收款账号",
-      "content": "收款信息",
-      "createdAt": "创建时间",
-      "method": "收款方式",
-      "qrCode": "收款码",
-      "reason": "拒绝原因"
-    },
-    "records": "提现记录",
-    "recordsDescription": "提现记录与退款记录独立展示。",
-    "refund": {
-      "amount": "金额",
-      "content": "说明",
-      "createdAt": "时间",
-      "event": {
-        "333": "订单退款",
-        "337": "提现拒绝退回",
-        "338": "用户取消提现退回",
-        "other": "其他退款"
-      },
-      "eventType": "类型"
-    },
-    "retry": "重试",
-    "status": {
-      "approved": "已通过",
-      "cancelled": "已取消",
-      "pending": "审核中",
-      "rejected": "已拒绝"
-    },
-    "submit": "提交提现",
-    "submitSuccess": "提现申请已提交",
-    "submitting": "提交中...",
-    "tabs": {
-      "refund": "退款记录",
-      "withdrawal": "提现记录"
-    },
-    "validation": {
-      "amountExceeded": "提现金额不能超过可提现佣金"
-    }
-  }
+  "withdrawSuccess": "提现申请已提交"
 }

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

@@ -36,6 +36,7 @@ import {
   SelectValue,
 } from "@workspace/ui/components/select";
 import { Textarea } from "@workspace/ui/components/textarea";
+import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
 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";
@@ -43,6 +44,7 @@ import {
   commissionWithdraw,
   queryUserAffiliate,
   queryUserAffiliateList,
+  queryWithdrawalLog,
   uploadFile,
   withdrawalCancel,
 } from "@workspace/ui/services/user/user";
@@ -57,7 +59,6 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Display } from "@/components/display";
 import { useGlobalStore } from "@/stores/global";
-import { WithdrawalRecords } from "./withdrawal-records";
 
 const WITHDRAWAL_METHODS = [
   { value: 1, label: "支付宝" },
@@ -66,6 +67,38 @@ const WITHDRAWAL_METHODS = [
   { value: 0, label: "其他" },
 ] as const;
 
+function getWithdrawalMethodLabel(method: number): string {
+  return WITHDRAWAL_METHODS.find((m) => m.value === method)?.label ?? "未知";
+}
+
+function getWithdrawalStatusMeta(
+  status: number,
+  t: ReturnType<typeof useTranslation<"affiliate">>["t"]
+) {
+  switch (status) {
+    case 1:
+      return {
+        label: t("withdrawal.status.approved", "Approved"),
+        className: "bg-emerald-500/10 text-emerald-600",
+      };
+    case 2:
+      return {
+        label: t("withdrawal.status.rejected", "Rejected"),
+        className: "bg-destructive/10 text-destructive",
+      };
+    case 3:
+      return {
+        label: t("withdrawal.status.cancelled", "Cancelled"),
+        className: "bg-muted text-muted-foreground",
+      };
+    default:
+      return {
+        label: t("withdrawal.status.pending", "Pending"),
+        className: "bg-amber-500/10 text-amber-600",
+      };
+  }
+}
+
 function QrCodeView({ url }: { url: string }) {
   const [zoomOpen, setZoomOpen] = useState(false);
   return (
@@ -78,21 +111,13 @@ 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"
-              height={320}
-              src={url}
-              width={320}
-            />
+            <img alt="收款码" className="w-full" src={url} />
           </DialogContent>
         </Dialog>
       )}
@@ -132,12 +157,14 @@ const withdrawalFormSchema = z
           path: ["account"],
         });
       }
-    } else if (data.method === 0 && !(data.account || data.content)) {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: "收款账号和备注至少填一项",
-        path: ["account"],
-      });
+    } else if (data.method === 0) {
+      if (!data.account && !data.content) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "收款账号和备注至少填一项",
+          path: ["account"],
+        });
+      }
     }
   });
 
@@ -394,7 +421,9 @@ export default function Affiliate() {
                             <FormItem>
                               <FormLabel>
                                 收款码
-                                <span className="ml-1 text-destructive">*</span>
+                                <span className="ml-1 text-destructive">
+                                  *
+                                </span>
                               </FormLabel>
                               {watchedQrCodeUrl ? (
                                 <div className="relative inline-block">
@@ -417,9 +446,7 @@ 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>
                               )}
@@ -492,7 +519,9 @@ export default function Affiliate() {
                     </Button>
                     <Button
                       disabled={
-                        submitting || qrUploading || availableCommission <= 0
+                        submitting ||
+                        qrUploading ||
+                        availableCommission <= 0
                       }
                       form="withdrawal-form"
                       type="submit"
@@ -535,10 +564,106 @@ export default function Affiliate() {
           </div>
         </CardContent>
       </Card>
-      <WithdrawalRecords
-        cancelMutation={cancelMutation}
-        t={t}
-        withdrawalListActionRef={withdrawalListActionRef}
+      <ProList<API.WithdrawalLog, Record<string, unknown>>
+        action={withdrawalListActionRef}
+        header={{
+          title: t("withdrawal.records", "Withdrawal Records"),
+        }}
+        renderItem={(item) => {
+          const statusMeta = getWithdrawalStatusMeta(item.status, t);
+          return (
+            <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>
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`inline-flex rounded-full px-3 py-1 font-medium text-xs ${statusMeta.className}`}
+                    >
+                      {statusMeta.label}
+                    </span>
+                    {item.status === 0 && (
+                      <ConfirmButton
+                        cancelText="取消"
+                        confirmText="确认取消"
+                        description="取消后该提现申请将关闭，佣金不会退还。确定取消吗？"
+                        onConfirm={async () => {
+                          await cancelMutation.mutateAsync(item.id);
+                        }}
+                        title="取消提现申请"
+                        trigger={
+                          <Button
+                            disabled={cancelMutation.isPending}
+                            size="sm"
+                            variant="outline"
+                          >
+                            取消申请
+                          </Button>
+                        }
+                      />
+                    )}
+                  </div>
+                </div>
+                <ul className="grid gap-3 md:grid-cols-2">
+                  <li className="flex flex-col gap-1">
+                    <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="break-all">{item.account}</span>
+                    </li>
+                  )}
+                  {item.qr_code_url && (
+                    <li className="flex flex-col gap-1">
+                      <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")}
+                      </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,
+          };
+        }}
       />
       <ProList<API.UserAffiliate, Record<string, unknown>>
         header={{

apps/user/src/sections/user/affiliate/withdrawal-records.test.tsx

@@ -1,254 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import {
-  cleanup,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import {
-  queryUserCommissionReturnLog,
-  queryWithdrawalLog,
-} from "@workspace/ui/services/user/user";
-import type { AxiosResponse } from "axios";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { WithdrawalRecords } from "./withdrawal-records";
-
-vi.mock("@workspace/ui/services/user/user", () => ({
-  queryUserCommissionReturnLog: vi.fn(),
-  queryWithdrawalLog: vi.fn(),
-}));
-
-vi.mock("@/components/display", () => ({
-  Display: ({
-    value,
-  }: {
-    type: string;
-    value: number | string | null | undefined;
-  }) => <span>{String(value ?? "")}</span>,
-}));
-
-const mockedQueryWithdrawalLog = vi.mocked(queryWithdrawalLog);
-const mockedQueryUserCommissionReturnLog = vi.mocked(
-  queryUserCommissionReturnLog
-);
-
-function t(key: string, defaultValue?: string): string {
-  return defaultValue ?? key;
-}
-
-function createResponse<T extends Record<string, unknown>>(
-  data: T
-): AxiosResponse<API.Response & { data?: T }> {
-  return {
-    data: {
-      code: 200,
-      data,
-    },
-    status: 200,
-    statusText: "OK",
-    headers: {},
-    config: {
-      headers: {} as AxiosResponse["config"]["headers"],
-    },
-  };
-}
-
-function renderWithdrawalRecords(
-  defaultTab: "withdrawal" | "refund" = "withdrawal"
-) {
-  return render(
-    <WithdrawalRecords
-      cancelMutation={{
-        isPending: false,
-        mutateAsync: vi.fn().mockResolvedValue(undefined),
-      }}
-      defaultTab={defaultTab}
-      t={
-        t as ReturnType<
-          typeof import("react-i18next").useTranslation<"affiliate">
-        >["t"]
-      }
-      withdrawalListActionRef={{ current: undefined }}
-    />
-  );
-}
-
-afterEach(() => {
-  cleanup();
-  vi.clearAllMocks();
-});
-
-describe("WithdrawalRecords", () => {
-  it("renders withdrawal records by default", async () => {
-    mockedQueryWithdrawalLog.mockResolvedValue(
-      createResponse({
-        list: [
-          {
-            id: 1,
-            user_id: 1,
-            amount: 3200,
-            method: 3,
-            account: "6222",
-            status: 1,
-            created_at: 1_716_800_000,
-            updated_at: 1_716_800_000,
-          },
-        ],
-        total: 1,
-      })
-    );
-    mockedQueryUserCommissionReturnLog.mockResolvedValue(
-      createResponse({ list: [], total: 0 })
-    );
-
-    renderWithdrawalRecords();
-
-    await waitFor(() =>
-      expect(mockedQueryWithdrawalLog).toHaveBeenCalledWith({
-        page: 1,
-        size: 10,
-      })
-    );
-    expect(await screen.findByText("32")).not.toBeNull();
-    expect(screen.getByText("6222")).not.toBeNull();
-    expect(screen.getByText("Approved")).not.toBeNull();
-  });
-
-  it("shows loading state while withdrawal records are being fetched", () => {
-    mockedQueryWithdrawalLog.mockReturnValue(
-      new Promise(() => {
-        // keep pending to assert the loading state
-      })
-    );
-    mockedQueryUserCommissionReturnLog.mockResolvedValue(
-      createResponse({ list: [], total: 0 })
-    );
-
-    renderWithdrawalRecords();
-
-    expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
-  });
-
-  it("shows refund empty state independently", async () => {
-    mockedQueryWithdrawalLog.mockResolvedValue(
-      createResponse({
-        list: [
-          {
-            id: 1,
-            user_id: 1,
-            amount: 3200,
-            method: 3,
-            account: "6222",
-            status: 1,
-            created_at: 1_716_800_000,
-            updated_at: 1_716_800_000,
-          },
-        ],
-        total: 1,
-      })
-    );
-    mockedQueryUserCommissionReturnLog.mockResolvedValue(
-      createResponse({ list: [], total: 0 })
-    );
-
-    renderWithdrawalRecords("refund");
-
-    await waitFor(() =>
-      expect(mockedQueryUserCommissionReturnLog).toHaveBeenCalledWith({
-        page: 1,
-        size: 10,
-      })
-    );
-    expect(await screen.findByText("No refund records yet.")).not.toBeNull();
-    expect(screen.queryByText("3200")).toBeNull();
-  });
-
-  it("shows refund error state and retries", async () => {
-    mockedQueryWithdrawalLog.mockResolvedValue(
-      createResponse({ list: [], total: 0 })
-    );
-    mockedQueryUserCommissionReturnLog
-      .mockRejectedValueOnce(new Error("network failed"))
-      .mockResolvedValueOnce(
-        createResponse({
-          list: [
-            {
-              id: 2,
-              user_id: 1,
-              amount: 500,
-              event_type: 333,
-              content: "order refunded",
-              created_at: 1_716_800_000,
-              updated_at: 1_716_800_000,
-            },
-          ],
-          total: 1,
-        })
-      );
-
-    renderWithdrawalRecords("refund");
-
-    expect(
-      await screen.findByText("Failed to load refund records")
-    ).not.toBeNull();
-
-    fireEvent.click(screen.getByRole("button", { name: "Retry" }));
-
-    expect(await screen.findByText("Order refund")).not.toBeNull();
-    expect(screen.getByText("5")).not.toBeNull();
-  });
-
-  it("falls back for unknown refund event types and warns once", async () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {
-      // suppress expected warning in test output
-    });
-    mockedQueryWithdrawalLog.mockResolvedValue(
-      createResponse({ list: [], total: 0 })
-    );
-    mockedQueryUserCommissionReturnLog.mockResolvedValue(
-      createResponse({
-        list: [
-          {
-            id: 2,
-            user_id: 1,
-            amount: 500,
-            event_type: 999,
-            content: "unexpected",
-            created_at: 1_716_800_000,
-            updated_at: 1_716_800_000,
-          },
-        ],
-        total: 1,
-      })
-    );
-
-    renderWithdrawalRecords("refund");
-
-    expect(await screen.findByText("Other refund")).not.toBeNull();
-    expect(warnSpy).toHaveBeenCalledWith(
-      "Unknown commission return event type:",
-      999
-    );
-
-    warnSpy.mockRestore();
-  });
-
-  it("keeps mobile-friendly tab layout classes", async () => {
-    mockedQueryWithdrawalLog.mockResolvedValue(
-      createResponse({ list: [], total: 0 })
-    );
-    mockedQueryUserCommissionReturnLog.mockResolvedValue(
-      createResponse({ list: [], total: 0 })
-    );
-
-    const { container } = renderWithdrawalRecords();
-
-    await screen.findByText("No withdrawal records yet.");
-
-    expect(container.querySelector(".grid-cols-2")).not.toBeNull();
-    expect(container.querySelector(".w-full")).not.toBeNull();
-  });
-});

apps/user/src/sections/user/affiliate/withdrawal-records.tsx

@@ -1,410 +0,0 @@
-"use client";
-
-import { Button } from "@workspace/ui/components/button";
-import { Card, CardContent } from "@workspace/ui/components/card";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@workspace/ui/components/tabs";
-import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
-import Empty from "@workspace/ui/composed/empty";
-import {
-  ProList,
-  type ProListActions,
-} from "@workspace/ui/composed/pro-list/pro-list";
-import {
-  queryUserCommissionReturnLog,
-  queryWithdrawalLog,
-} from "@workspace/ui/services/user/user";
-import { formatDate } from "@workspace/ui/utils/formatting";
-import { unitConversion } from "@workspace/ui/utils/unit-conversions";
-import { AlertCircleIcon, X } from "lucide-react";
-import { type RefObject, useState } from "react";
-
-type AffiliateTranslation = ReturnType<
-  typeof import("react-i18next").useTranslation<"affiliate">
->["t"];
-
-const WITHDRAWAL_METHODS = [
-  { value: 1, label: "支付宝" },
-  { value: 2, label: "微信" },
-  { value: 3, label: "银行卡" },
-  { value: 0, label: "其他" },
-] as const;
-
-const warnedCommissionReturnEventTypes = new Set<number>();
-
-interface WithdrawalRecordsProps {
-  t: AffiliateTranslation;
-  cancelMutation: {
-    isPending: boolean;
-    mutateAsync: (withdrawalId: number) => Promise<unknown>;
-  };
-  defaultTab?: "withdrawal" | "refund";
-  withdrawalListActionRef: RefObject<ProListActions | undefined>;
-}
-
-function CurrencyValue({ value }: { value?: number | null }) {
-  const amount = Number(value ?? 0);
-  return <>{unitConversion("centsToDollars", amount)}</>;
-}
-
-function getWithdrawalMethodLabel(method: number): string {
-  return WITHDRAWAL_METHODS.find((m) => m.value === method)?.label ?? "未知";
-}
-
-function getWithdrawalStatusMeta(status: number, t: AffiliateTranslation) {
-  switch (status) {
-    case 1:
-      return {
-        label: t("withdrawal.status.approved", "Approved"),
-        className: "bg-emerald-500/10 text-emerald-600",
-      };
-    case 2:
-      return {
-        label: t("withdrawal.status.rejected", "Rejected"),
-        className: "bg-destructive/10 text-destructive",
-      };
-    case 3:
-      return {
-        label: t("withdrawal.status.cancelled", "Cancelled"),
-        className: "bg-muted text-muted-foreground",
-      };
-    default:
-      return {
-        label: t("withdrawal.status.pending", "Pending"),
-        className: "bg-amber-500/10 text-amber-600",
-      };
-  }
-}
-
-export function getCommissionReturnEventLabel(
-  eventType: number,
-  t: AffiliateTranslation
-) {
-  switch (eventType) {
-    case 333:
-      return t("withdrawal.refund.event.333", "Order refund");
-    case 337:
-      return t("withdrawal.refund.event.337", "Withdrawal rejected refund");
-    case 338:
-      return t("withdrawal.refund.event.338", "Withdrawal cancelled refund");
-    default:
-      if (!warnedCommissionReturnEventTypes.has(eventType)) {
-        warnedCommissionReturnEventTypes.add(eventType);
-        console.warn("Unknown commission return event type:", eventType);
-      }
-      return t("withdrawal.refund.event.other", "Other refund");
-  }
-}
-
-function renderLogErrorState(
-  t: AffiliateTranslation,
-  title: string,
-  description: string,
-  retry: () => void
-) {
-  return (
-    <div className="flex items-center justify-center py-24">
-      <Card className="w-full max-w-md border-dashed">
-        <CardContent className="flex flex-col items-center gap-3 p-6 text-center">
-          <AlertCircleIcon className="h-6 w-6 text-destructive" />
-          <div className="space-y-1">
-            <p className="font-semibold">{title}</p>
-            <p className="text-muted-foreground text-sm">{description}</p>
-          </div>
-          <Button onClick={retry} size="sm" variant="outline">
-            {t("withdrawal.retry", "Retry")}
-          </Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function QrCodeView({ url }: { url: string }) {
-  const [zoomOpen, setZoomOpen] = useState(false);
-  return (
-    <>
-      <button
-        className="block overflow-hidden rounded border"
-        onClick={() => setZoomOpen(true)}
-        type="button"
-      >
-        <img
-          alt="收款码"
-          className="h-16 w-16 cursor-zoom-in object-cover"
-          src={url}
-          height={64}
-          width={64}
-        />
-      </button>
-      {zoomOpen && (
-        <div
-          aria-label="QR code preview"
-          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4"
-          role="dialog"
-        >
-          <div className="relative max-w-sm rounded-lg bg-background p-4 shadow-xl">
-            <button
-              aria-label="Close QR code preview"
-              className="absolute top-2 right-2 rounded p-1"
-              onClick={() => setZoomOpen(false)}
-              type="button"
-            >
-              <X className="h-4 w-4" />
-            </button>
-            <img
-              alt="收款码"
-              className="w-full"
-              height={320}
-              src={url}
-              width={320}
-            />
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-export function WithdrawalRecords({
-  t,
-  cancelMutation,
-  defaultTab = "withdrawal",
-  withdrawalListActionRef,
-}: WithdrawalRecordsProps) {
-  return (
-    <Tabs className="gap-4" defaultValue={defaultTab}>
-      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <h2 className="font-semibold text-lg">
-            {t("withdrawal.records", "Withdrawal Records")}
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            {t(
-              "withdrawal.recordsDescription",
-              "View withdrawal and refund records separately."
-            )}
-          </p>
-        </div>
-        <TabsList className="grid h-auto w-full grid-cols-2 sm:w-fit">
-          <TabsTrigger className="py-2" value="withdrawal">
-            {t("withdrawal.tabs.withdrawal", "Withdrawal Records")}
-          </TabsTrigger>
-          <TabsTrigger className="py-2" value="refund">
-            {t("withdrawal.tabs.refund", "Refund Records")}
-          </TabsTrigger>
-        </TabsList>
-      </div>
-
-      <TabsContent value="withdrawal">
-        <ProList<API.WithdrawalLog, Record<string, unknown>>
-          action={withdrawalListActionRef}
-          empty={
-            <Empty
-              description={t(
-                "withdrawal.empty.withdrawal",
-                "No withdrawal records yet."
-              )}
-            />
-          }
-          error={(retry) =>
-            renderLogErrorState(
-              t,
-              t(
-                "withdrawal.error.withdrawalTitle",
-                "Failed to load withdrawal records"
-              ),
-              t(
-                "withdrawal.error.withdrawalDescription",
-                "Please try again later."
-              ),
-              retry
-            )
-          }
-          renderItem={(item) => {
-            const statusMeta = getWithdrawalStatusMeta(item.status, t);
-            return (
-              <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">
-                      <CurrencyValue value={item.amount} />
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span
-                        className={`inline-flex rounded-full px-3 py-1 font-medium text-xs ${statusMeta.className}`}
-                      >
-                        {statusMeta.label}
-                      </span>
-                      {item.status === 0 && (
-                        <ConfirmButton
-                          cancelText="取消"
-                          confirmText="确认取消"
-                          description="取消后该提现申请将关闭，佣金不会退还。确定取消吗？"
-                          onConfirm={async () => {
-                            await cancelMutation.mutateAsync(item.id);
-                          }}
-                          title="取消提现申请"
-                          trigger={
-                            <Button
-                              disabled={cancelMutation.isPending}
-                              size="sm"
-                              variant="outline"
-                            >
-                              取消申请
-                            </Button>
-                          }
-                        />
-                      )}
-                    </div>
-                  </div>
-                  <ul className="grid gap-3 md:grid-cols-2">
-                    <li className="flex flex-col gap-1">
-                      <span className="text-muted-foreground">
-                        {t("withdrawal.record.method", "Payout Method")}
-                      </span>
-                      <span>{getWithdrawalMethodLabel(item.method)}</span>
-                    </li>
-                    {item.account && (
-                      <li className="flex flex-col gap-1">
-                        <span className="text-muted-foreground">
-                          {t("withdrawal.record.account", "Payout Account")}
-                        </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">
-                          {t("withdrawal.record.qrCode", "Payment QR Code")}
-                        </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 value="refund">
-        <ProList<API.CommissionReturnLog, Record<string, unknown>>
-          empty={
-            <Empty
-              description={t(
-                "withdrawal.empty.refund",
-                "No refund records yet."
-              )}
-            />
-          }
-          error={(retry) =>
-            renderLogErrorState(
-              t,
-              t(
-                "withdrawal.error.refundTitle",
-                "Failed to load refund records"
-              ),
-              t(
-                "withdrawal.error.refundDescription",
-                "Please try again later."
-              ),
-              retry
-            )
-          }
-          renderItem={(item) => (
-            <Card className="overflow-hidden">
-              <CardContent className="p-4 text-sm">
-                <ul className="grid gap-3 md:grid-cols-3">
-                  <li className="flex flex-col gap-1 font-semibold">
-                    <span className="text-muted-foreground">
-                      {t("withdrawal.refund.createdAt", "Created At")}
-                    </span>
-                    <time>{formatDate(item.created_at)}</time>
-                  </li>
-                  <li className="flex flex-col gap-1 font-semibold">
-                    <span className="text-muted-foreground">
-                      {t("withdrawal.refund.eventType", "Type")}
-                    </span>
-                    <span>
-                      {getCommissionReturnEventLabel(item.event_type, t)}
-                    </span>
-                  </li>
-                  <li className="flex flex-col gap-1 font-semibold">
-                    <span className="text-muted-foreground">
-                      {t("withdrawal.refund.amount", "Amount")}
-                    </span>
-                    <span>
-                      <CurrencyValue value={item.amount} />
-                    </span>
-                  </li>
-                  {item.content && (
-                    <li className="flex flex-col gap-1 md:col-span-3">
-                      <span className="text-muted-foreground">
-                        {t("withdrawal.refund.content", "Description")}
-                      </span>
-                      <span className="whitespace-pre-wrap break-words">
-                        {item.content}
-                      </span>
-                    </li>
-                  )}
-                </ul>
-              </CardContent>
-            </Card>
-          )}
-          request={async (pagination) => {
-            const response = await queryUserCommissionReturnLog({
-              page: pagination.page,
-              size: pagination.size,
-            });
-            return {
-              list: response.data.data?.list || [],
-              total: response.data.data?.total || 0,
-            };
-          }}
-        />
-      </TabsContent>
-    </Tabs>
-  );
-}

packages/ui/src/composed/pro-list/pro-list.tsx

@@ -14,7 +14,6 @@ import {
 } from "@workspace/ui/components/alert";
 import { Button } from "@workspace/ui/components/button";
 import { Checkbox } from "@workspace/ui/components/checkbox";
-import { Spinner } from "@workspace/ui/components/spinner";
 import Empty from "@workspace/ui/composed/empty";
 import {
   ColumnFilter,
@@ -22,7 +21,7 @@ import {
 } from "@workspace/ui/composed/pro-list/column-filter";
 import { Pagination } from "@workspace/ui/composed/pro-list/pagination";
 import { cn } from "@workspace/ui/lib/utils";
-import { AlertCircleIcon, ListRestart, RefreshCcw } from "lucide-react";
+import { ListRestart, Loader, RefreshCcw } from "lucide-react";
 import type React from "react";
 import { useEffect, useImperativeHandle, useState } from "react";
 
@@ -48,7 +47,6 @@ export interface ProListProps<TData, TValue> {
     selectedRowsText: (total: number) => string;
   }>;
   empty?: React.ReactNode;
-  error?: (retry: () => void) => React.ReactNode;
 }
 export interface ProListActions {
   refresh: () => void;
@@ -64,7 +62,6 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
   action,
   texts,
   empty,
-  error,
 }: ProListProps<TData, TValue>) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [rowSelection, setRowSelection] = useState<{ [key: number]: boolean }>(
@@ -77,7 +74,6 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
     pageSize: 10,
   });
   const [loading, setLoading] = useState(false);
-  const [requestError, setRequestError] = useState(false);
 
   const table = useReactTable({
     data,
@@ -100,7 +96,6 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
 
   const fetchData = async () => {
     setLoading(true);
-    setRequestError(false);
     try {
       const response = await request(
         {
@@ -113,10 +108,8 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
       );
       setData(response.list);
       setRowCount(response.total);
-    } catch {
-      setData([]);
-      setRowCount(0);
-      setRequestError(true);
+    } catch (error) {
+      console.log("Fetch data error:", error);
     } finally {
       setLoading(false);
     }
@@ -203,22 +196,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
         })}
       >
         <div className="grid grid-cols-1 gap-4">
-          {requestError ? (
-            <div className="flex items-center justify-center py-24">
-              {error?.(fetchData) || (
-                <Alert className="max-w-md">
-                  <AlertCircleIcon />
-                  <AlertTitle>Failed to load data</AlertTitle>
-                  <AlertDescription className="gap-3">
-                    <p>Please try again.</p>
-                    <Button onClick={fetchData} size="sm" variant="outline">
-                      Retry
-                    </Button>
-                  </AlertDescription>
-                </Alert>
-              )}
-            </div>
-          ) : data.length ? (
+          {data.length ? (
             data.map((item, index) => {
               const isSelected = !!rowSelection[index];
 
@@ -243,7 +221,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
 
         {loading && (
           <div className="absolute top-0 z-20 flex h-full w-full items-center justify-center bg-muted/80">
-            <Spinner aria-label="Loading data" className="h-4 w-4" />
+            <Loader className="h-4 w-4 animate-spin" />
           </div>
         )}
       </div>

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

@@ -170,16 +170,6 @@ declare namespace API {
     timestamp: number;
   };
 
-  type CommissionReturnLog = {
-    id: number;
-    user_id: number;
-    amount: number;
-    event_type: number;
-    content: string;
-    created_at: number;
-    updated_at: number;
-  };
-
   type CommissionWithdrawRequest = {
     amount: number;
     method: number;
@@ -826,26 +816,11 @@ declare namespace API {
     total: number;
   };
 
-  type QueryUserCommissionReturnLogListRequest = {
-    page: number;
-    size: number;
-  };
-
-  type QueryUserCommissionReturnLogListResponse = {
-    list: CommissionReturnLog[];
-    total: number;
-  };
-
   type QueryUserCommissionLogParams = {
     page: number;
     size: number;
   };
 
-  type QueryUserCommissionReturnLogParams = {
-    page: number;
-    size: number;
-  };
-
   type QueryUserSubscribeListResponse = {
     list: UserSubscribe[];
     total: number;

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 
@@ -143,26 +144,6 @@ export async function queryUserCommissionLog(
   });
 }
 
-/** Query User Commission Return Log GET /v1/public/user/commission_return_log */
-export async function queryUserCommissionReturnLog(
-  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
-  params: API.QueryUserCommissionReturnLogParams,
-  options?: { [key: string]: any }
-) {
-  return request<
-    API.Response & { data?: API.QueryUserCommissionReturnLogListResponse }
-  >(
-    `${import.meta.env.VITE_API_PREFIX || ""}/v1/public/user/commission_return_log`,
-    {
-      method: "GET",
-      params: {
-        ...params,
-      },
-      ...(options || {}),
-    }
-  );
-}
-
 /** Commission Withdraw POST /v1/public/user/commission_withdraw */
 export async function commissionWithdraw(
   body: API.CommissionWithdrawRequest,