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

修复(#134 ): 促销前端展示对齐 (expires_at / billing 补 promo_discount / 类型补字段)
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 中英文文案。
2026-06-11 20:35:06 -07:00 · 2026-06-02 20:27:54 -07:00 · 2026-05-29 04:15:40 -07:00 · 2026-05-29 00:34:37 -07:00
24 changed files with 1047 additions and 678 deletions
@@ -29,6 +29,5 @@
  "users": "Users",
  "userTitle": "User Statistics",
  "userTraffic": "User Traffic",
-  "withdrawalManagement": "Withdrawal Management",
  "yesterday": "Yesterday"
 }
@@ -100,12 +100,10 @@
  "manager": "Administrator",
  "memberCount": "Member Count",
  "more": "More",
-  "neverLoggedIn": "Never logged in",
  "normal": "Normal",
  "next": "Next",
  "noInvitedUsers": "No invited users yet",
  "notifySettingsTitle": "Notify Settings",
-  "inactive": "Inactive",
  "offline": "Offline",
  "online": "Online",
  "onlineDevices": "Online Devices",
@@ -191,7 +189,6 @@
  "groupUpdated": "Group updated successfully",
  "upload": "Upload",
  "uploadTraffic": "Upload Traffic",
-  "userStatus": "User Status",
  "userAgent": "User Agent",
  "userEmail": "Email",
  "userEmailPlaceholder": "Enter email",
@@ -201,7 +198,6 @@
  "userName": "Username",
  "userProfile": "User Profile",
  "userGroup": "User Group",
-  "active": "Active",
  "verified": "Verified",
  "viewDeviceGroup": "View Device Group",
  "viewOwner": "View Owner",
@@ -29,6 +29,5 @@
  "users": "用户",
  "userTitle": "用户统计",
  "userTraffic": "用户流量",
-  "withdrawalManagement": "提现管理",
  "yesterday": "昨日"
 }
@@ -101,12 +101,10 @@
  "manager": "管理员",
  "memberCount": "成员数量",
  "more": "更多",
-  "neverLoggedIn": "从未登录",
  "normal": "正常",
  "next": "下一页",
  "noInvitedUsers": "暂无邀请用户",
  "notifySettingsTitle": "通知设置",
-  "inactive": "未活跃",
  "offline": "离线",
  "online": "在线",
  "onlineDevices": "在线设备",
@@ -192,7 +190,6 @@
  "groupUpdated": "分组更新成功",
  "upload": "上传",
  "uploadTraffic": "上传流量",
-  "userStatus": "用户状态",
  "userAgent": "用户代理",
  "userEmail": "邮箱",
  "userEmailPlaceholder": "输入邮箱",
@@ -202,7 +199,6 @@
  "userName": "用户名",
  "userProfile": "用户资料",
  "userGroup": "用户分组",
-  "active": "活跃",
  "verified": "已验证",
  "viewDeviceGroup": "查看设备组",
  "viewOwner": "查看所有者",
@@ -241,11 +241,11 @@ export default function Statistics() {
            iconBg: "bg-green-100 dark:bg-green-900/30",
          },
          {
-            title: t("withdrawalManagement", "提现管理"),
+            title: t("pendingTickets", "Pending Tickets"),
            value: TicketTotal || 0,
            subtitle: t("pending", "Pending"),
            icon: "uil:clipboard-notes",
-            href: "/dashboard/withdrawal",
+            href: "/dashboard/ticket",
            color: "text-red-600 dark:text-red-400",
            iconBg: "bg-red-100 dark:bg-red-900/30",
          },
