feat: 新增提现申请与提现管理页面

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