fix: 备注表单提交时携带完整用户数据

RemarkForm 的 onSave 回调之前只传 user_id 和 remark，
导致后端用零值覆盖邀请人、余额、佣金等字段。

参考 enable 开关的模式，排除不兼容字段后展开 ...rest，
保证 updateUserBasicInfo 收到完整的用户数据。

Co-authored-by: multica-agent <github@multica.ai>

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

@@ -15,7 +15,7 @@
   "pending": "Pending",
   "pendingTickets": "Pending Tickets",
   "register": "Register",
-  "repurchase": "Repurchase",
+  "repurchase": "Renewal",
   "revenueTitle": "Revenue Statistics",
   "selectTypePlaceholder": "Select Type",
   "today": "Today",

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"
 }

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

@@ -1,17 +1,25 @@
 {
   "amount": "Amount",
   "couponDiscount": "Coupon Discount",
+  "confirmRefund": "Confirm refund",
   "discount": "Discount Amount",
   "feeAmount": "Fee Amount",
   "method": "Payment Method",
   "orderNumber": "Order Number",
+  "refund": "Refund",
+  "refundConfirmDescription": "This refund will immediately invalidate the user's subscription and deduct the related agent commission.",
+  "refundConfirmTitle": "Confirm refund",
+  "refundConfirmWarning": "This action cannot be repeated after the order is refunded.",
+  "refundSubmitting": "Refunding...",
+  "refundSuccess": "Refund completed.",
   "status": {
     "0": "Status",
     "1": "Pending",
     "2": "Paid",
     "3": "Cancelled",
     "4": "Closed",
-    "5": "Completed"
+    "5": "Completed",
+    "6": "Refunded"
   },
   "subscribe": "Subscribe",
   "subscribePrice": "Subscription Price",

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": "提现管理"
 }

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

@@ -1,17 +1,25 @@
 {
   "amount": "金额",
   "couponDiscount": "优惠券折扣",
+  "confirmRefund": "确认退费",
   "discount": "折扣金额",
   "feeAmount": "手续费",
   "method": "支付方式",
   "orderNumber": "订单编号",
+  "refund": "退费",
+  "refundConfirmDescription": "该退费操作会使用户订阅立即失效，并扣减关联代理佣金。",
+  "refundConfirmTitle": "确认退费",
+  "refundConfirmWarning": "订单退费后不可再次重复执行，请谨慎操作。",
+  "refundSubmitting": "退费中...",
+  "refundSuccess": "退费成功。",
   "status": {
     "0": "状态",
     "1": "待支付",
     "2": "已支付",
     "3": "已取消",
     "4": "已关闭",
-    "5": "已完成"
+    "5": "已完成",
+    "6": "已退费"
   },
   "subscribe": "订阅",
   "subscribePrice": "订阅价格",

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

@@ -12,7 +12,7 @@
     "0": "状态",
     "1": "待跟进",
     "2": "待回复",
-    "3": "已解决",
+    "3": "已取消",
     "4": "已关闭"
   },
   "ticketList": "工单列表",

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",

apps/admin/src/routeTree.gen.ts

@@ -15,8 +15,14 @@ import { Route as rootRouteImport } from './routes/__root'
 const DashboardRouteLazyRouteImport = createFileRoute('/dashboard')()
 const IndexLazyRouteImport = createFileRoute('/')()
 const DashboardIndexLazyRouteImport = createFileRoute('/dashboard/')()
+const DashboardWithdrawalLazyRouteImport = createFileRoute(
+  '/dashboard/withdrawal',
+)()
 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/')()
@@ -109,6 +115,13 @@ const DashboardIndexLazyRoute = DashboardIndexLazyRouteImport.update({
 } as any).lazy(() =>
   import('./routes/dashboard/index.lazy').then((d) => d.Route),
 )
