From d8b65c6d82d951cce611070628c273445e1eeff9 Mon Sep 17 00:00:00 2001
From: shanshanzhong <shanshanzhong147@gmail.com>
Date: Sun, 24 May 2026 20:25:12 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=8F=90=E7=8E=B0?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7=E4=B8=8E=E6=8F=90=E7=8E=B0=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/assets/locales/en-US/menu.json     |   3 +-
 .../public/assets/locales/zh-CN/menu.json     |   3 +-
 apps/admin/src/layout/navs.ts                 |   5 +
 apps/admin/src/routeTree.gen.ts               |  26 ++
 .../dashboard/withdrawal/index.lazy.tsx       |   6 +
 apps/admin/src/sections/withdrawal/index.tsx  | 302 +++++++++++++++++
 .../assets/locales/en-US/affiliate.json       |  28 +-
 .../assets/locales/zh-CN/affiliate.json       |  28 +-
 .../src/sections/user/affiliate/index.tsx     | 319 +++++++++++++++++-
 bun.lock                                      |   4 +
 packages/ui/src/services/admin/typings.d.ts   |  32 ++
 packages/ui/src/services/admin/withdrawal.ts  |  55 +++
 12 files changed, 790 insertions(+), 21 deletions(-)
 create mode 100644 apps/admin/src/routes/dashboard/withdrawal/index.lazy.tsx
 create mode 100644 apps/admin/src/sections/withdrawal/index.tsx
 create mode 100644 packages/ui/src/services/admin/withdrawal.ts

diff --git a/apps/admin/public/assets/locales/en-US/menu.json b/apps/admin/public/assets/locales/en-US/menu.json
index db4da07..069ad99 100644
--- a/apps/admin/public/assets/locales/en-US/menu.json
+++ b/apps/admin/public/assets/locales/en-US/menu.json
@@ -34,5 +34,6 @@
   "Traffic Details": "Traffic Details",
   "Device Group": "Device Group",
   "User Management": "User Management",
-  "Users & Support": "Users & Support"
+  "Users & Support": "Users & Support",
+  "Withdrawal Management": "Withdrawal Management"
 }
diff --git a/apps/admin/public/assets/locales/zh-CN/menu.json b/apps/admin/public/assets/locales/zh-CN/menu.json
index faf2ae8..c711a74 100644
--- a/apps/admin/public/assets/locales/zh-CN/menu.json
+++ b/apps/admin/public/assets/locales/zh-CN/menu.json
@@ -34,5 +34,6 @@
   "Traffic Details": "流量详情",
   "Device Group": "设备组",
   "User Management": "用户管理",
-  "Users & Support": "用户与支持"
+  "Users & Support": "用户与支持",
+  "Withdrawal Management": "提现管理"
 }
diff --git a/apps/admin/src/layout/navs.ts b/apps/admin/src/layout/navs.ts
index 228d175..5c8bb28 100644
--- a/apps/admin/src/layout/navs.ts
+++ b/apps/admin/src/layout/navs.ts
@@ -93,6 +93,11 @@ export function useNavs() {
             url: "/dashboard/user",
             icon: "flat-color-icons:conference-call",
           },