@@ -1,25 +1,34 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link, useSearch } from "@tanstack/react-router";
+import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
+  DialogTrigger,
 } from "@workspace/ui/components/dialog";
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
-  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from "@workspace/ui/components/dropdown-menu";
+import { Input } from "@workspace/ui/components/input";
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
 } from "@workspace/ui/components/popover";
 import { ScrollArea } from "@workspace/ui/components/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select";
 import {
  Sheet,
  SheetContent,
@@ -34,12 +43,7 @@ import {
  TabsList,
  TabsTrigger,
 } from "@workspace/ui/components/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@workspace/ui/components/tooltip";
+import { Combobox } from "@workspace/ui/composed/combobox";
 // import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
 import {
  ProTable,
@@ -56,8 +60,9 @@ import {
  getUserList,
  updateUserBasicInfo,
 } from "@workspace/ui/services/admin/user";
+import { parseDeviceType } from "@workspace/ui/utils/device";
 import { FilePenLine } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { Display } from "@/components/display";
@@ -68,16 +73,18 @@ import { RemarkForm } from "./remark-form";
 import { buildUserBasicInfoPayload } from "./user-basic-info-payload";
 import { UserDetail } from "./user-detail";
 import UserForm from "./user-form";
-import { UserIdentifier } from "./user-identifier";
 import { UserInviteStatsSheet } from "./user-invite-stats-sheet";
 import { AuthMethodsForm } from "./user-profile/auth-methods-form";
 import { BasicInfoForm } from "./user-profile/basic-info-form";
 import { NotifySettingsForm } from "./user-profile/notify-settings-form";
-import { UserSearchBar } from "./user-search-bar";
 import UserSubscription from "./user-subscription";

 // import EditUserGroupDialog from "./edit-user-group-dialog";

+type UserDeviceWithDeviceNo = API.UserDevice & {
+  device_no?: string;
+};
+
 export default function User() {
  const { t } = useTranslation("user");
  const [loading, setLoading] = useState(false);
@@ -91,14 +98,6 @@ export default function User() {
    value: sp.search || sp.user_id || "",
  });

-  useEffect(() => {
-    searchRef.current = {
-      type: sp.user_id ? "user_id" : "email",
-      value: sp.search || sp.user_id || "",
-    };
-    ref.current?.refresh();
-  }, [sp.search, sp.user_id]);
-
  const handleSearch = useCallback((type: string, value: string) => {
    searchRef.current = { type, value };
    ref.current?.refresh();
@@ -152,6 +151,7 @@ export default function User() {
            onChanged={() => ref.current?.refresh()}
            userId={row.id}
          />,
+          <PreviewNodesDialog key="preview-nodes" userId={row.id} />,
          /* <ConfirmButton
            cancelText={t("cancel", "Cancel")}
            confirmText={t("confirm", "Confirm")}
@@ -176,8 +176,6 @@ export default function User() {
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <InviteStatsMenuItem userId={row.id} />
-              <PreviewNodesMenuItem userId={row.id} />
-              <DropdownMenuSeparator />
              <DropdownMenuItem asChild>
                <Link search={{ user_id: row.id }} to="/dashboard/order">
                  {t("orderList", "Order List")}
@@ -264,43 +262,62 @@ export default function User() {
          id: "auth_methods",
          accessorKey: "auth_methods",
          header: "设备码/邮箱",
-          cell: ({ row }) => (
-            <div className="flex items-center">
-              <UserIdentifier
-                className="flex items-center"
-                user={row.original}
-              />
-              <Popover>
-                <PopoverTrigger>
-                  <div className={"flex items-center"}>
-                    {row.original?.remark ? `（${row.original.remark}）` : ""}
-                    <FilePenLine className={"ml-2 text-primary"} size={14} />
-                  </div>
-                </PopoverTrigger>
-                <PopoverContent className={"w-64"}>
-                  <RemarkForm
-                    initialRemark={row.original.remark}
-                    onSave={async (remark) => {
-                      const { data } = await getUserDetail({
-                        id: row.original.id,
-                      });
-                      const user = data.data;
+          cell: ({ row }) => {
+            const method = row.original.auth_methods?.[0];
+            const identifier = method?.auth_identifier || "";
+            const isDevice = method?.auth_type === "device";
+            const firstDevice = row.original.user_devices?.[0] as
+              | UserDeviceWithDeviceNo
+              | undefined;
+            const deviceNo = firstDevice?.device_no;
+            const deviceType = parseDeviceType(firstDevice?.user_agent || "");
+            const display = isDevice ? deviceNo || identifier : identifier;
+            return (
+              <div className="flex items-center">
+                {/* <Badge
+                  className="mr-1 uppercase"
+                  title={method?.verified ? t("verified", "Verified") : ""}
+                >
+                  {method?.auth_type}
+                </Badge>*/}
+                {deviceType && (
+                  <Badge className="mr-1" variant="secondary">
+                    {deviceType}
+                  </Badge>
+                )}
+                <span title={isDevice ? display : undefined}>{display}</span>
+                <Popover>
+                  <PopoverTrigger>
+                    <div className={"flex items-center"}>
+                      {row.original?.remark ? `（${row.original.remark}）` : ""}
+                      <FilePenLine className={"ml-2 text-primary"} size={14} />
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent className={"w-64"}>
+                    <RemarkForm
+                      initialRemark={row.original.remark}
+                      onSave={async (remark) => {
+                        const { data } = await getUserDetail({
+                          id: row.original.id,
+                        });
+                        const user = data.data;

-                      if (!user) {
-                        throw new Error("User detail not found");
-                      }
+                        if (!user) {
+                          throw new Error("User detail not found");
+                        }

-                      await updateUserBasicInfo(
-                        buildUserBasicInfoPayload(user, remark)
-                      );
-                      toast.success(t("updateSuccess"));
-                      ref.current?.refresh();
-                    }}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          ),
+                        await updateUserBasicInfo(
+                          buildUserBasicInfoPayload(user, remark)
+                        );
+                        toast.success(t("updateSuccess"));
+                        ref.current?.refresh();
+                      }}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            );
+          },
        },
        /* {
          id: "balance",
@@ -338,48 +355,6 @@ export default function User() {
          header: t("referer", "Referer"),
          cell: ({ row }) => <UserDetail id={row.original.referer_id} />,
        },
-        {
-          id: "last_login_time",
-          accessorKey: "last_login_time",
-          header: t("userStatus", "用户状态"),
-          cell: ({ row }) => {
-            const lastLoginTime = (
-              row.original as API.User & {
-                last_login_time?: number;
-              }
-            ).last_login_time;
-            const isOnline = Boolean(lastLoginTime);
-            const dotClassName = isOnline ? "bg-green-500" : "bg-gray-400";
-            const statusLabel = isOnline
-              ? t("active", "Active")
-              : t("inactive", "Inactive");
-
-            return (
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="inline-flex items-center gap-2">
-                      <span
-                        aria-hidden="true"
-                        className={`h-2.5 w-2.5 rounded-full ${dotClassName}`}
-                      />
-                      <span className="sr-only">
-                        {isOnline
-                          ? `${statusLabel}: ${formatDate(lastLoginTime)}`
-                          : statusLabel}
-                      </span>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {isOnline
-                      ? formatDate(lastLoginTime)
-                      : t("neverLoggedIn", "Never logged in")}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            );
-          },
-        },
        {
          id: "created_at",
          accessorKey: "created_at",
@@ -548,25 +523,6 @@ function InviteStatsMenuItem({ userId }: { userId: number }) {
  );
 }

-function PreviewNodesMenuItem({ userId }: { userId: number }) {
-  const { t } = useTranslation("user");
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <DropdownMenuItem
-        onSelect={(e) => {
-          e.preventDefault();
-          setOpen(true);
-        }}
-      >
-        {t("previewNodes", "Preview Nodes")}
-      </DropdownMenuItem>
-      <PreviewNodesDialog onOpenChange={setOpen} open={open} userId={userId} />
-    </>
-  );
-}
-
 function DeviceGroupSheet({
  userId,
  onChanged,
@@ -595,16 +551,92 @@ function DeviceGroupSheet({
  );
 }

-function PreviewNodesDialog({
-  userId,
-  open,
-  onOpenChange,
+function UserSearchBar({
+  initialType,
+  initialValue,
+  onSearch,
+  subscribes,
 }: {
-  userId: number;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
+  initialType: string;
+  initialValue: string;
+  onSearch: (type: string, value: string) => void;
+  subscribes?: API.SubscribeItem[];
 }) {
  const { t } = useTranslation("user");
+  const [searchType, setSearchType] = useState(initialType);
+  const [searchValue, setSearchValue] = useState(initialValue);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select
+        onValueChange={(v) => {
+          setSearchType(v);
+          setSearchValue("");
+        }}
+        value={searchType}
+      >
+        <SelectTrigger className="w-48">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="email">设备码/邮箱</SelectItem>
+          <SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
+          <SelectItem value="subscribe_id">
+            {t("subscription", "Subscription")}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      {searchType === "subscribe_id" ? (
+        <Combobox
+          className="w-48"
+          onChange={(value) => {
+            setSearchValue(value);
+            onSearch("subscribe_id", value);
+          }}
+          options={subscribes?.map((item) => ({
+            label: item.name!,
+            value: String(item.id!),
+          }))}
+          placeholder={t("subscription", "Subscription")}
+          value={searchValue}
+        />
+      ) : (
+        <>
+          <Input
+            className="w-48"
+            onChange={(e) => setSearchValue(e.target.value)}
+            onKeyDown={(e) =>
+              e.key === "Enter" && onSearch(searchType, searchValue)
+            }
+            placeholder={t("searchInputPlaceholder", "Enter search term")}
+            value={searchValue}
+          />
+          <Button
+            onClick={() => onSearch(searchType, searchValue)}
+            variant="default"
+          >
+            {t("search", "Search")}
+          </Button>
+          {searchValue && (
+            <Button
+              onClick={() => {
+                setSearchValue("");
+                onSearch(searchType, "");
+              }}
+              variant="outline"
+            >
+              {t("resetSearch", "Reset")}
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function PreviewNodesDialog({ userId }: { userId: number }) {
+  const { t } = useTranslation("user");
+  const [open, setOpen] = useState(false);
  const { data: previewData, isLoading } = useQuery({
    enabled: open,
    queryKey: ["previewUserNodes", userId],
@@ -615,7 +647,10 @@ function PreviewNodesDialog({
  });

  return (
-    <Dialog onOpenChange={onOpenChange} open={open}>
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger asChild>
+        <Button variant="outline">{t("previewNodes", "Preview Nodes")}</Button>
+      </DialogTrigger>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>
@@ -16,7 +16,6 @@ import { formatBytes } from "@workspace/ui/utils/formatting";
 import { useTranslation } from "react-i18next";
 import { Display } from "@/components/display";
 import { formatDate } from "@/utils/common";
-import { UserIdentifier } from "./user-identifier";
 // import EditUserGroupDialog from "./edit-user-group-dialog";
 // import { getUserGroupList } from "@workspace/ui/services/admin/group";

@@ -230,13 +229,26 @@ export function UserDetail({ id }: { id: number }) {

  if (!id) return "--";

+  const firstMethod = data?.auth_methods[0];
+  const isDevice = firstMethod?.auth_type === "device";
+  const deviceNo = (data as any)?.user_devices?.[0]?.device_no;
+  const rawIdentifier = firstMethod?.auth_identifier || "";
+  const identifier = isDevice ? deviceNo || rawIdentifier : rawIdentifier;
+
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button asChild className="p-0" variant="link">
          <Link search={{ user_id: id }} to="/dashboard/user">
            {data ? (
-              <UserIdentifier className="flex items-center" user={data} />
+              <>
+                {firstMethod && (
+                  <span className="mr-1 inline-flex items-center rounded border px-1 py-0.5 font-mono text-xs uppercase">
+                    {firstMethod.auth_type}
+                  </span>
+                )}
+                {identifier}
+              </>
            ) : (
              t("loading", "Loading...")
            )}
@@ -1,101 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
-import { getUserIdentifierParts, UserIdentifier } from "./user-identifier";
-
-afterEach(() => {
-  cleanup();
-});
-
-type DeviceWithOptionalNo = API.UserDevice & { device_no?: string };
-
-describe("getUserIdentifierParts", () => {
-  it("uses the device number and D label for device-auth users", () => {
-    expect(
-      getUserIdentifierParts({
-        auth_methods: [
-          {
-            auth_type: "device",
-            auth_identifier: "raw-device-id",
-            verified: true,
-          },
-        ],
-        user_devices: [
-          {
-            id: 1,
-            ip: "127.0.0.1",
-            identifier: "device-id",
-            user_agent:
-              "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)",
-            online: true,
-            enabled: true,
-            created_at: 0,
-            updated_at: 0,
-            device_no: "DVC-001",
-          } satisfies DeviceWithOptionalNo,
-        ],
-      })
-    ).toMatchObject({
-      authLabel: "(D)",
-      identifier: "DVC-001",
-      isDevice: true,
-    });
-  });
-
-  it("falls back to the raw identifier and E label for email-auth users", () => {
-    expect(
-      getUserIdentifierParts({
-        auth_methods: [
-          {
-            auth_type: "email",
-            auth_identifier: "user@example.com",
-            verified: true,
-          },
-        ],
-        user_devices: [],
-      })
-    ).toMatchObject({
-      authLabel: "(E)",
-      identifier: "user@example.com",
-      isDevice: false,
-    });
-  });
-});
-
-describe("UserIdentifier", () => {
-  it("renders the compact auth label and visible identifier", () => {
-    render(
-      <UserIdentifier
-        user={{
-          auth_methods: [
-            {
-              auth_type: "email",
-              auth_identifier: "referrer@example.com",
-              verified: true,
-            },
-          ],
-          user_devices: [],
-        }}
-      />
-    );
-
-    expect(screen.getByText("(E)")).not.toBeNull();
-    expect(screen.getByText("referrer@example.com")).not.toBeNull();
-  });
-
-  it("renders an empty fallback when no identifier is available", () => {
-    render(
-      <UserIdentifier
-        user={{
-          auth_methods: [],
-          user_devices: [],
-        }}
-      />
-    );
-
-    expect(screen.getByText("(E)")).not.toBeNull();
-    expect(screen.getByText("--")).not.toBeNull();
-  });
-});
@@ -1,66 +0,0 @@
-"use client";
-
-import { Badge } from "@workspace/ui/components/badge";
-import { parseDeviceType } from "@workspace/ui/utils/device";
-
-type UserDeviceWithDeviceNo = API.UserDevice & {
-  device_no?: string;
-};
-
-type UserIdentifierUser = {
-  auth_methods?: API.UserAuthMethod[];
-  user_devices?: UserDeviceWithDeviceNo[];
-};
-
-type UserIdentifierParts = {
-  authLabel: "(D)" | "(E)";
-  deviceBadge?: string;
-  identifier: string;
-  isDevice: boolean;
-};
-
-export function getUserIdentifierParts(
-  user?: UserIdentifierUser
-): UserIdentifierParts {
-  const method = user?.auth_methods?.[0];
-  const firstDevice = user?.user_devices?.[0] as
-    | UserDeviceWithDeviceNo
-    | undefined;
-  const isDevice = method?.auth_type === "device";
-  const rawIdentifier = method?.auth_identifier || "";
-  const identifier = isDevice
-    ? firstDevice?.device_no || rawIdentifier
-    : rawIdentifier;
-
-  return {
-    authLabel: isDevice ? "(D)" : "(E)",
-    deviceBadge: parseDeviceType(firstDevice?.user_agent || ""),
-    identifier,
-    isDevice,
-  };
-}
-
-export function UserIdentifier({
-  className,
-  user,
-}: {
-  className?: string;
-  user?: UserIdentifierUser;
-}) {
-  const { authLabel, deviceBadge, identifier, isDevice } =
-    getUserIdentifierParts(user);
-
-  return (
-    <div className={className}>
-      {deviceBadge ? (
-        <Badge className="mr-1" variant="secondary">
-          {deviceBadge}
-        </Badge>
-      ) : null}
-      <span className="mr-1 font-mono text-xs uppercase">{authLabel}</span>
-      <span title={isDevice ? identifier : undefined}>
-        {identifier || "--"}
-      </span>
-    </div>
-  );
-}
@@ -1,92 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { UserSearchBar } from "./user-search-bar";
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({
-    t: (_key: string, fallback: string): string => fallback,
-  }),
-}));
-
-afterEach(() => {
-  cleanup();
-});
-
-describe("UserSearchBar", () => {
-  it("keeps the controls usable on a narrow mobile viewport", () => {
-    Object.defineProperty(window, "innerWidth", {
-      configurable: true,
-      value: 390,
-    });
-
-    render(
-      <UserSearchBar
-        initialType="email"
-        initialValue=""
-        onSearch={vi.fn()}
-        subscribes={[]}
-      />
-    );
-
-    expect(screen.getByRole("combobox")).not.toBeNull();
-    expect(screen.getByRole("button", { name: "Search" })).not.toBeNull();
-  });
-
-  it("keeps the typed happy-path value and triggers search", () => {
-    const onSearch = vi.fn();
-
-    render(
-      <UserSearchBar
-        initialType="email"
-        initialValue=""
-        onSearch={onSearch}
-        subscribes={[]}
-      />
-    );
-
-    fireEvent.change(screen.getByPlaceholderText("Enter search term"), {
-      target: { value: "user@example.com" },
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Search" }));
-
-    expect(onSearch).toHaveBeenCalledWith("email", "user@example.com");
-    expect(
-      (screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
-        .value
-    ).toBe("user@example.com");
-  });
-
-  it("syncs to external search changes for precise referrer navigation", () => {
-    const onSearch = vi.fn();
-    const { rerender } = render(
-      <UserSearchBar
-        initialType="email"
-        initialValue="old@example.com"
-        onSearch={onSearch}
-        subscribes={[]}
-      />
-    );
-
-    expect(
-      (screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
-        .value
-    ).toBe("old@example.com");
-
-    rerender(
-      <UserSearchBar
-        initialType="user_id"
-        initialValue="1024"
-        onSearch={onSearch}
-        subscribes={[]}
-      />
-    );
-
-    expect(
-      (screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
-        .value
-    ).toBe("1024");
-  });
-});
@@ -1,102 +0,0 @@
-"use client";
-
-import { Button } from "@workspace/ui/components/button";
-import { Input } from "@workspace/ui/components/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@workspace/ui/components/select";
-import { Combobox } from "@workspace/ui/composed/combobox";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export function UserSearchBar({
-  initialType,
-  initialValue,
-  onSearch,
-  subscribes,
-}: {
-  initialType: string;
-  initialValue: string;
-  onSearch: (type: string, value: string) => void;
-  subscribes?: API.SubscribeItem[];
-}) {
-  const { t } = useTranslation("user");
-  const [searchType, setSearchType] = useState(initialType);
-  const [searchValue, setSearchValue] = useState(initialValue);
-
-  useEffect(() => {
-    setSearchType(initialType);
-    setSearchValue(initialValue);
-  }, [initialType, initialValue]);
-
-  return (
-    <div className="flex items-center gap-2">
-      <Select
-        onValueChange={(v) => {
-          setSearchType(v);
-          setSearchValue("");
-        }}
-        value={searchType}
-      >
-        <SelectTrigger className="w-48">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="email">设备码/邮箱</SelectItem>
-          <SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
-          <SelectItem value="subscribe_id">
-            {t("subscription", "Subscription")}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-      {searchType === "subscribe_id" ? (
-        <Combobox
-          className="w-48"
-          onChange={(value) => {
-            setSearchValue(value);
-            onSearch("subscribe_id", value);
-          }}
-          options={subscribes?.map((item) => ({
-            label: item.name!,
-            value: String(item.id!),
-          }))}
-          placeholder={t("subscription", "Subscription")}
-          value={searchValue}
-        />
-      ) : (
-        <>
-          <Input
-            className="w-48"
-            onChange={(e) => setSearchValue(e.target.value)}
-            onKeyDown={(e) =>
-              e.key === "Enter" && onSearch(searchType, searchValue)
-            }
-            placeholder={t("searchInputPlaceholder", "Enter search term")}
-            value={searchValue}
-          />
-          <Button
-            onClick={() => onSearch(searchType, searchValue)}
-            variant="default"
-          >
-            {t("search", "Search")}
-          </Button>
-          {searchValue && (
-            <Button
-              onClick={() => {
-                setSearchValue("");
-                onSearch(searchType, "");
-              }}
-              variant="outline"
-            >
-              {t("resetSearch", "Reset")}
-            </Button>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
@@ -54,10 +54,6 @@ function toUserSubscribePayload(values: SubscriptionFormValues) {
  };
 }

-function resolvePlanSpeed(row: API.UserSubscribe) {
-  return row.plan_speed_limit ?? row.subscribe?.speed_limit ?? 0;
-}
-
 export default function UserSubscription({ userId }: { userId: number }) {
  const { t } = useTranslation("user");
  const [loading, setLoading] = useState(false);
@@ -319,11 +315,10 @@ export default function UserSubscription({ userId }: { userId: number }) {
            cell: ({ row }) => {
              const userSpeed = row.original.speed_limit ?? 0;
              const effectiveSpeed = row.original.effective_speed ?? 0;
-              const planSpeed = resolvePlanSpeed(row.original);
+              const planSpeed = row.original.subscribe?.speed_limit ?? 0;
              const speed = effectiveSpeed || userSpeed || planSpeed;
-              const source = row.original.is_throttled
-                ? t("effectiveSpeed", "Effective Speed")
-                : userSpeed > 0
+              const source =
+                userSpeed > 0
                  ? t("userOverride", "User Override")
                  : t("subscriptionDefault", "Subscription Default");

@@ -340,16 +335,6 @@ export default function UserSubscription({ userId }: { userId: number }) {
                  <span className="text-muted-foreground text-xs">
                    {source}
                  </span>
-                  <span className="text-muted-foreground text-xs">
-                    {t("userOverride", "User Override")}:{" "}
-                    <span className="inline-block">
-                      <Display type="trafficSpeed" value={userSpeed} />
-                    </span>{" "}
-                    / {t("subscriptionDefault", "Subscription Default")}:{" "}
-                    <span className="inline-block">
-                      <Display type="trafficSpeed" value={planSpeed} />
-                    </span>
-                  </span>
                </div>
              );
            },
@@ -87,12 +87,11 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {

  if (detail.status !== 1) return null;

-  const baseSpeed =
-    detail.plan_speed_limit ?? detail.subscribe?.speed_limit ?? 0;
+  const baseSpeed = detail.subscribe?.speed_limit ?? 0;
  const userSpeed = detail.speed_limit ?? 0;
  const effectiveSpeed = detail.effective_speed ?? 0;
  const isThrottled = detail.is_throttled;
-  const rules = detail.user_traffic_limit || detail.traffic_limit || [];
+  const rules = detail.traffic_limit || [];
  const hasLimitConfig =
    baseSpeed > 0 || userSpeed > 0 || effectiveSpeed > 0 || rules.length > 0;

@@ -40,12 +40,6 @@ interface Props {

 type SubscriptionTrafficLimitRule = API.UserSubscribeTrafficLimitRule;

-function getUserTrafficLimitRules(
-  data?: Pick<API.UserSubscribe, "traffic_limit" | "user_traffic_limit">
-) {
-  return data?.user_traffic_limit || data?.traffic_limit || [];
-}
-
 const defaultLimitRule: SubscriptionTrafficLimitRule = {
  stat_type: "day",
  stat_value: 1,
@@ -104,7 +98,7 @@ export function SubscriptionForm({
      traffic: initialData?.traffic || 0,
      speed_limit: initialData?.speed_limit || 0,
      device_limit: initialData?.device_limit || 0,
-      traffic_limit: getUserTrafficLimitRules(initialData),
+      traffic_limit: initialData?.traffic_limit || [],
      upload: initialData?.upload || 0,
      download: initialData?.download || 0,
      expired_at: initialData?.expire_time || 0,
@@ -44,7 +44,7 @@ const WITHDRAWAL_METHOD_MAP: Record<number, string> = {
  0: "其他",
  1: "支付宝",
  2: "微信",
-  3: "USDT(TRC20)",
+  3: "银行卡",
 };

 const rejectSchema = z.object({
@@ -143,7 +143,7 @@ export default function WithdrawalPage() {
  const methodOptions = [
    { value: "1", label: "支付宝" },
    { value: "2", label: "微信" },
-    { value: "3", label: "USDT(TRC20)" },
+    { value: "3", label: "银行卡" },
    { value: "0", label: "其他" },
  ];

@@ -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"
+    }
+  }
 }
@@ -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": "提现金额不能超过可提现佣金"
+    }
+  }
 }
@@ -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,46 +57,15 @@ 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: "支付宝" },
  { value: 2, label: "微信" },
-  { value: 3, label: "USDT(TRC20)" },
+  { value: 3, label: "银行卡" },
  { 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 (
@@ -161,7 +128,7 @@ const withdrawalFormSchema = z
      if (!data.account) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
-          message: "USDT(TRC20) 地址为必填",
+          message: "银行卡收款账号为必填",
          path: ["account"],
        });
      }
@@ -480,7 +447,7 @@ export default function Affiliate() {
                                <Input
                                  placeholder={
                                    watchedMethod === 3
-                                      ? "请输入 USDT(TRC20) 收款地址"
+                                      ? "请输入银行卡号或账户信息"
                                      : "请输入收款账号（与备注至少填一项）"
                                  }
                                  {...field}
@@ -568,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={{
@@ -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();
+  });
+});
@@ -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>
+  );
+}
@@ -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>
@@ -2664,13 +2664,11 @@ declare namespace API {
    download: number;
    upload: number;
    speed_limit?: number;
-    plan_speed_limit?: number;
    device_limit?: number;
    effective_speed?: number;
    is_throttled?: boolean;
    throttle_rule?: string;
    traffic_limit?: UserSubscribeTrafficLimitRule[];
-    user_traffic_limit?: UserSubscribeTrafficLimitRule[];
    token: string;
    status: number;
    short: string;
@@ -2701,10 +2699,8 @@ declare namespace API {
    download: number;
    upload: number;
    speed_limit?: number;
-    plan_speed_limit?: number;
    device_limit?: number;
    traffic_limit?: UserSubscribeTrafficLimitRule[];
-    user_traffic_limit?: UserSubscribeTrafficLimitRule[];
    token: string;
    status: number;
    effective_speed: number;
@@ -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;
@@ -816,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;
@@ -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,
Author	SHA1	Message	Date
shanshanzhong147	e9cb65b388	新功能(#25 ): 拆分用户中心提现退款记录页签 PR Check / Lint, Check, Test and Build (pull_request) Has been cancelled Details Dependabot Auto Merge / Dependabot Auto Merge (pull_request_target) Has been cancelled Details	2026-06-11 20:35:06 -07:00
shanshanzhong147	1834b97fe2	修复(#134 ): 促销前端展示对齐 (expires_at / billing 补 promo_discount / 类型补字段) PR Check / Lint, Check, Test and Build (push) Has been cancelled Details 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 中英文文案。	2026-06-02 20:27:54 -07:00
shanshanzhong147	23f51a1ef4	修复(#122 ): 合并促销价档位提交到测试环境 PR Check / Lint, Check, Test and Build (push) Has been cancelled Details	2026-05-29 04:15:40 -07:00
shanshanzhong147	c46944aae1	新功能(#113 ): 新增促销管理后台页面 PR Check / Lint, Check, Test and Build (push) Has been cancelled Details	2026-05-29 00:34:37 -07:00