+const DashboardWithdrawalLazyRoute = DashboardWithdrawalLazyRouteImport.update({
+  id: '/withdrawal',
+  path: '/withdrawal',
+  getParentRoute: () => DashboardRouteLazyRoute,
+} as any).lazy(() =>
+  import('./routes/dashboard/withdrawal.lazy').then((d) => d.Route),
+)
 const DashboardServersLazyRoute = DashboardServersLazyRouteImport.update({
   id: '/servers',
   path: '/servers',
@@ -123,6 +136,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/',
@@ -346,6 +367,7 @@ export interface FileRoutesByFullPath {
   '/dashboard': typeof DashboardRouteLazyRouteWithChildren
   '/dashboard/nodes': typeof DashboardNodesLazyRoute
   '/dashboard/servers': typeof DashboardServersLazyRoute
+  '/dashboard/withdrawal': typeof DashboardWithdrawalLazyRoute
   '/dashboard/': typeof DashboardIndexLazyRoute
   '/dashboard/log/balance': typeof DashboardLogBalanceLazyRoute
   '/dashboard/log/commission': typeof DashboardLogCommissionLazyRoute
@@ -375,11 +397,13 @@ export interface FileRoutesByFullPath {
   '/dashboard/system': typeof DashboardSystemIndexLazyRoute
   '/dashboard/ticket': typeof DashboardTicketIndexLazyRoute
   '/dashboard/user': typeof DashboardUserIndexLazyRoute
+  '/dashboard/withdrawal': typeof DashboardWithdrawalIndexLazyRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexLazyRoute
   '/dashboard/nodes': typeof DashboardNodesLazyRoute
   '/dashboard/servers': typeof DashboardServersLazyRoute
+  '/dashboard/withdrawal': typeof DashboardWithdrawalLazyRoute
   '/dashboard': typeof DashboardIndexLazyRoute
   '/dashboard/log/balance': typeof DashboardLogBalanceLazyRoute
   '/dashboard/log/commission': typeof DashboardLogCommissionLazyRoute
@@ -409,6 +433,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
@@ -416,6 +441,7 @@ export interface FileRoutesById {
   '/dashboard': typeof DashboardRouteLazyRouteWithChildren
   '/dashboard/nodes': typeof DashboardNodesLazyRoute
   '/dashboard/servers': typeof DashboardServersLazyRoute
+  '/dashboard/withdrawal': typeof DashboardWithdrawalLazyRoute
   '/dashboard/': typeof DashboardIndexLazyRoute
   '/dashboard/log/balance': typeof DashboardLogBalanceLazyRoute
   '/dashboard/log/commission': typeof DashboardLogCommissionLazyRoute
@@ -445,6 +471,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
@@ -453,6 +480,7 @@ export interface FileRouteTypes {
     | '/dashboard'
     | '/dashboard/nodes'
     | '/dashboard/servers'
+    | '/dashboard/withdrawal'
     | '/dashboard/'
     | '/dashboard/log/balance'
     | '/dashboard/log/commission'
@@ -482,11 +510,13 @@ export interface FileRouteTypes {
     | '/dashboard/system'
     | '/dashboard/ticket'
     | '/dashboard/user'
+    | '/dashboard/withdrawal'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/dashboard/nodes'
     | '/dashboard/servers'
+    | '/dashboard/withdrawal'
     | '/dashboard'
     | '/dashboard/log/balance'
     | '/dashboard/log/commission'
@@ -516,12 +546,14 @@ export interface FileRouteTypes {
     | '/dashboard/system'
     | '/dashboard/ticket'
     | '/dashboard/user'
+    | '/dashboard/withdrawal'
   id:
     | '__root__'
     | '/'
     | '/dashboard'
     | '/dashboard/nodes'
     | '/dashboard/servers'
+    | '/dashboard/withdrawal'
     | '/dashboard/'
     | '/dashboard/log/balance'
     | '/dashboard/log/commission'
@@ -551,6 +583,7 @@ export interface FileRouteTypes {
     | '/dashboard/system/'
     | '/dashboard/ticket/'
     | '/dashboard/user/'
+    | '/dashboard/withdrawal/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -581,6 +614,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardIndexLazyRouteImport
       parentRoute: typeof DashboardRouteLazyRoute
     }
+    '/dashboard/withdrawal': {
+      id: '/dashboard/withdrawal'
+      path: '/withdrawal'
+      fullPath: '/dashboard/withdrawal'
+      preLoaderRoute: typeof DashboardWithdrawalLazyRouteImport
+      parentRoute: typeof DashboardRouteLazyRoute
+    }
     '/dashboard/servers': {
       id: '/dashboard/servers'
       path: '/servers'
@@ -595,6 +635,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'
@@ -797,6 +844,7 @@ declare module '@tanstack/react-router' {
 interface DashboardRouteLazyRouteChildren {
   DashboardNodesLazyRoute: typeof DashboardNodesLazyRoute
   DashboardServersLazyRoute: typeof DashboardServersLazyRoute
+  DashboardWithdrawalLazyRoute: typeof DashboardWithdrawalLazyRoute
   DashboardIndexLazyRoute: typeof DashboardIndexLazyRoute
   DashboardLogBalanceLazyRoute: typeof DashboardLogBalanceLazyRoute
   DashboardLogCommissionLazyRoute: typeof DashboardLogCommissionLazyRoute
@@ -826,11 +874,13 @@ interface DashboardRouteLazyRouteChildren {
   DashboardSystemIndexLazyRoute: typeof DashboardSystemIndexLazyRoute
   DashboardTicketIndexLazyRoute: typeof DashboardTicketIndexLazyRoute
   DashboardUserIndexLazyRoute: typeof DashboardUserIndexLazyRoute
+  DashboardWithdrawalIndexLazyRoute: typeof DashboardWithdrawalIndexLazyRoute
 }
 
 const DashboardRouteLazyRouteChildren: DashboardRouteLazyRouteChildren = {
   DashboardNodesLazyRoute: DashboardNodesLazyRoute,
   DashboardServersLazyRoute: DashboardServersLazyRoute,
+  DashboardWithdrawalLazyRoute: DashboardWithdrawalLazyRoute,
   DashboardIndexLazyRoute: DashboardIndexLazyRoute,
   DashboardLogBalanceLazyRoute: DashboardLogBalanceLazyRoute,
   DashboardLogCommissionLazyRoute: DashboardLogCommissionLazyRoute,
@@ -860,6 +910,7 @@ const DashboardRouteLazyRouteChildren: DashboardRouteLazyRouteChildren = {
   DashboardSystemIndexLazyRoute: DashboardSystemIndexLazyRoute,
   DashboardTicketIndexLazyRoute: DashboardTicketIndexLazyRoute,
   DashboardUserIndexLazyRoute: DashboardUserIndexLazyRoute,
+  DashboardWithdrawalIndexLazyRoute: DashboardWithdrawalIndexLazyRoute,
 }
 
 const DashboardRouteLazyRouteWithChildren =

apps/admin/src/routes/dashboard/withdrawal.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import WithdrawalManagementPage from "@/sections/withdrawal";
+
+export const Route = createLazyFileRoute("/dashboard/withdrawal")({
+  component: WithdrawalManagementPage,
+});

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,
+});

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

@@ -1,4 +1,16 @@
+import { useMutation } from "@tanstack/react-query";
 import { useSearch } from "@tanstack/react-router";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@workspace/ui/components/alert-dialog";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -16,18 +28,27 @@ import { cn } from "@workspace/ui/lib/utils";
 import {
   activateOrder,
   getOrderList,
+  refundOrder,
   updateOrderStatus,
 } from "@workspace/ui/services/admin/order";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { Display } from "@/components/display";
+import { useGlobalStore } from "@/stores/global";
 import { useSubscribe } from "@/stores/subscribe";
 import { formatDate } from "@/utils/common";
 import { UserDetail } from "../user/user-detail";
 
+const REFUNDED_ORDER_STATUS = 6;
+
 export default function Order() {
   const { t } = useTranslation("order");
   const sp = useSearch({ strict: false }) as Record<string, string | undefined>;
+  const user = useGlobalStore((state) => state.user);
+  const [confirmingOrderId, setConfirmingOrderId] = useState<number | null>(
+    null
+  );
   const initialFilters = {
     user_id: sp.user_id ? Number(sp.user_id) : undefined,
     search: sp.search || undefined,
@@ -53,6 +74,11 @@ export default function Order() {
       label: t("status.5", "Completed"),
       className: "bg-green-500",
     },
+    {
+      value: REFUNDED_ORDER_STATUS,
+      label: t("status.6", "Refunded"),
+      className: "bg-red-500",
+    },
   ];
 
   const typeOptions = [
@@ -65,10 +91,101 @@ export default function Order() {
   const ref = useRef<ProTableActions>(null);
 
   const { subscribes, getSubscribeName } = useSubscribe();
+  const canRefundOrders = Boolean(user?.is_admin);
+
+  const refundMutation = useMutation({
+    mutationFn: async (order: API.Order) => {
+      await refundOrder({ id: order.id });
+    },
+    onSuccess: () => {
+      toast.success(t("refundSuccess", "Refund completed."));
+      setConfirmingOrderId(null);
+      ref.current?.refresh();
+    },
+    onError: (error) => {
+      console.error("Refund order failed", error);
+      setConfirmingOrderId(null);
+    },
+  });
+
+  const isRefundedOrder = (order: API.Order) =>
+    order.status === REFUNDED_ORDER_STATUS ||
+    order.status_name === t("status.6", "Refunded") ||
+    order.status_name?.toLowerCase() === "refunded";
+
+  const canRefundOrder = (order: API.Order) =>
+    canRefundOrders && !isRefundedOrder(order);
 
   return (
     <ProTable<API.Order, any>
       action={ref}
+      actions={{
+        render: (order) => {
+          if (!canRefundOrder(order)) return [];
+
+          const isPending =
+            refundMutation.isPending && confirmingOrderId === order.id;
+
+          return [
+            <AlertDialog
+              key={`refund-${order.id}`}
+              onOpenChange={(open) => {
+                setConfirmingOrderId(open ? order.id : null);
+              }}
+              open={confirmingOrderId === order.id}
+            >
+              <AlertDialogTrigger asChild>
+                <Button disabled={isPending} size="sm" variant="destructive">
+                  {isPending
+                    ? t("refundSubmitting", "Refunding...")
+                    : t("refund", "Refund")}
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t("refundConfirmTitle", "Confirm refund")}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription asChild>
+                    <div className="space-y-2">
+                      <p>
+                        {t(
+                          "refundConfirmDescription",
+                          "This refund will immediately invalidate the user's subscription and deduct the related agent commission."
+                        )}
+                      </p>
+                      <p className="font-medium text-foreground">
+                        {t(
+                          "refundConfirmWarning",
+                          "This action cannot be repeated after the order is refunded."
+                        )}
+                      </p>
+                    </div>
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel disabled={isPending}>
+                    {t("cancel", "Cancel")}
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    disabled={isPending}
+                    onClick={async (event) => {
+                      event.preventDefault();
+                      if (isPending) return;
+                      await refundMutation.mutateAsync(order);
+                    }}
+                  >
+                    {isPending
+                      ? t("refundSubmitting", "Refunding...")
+                      : t("confirmRefund", "Confirm refund")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>,
+          ];
+        },
+      }}
       columns={[
         {
           accessorKey: "order_no",
@@ -253,8 +370,13 @@ export default function Order() {
               );
             }
             return (
-              <Badge>
-                {option?.label || t(`status.${row.getValue("status")}`)}
+              <Badge
+                variant={isRefundedOrder(order) ? "destructive" : "default"}
+              >
+                {option?.label ||
+                  (order.status_name
+                    ? t(`status.${row.getValue("status")}`, order.status_name)
+                    : t(`status.${row.getValue("status")}`))}
               </Badge>
             );
           },

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

@@ -23,6 +23,10 @@ import {
   getTicketList,
   updateTicketStatus,
 } from "@workspace/ui/services/admin/ticket";
+import {
+  getUserDetail,
+  updateUserBasicInfo,
+} from "@workspace/ui/services/admin/user";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -42,6 +46,7 @@ export default function Page() {
   const [ticketId, setTicketId] = useState<any>(null);
 
   const [message, setMessage] = useState("");
+  const [loadingId, setLoadingId] = useState<any>(null);
 
   const { data: ticket, refetch: refetchTicket } = useQuery({
     queryKey: ["getTicket", ticketId],
@@ -74,45 +79,214 @@ export default function Page() {
         action={ref}
         actions={{
           render(row) {
-            if (row.status !== 4) {
+            if (row.status === 1) {
               return [
-                <Button key="reply" onClick={() => setTicketId(row.id)}>
-                  {t("reply", "Reply")}
-                </Button>,
                 <ConfirmButton
                   cancelText={t("cancel", "Cancel")}
                   confirmText={t("confirm", "Confirm")}
-                  description={t(
-                    "closeWarning",
-                    "Once closed, the ticket cannot be operated on. Please proceed with caution."
+                  description="您确定要取消此次打款吗？取消后系统将记录此操作并关闭工单。"
+                  key="cancel-payout"
+                  onConfirm={async () => {
+                    setLoadingId(row.id);
+                    try {
+                      await updateTicketStatus({
+                        id: row.id,
+                        status: 3,
+                      });
+                      toast.success("已取消打款并关闭工单");
+                      ref.current?.refresh();
+                    } catch (e) {
+                      console.error("Cancel payout failed", e);
+                      toast.error("取消打款失败");
+                    }
+                    setLoadingId(null);
+                  }}
+                  title="确认取消打款？"
+                  trigger={
+                    <Button
+                      className="mr-2"
+                      disabled={loadingId === row.id}
+                      variant="outline"
+                    >
+                      {loadingId === row.id && (
+                        <Icon
+                          className="mr-2 animate-spin"
+                          icon="lucide:loader-2"
+                        />
                       )}
+                      取消打款
+                    </Button>
+                  }
+                />,
+                <ConfirmButton
+                  cancelText={t("cancel", "Cancel")}
+                  confirmText={t("confirm", "Confirm")}
+                  description={
+                    <div className="flex flex-col gap-2">
+                      <p>
+                        请确保您已完成线下打款操作。点击确认后，系统将自动扣除用户对应的佣金并关闭此工单，此操作不可撤销。
+                      </p>
+                      <p className="font-bold text-rose-500 text-sm">
+                        ※ USDT 提现需手续费 1 USDT
+                      </p>
+                      <p className="font-bold text-rose-500 text-sm">
+                        ※ 支付宝/微信提现手续费 5%
+                      </p>
+                    </div>
+                  }
                   key="colse"
                   onConfirm={async () => {
+                    setLoadingId(row.id);
+                    try {
+                      const titleStr = row.title || "";
+                      const parts = titleStr.split("-");
+                      if (parts.length > 1) {
+                        const deductAmount = Number.parseFloat(
+                          parts?.[1] ?? "0"
+                        );
+                        if (!Number.isNaN(deductAmount)) {
+                          const res = await getUserDetail({ id: row.user_id });
+                          const user = res?.data?.data;
+                          if (user && typeof user.commission !== "undefined") {
+                            const deductAmountCent = deductAmount * 100;
+                            if (Number(user.commission) < deductAmountCent) {
+                              toast.error("用户佣金余额不足，无法完成打款扣费");
+                              setLoadingId(null);
+                              return;
+                            }
+                            const newCommission =
+                              Number(user.commission) - deductAmountCent;
+                            await updateUserBasicInfo({
+                              user_id: row.user_id,
+                              commission: newCommission,
+                            } as any);
+                          }
+                        }
+                      }
+                    } catch (e) {
+                      console.error("Update commission failed", e);
+                    }
+
                     await updateTicketStatus({
                       id: row.id,
                       status: 4,
                     });
                     toast.success(t("closeSuccess", "Closed successfully"));
                     ref.current?.refresh();
+                    setLoadingId(null);
                   }}
-                  title={t("confirmClose", "Are you sure you want to close?")}
+                  title="确认已完成打款？"
                   trigger={
-                    <Button variant="destructive">{t("close", "Close")}</Button>
+                    <Button
+                      disabled={loadingId === row.id}
+                      variant="destructive"
+                    >
+                      {loadingId === row.id && (
+                        <Icon
+                          className="mr-2 animate-spin"
+                          icon="lucide:loader-2"
+                        />
+                      )}
+                      确认打款并结单
+                    </Button>
+                  }
+                />,
+                <ConfirmButton
+                  cancelText={t("cancel", "Cancel")}
+                  confirmText={t("confirm", "Confirm")}
+                  description="检查佣金是否扣除，如已经扣除才可进行关闭，此操作不扣除佣金仅关闭工单。"
+                  key="cancel-payout-1"
+                  onConfirm={async () => {
+                    setLoadingId(row.id);
+                    try {
+                      await updateTicketStatus({
+                        id: row.id,
+                        status: 4,
+                      });
+                      toast.success("已关闭工单");
+                      ref.current?.refresh();
+                    } catch (e) {
+                      console.error("Cancel payout failed", e);
+                      toast.error("关闭工单失败");
+                    }
+                    setLoadingId(null);
+                  }}
+                  title="确认关闭订单？"
+                  trigger={
+                    <Button
+                      className="mr-2"
+                      disabled={loadingId === row.id}
+                      variant="secondary"
+                    >
+                      {loadingId === row.id && (
+                        <Icon
+                          className="mr-2 animate-spin"
+                          icon="lucide:loader-2"
+                        />
+                      )}
+                      关闭
+                    </Button>
                   }
                 />,
               ];
             }
-            return [
-              <Button key="check" onClick={() => setTicketId(row.id)} size="sm">
-                {t("check", "Check")}
-              </Button>,
-            ];
+            return [];
           },
         }}
         columns={[
           {
-            accessorKey: "title",
-            header: t("title", "Title"),
+            id: "withdrawal_type",
+            header: "提现类型",
+            cell: ({ row }) => {
+              const title = row.original.title || "";
+              return title.split("-")[0] || title;
+            },
+          },
+          {
+            id: "withdrawal_amount",
+            header: "提现金额",
+            cell: ({ row }) => {
+              const title = row.original.title || "";
+              const parts = title.split("-");
+              if (parts.length < 2) return "";
+              return (
+                <span className="font-bold text-rose-500">${parts[1]}</span>
+              );
+            },
+          },
+          {
+            id: "withdrawal_method",
+            header: "提现方式",
+            cell: ({ row }) => {
+              const desc = row.original.description || "";
+              return desc.split("-")[0] || "";
+            },
+          },
+          {
+            id: "withdrawal_content",
+            header: "提现内容",
+            cell: ({ row }) => {
+              const desc = row.original.description || "";
+              const parts = desc.split("-");
+              if (parts.length < 2) return "";
+              const content = parts[1];
+              if (content?.startsWith("data:image/")) {
+                return (
+                  <img
+                    alt="withdrawal"
+                    className="h-10 w-10 cursor-zoom-in rounded border object-cover"
+                    height={40} // 这里的数值根据你的 UI 设计调整
+                    onClick={() => {
+                      const win = window.open();
+                      win?.document.write(`<img src="${content}" />`);
+                    }}
+                    src={content}
+                    width={40}
+                  />
+                );
+              }
+              return <span className="font-semibold">{content}</span>;
+            },
           },
           {
             accessorKey: "user_id",

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

@@ -31,6 +31,13 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@workspace/ui/components/sheet";
+import { FilePenLine } from 'lucide-react';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@workspace/ui/components/popover';
 import { Switch } from "@workspace/ui/components/switch";
 import {
   Tabs,
@@ -39,7 +46,7 @@ import {
   TabsTrigger,
 } from "@workspace/ui/components/tabs";
 import { Combobox } from "@workspace/ui/composed/combobox";
-import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
+// import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
 import {
   ProTable,
   type ProTableActions,
@@ -50,13 +57,13 @@ import {
 } from "@workspace/ui/services/admin/group";
 import {
   createUser,
-  deleteUser,
+  // deleteUser,
   getUserDetail,
   getUserList,
   updateUserBasicInfo,
 } from "@workspace/ui/services/admin/user";
 import { parseDeviceType } from "@workspace/ui/utils/device";
-import { useCallback, useRef, useState } from "react";
+import React, { useRef, useState, useCallback } from 'react';
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { Display } from "@/components/display";
@@ -72,6 +79,44 @@ import { NotifySettingsForm } from "./user-profile/notify-settings-form";
 import UserSubscription from "./user-subscription";
 // import EditUserGroupDialog from "./edit-user-group-dialog";
 
+
+// 为 RemarkForm 组件定义 props 类型
+interface RemarkFormProps {
+  initialRemark?: string | null;
+  onSave: (remark: string) => void;
+  CloseComponent: React.ComponentType<{ asChild?: boolean; children: React.ReactNode }>;
+}
+// 新的子组件，在管理它自己的备注状态
+const RemarkForm: React.FC<RemarkFormProps> = ({ onSave, initialRemark, CloseComponent }) => {
+  const [remark, setRemark] = useState<string>(initialRemark ?? '');
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRemark(event.target.value);
+  };
+
+  const handleSaveClick = () => {
+    onSave(remark);
+  };
+
+  return (
+      <>
+        <div className='mb-2 text-sm font-semibold'>备注</div>
+        <Input
+            type='text'
+            value={remark}
+            onChange={handleInputChange}
+            placeholder='在此输入备注...'
+            className='w-full'
+        />
+        <CloseComponent asChild>
+          <Button onClick={handleSaveClick} variant='default' size={'sm'} className={'mt-2'}>
+            保存
+          </Button>
+        </CloseComponent>
+      </>
+  );
+};
+
 export default function User() {
   const { t } = useTranslation("user");
   const [loading, setLoading] = useState(false);
@@ -139,7 +184,7 @@ export default function User() {
             userId={row.id}
           />,
           <PreviewNodesDialog key="preview-nodes" userId={row.id} />,
-          <ConfirmButton
+         /* <ConfirmButton
             cancelText={t("cancel", "Cancel")}
             confirmText={t("confirm", "Confirm")}
             description={t(
@@ -156,7 +201,7 @@ export default function User() {
             trigger={
               <Button variant="destructive">{t("delete", "Delete")}</Button>
             }
-          />,
+          />,*/
           <DropdownMenu key="more" modal={false}>
             <DropdownMenuTrigger asChild>
               <Button variant="outline">{t("more", "More")}</Button>
@@ -232,7 +277,7 @@ export default function User() {
           accessorKey: "id",
           header: "ID",
         },
-        {
+        /*{
           id: "deleted_at",
           accessorKey: "deleted_at",
           header: t("isDeleted", "Deleted"),
@@ -244,11 +289,11 @@ export default function User() {
               <Badge variant="outline">{t("normal", "Normal")}</Badge>
             );
           },
-        },
+        },*/
         {
           id: "auth_methods",
           accessorKey: "auth_methods",
-          header: t("userName", "Username"),
+          header: '设备码/邮箱',
           cell: ({ row }) => {
             const method = row.original.auth_methods?.[0];
             const identifier = method?.auth_identifier || "";
@@ -259,23 +304,58 @@ export default function User() {
             const display = isDevice ? deviceNo || identifier : identifier;
             return (
               <div className="flex items-center">
-                <Badge
+               {/* <Badge
                   className="mr-1 uppercase"
                   title={method?.verified ? t("verified", "Verified") : ""}
                 >
                   {method?.auth_type}
-                </Badge>
+                </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 size={14} className={'text-primary ml-2'} />
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent className={'w-64'}>
+                    <RemarkForm
+                        initialRemark={row.original.remark}
+                        CloseComponent={PopoverClose}
+                        onSave={async (remark) => {
+                          const {
+                            auth_methods: _auth_methods,
+                            user_devices: _user_devices,
+                            enable_balance_notify: _enable_balance_notify,
+                            enable_login_notify: _enable_login_notify,
+                            enable_subscribe_notify: _enable_subscribe_notify,
+                            enable_trade_notify: _enable_trade_notify,
+                            updated_at: _updated_at,
+                            created_at: _created_at,
+                            id,
+                            ...rest
+                          } = row.original;
+                          await updateUserBasicInfo({
+                            user_id: id,
+                            ...rest,
+                            remark,
+                          } as unknown as API.UpdateUserBasiceInfoRequest);
+                          toast.success(t('updateSuccess'));
+                          ref.current?.refresh();
+                        }}
+                    />
+                  </PopoverContent>
+                </Popover>
               </div>
             );
           },
         },
-        {
+       /* {
           id: "balance",
           accessorKey: "balance",
           header: t("balance", "Balance"),
@@ -290,7 +370,7 @@ export default function User() {
           cell: ({ row }) => (
             <Display type="currency" value={row.getValue("gift_amount")} />
           ),
-        },
+        },*/
         {
           id: "commission",
           accessorKey: "commission",
@@ -531,12 +611,11 @@ function UserSearchBar({
         }}
         value={searchType}
       >
-        <SelectTrigger className="w-24">
+        <SelectTrigger className="w-48">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="email">{t("email", "Email")}</SelectItem>
-          <SelectItem value="device">{t("deviceSearch", "Device")}</SelectItem>
+          <SelectItem value="email">设备码/邮箱</SelectItem>
           <SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
           <SelectItem value="subscribe_id">
             {t("subscription", "Subscription")}

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>
+    </>
+  );
+}

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"
 }

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": "提现申请已提交"
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -9,29 +10,146 @@ import {
   CardHeader,
   CardTitle,
 } from "@workspace/ui/components/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@workspace/ui/components/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@workspace/ui/components/form";
+import { Input } from "@workspace/ui/components/input";
+import { Textarea } from "@workspace/ui/components/textarea";
+import type { ProListActions } from "@workspace/ui/composed/pro-list/pro-list";
 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 { unitConversion } from "@workspace/ui/utils/unit-conversions";
 import { Copy } from "lucide-react";
+import { useRef, useState, useTransition } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
+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 { useGlobalStore } from "@/stores/global";
 
+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",
+      };
+    default:
+      return {
+        label: t("withdrawal.status.pending", "Pending"),
+        className: "bg-amber-500/10 text-amber-600",
+      };
+  }
+}
+
 export default function Affiliate() {
   const { t } = useTranslation("affiliate");
-  const { user, common } = useGlobalStore();
-  const { data } = useQuery({
+  const { user, common, getUserInfo } = useGlobalStore();
+  const [withdrawalOpen, setWithdrawalOpen] = useState(false);
+  const [submitting, startTransition] = useTransition();
+  const withdrawalListActionRef = useRef<ProListActions | undefined>(undefined);
+
+  const affiliateQuery = useQuery({
     queryKey: ["queryUserAffiliate"],
     queryFn: async () => {
       const response = await queryUserAffiliate();
       return response.data.data;
     },
   });
+  const availableCommission = Number(
+    user?.commission ?? affiliateQuery.data?.total_commission ?? 0
+  );
+  const withdrawalFormSchema = z.object({
+    amount: z
+      .number()
+      .int(t("withdrawal.validation.amountInvalid", "Amount is invalid"))
+      .positive(
+        t(
+          "withdrawal.validation.amountPositive",
+          "Amount must be greater than 0"
+        )
+      )
+      .max(
+        availableCommission,
+        t(
+          "withdrawal.validation.amountExceeded",
+          "Amount cannot exceed available commission"
+        )
+      ),
+    content: z
+      .string()
+      .trim()
+      .min(
+        1,
+        t(
+          "withdrawal.validation.contentRequired",
+          "Withdrawal info is required"
+        )
+      )
+      .max(
+        1000,
+        t("withdrawal.validation.contentTooLong", "Withdrawal info is too long")
+      ),
+  });
+  const withdrawalForm = useForm<z.infer<typeof withdrawalFormSchema>>({
+    resolver: zodResolver(withdrawalFormSchema),
+    defaultValues: {
+      amount: 0,
+      content: "",
+    },
+  });
+
+  const submitWithdrawal = (values: z.infer<typeof withdrawalFormSchema>) => {
+    startTransition(async () => {
+      await commissionWithdraw({
+        amount: values.amount,
+        content: values.content.trim(),
+      });
+      toast.success(
+        t("withdrawal.submitSuccess", "Withdrawal request submitted")
+      );
+      await Promise.all([
+        affiliateQuery.refetch(),
+        getUserInfo(),
+        withdrawalListActionRef.current?.refresh(),
+      ]);
+      setWithdrawalOpen(false);
+      withdrawalForm.reset({
+        amount: 0,
+        content: "",
+      });
+    });
+  };
 
   return (
     <div className="flex flex-col gap-4">
@@ -43,16 +161,147 @@ export default function Affiliate() {
           </CardDescription>
         </CardHeader>
         <CardContent>
+          <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
             <div className="flex items-baseline gap-2">
               <span className="font-bold text-3xl">
-              <Display type="currency" value={data?.total_commission} />
+                <Display
+                  type="currency"
+                  value={affiliateQuery.data?.total_commission}
+                />
               </span>
               <span className="text-muted-foreground text-sm">
                 ({t("commissionRate", "Commission Rate")}:{" "}
-              {user?.referral_percentage || common?.invite?.referral_percentage}
+                {user?.referral_percentage ||
+                  common?.invite?.referral_percentage}
                 %)
               </span>
             </div>
+            <div className="flex flex-col items-start gap-2 md:items-end">
+              <div className="text-muted-foreground text-sm">
+                {t(
+                  "withdrawal.availableCommission",
+                  "Available for withdrawal"
+                )}
+              </div>
+              <div className="font-semibold text-xl">
+                <Display type="currency" value={availableCommission} />
+              </div>
+              <Dialog onOpenChange={setWithdrawalOpen} open={withdrawalOpen}>
+                <DialogTrigger asChild>
+                  <Button>
+                    {t("withdrawal.apply", "Apply for Withdrawal")}
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>
+                      {t("withdrawal.applyTitle", "Apply for Withdrawal")}
+                    </DialogTitle>
+                    <DialogDescription>
+                      {t(
+                        "withdrawal.applyDescription",
+                        "Enter the withdrawal amount and payout details."
+                      )}
+                    </DialogDescription>
+                  </DialogHeader>
+                  <Form {...withdrawalForm}>
+                    <form
+                      className="space-y-4"
+                      id="withdrawal-form"
+                      onSubmit={withdrawalForm.handleSubmit(submitWithdrawal)}
+                    >
+                      <FormField
+                        control={withdrawalForm.control}
+                        name="amount"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t("withdrawal.amount", "Amount")}
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                inputMode="decimal"
+                                min="0"
+                                onChange={(event) => {
+                                  const cents = unitConversion(
+                                    "dollarsToCents",
+                                    Number(event.target.value || 0)
+                                  );
+                                  field.onChange(Number(cents) || 0);
+                                }}
+                                placeholder={t(
+                                  "withdrawal.amountPlaceholder",
+                                  "Enter withdrawal amount"
+                                )}
+                                step="0.01"
+                                type="number"
+                                value={
+                                  field.value
+                                    ? unitConversion(
+                                        "centsToDollars",
+                                        Number(field.value)
+                                      )
+                                    : ""
+                                }
+                              />
+                            </FormControl>
+                            <p className="text-muted-foreground text-xs">
+                              {t("withdrawal.amountHint", "Available")}:{" "}
+                              <Display
+                                type="currency"
+                                value={availableCommission}
+                              />
+                            </p>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={withdrawalForm.control}
+                        name="content"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t("withdrawal.content", "Payout Information")}
+                            </FormLabel>
+                            <FormControl>
+                              <Textarea
+                                placeholder={t(
+                                  "withdrawal.contentPlaceholder",
+                                  "Bank account, wallet address, recipient name, or other payout details"
+                                )}
+                                rows={4}
+                                {...field}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </form>
+                  </Form>
+                  <DialogFooter>
+                    <Button
+                      disabled={submitting}
+                      onClick={() => setWithdrawalOpen(false)}
+                      variant="outline"
+                    >
+                      {t("withdrawal.cancel", "Cancel")}
+                    </Button>
+                    <Button
+                      disabled={submitting || availableCommission <= 0}
+                      form="withdrawal-form"
+                      type="submit"
+                    >
+                      {submitting
+                        ? t("withdrawal.submitting", "Submitting...")
+                        : t("withdrawal.submit", "Submit Withdrawal")}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
         </CardContent>
       </Card>
       <Card>
@@ -82,6 +331,67 @@ 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>
+                  <span
+                    className={`inline-flex rounded-full px-3 py-1 font-medium text-xs ${statusMeta.className}`}
+                  >
+                    {statusMeta.label}
+                  </span>
+                </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.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>
+                  ) : null}
+                </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"),

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",

packages/ui/src/components/popover.tsx

@@ -43,5 +43,6 @@ function PopoverAnchor({
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
+const PopoverClose = PopoverPrimitive.Close;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };

packages/ui/src/composed/confirm-button.tsx

@@ -17,7 +17,7 @@ import type { ReactNode } from "react";
 interface ConfirmationButtonProps {
   trigger: ReactNode;
   title: string;
-  description: string;
+  description: ReactNode;
   onConfirm: () => void | Promise<void>;
   cancelText?: string;
   confirmText?: string;
@@ -36,7 +36,13 @@ export const ConfirmButton: React.FC<ConfirmationButtonProps> = ({
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>{title}</AlertDialogTitle>
-        <AlertDialogDescription>{description}</AlertDialogDescription>
+        <AlertDialogDescription asChild>
+          {typeof description === "string" ? (
+            <span>{description}</span>
+          ) : (
+            <div>{description}</div>
+          )}
+        </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <AlertDialogCancel>{cancelText}</AlertDialogCancel>

packages/ui/src/services/admin/index.ts

@@ -22,6 +22,7 @@ import * as system from "./system";
 import * as ticket from "./ticket";
 import * as tool from "./tool";
 import * as user from "./user";
+import * as withdrawal from "./withdrawal";
 export default {
   ads,
   announcement,
@@ -43,4 +44,5 @@ export default {
   ticket,
   tool,
   user,
+  withdrawal,
 };

packages/ui/src/services/admin/order.ts

@@ -78,3 +78,21 @@ export async function activateOrder(
     }
   );
 }
+
+/** Refund order POST /v1/admin/order/refund */
+export async function refundOrder(
+  body: API.RefundOrderRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: any }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/order/refund`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}

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

@@ -28,6 +28,21 @@ declare namespace API {
     updated_at: number;
   };
 
+  type AdminWithdrawalLog = {
+    id: number;
+    user_id: number;
+    amount: number;
+    content: string;
+    status: number;
+    reason?: string;
+    created_at: number;
+    updated_at: number;
+  };
+
+  type ApproveWithdrawalRequest = {
+    withdrawal_id: number;
+  };
+
   type AnyTLS = {
     port: number;
     security_config: SecurityConfig;
@@ -71,6 +86,18 @@ declare namespace API {
     is_default: boolean;
   };
 
+  type GetWithdrawalListParams = {
+    page: number;
+    size: number;
+    user_id?: number;
+    status?: number;
+  };
+
+  type GetWithdrawalListResponse = {
+    list: AdminWithdrawalLog[];
+    total: number;
+  };
+
   type AppUserSubcbribe = {
     id: number;
     name: string;
@@ -106,6 +133,10 @@ declare namespace API {
     port: number;
   };
 
+  type ApproveWithdrawalRequest = {
+    withdrawal_id: number;
+  };
+
   type AuthConfig = {
     mobile: MobileAuthenticateConfig;
     email: EmailAuthticateConfig;
@@ -1154,6 +1185,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;
@@ -1423,6 +1466,7 @@ declare namespace API {
     fee_amount: number;
     trade_no: string;
     status: number;
+    status_name?: string;
     subscribe_id: number;
     created_at: number;
     updated_at: number;
@@ -1446,6 +1490,7 @@ declare namespace API {
     fee_amount: number;
     trade_no: string;
     status: number;
+    status_name?: string;
     subscribe_id: number;
     subscribe: Subscribe;
     created_at: number;
@@ -1756,6 +1801,11 @@ declare namespace API {
     total: number;
   };
 
+  type RejectWithdrawalRequest = {
+    withdrawal_id: number;
+    reason: string;
+  };
+
   type QuotaTask = {
     id: number;
     subscribers: number[];
@@ -2438,6 +2488,7 @@ declare namespace API {
     group_locked: boolean;
     auth_methods: UserAuthMethod[];
     user_devices: UserDevice[];
+    remark: string;
     rules: string[];
     created_at: number;
     updated_at: number;
@@ -2726,6 +2777,11 @@ declare namespace API {
     order_no: string;
   };
 
+  type RefundOrderRequest = {
+    id: number;
+    reason?: string;
+  };
+
   type RedemptionCode = {
     id: number;
     code: string;
@@ -3046,6 +3102,11 @@ declare namespace API {
     confirm: boolean;
   };
 
+  type RejectWithdrawalRequest = {
+    withdrawal_id: number;
+    reason: string;
+  };
+
   type PreviewUserNodesRequest = {
     user_id: number;
   };
@@ -3063,4 +3124,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;
+  };
 }

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 || {}),
+    }
+  );
+}

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

@@ -846,6 +846,14 @@ declare namespace API {
     order_no: string;
   };
 
+  type RedeemCodeRequest = {
+    code: string;
+  };
+
+  type RedeemCodeResponse = {
+    message: string;
+  };
+
   type RegisterConfig = {
     stop_register: boolean;
     enable_trial: boolean;

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

@@ -251,6 +251,24 @@ export async function updateUserPassword(
   );
 }
 
+/** Redeem Code POST /v1/public/redemption/ */
+export async function redeemCode(
+  body: API.RedeemCodeRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: API.RedeemCodeResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/public/redemption/`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
 /** Update User Rules PUT /v1/public/user/rules */
 export async function updateUserRules(
   body: API.UpdateUserRulesRequest,