新功能(#25): 拆分用户中心提现退款记录页签

Squash merge of fix/134-促销前端展示对齐 (4702dee).

HIF-79/HIF-113 落地后前端有三处对齐缺失：

- promo-info.tsx 仍读 promo.end_time，但后端 SubscribeDiscountPromo
  JSON 字段是 expires_at（×2 处）
- billing.tsx 缺 Promo Discount 行，PreOrderResponse 拿到 promo_discount
  时无处可渲染
- typings.d.ts: SubscribeDiscountPromo 缺 expires_at/rule_type,
  PreOrderResponse 缺 promo_discount

本次仅修字段对齐与展示行，不动业务逻辑、不动 OrderDetail 类型 (后端
当前未透出 promo_discount)。新增 billing.promoDiscount 中英文文案。

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

@@ -22,10 +22,13 @@
     "inactiveMonthsPlaceholder": "Months without purchase",
     "name": "Name",
     "namePlaceholder": "Rule name",
+    "noDiscounts": "This subscribe has no discount quantities and cannot be configured.",
+    "promoPriceLessThanOriginalPrice": "Promo price must be lower than original price",
     "promoPriceLessThanUnitPrice": "Promo price must be lower than unit price",
     "selectEndTime": "Select time",
     "selectRule": "Select rule",
     "selectStartTime": "Select time",
+    "selectQuantity": "Select discount quantity",
     "selectSubscribe": "Select subscribe",
     "type": "Rule Type",
     "windowHours": "Window Hours",
@@ -38,10 +41,12 @@
   "name": "Name",
   "no": "No",
   "orderNo": "Order No.",
+  "originalPriceHint": "Original price",
   "params": "Params",
   "prices": "Prices",
   "priority": "Priority",
   "promoPrice": "Promo Price",
+  "quantity": "Quantity",
   "rule": "Rule",
   "ruleDetail": "Rule Detail",
   "rules": "Rules",

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

@@ -22,10 +22,13 @@
     "inactiveMonthsPlaceholder": "未购买的月数",
     "name": "名称",
     "namePlaceholder": "规则名称",
+    "noDiscounts": "该订阅没有 discount 档位，不能配置促销价。",
+    "promoPriceLessThanOriginalPrice": "促销价必须低于原价",
     "promoPriceLessThanUnitPrice": "促销价必须低于原价",
     "selectEndTime": "选择时间",
     "selectRule": "选择规则",
     "selectStartTime": "选择时间",
+    "selectQuantity": "选择 discount 档位",
     "selectSubscribe": "选择订阅",
     "type": "规则类型",
     "windowHours": "新用户窗口小时数",
@@ -38,10 +41,12 @@
   "name": "名称",
   "no": "否",
   "orderNo": "订单号",
+  "originalPriceHint": "原价",
   "params": "参数",
   "prices": "商品促销价",
   "priority": "优先级",
   "promoPrice": "促销价",
+  "quantity": "档位",
   "rule": "规则",
   "ruleDetail": "规则详情",
   "rules": "促销规则",

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

@@ -46,7 +46,7 @@ type RuleFilters = {
 };
 
 type PriceFilters = {
-  rule_id?: string;
+  promo_rule_id?: string;
   subscribe_id?: string;
 };
 
@@ -301,12 +301,13 @@ export default function PromoPage() {
             }}
             columns={[
               {
-                accessorKey: "rule_id",
+                accessorKey: "promo_rule_id",
                 header: t("rule", "Rule"),
                 cell: ({ row }) =>
-                  row.original.rule_id
-                    ? rules.find((rule) => rule.id === row.original.rule_id)
-                        ?.name || `#${row.original.rule_id}`
+                  row.original.promo_rule_id
+                    ? rules.find(
+                        (rule) => rule.id === row.original.promo_rule_id
+                      )?.name || `#${row.original.promo_rule_id}`
                     : "--",
               },
               {
@@ -316,6 +317,11 @@ export default function PromoPage() {
                   row.original.subscribe_name ||
                   getSubscribeName(row.original.subscribe_id),
               },
+              {
+                accessorKey: "quantity",
+                header: t("quantity", "Quantity"),
+                cell: ({ row }) => row.original.quantity || "--",
+              },
               {
                 accessorKey: "unit_price",
                 header: t("unitPrice", "Unit Price"),
@@ -361,7 +367,7 @@ export default function PromoPage() {
             }}
             params={[
               {
-                key: "rule_id",
+                key: "promo_rule_id",
                 placeholder: t("rule", "Rule"),
                 options: rules.map((rule) => ({
                   label: rule.name,
@@ -382,7 +388,7 @@ export default function PromoPage() {
             request={async (pagination, filters) => {
               const { data } = await getPromoPriceList({
                 ...pagination,
-                rule_id: parseOptionalNumber(filters.rule_id),
+                promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
                 subscribe_id: parseOptionalNumber(filters.subscribe_id),
               });
               return {
@@ -398,13 +404,13 @@ export default function PromoPage() {
             action={usageRef}
             columns={[
               {
-                accessorKey: "rule_id",
+                accessorKey: "promo_rule_id",
                 header: t("rule", "Rule"),
                 cell: ({ row }) =>
                   row.original.rule_name ||
-                  rules.find((rule) => rule.id === row.original.rule_id)
+                  rules.find((rule) => rule.id === row.original.promo_rule_id)
                     ?.name ||
-                  `#${row.original.rule_id}`,
+                  `#${row.original.promo_rule_id}`,
               },
               {
                 accessorKey: "user_id",
@@ -418,6 +424,11 @@ export default function PromoPage() {
                   row.original.subscribe_name ||
                   getSubscribeName(row.original.subscribe_id),
               },
+              {
+                accessorKey: "quantity",
+                header: t("quantity", "Quantity"),
+                cell: ({ row }) => row.original.quantity || "--",
+              },
               {
                 accessorKey: "order_no",
                 header: t("orderNo", "Order No."),
@@ -447,7 +458,7 @@ export default function PromoPage() {
             }
             params={[
               {
-                key: "rule_id",
+                key: "promo_rule_id",
                 placeholder: t("rule", "Rule"),
                 options: rules.map((rule) => ({
                   label: rule.name,
@@ -470,7 +481,7 @@ export default function PromoPage() {
             request={async (pagination, filters) => {
               const { data } = await getPromoUsageList({
                 ...pagination,
-                rule_id: parseOptionalNumber(filters.rule_id),
+                promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
                 subscribe_id: parseOptionalNumber(filters.subscribe_id),
                 user_id: parseOptionalNumber(filters.user_id),
                 order_no: filters.order_no?.trim() || undefined,

apps/admin/src/sections/promo/price-form.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import PriceForm from "./price-form";
+
+globalThis.ResizeObserver = class ResizeObserver {
+  observe() {
+    return;
+  }
+  unobserve() {
+    return;
+  }
+  disconnect() {
+    return;
+  }
+};
+Element.prototype.scrollIntoView = function scrollIntoView() {
+  return;
+};
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback: string): string => fallback,
+  }),
+}));
+
+const rules: API.PromoRule[] = [
+  {
+    id: 1,
+    name: "Campaign Rule",
+    type: "campaign",
+    params: {},
+    priority: 1,
+    enabled: true,
+  },
+];
+
+const subscribes: API.SubscribeItem[] = [
+  {
+    id: 8,
+    name: "Monthly Plan",
+    unit_price: 1200,
+    unit_time: "Month",
+    sold: 0,
+    discount: [
+      {
+        quantity: 3,
+        discount: 90,
+      },
+    ],
+  },
+];
+const subscribesWithoutDiscounts: API.SubscribeItem[] = [
+  {
+    id: 8,
+    name: "Monthly Plan",
+    unit_price: 1200,
+    unit_time: "Month",
+    sold: 0,
+    discount: [],
+  },
+];
+
+async function selectCombobox(index: number, option: string) {
+  const combobox = screen.getAllByRole("combobox")[index];
+  if (!combobox) throw new Error(`Combobox ${index} not found`);
+  fireEvent.click(combobox);
+  fireEvent.click(await screen.findByText(option));
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("PriceForm", () => {
+  it("submits promo price with promo_rule_id and selected quantity item", async () => {
+    const onSubmit = vi.fn().mockResolvedValue(true);
+    render(
+      <PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(0, "Campaign Rule");
+    await selectCombobox(1, "Monthly Plan");
+    await selectCombobox(2, "3 x Month");
+    fireEvent.change(screen.getByPlaceholderText("Enter price"), {
+      target: { value: "20" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+    await waitFor(() =>
+      expect(onSubmit).toHaveBeenCalledWith({
+        promo_rule_id: 1,
+        items: [{ subscribe_id: 8, quantity: 3, promo_price: 2000 }],
+      })
+    );
+  });
+
+  it("blocks submit when subscribe has no discount quantities", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <PriceForm
+        onSubmit={onSubmit}
+        rules={rules}
+        subscribes={subscribesWithoutDiscounts}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(1, "Monthly Plan");
+
+    expect(
+      screen.getByText(
+        "This subscribe has no discount quantities and cannot be configured."
+      )
+    ).not.toBeNull();
+    expect(screen.getByRole("button", { name: "Confirm" })).toHaveProperty(
+      "disabled",
+      true
+    );
+  });
+
+  it("keeps the form open and shows an error when promo price reaches original price", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(0, "Campaign Rule");
+    await selectCombobox(1, "Monthly Plan");
+    await selectCombobox(2, "3 x Month");
+    fireEvent.change(screen.getByPlaceholderText("Enter price"), {
+      target: { value: "36" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+    expect(
+      await screen.findByText("Promo price must be lower than original price")
+    ).not.toBeNull();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});

apps/admin/src/sections/promo/price-form.tsx

@@ -23,11 +23,16 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
-import { getSubscribeUnitPrice } from "./utils";
+import {
+  formatCurrency,
+  getSubscribeDiscounts,
+  getSubscribeUnitPrice,
+} from "./utils";
 
 const priceSchema = z.object({
-  rule_id: z.number().min(1),
+  promo_rule_id: z.number().min(1),
   subscribe_id: z.number().min(1),
+  quantity: z.number().min(1),
   promo_price: z.number().min(1),
 });
 
@@ -51,26 +56,42 @@ export default function PriceForm({
   const form = useForm<PriceFormValues>({
     resolver: zodResolver(priceSchema),
     defaultValues: {
-      rule_id: 0,
+      promo_rule_id: 0,
       subscribe_id: 0,
+      quantity: 0,
       promo_price: 0,
     },
   });
   const subscribeId = form.watch("subscribe_id");
+  const quantity = form.watch("quantity");
   const subscribe = subscribes.find((item) => item.id === subscribeId);
+  const discounts = getSubscribeDiscounts(subscribe);
   const unitPrice = getSubscribeUnitPrice(subscribe);
+  const originalPrice = unitPrice * quantity;
+  const hasSelectedSubscribe = subscribeId > 0;
+  const hasDiscounts = discounts.length > 0;
 
   async function handleSubmit(values: PriceFormValues) {
-    if (unitPrice > 0 && values.promo_price >= unitPrice) {
+    const maxPrice = unitPrice * values.quantity;
+    if (maxPrice > 0 && values.promo_price >= maxPrice) {
       form.setError("promo_price", {
         message: t(
-          "form.promoPriceLessThanUnitPrice",
-          "Promo price must be lower than unit price"
+          "form.promoPriceLessThanOriginalPrice",
+          "Promo price must be lower than original price"
         ),
       });
       return;
     }
-    const success = await onSubmit(values);
+    const success = await onSubmit({
+      promo_rule_id: values.promo_rule_id,
+      items: [
+        {
+          subscribe_id: values.subscribe_id,
+          quantity: values.quantity,
+          promo_price: values.promo_price,
+        },
+      ],
+    });
     if (success) setOpen(false);
   }
 
@@ -79,7 +100,12 @@ export default function PriceForm({
       <SheetTrigger asChild>
         <Button
           onClick={() => {
-            form.reset({ rule_id: 0, subscribe_id: 0, promo_price: 0 });
+            form.reset({
+              promo_rule_id: 0,
+              subscribe_id: 0,
+              quantity: 0,
+              promo_price: 0,
+            });
             setOpen(true);
           }}
           size="sm"
@@ -99,7 +125,7 @@ export default function PriceForm({
           >
             <FormField
               control={form.control}
-              name="rule_id"
+              name="promo_rule_id"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>{t("rule", "Rule")}</FormLabel>
@@ -126,7 +152,14 @@ export default function PriceForm({
                   <FormLabel>{t("subscribe", "Subscribe")}</FormLabel>
                   <FormControl>
                     <Combobox<number>
-                      onChange={field.onChange}
+                      onChange={(value) => {
+                        field.onChange(value);
+                        form.setValue("quantity", 0, {
+                          shouldDirty: true,
+                          shouldValidate: true,
+                        });
+                        form.clearErrors(["quantity", "promo_price"]);
+                      }}
                       options={subscribes
                         .filter((item) => typeof item.id === "number")
                         .map((item) => ({
@@ -144,6 +177,41 @@ export default function PriceForm({
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="quantity"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("quantity", "Quantity")}</FormLabel>
+                  <FormControl>
+                    <Combobox<number>
+                      onChange={field.onChange}
+                      options={discounts.map((item) => ({
+                        label: `${item.quantity} x ${t(
+                          subscribe?.unit_time || "Month",
+                          subscribe?.unit_time || "Month"
+                        )}`,
+                        value: item.quantity,
+                      }))}
+                      placeholder={t(
+                        "form.selectQuantity",
+                        "Select discount quantity"
+                      )}
+                      value={field.value}
+                    />
+                  </FormControl>
+                  {hasSelectedSubscribe && !hasDiscounts && (
+                    <p className="text-destructive text-xs">
+                      {t(
+                        "form.noDiscounts",
+                        "This subscribe has no discount quantities and cannot be configured."
+                      )}
+                    </p>
+                  )}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name="promo_price"
@@ -165,10 +233,10 @@ export default function PriceForm({
                       value={field.value}
                     />
                   </FormControl>
-                  {unitPrice > 0 && (
+                  {originalPrice > 0 && (
                     <p className="text-muted-foreground text-xs">
-                      {t("unitPriceHint", "Unit price")}:{" "}
-                      {unitConversion("centsToDollars", unitPrice)}
+                      {t("originalPriceHint", "Original price")}:{" "}
+                      {formatCurrency(originalPrice)}
                     </p>
                   )}
                   <FormMessage />
@@ -178,7 +246,11 @@ export default function PriceForm({
           </form>
         </Form>
         <SheetFooter>
-          <Button disabled={loading} form="promo-price-form" type="submit">
+          <Button
+            disabled={loading || (hasSelectedSubscribe && !hasDiscounts)}
+            form="promo-price-form"
+            type="submit"
+          >
             {t("confirm", "Confirm")}
           </Button>
         </SheetFooter>

apps/admin/src/sections/promo/utils.ts

@@ -20,3 +20,9 @@ export function parseOptionalNumber(value?: string) {
 export function getSubscribeUnitPrice(subscribe?: API.SubscribeItem) {
   return typeof subscribe?.unit_price === "number" ? subscribe.unit_price : 0;
 }
+
+export function getSubscribeDiscounts(subscribe?: API.SubscribeItem) {
+  return (subscribe?.discount || []).filter(
+    (item) => typeof item.quantity === "number" && item.quantity > 0
+  );
+}

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

@@ -33,5 +33,64 @@
     "pending": "Pending Review",
     "rejected": "Rejected"
   },
-  "withdrawSuccess": "Withdrawal request submitted"
+  "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"
+    }
+  }
 }

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

@@ -9,6 +9,7 @@
     "originalPrice": "Original Price (Monthly)",
     "price": "Price",
     "productDiscount": "Product Discount",
+    "promoDiscount": "Promo Discount",
     "total": "Total"
   },
   "buy": "Buy",
@@ -37,6 +38,10 @@
   "passwordHint": "If you do not enter a password, we will automatically generate one and send it to your email.",
   "paymentMethod": "Payment Method",
   "productDescription": "productDescription",
+  "promo": {
+    "available": "Promo Available",
+    "validUntil": "Valid until"
+  },
   "purchaseDuration": "Purchase Duration",
   "recharge": "Recharge",
   "rechargeAmount": "Recharge Amount",

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

@@ -33,5 +33,64 @@
     "pending": "审核中",
     "rejected": "已拒绝"
   },
-  "withdrawSuccess": "提现申请已提交"
+  "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": "提现金额不能超过可提现佣金"
+    }
+  }
 }

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

@@ -9,6 +9,7 @@
     "originalPrice": "原价（按月）",
     "price": "价格",
     "productDiscount": "商品折扣",
+    "promoDiscount": "促销优惠",
     "total": "总价"
   },
   "buy": "购买",
@@ -37,6 +38,10 @@
   "passwordHint": "如果您不输入密码，我们将自动生成一个并发送到您的邮箱。",
   "paymentMethod": "支付方式",
   "productDescription": "商品描述",
+  "promo": {
+    "available": "促销可用",
+    "validUntil": "有效期至"
+  },
   "purchaseDuration": "购买时长",
   "recharge": "充值",
   "rechargeAmount": "充值金额",

apps/user/src/sections/purchasing/content.tsx

@@ -17,6 +17,7 @@ import CouponInput from "@/sections/subscribe/coupon-input";
 import { SubscribeDetail } from "@/sections/subscribe/detail";
 import DurationSelector from "@/sections/subscribe/duration-selector";
 import PaymentMethods from "@/sections/subscribe/payment-methods";
+import { PromoInfo } from "@/sections/subscribe/promo-info";
 import { useGlobalStore } from "@/stores/global";
 
 export default function Content({
@@ -49,6 +50,9 @@ export default function Content({
     valid: false,
     message: "",
   });
+  const selectedDiscount = subscription?.discount?.find(
+    (item) => item.quantity === params.quantity
+  );
 
   const { data: order } = useQuery({
     enabled: !!subscription?.id && !!params.payment,
@@ -103,7 +107,10 @@ export default function Content({
           navigate({ to: "/purchasing/order", search: { order_no } });
         }
       } catch (error) {
-        console.log(error);
+        setIsEmailValid((prev) => ({
+          ...prev,
+          message: error instanceof Error ? error.message : prev.message,
+        }));
       }
     });
   }, [params, navigate]);
@@ -285,6 +292,7 @@ export default function Content({
                 show_original_price: subscription?.show_original_price,
               }}
             />
+            <PromoInfo discount={selectedDiscount} />
           </CardContent>
         </Card>
       </div>

apps/user/src/sections/subscribe/billing.tsx

@@ -10,6 +10,7 @@ interface SubscribeBillingProps {
       unit_price: number;
       unit_time: string;
       subscribe_discount: number;
+      promo_discount: number;
       show_original_price?: boolean;
     }
   >;
@@ -66,6 +67,14 @@ export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
             <Display type="currency" value={order?.discount} />
           </span>
         </li>
+        <li>
+          <span className="text-muted-foreground">
+            {t("billing.promoDiscount", "Promo Discount")}
+          </span>
+          <span>
+            <Display type="currency" value={order?.promo_discount} />
+          </span>
+        </li>
         <li>
           <span className="text-muted-foreground">
             {t("billing.couponDiscount", "Coupon Discount")}

apps/user/src/sections/subscribe/promo-info.tsx

@@ -0,0 +1,33 @@
+import { Badge } from "@workspace/ui/components/badge";
+import { useTranslation } from "react-i18next";
+import { Display } from "@/components/display";
+
+interface PromoInfoProps {
+  discount?: API.SubscribeDiscount;
+}
+
+export function PromoInfo({ discount }: Readonly<PromoInfoProps>) {
+  const { t } = useTranslation("subscribe");
+  const promo = discount?.promo;
+
+  if (!promo) return null;
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 p-3 text-sm">
+      <div className="grid gap-1">
+        <span className="font-medium">
+          {promo.rule_name || t("promo.available", "Promo Available")}
+        </span>
+        {promo.expires_at && (
+          <span className="text-muted-foreground text-xs">
+            {t("promo.validUntil", "Valid until")}:{" "}
+            {new Date(promo.expires_at * 1000).toLocaleString()}
+          </span>
+        )}
+      </div>
+      <Badge variant="secondary">
+        <Display type="currency" value={promo.promo_price} />
+      </Badge>
+    </div>
+  );
+}

apps/user/src/sections/subscribe/purchase.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from "react-i18next";
 import CouponInput from "@/sections/subscribe/coupon-input";
 import DurationSelector from "@/sections/subscribe/duration-selector";
 import PaymentMethods from "@/sections/subscribe/payment-methods";
+import { PromoInfo } from "@/sections/subscribe/promo-info";
 import { useGlobalStore } from "@/stores/global";
 import { SubscribeBilling } from "./billing";
 import { SubscribeDetail } from "./detail";
@@ -41,7 +42,12 @@ export default function Purchase({
     coupon: "",
   });
   const [loading, startTransition] = useTransition();
-  const lastSuccessOrderRef = useRef<any>(null);
+  const lastSuccessOrderRef = useRef<API.PreOrderResponse | undefined>(
+    undefined
+  );
+  const selectedDiscount = subscribe?.discount?.find(
+    (item) => item.quantity === params.quantity
+  );
 
   const { data: order } = useQuery({
     enabled: !!subscribe?.id,
@@ -140,6 +146,7 @@ export default function Purchase({
                   show_original_price: subscribe?.show_original_price,
                 }}
               />
+              <PromoInfo discount={selectedDiscount} />
             </CardContent>
           </Card>
           <div className="flex flex-col justify-between text-sm">

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

@@ -36,7 +36,6 @@ 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";
@@ -44,7 +43,6 @@ import {
   commissionWithdraw,
   queryUserAffiliate,
   queryUserAffiliateList,
-  queryWithdrawalLog,
   uploadFile,
   withdrawalCancel,
 } from "@workspace/ui/services/user/user";
@@ -59,6 +57,7 @@ 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: "支付宝" },
@@ -67,38 +66,6 @@ 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 (
@@ -111,13 +78,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={320}
+              src={url}
+              width={320}
+            />
           </DialogContent>
         </Dialog>
       )}
@@ -157,14 +132,12 @@ const withdrawalFormSchema = z
           path: ["account"],
         });
       }
-    } else if (data.method === 0) {
-      if (!data.account && !data.content) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: "收款账号和备注至少填一项",
-          path: ["account"],
-        });
-      }
+    } else if (data.method === 0 && !(data.account || data.content)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "收款账号和备注至少填一项",
+        path: ["account"],
+      });
     }
   });
 
@@ -421,9 +394,7 @@ 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">
@@ -446,7 +417,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 +492,7 @@ export default function Affiliate() {
                     </Button>
                     <Button
                       disabled={
-                        submitting ||
-                        qrUploading ||
-                        availableCommission <= 0
+                        submitting || qrUploading || availableCommission <= 0
                       }
                       form="withdrawal-form"
                       type="submit"
@@ -564,106 +535,10 @@ export default function Affiliate() {
           </div>
         </CardContent>
       </Card>
-      <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,
-          };
-        }}
+      <WithdrawalRecords
+        cancelMutation={cancelMutation}
+        t={t}
+        withdrawalListActionRef={withdrawalListActionRef}
       />
       <ProList<API.UserAffiliate, Record<string, unknown>>
         header={{

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

@@ -0,0 +1,254 @@
+/**
+ * @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

@@ -0,0 +1,410 @@
+"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,6 +14,7 @@ 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,
@@ -21,7 +22,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 { ListRestart, Loader, RefreshCcw } from "lucide-react";
+import { AlertCircleIcon, ListRestart, RefreshCcw } from "lucide-react";
 import type React from "react";
 import { useEffect, useImperativeHandle, useState } from "react";
 
@@ -47,6 +48,7 @@ export interface ProListProps<TData, TValue> {
     selectedRowsText: (total: number) => string;
   }>;
   empty?: React.ReactNode;
+  error?: (retry: () => void) => React.ReactNode;
 }
 export interface ProListActions {
   refresh: () => void;
@@ -62,6 +64,7 @@ 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 }>(
@@ -74,6 +77,7 @@ 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,
@@ -96,6 +100,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
 
   const fetchData = async () => {
     setLoading(true);
+    setRequestError(false);
     try {
       const response = await request(
         {
@@ -108,8 +113,10 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
       );
       setData(response.list);
       setRowCount(response.total);
-    } catch (error) {
-      console.log("Fetch data error:", error);
+    } catch {
+      setData([]);
+      setRowCount(0);
+      setRequestError(true);
     } finally {
       setLoading(false);
     }
@@ -196,7 +203,22 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
         })}
       >
         <div className="grid grid-cols-1 gap-4">
-          {data.length ? (
+          {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.map((item, index) => {
               const isSelected = !!rowSelection[index];
 
@@ -221,7 +243,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">
-            <Loader className="h-4 w-4 animate-spin" />
+            <Spinner aria-label="Loading data" className="h-4 w-4" />
           </div>
         )}
       </div>

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

@@ -307,27 +307,34 @@ declare namespace API {
 
   type PromoPrice = {
     id: number;
-    rule_id: number;
+    promo_rule_id: number;
     subscribe_id: number;
     subscribe_name?: string;
+    quantity: number;
     unit_price: number;
     promo_price: number;
     created_at?: number;
     updated_at?: number;
   };
 
-  type CreatePromoPriceRequest = {
-    rule_id: number;
+  type CreatePromoPriceItem = {
     subscribe_id: number;
+    quantity: number;
     promo_price: number;
   };
 
+  type CreatePromoPriceRequest = {
+    promo_rule_id: number;
+    items: CreatePromoPriceItem[];
+  };
+
   type PromoUsage = {
     id: number;
-    rule_id: number;
+    promo_rule_id: number;
     rule_name?: string;
     subscribe_id: number;
     subscribe_name?: string;
+    quantity: number;
     user_id: number;
     order_no: string;
     unit_price: number;
@@ -1020,7 +1027,7 @@ declare namespace API {
   type GetPromoPriceListParams = {
     page: number;
     size: number;
-    rule_id?: number;
+    promo_rule_id?: number;
     subscribe_id?: number;
   };
 
@@ -1036,7 +1043,7 @@ declare namespace API {
   type GetPromoUsageListParams = {
     page: number;
     size: number;
-    rule_id?: number;
+    promo_rule_id?: number;
     subscribe_id?: number;
     user_id?: number;
     order_no?: string;
@@ -2219,6 +2226,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {

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

@@ -910,6 +910,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {

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

@@ -170,6 +170,16 @@ 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;
@@ -548,6 +558,7 @@ declare namespace API {
     price: number;
     amount: number;
     discount: number;
+    promo_discount: number;
     gift_amount: number;
     coupon: string;
     coupon_discount: number;
@@ -815,11 +826,26 @@ 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;
@@ -1019,6 +1045,14 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    rule_type?: string;
+    promo_price: number;
+    expires_at?: number;
   };
 
   type SubscribeGroup = {

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

@@ -1,4 +1,3 @@
-// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 
@@ -144,6 +143,26 @@ 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,