+          {
+            title: t("Withdrawal Management", "Withdrawal Management"),
+            url: "/dashboard/withdrawal",
+            icon: "flat-color-icons:money-transfer",
+          },
           {
             title: t("Device Group", "Device Group"),
             url: "/dashboard/family",
diff --git a/apps/admin/src/routeTree.gen.ts b/apps/admin/src/routeTree.gen.ts
index eab2f6b..0398349 100644
--- a/apps/admin/src/routeTree.gen.ts
+++ b/apps/admin/src/routeTree.gen.ts
@@ -17,6 +17,9 @@ const IndexLazyRouteImport = createFileRoute('/')()
 const DashboardIndexLazyRouteImport = createFileRoute('/dashboard/')()
 const DashboardServersLazyRouteImport = createFileRoute('/dashboard/servers')()
 const DashboardNodesLazyRouteImport = createFileRoute('/dashboard/nodes')()
+const DashboardWithdrawalIndexLazyRouteImport = createFileRoute(
+  '/dashboard/withdrawal/',
+)()
 const DashboardUserIndexLazyRouteImport = createFileRoute('/dashboard/user/')()
 const DashboardTicketIndexLazyRouteImport =
   createFileRoute('/dashboard/ticket/')()
@@ -123,6 +126,14 @@ const DashboardNodesLazyRoute = DashboardNodesLazyRouteImport.update({
 } as any).lazy(() =>
   import('./routes/dashboard/nodes.lazy').then((d) => d.Route),
 )
+const DashboardWithdrawalIndexLazyRoute =
+  DashboardWithdrawalIndexLazyRouteImport.update({
+    id: '/withdrawal/',
+    path: '/withdrawal/',
+    getParentRoute: () => DashboardRouteLazyRoute,
+  } as any).lazy(() =>
+    import('./routes/dashboard/withdrawal/index.lazy').then((d) => d.Route),
+  )
 const DashboardUserIndexLazyRoute = DashboardUserIndexLazyRouteImport.update({
   id: '/user/',
   path: '/user/',
@@ -375,6 +386,7 @@ export interface FileRoutesByFullPath {
   '/dashboard/system': typeof DashboardSystemIndexLazyRoute
   '/dashboard/ticket': typeof DashboardTicketIndexLazyRoute
   '/dashboard/user': typeof DashboardUserIndexLazyRoute
+  '/dashboard/withdrawal': typeof DashboardWithdrawalIndexLazyRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexLazyRoute
@@ -409,6 +421,7 @@ export interface FileRoutesByTo {
   '/dashboard/system': typeof DashboardSystemIndexLazyRoute
   '/dashboard/ticket': typeof DashboardTicketIndexLazyRoute
   '/dashboard/user': typeof DashboardUserIndexLazyRoute
+  '/dashboard/withdrawal': typeof DashboardWithdrawalIndexLazyRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -445,6 +458,7 @@ export interface FileRoutesById {
   '/dashboard/system/': typeof DashboardSystemIndexLazyRoute
   '/dashboard/ticket/': typeof DashboardTicketIndexLazyRoute
   '/dashboard/user/': typeof DashboardUserIndexLazyRoute
+  '/dashboard/withdrawal/': typeof DashboardWithdrawalIndexLazyRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -482,6 +496,7 @@ export interface FileRouteTypes {
     | '/dashboard/system'
     | '/dashboard/ticket'
     | '/dashboard/user'
+    | '/dashboard/withdrawal'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -516,6 +531,7 @@ export interface FileRouteTypes {
     | '/dashboard/system'
     | '/dashboard/ticket'
     | '/dashboard/user'
+    | '/dashboard/withdrawal'
   id:
     | '__root__'
     | '/'
@@ -551,6 +567,7 @@ export interface FileRouteTypes {
     | '/dashboard/system/'
     | '/dashboard/ticket/'
     | '/dashboard/user/'
+    | '/dashboard/withdrawal/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -595,6 +612,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardNodesLazyRouteImport
       parentRoute: typeof DashboardRouteLazyRoute
     }
+    '/dashboard/withdrawal/': {
+      id: '/dashboard/withdrawal/'
+      path: '/withdrawal'
+      fullPath: '/dashboard/withdrawal'
+      preLoaderRoute: typeof DashboardWithdrawalIndexLazyRouteImport
+      parentRoute: typeof DashboardRouteLazyRoute
+    }
     '/dashboard/user/': {
       id: '/dashboard/user/'
       path: '/user'
@@ -826,6 +850,7 @@ interface DashboardRouteLazyRouteChildren {
   DashboardSystemIndexLazyRoute: typeof DashboardSystemIndexLazyRoute
   DashboardTicketIndexLazyRoute: typeof DashboardTicketIndexLazyRoute
   DashboardUserIndexLazyRoute: typeof DashboardUserIndexLazyRoute
+  DashboardWithdrawalIndexLazyRoute: typeof DashboardWithdrawalIndexLazyRoute
 }
 
 const DashboardRouteLazyRouteChildren: DashboardRouteLazyRouteChildren = {
@@ -860,6 +885,7 @@ const DashboardRouteLazyRouteChildren: DashboardRouteLazyRouteChildren = {
   DashboardSystemIndexLazyRoute: DashboardSystemIndexLazyRoute,
   DashboardTicketIndexLazyRoute: DashboardTicketIndexLazyRoute,
   DashboardUserIndexLazyRoute: DashboardUserIndexLazyRoute,
+  DashboardWithdrawalIndexLazyRoute: DashboardWithdrawalIndexLazyRoute,
 }
 
 const DashboardRouteLazyRouteWithChildren =
diff --git a/apps/admin/src/routes/dashboard/withdrawal/index.lazy.tsx b/apps/admin/src/routes/dashboard/withdrawal/index.lazy.tsx
new file mode 100644
index 0000000..842b427
--- /dev/null
+++ b/apps/admin/src/routes/dashboard/withdrawal/index.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import WithdrawalPage from "@/sections/withdrawal";
+
+export const Route = createLazyFileRoute("/dashboard/withdrawal/")({
+  component: WithdrawalPage,
+});
diff --git a/apps/admin/src/sections/withdrawal/index.tsx b/apps/admin/src/sections/withdrawal/index.tsx
new file mode 100644
index 0000000..ab4f541
--- /dev/null
+++ b/apps/admin/src/sections/withdrawal/index.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { Badge } from "@workspace/ui/components/badge";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@workspace/ui/components/form";
+import { Textarea } from "@workspace/ui/components/textarea";
+import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
+import {
+  ProTable,
+  type ProTableActions,
+} from "@workspace/ui/composed/pro-table/pro-table";
+import {
+  approveWithdrawal,
+  getWithdrawalList,
+  rejectWithdrawal,
+} from "@workspace/ui/services/admin/withdrawal";
+import { useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Display } from "@/components/display";
+import { UserDetail } from "@/sections/user/user-detail";
+import { formatDate } from "@/utils/common";
+
+const rejectSchema = z.object({
+  reason: z
+    .string()
+    .trim()
+    .min(2, "请填写拒绝原因")
+    .max(500, "拒绝原因不能超过 500 个字符"),
+});
+
+export default function WithdrawalPage() {
+  const { t } = useTranslation("user");
+  const ref = useRef<ProTableActions>(null);
+  const [rejectOpen, setRejectOpen] = useState(false);
+  const [currentRow, setCurrentRow] = useState<API.WithdrawalLog | null>(null);
+  const form = useForm<z.infer<typeof rejectSchema>>({
+    resolver: zodResolver(rejectSchema),
+    defaultValues: {
+      reason: "",
+    },
+  });
+
+  const approveMutation = useMutation({
+    mutationFn: async (withdrawalId: number) =>
+      approveWithdrawal({ withdrawal_id: withdrawalId }),
+    onSuccess: () => {
+      toast.success("提现申请已通过");
+      ref.current?.refresh();
+    },
+    onError: (error) => {
+      console.error("Approve withdrawal failed", error);
+      toast.error("提现通过失败");
+    },
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: async (values: { withdrawal_id: number; reason: string }) =>
+      rejectWithdrawal(values),
+    onSuccess: () => {
+      toast.success("提现申请已拒绝");
+      setRejectOpen(false);
+      setCurrentRow(null);
+      form.reset({ reason: "" });
+      ref.current?.refresh();
+    },
+    onError: (error) => {
+      console.error("Reject withdrawal failed", error);
+      toast.error("提现拒绝失败");
+    },
+  });
+
+  const statusOptions = [
+    { value: "0", label: "审核中" },
+    { value: "1", label: "已通过" },
+    { value: "2", label: "已拒绝" },
+  ];
+
+  const statusMap: Record<number, { label: string; className: string }> = {
+    0: {
+      label: "审核中",
+      className: "bg-amber-100 text-amber-700 border-amber-200",
+    },
+    1: {
+      label: "已通过",
+      className: "bg-emerald-100 text-emerald-700 border-emerald-200",
+    },
+    2: {
+      label: "已拒绝",
+      className: "bg-rose-100 text-rose-700 border-rose-200",
+    },
+  };
+
+  return (
+    <>
+      <ProTable<API.WithdrawalLog, { status?: string; user_id?: string }>
+        action={ref}
+        actions={{
+          render: (row) => {
+            if (row.status !== 0) return [];
+
+            return [
+              <ConfirmButton
+                cancelText={t("cancel", "Cancel")}
+                confirmText={t("confirm", "Confirm")}
+                description="确认后将标记该提现为已通过，请确保线下打款流程已完成。"
+                key="approve"
+                onConfirm={async () => {
+                  await approveMutation.mutateAsync(row.id);
+                }}
+                title="确认通过提现吗？"
+                trigger={
+                  <Button
+                    disabled={approveMutation.isPending}
+                    size="sm"
+                    variant="default"
+                  >
+                    通过
+                  </Button>
+                }
+              />,
+              <Button
+                key="reject"
+                onClick={() => {
+                  setCurrentRow(row);
+                  setRejectOpen(true);
+                }}
+                size="sm"
+                variant="destructive"
+              >
+                拒绝
+              </Button>,
+            ];
+          },
+        }}
+        columns={[
+          {
+            accessorKey: "id",
+            header: "ID",
+          },
+          {
+            accessorKey: "user_id",
+            header: t("user", "User"),
+            cell: ({ row }) => <UserDetail id={row.original.user_id} />,
+          },
+          {
+            accessorKey: "amount",
+            header: "提现金额",
+            cell: ({ row }) => (
+              <Display type="currency" value={row.original.amount} />
+            ),
+          },
+          {
+            accessorKey: "content",
+            header: "收款信息",
+            cell: ({ row }) => (
+              <div className="max-w-[360px] break-all text-sm">
+                {row.original.content || "--"}
+              </div>
+            ),
+          },
+          {
+            accessorKey: "status",
+            header: "状态",
+            cell: ({ row }) => {
+              const status = statusMap[row.original.status] ?? {
+                label: `未知 (${row.original.status})`,
+                className: "",
+              };
+              return (
+                <Badge className={status.className} variant="outline">
+                  {status.label}
+                </Badge>
+              );
+            },
+          },
+          {
+            accessorKey: "reason",
+            header: "拒绝原因",
+            cell: ({ row }) => row.original.reason || "--",
+          },
+          {
+            accessorKey: "created_at",
+            header: "申请时间",
+            cell: ({ row }) => formatDate(row.original.created_at),
+          },
+          {
+            accessorKey: "updated_at",
+            header: "更新时间",
+            cell: ({ row }) => formatDate(row.original.updated_at),
+          },
+        ]}
+        header={{ title: "提现管理" }}
+        params={[
+          {
+            key: "status",
+            options: statusOptions,
+            placeholder: "状态",
+          },
+          {
+            key: "user_id",
+            placeholder: "用户 ID",
+          },
+        ]}
+        request={async (pagination, filter) => {
+          const { data } = await getWithdrawalList({
+            page: pagination.page,
+            size: pagination.size,
+            status: filter.status ? Number(filter.status) : undefined,
+            user_id: filter.user_id ? Number(filter.user_id) : undefined,
+          });
+
+          return {
+            list: data.data?.list || [],
+            total: data.data?.total || 0,
+          };
+        }}
+      />
+
+      <Dialog
+        onOpenChange={(open) => {
+          setRejectOpen(open);
+          if (!open) {
+            setCurrentRow(null);
+            form.reset({ reason: "" });
+          }
+        }}
+        open={rejectOpen}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>拒绝提现申请</DialogTitle>
+            <DialogDescription>
+              为用户填写本次拒绝原因，提交后该记录会更新为已拒绝。
+            </DialogDescription>
+          </DialogHeader>
+          <Form {...form}>
+            <form
+              className="space-y-4"
+              onSubmit={form.handleSubmit(async (values) => {
+                if (!currentRow) return;
+                await rejectMutation.mutateAsync({
+                  withdrawal_id: currentRow.id,
+                  reason: values.reason.trim(),
+                });
+              })}
+            >
+              <FormField
+                control={form.control}
+                name="reason"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>拒绝原因</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="请输入拒绝原因，用户端会看到这条说明"
+                        rows={5}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter>
+                <Button
+                  onClick={() => setRejectOpen(false)}
+                  type="button"
+                  variant="outline"
+                >
+                  {t("cancel", "Cancel")}
+                </Button>
+                <Button disabled={rejectMutation.isPending} type="submit">
+                  {rejectMutation.isPending ? "提交中..." : "确认拒绝"}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/user/public/assets/locales/en-US/affiliate.json b/apps/user/public/assets/locales/en-US/affiliate.json
index 741ded3..a17fcb8 100644
--- a/apps/user/public/assets/locales/en-US/affiliate.json
+++ b/apps/user/public/assets/locales/en-US/affiliate.json
@@ -1,11 +1,37 @@
 {
+  "accountInfo": "Payout Details",
+  "accountPlaceholder": "Enter bank card, Alipay, USDT wallet, or other payout details",
+  "accountRequired": "Payout details are required",
+  "accountTooLong": "Payout details must be 200 characters or fewer",
+  "amountInvalid": "Enter a valid amount",
+  "amountPositive": "Withdrawal amount must be greater than 0",
+  "applyTime": "Applied At",
+  "applyWithdraw": "Request Withdrawal",
+  "cancel": "Cancel",
   "commissionInfo": "Commission Info",
   "commissionRate": "Commission Rate",
   "copyInviteLink": "Copy Invite Link",
   "copySuccess": "Copy Success",
+  "currentCommission": "Current Commission",
   "inviteCode": "Invite Code",
   "inviteRecords": "Invite Records",
+  "noReason": "None",
+  "rejectReason": "Reject Reason",
   "registrationTime": "Registration Time",
+  "submitWithdraw": "Submit Request",
+  "submitting": "Submitting...",
   "totalCommission": "Total Commission",
-  "userIdentifier": "User Identifier"
+  "unknownStatus": "Unknown Status",
+  "userIdentifier": "User Identifier",
+  "withdrawAmount": "Withdrawal Amount",
+  "withdrawAmountPlaceholder": "Enter the withdrawal amount in dollars",
+  "withdrawDescription": "Submit the withdrawal amount and payout details, then wait for review.",
+  "withdrawError": "Failed to submit withdrawal request",
+  "withdrawRecords": "Withdrawal Records",
+  "withdrawStatus": {
+    "approved": "Approved",
+    "pending": "Pending Review",
+    "rejected": "Rejected"
+  },
+  "withdrawSuccess": "Withdrawal request submitted"
 }
diff --git a/apps/user/public/assets/locales/zh-CN/affiliate.json b/apps/user/public/assets/locales/zh-CN/affiliate.json
index fe38a02..0b331b0 100644
--- a/apps/user/public/assets/locales/zh-CN/affiliate.json
+++ b/apps/user/public/assets/locales/zh-CN/affiliate.json
@@ -1,11 +1,37 @@
 {
+  "accountInfo": "收款信息",
+  "accountPlaceholder": "请输入银行卡、支付宝、USDT 地址等收款信息",
+  "accountRequired": "请填写收款信息",
+  "accountTooLong": "收款信息不能超过 200 个字符",
+  "amountInvalid": "请输入有效金额",
+  "amountPositive": "提现金额必须大于 0",
+  "applyTime": "申请时间",
+  "applyWithdraw": "申请提现",
+  "cancel": "取消",
   "commissionInfo": "佣金信息",
   "commissionRate": "佣金比例",
   "copyInviteLink": "复制邀请链接",
   "copySuccess": "复制成功",
+  "currentCommission": "当前可见佣金",
   "inviteCode": "邀请码",
   "inviteRecords": "邀请记录",
+  "noReason": "无",
+  "rejectReason": "拒绝原因",
   "registrationTime": "注册时间",
+  "submitWithdraw": "提交申请",
+  "submitting": "提交中...",
   "totalCommission": "累计佣金",
-  "userIdentifier": "用户标识"
+  "unknownStatus": "未知状态",
+  "userIdentifier": "用户标识",
+  "withdrawAmount": "提现金额",
+  "withdrawAmountPlaceholder": "请输入提现金额，单位为元",
+  "withdrawDescription": "填写提现金额和收款信息后提交申请，等待后台审核。",
+  "withdrawError": "提现申请提交失败",
+  "withdrawRecords": "提现记录",
+  "withdrawStatus": {
+    "approved": "已通过",
+    "pending": "审核中",
+    "rejected": "已拒绝"
+  },
+  "withdrawSuccess": "提现申请已提交"
 }
diff --git a/apps/user/src/sections/user/affiliate/index.tsx b/apps/user/src/sections/user/affiliate/index.tsx
index 1131f96..f077d4e 100644
--- a/apps/user/src/sections/user/affiliate/index.tsx
+++ b/apps/user/src/sections/user/affiliate/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
   Card,
@@ -9,13 +10,26 @@ import {
   CardHeader,
   CardTitle,
 } from "@workspace/ui/components/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog";
+import { Input } from "@workspace/ui/components/input";
+import { Textarea } from "@workspace/ui/components/textarea";
 import { ProList } from "@workspace/ui/composed/pro-list/pro-list";
 import {
+  commissionWithdraw,
   queryUserAffiliate,
   queryUserAffiliateList,
+  queryWithdrawalLog,
 } from "@workspace/ui/services/user/user";
 import { formatDate } from "@workspace/ui/utils/formatting";
-import { Copy } from "lucide-react";
+import { Copy, Wallet } from "lucide-react";
+import { useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -24,7 +38,13 @@ import { useGlobalStore } from "@/stores/global";
 
 export default function Affiliate() {
   const { t } = useTranslation("affiliate");
-  const { user, common } = useGlobalStore();
+  const { user, common, getUserInfo } = useGlobalStore();
+  const queryClient = useQueryClient();
+  const [withdrawOpen, setWithdrawOpen] = useState(false);
+  const [amountInput, setAmountInput] = useState("");
+  const [contentInput, setContentInput] = useState("");
+  const [amountError, setAmountError] = useState("");
+  const [contentError, setContentError] = useState("");
   const { data } = useQuery({
     queryKey: ["queryUserAffiliate"],
     queryFn: async () => {
@@ -32,26 +52,225 @@ export default function Affiliate() {
       return response.data.data;
     },
   });
+  const withdrawMutation = useMutation({
+    mutationFn: async (values: { amount: number; content: string }) =>
+      commissionWithdraw({
+        amount: Math.round(values.amount * 100),
+        content: values.content.trim(),
+      }),
+    onSuccess: async () => {
+      toast.success(t("withdrawSuccess", "提现申请已提交"));
+      setAmountInput("");
+      setContentInput("");
+      setAmountError("");
+      setContentError("");
+      setWithdrawOpen(false);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["queryUserAffiliate"] }),
+        queryClient.invalidateQueries({ queryKey: ["queryUserInfo"] }),
+        getUserInfo(),
+      ]);
+    },
+    onError: (error) => {
+      console.error("Withdraw request failed", error);
+      toast.error(t("withdrawError", "提现申请提交失败"));
+    },
+  });
+
+  const statusMap: Record<number, { label: string; className: string }> = {
+    0: {
+      label: t("withdrawStatus.pending", "审核中"),
+      className: "bg-amber-100 text-amber-700 border-amber-200",
+    },
+    1: {
+      label: t("withdrawStatus.approved", "已通过"),
+      className: "bg-emerald-100 text-emerald-700 border-emerald-200",
+    },
+    2: {
+      label: t("withdrawStatus.rejected", "已拒绝"),
+      className: "bg-rose-100 text-rose-700 border-rose-200",
+    },
+  };
+
+  const currentCommission = user?.commission ?? 0;
+  const totalCommission = data?.total_commission ?? 0;
+
+  const submitWithdraw = async () => {
+    const amount = Number(amountInput);
+    const content = contentInput.trim();
+    let hasError = false;
+
+    if (!Number.isFinite(amount) || amount <= 0) {
+      setAmountError(t("amountPositive", "提现金额必须大于 0"));
+      hasError = true;
+    } else {
+      setAmountError("");
+    }
+
+    if (content.length < 2) {
+      setContentError(t("accountRequired", "请填写收款信息"));
+      hasError = true;
+    } else if (content.length > 200) {
+      setContentError(t("accountTooLong", "收款信息不能超过 200 个字符"));
+      hasError = true;
+    } else {
+      setContentError("");
+    }
+
+    if (hasError) return;
+
+    await withdrawMutation.mutateAsync({
+      amount,
+      content,
+    });
+  };
 
   return (
     <div className="flex flex-col gap-4">
       <Card>
-        <CardHeader>
-          <CardTitle>{t("totalCommission", "Total Commission")}</CardTitle>
-          <CardDescription>
-            {t("commissionInfo", "Commission Info")}
-          </CardDescription>
+        <CardHeader className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+          <div className="space-y-1">
+            <CardTitle>{t("totalCommission", "Total Commission")}</CardTitle>
+            <CardDescription>
+              {t("commissionInfo", "Commission Info")}
+            </CardDescription>
+          </div>
+          <Dialog onOpenChange={setWithdrawOpen} open={withdrawOpen}>
+            <Button
+              className="gap-2 self-start"
+              onClick={() => setWithdrawOpen(true)}
+              variant="default"
+            >
+              <Wallet className="h-4 w-4" />
+              {t("applyWithdraw", "申请提现")}
+            </Button>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>{t("applyWithdraw", "申请提现")}</DialogTitle>
+                <DialogDescription>
+                  {t(
+                    "withdrawDescription",
+                    "填写提现金额和收款信息后提交申请，等待后台审核。"
+                  )}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div className="grid gap-3 rounded-lg border bg-muted/30 p-4 text-sm">
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">
+                      {t("currentCommission", "当前可见佣金")}
+                    </span>
+                    <span className="font-semibold">
+                      <Display type="currency" value={currentCommission} />
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">
+                      {t("totalCommission", "Total Commission")}
+                    </span>
+                    <span className="font-semibold">
+                      <Display type="currency" value={totalCommission} />
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label
+                    className="font-medium text-sm"
+                    htmlFor="withdraw-amount"
+                  >
+                    {t("withdrawAmount", "提现金额")}
+                  </label>
+                  <Input
+                    id="withdraw-amount"
+                    min="0"
+                    onChange={(event) => {
+                      setAmountInput(event.target.value);
+                      if (amountError) setAmountError("");
+                    }}
+                    placeholder={t(
+                      "withdrawAmountPlaceholder",
+                      "请输入提现金额，单位为元"
+                    )}
+                    step="0.01"
+                    type="number"
+                    value={amountInput}
+                  />
+                  {amountError ? (
+                    <p className="text-destructive text-sm">{amountError}</p>
+                  ) : null}
+                </div>
+                <div className="space-y-2">
+                  <label
+                    className="font-medium text-sm"
+                    htmlFor="withdraw-content"
+                  >
+                    {t("accountInfo", "收款信息")}
+                  </label>
+                  <Textarea
+                    id="withdraw-content"
+                    onChange={(event) => {
+                      setContentInput(event.target.value);
+                      if (contentError) setContentError("");
+                    }}
+                    placeholder={t(
+                      "accountPlaceholder",
+                      "请输入银行卡、支付宝、USDT 地址等收款信息"
+                    )}
+                    rows={4}
+                    value={contentInput}
+                  />
+                  {contentError ? (
+                    <p className="text-destructive text-sm">{contentError}</p>
+                  ) : null}
+                </div>
+                <DialogFooter>
+                  <Button
+                    onClick={() => setWithdrawOpen(false)}
+                    type="button"
+                    variant="outline"
+                  >
+                    {t("cancel", "取消")}
+                  </Button>
+                  <Button
+                    disabled={withdrawMutation.isPending}
+                    onClick={submitWithdraw}
+                    type="button"
+                  >
+                    {withdrawMutation.isPending
+                      ? t("submitting", "提交中...")
+                      : t("submitWithdraw", "提交申请")}
+                  </Button>
+                </DialogFooter>
+              </div>
+            </DialogContent>
+          </Dialog>
         </CardHeader>
         <CardContent>
-          <div className="flex items-baseline gap-2">
-            <span className="font-bold text-3xl">
-              <Display type="currency" value={data?.total_commission} />
-            </span>
-            <span className="text-muted-foreground text-sm">
-              ({t("commissionRate", "Commission Rate")}:{" "}
-              {user?.referral_percentage || common?.invite?.referral_percentage}
-              %)
-            </span>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div>
+              <div className="text-muted-foreground text-sm">
+                {t("totalCommission", "Total Commission")}
+              </div>
+              <div className="mt-1 flex items-baseline gap-2">
+                <span className="font-bold text-3xl">
+                  <Display type="currency" value={totalCommission} />
+                </span>
+                <span className="text-muted-foreground text-sm">
+                  ({t("commissionRate", "Commission Rate")}:{" "}
+                  {user?.referral_percentage ||
+                    common?.invite?.referral_percentage}
+                  %)
+                </span>
+              </div>
+            </div>
+            <div>
+              <div className="text-muted-foreground text-sm">
+                {t("currentCommission", "当前可见佣金")}
+              </div>
+              <div className="mt-1 font-bold text-3xl">
+                <Display type="currency" value={currentCommission} />
+              </div>
+            </div>
           </div>
         </CardContent>
       </Card>
@@ -82,6 +301,72 @@ export default function Affiliate() {
           </div>
         </CardContent>
       </Card>
+      <ProList<API.WithdrawalLog, Record<string, unknown>>
+        header={{
+          title: t("withdrawRecords", "提现记录"),
+        }}
+        renderItem={(item) => {
+          const status = statusMap[item.status] ?? {
+            label: `${t("unknownStatus", "未知状态")} (${item.status})`,
+            className: "",
+          };
+          return (
+            <Card className="overflow-hidden">
+              <CardContent className="space-y-3 p-4 text-sm">
+                <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                  <div className="space-y-1">
+                    <div className="text-muted-foreground">
+                      {t("withdrawAmount", "提现金额")}
+                    </div>
+                    <div className="font-semibold text-lg">
+                      <Display type="currency" value={item.amount} />
+                    </div>
+                  </div>
+                  <Badge className={status.className} variant="outline">
+                    {status.label}
+                  </Badge>
+                </div>
+                <ul className="grid gap-3 md:grid-cols-2">
+                  <li className="flex flex-col gap-1">
+                    <span className="text-muted-foreground">
+                      {t("accountInfo", "收款信息")}
+                    </span>
+                    <span className="break-all font-medium">
+                      {item.content || "--"}
+                    </span>
+                  </li>
+                  <li className="flex flex-col gap-1">
+                    <span className="text-muted-foreground">
+                      {t("applyTime", "申请时间")}
+                    </span>
+                    <span className="font-medium">
+                      {formatDate(item.created_at)}
+                    </span>
+                  </li>
+                  <li className="flex flex-col gap-1 md:col-span-2">
+                    <span className="text-muted-foreground">
+                      {t("rejectReason", "拒绝原因")}
+                    </span>
+                    <span className="font-medium">
+                      {item.reason || t("noReason", "无")}
+                    </span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+          );
+        }}
+        request={async (pagination) => {
+          const response = await queryWithdrawalLog({
+            page: pagination.page,
+            size: pagination.size,
+          });
+          return {
+            list: response.data.data?.list || [],
+            total: response.data.data?.total || 0,
+          };
+        }}
+      />
       <ProList<API.UserAffiliate, Record<string, unknown>>
         header={{
           title: t("inviteRecords", "Invite Records"),
diff --git a/bun.lock b/bun.lock
index b88c820..8d2c467 100644
--- a/bun.lock
+++ b/bun.lock
@@ -49,7 +49,9 @@
         "motion": "^12.23.24",
         "qrcode.react": "^4.2.0",
         "radash": "^12.1.1",
+        "react": "^19.2.0",
         "react-copy-to-clipboard": "^5.1.0",
+        "react-dom": "^19.2.0",
         "react-helmet-async": "^2.0.5",
         "react-turnstile": "^1.1.4",
         "zustand": "^5.0.8",
@@ -85,7 +87,9 @@
         "framer-motion": "^12.23.24",
         "js-yaml": "^4.1.1",
         "qrcode.react": "^4.2.0",
+        "react": "^19.2.0",
         "react-copy-to-clipboard": "^5.1.0",
+        "react-dom": "^19.2.0",
         "react-helmet-async": "^2.0.5",
         "react-turnstile": "^1.1.4",
         "zustand": "^5.0.8",
diff --git a/packages/ui/src/services/admin/typings.d.ts b/packages/ui/src/services/admin/typings.d.ts
index 196b790..d5dbf5f 100644
--- a/packages/ui/src/services/admin/typings.d.ts
+++ b/packages/ui/src/services/admin/typings.d.ts
@@ -106,6 +106,10 @@ declare namespace API {
     port: number;
   };
 
+  type ApproveWithdrawalRequest = {
+    withdrawal_id: number;
+  };
+
   type AuthConfig = {
     mobile: MobileAuthenticateConfig;
     email: EmailAuthticateConfig;
@@ -1154,6 +1158,18 @@ declare namespace API {
     list: User[];
   };
 
+  type GetWithdrawalListParams = {
+    page: number;
+    size: number;
+    user_id?: number;
+    status?: number;
+  };
+
+  type GetWithdrawalListResponse = {
+    total: number;
+    list: WithdrawalLog[];
+  };
+
   type GetUserLoginLogsParams = {
     page: number;
     size: number;
@@ -1756,6 +1772,11 @@ declare namespace API {
     total: number;
   };
 
+  type RejectWithdrawalRequest = {
+    withdrawal_id: number;
+    reason: string;
+  };
+
   type QuotaTask = {
     id: number;
     subscribers: number[];
@@ -3064,4 +3085,15 @@ declare namespace API {
       }>;
     }>;
   };
+
+  type WithdrawalLog = {
+    id: number;
+    user_id: number;
+    amount: number;
+    content: string;
+    status: number;
+    reason?: string;
+    created_at: number;
+    updated_at: number;
+  };
 }
diff --git a/packages/ui/src/services/admin/withdrawal.ts b/packages/ui/src/services/admin/withdrawal.ts
new file mode 100644
index 0000000..c6a365f
--- /dev/null
+++ b/packages/ui/src/services/admin/withdrawal.ts
@@ -0,0 +1,55 @@
+/* eslint-disable */
+import request from "@workspace/ui/lib/request";
+
+/** Get withdrawal list GET /v1/admin/user/withdrawal/list */
+export async function getWithdrawalList(
+  params: API.GetWithdrawalListParams,
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: API.GetWithdrawalListResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/user/withdrawal/list`,
+    {
+      method: "GET",
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** Approve withdrawal POST /v1/admin/user/withdrawal/approve */
+export async function approveWithdrawal(
+  body: API.ApproveWithdrawalRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: any }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/user/withdrawal/approve`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
+/** Reject withdrawal POST /v1/admin/user/withdrawal/reject */
+export async function rejectWithdrawal(
+  body: API.RejectWithdrawalRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: any }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/user/withdrawal/reject`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}