新功能(#93): 新增管理后台邀请管理页面
新增 /dashboard/invite-management 页面，调用 GET /v1/admin/invite/list 接口展示全局邀请关系列表。 包含邀请人/被邀请人信息、状态、佣金、赠送天数等列，支持关键词和 ID 筛选、分页。 附带修复提现页收款码图片缺少 width/height 的 lint 问题。
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { cleanup, render, screen, waitFor } from "@testing-library/react";
|
||||
import { getAdminInviteList } from "@workspace/ui/services/admin/invite";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import InviteManagement from ".";
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (
|
||||
_key: string,
|
||||
fallback: string,
|
||||
options?: { count?: number }
|
||||
): string => {
|
||||
if (typeof options?.count === "number") {
|
||||
return `${options.count} days`;
|
||||
}
|
||||
return fallback;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/stores/global", () => ({
|
||||
useGlobalStore: () => ({
|
||||
common: {
|
||||
currency: {
|
||||
currency_symbol: "$",
|
||||
},
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/utils/common", () => ({
|
||||
formatDate: (timestamp: number) => `date-${timestamp}`,
|
||||
}));
|
||||
|
||||
vi.mock("@workspace/ui/services/admin/invite", () => ({
|
||||
getAdminInviteList: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockedGetAdminInviteList = vi.mocked(getAdminInviteList);
|
||||
|
||||
function createInviteListResponse(
|
||||
data: API.GetAdminInviteListResponse
|
||||
): AxiosResponse<API.Response & { data?: API.GetAdminInviteListResponse }> {
|
||||
return {
|
||||
data: {
|
||||
code: 200,
|
||||
data,
|
||||
},
|
||||
status: 200,
|
||||
statusText: "OK",
|
||||
headers: {},
|
||||
config: {
|
||||
headers: {} as AxiosResponse["config"]["headers"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.setItem("timezone", "UTC");
|
||||
});
|
||||
|
||||
describe("InviteManagement", () => {
|
||||
it("renders invite rows with status, purchase state, commission, and gift days", async () => {
|
||||
mockedGetAdminInviteList.mockResolvedValue(
|
||||
createInviteListResponse({
|
||||
total: 1,
|
||||
list: [
|
||||
{
|
||||
inviter_id: 10,
|
||||
inviter_identifier: "agent@example.com",
|
||||
invitee_id: 123,
|
||||
invitee_identifier: "user@example.com",
|
||||
invitee_avatar: "",
|
||||
invitee_enable: true,
|
||||
invited_at: 1_716_800_000,
|
||||
order_count: 3,
|
||||
has_purchased: true,
|
||||
inviter_commission: 1500,
|
||||
inviter_gift_days: 30,
|
||||
invitee_gift_days: 7,
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
render(<InviteManagement />);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(mockedGetAdminInviteList).toHaveBeenCalledWith({
|
||||
page: 1,
|
||||
size: 200,
|
||||
search: undefined,
|
||||
inviter_id: undefined,
|
||||
invitee_id: undefined,
|
||||
})
|
||||
);
|
||||
|
||||
expect(await screen.findByText("agent@example.com")).not.toBeNull();
|
||||
expect(screen.getByText("user@example.com")).not.toBeNull();
|
||||
expect(screen.getByText("Enabled")).not.toBeNull();
|
||||
expect(screen.getByText("Yes")).not.toBeNull();
|
||||
expect(screen.getByText("$15.00")).not.toBeNull();
|
||||
expect(screen.getByText("30 days")).not.toBeNull();
|
||||
expect(screen.getByText("7 days")).not.toBeNull();
|
||||
expect(screen.getByText("date-1716800000")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("shows the empty state when the API returns no rows", async () => {
|
||||
mockedGetAdminInviteList.mockResolvedValue(
|
||||
createInviteListResponse({
|
||||
total: 0,
|
||||
list: [],
|
||||
})
|
||||
);
|
||||
|
||||
render(<InviteManagement />);
|
||||
|
||||
expect(await screen.findByText("No invite records")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("keeps the table empty when the request fails", async () => {
|
||||
mockedGetAdminInviteList.mockRejectedValue(new Error("network failed"));
|
||||
|
||||
render(<InviteManagement />);
|
||||
|
||||
await waitFor(() => expect(mockedGetAdminInviteList).toHaveBeenCalled());
|
||||
expect(await screen.findByText("No invite records")).not.toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,196 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@workspace/ui/components/avatar";
|
||||
import { Badge } from "@workspace/ui/components/badge";
|
||||
import Empty from "@workspace/ui/composed/empty";
|
||||
import {
|
||||
ProTable,
|
||||
type ProTableActions,
|
||||
} from "@workspace/ui/composed/pro-table/pro-table";
|
||||
import { getAdminInviteList } from "@workspace/ui/services/admin/invite";
|
||||
import { useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Display } from "@/components/display";
|
||||
import { formatDate } from "@/utils/common";
|
||||
|
||||
type InviteFilters = {
|
||||
search?: string;
|
||||
inviter_id?: string;
|
||||
invitee_id?: string;
|
||||
};
|
||||
|
||||
function toOptionalNumber(value?: string) {
|
||||
if (!value) return;
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : undefined;
|
||||
}
|
||||
|
||||
function InviteUserCell({
|
||||
id,
|
||||
identifier,
|
||||
avatar,
|
||||
}: {
|
||||
id: number;
|
||||
identifier: string;
|
||||
avatar?: string;
|
||||
}) {
|
||||
const fallback = identifier?.charAt(0)?.toUpperCase() || "U";
|
||||
|
||||
return (
|
||||
<div className="flex min-w-48 items-center gap-2">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage alt={identifier || `#${id}`} src={avatar} />
|
||||
<AvatarFallback className="text-xs">{fallback}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium text-sm">#{id}</div>
|
||||
<div className="max-w-52 truncate text-muted-foreground text-xs">
|
||||
{identifier || "--"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InviteIdentifierCell({
|
||||
id,
|
||||
identifier,
|
||||
}: {
|
||||
id: number;
|
||||
identifier: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-w-44">
|
||||
<div className="font-medium text-sm">#{id}</div>
|
||||
<div className="max-w-52 truncate text-muted-foreground text-xs">
|
||||
{identifier || "--"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function InviteManagement() {
|
||||
const { t } = useTranslation("invite");
|
||||
const ref = useRef<ProTableActions>(null);
|
||||
|
||||
return (
|
||||
<ProTable<API.AdminInviteRelation, InviteFilters>
|
||||
action={ref}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: "inviter_id",
|
||||
header: t("inviter", "Inviter"),
|
||||
cell: ({ row }) => (
|
||||
<InviteIdentifierCell
|
||||
id={row.original.inviter_id}
|
||||
identifier={row.original.inviter_identifier}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "invitee_id",
|
||||
header: t("invitee", "Invitee"),
|
||||
cell: ({ row }) => (
|
||||
<InviteUserCell
|
||||
avatar={row.original.invitee_avatar}
|
||||
id={row.original.invitee_id}
|
||||
identifier={row.original.invitee_identifier}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "invitee_enable",
|
||||
header: t("status", "Status"),
|
||||
cell: ({ row }) => (
|
||||
<Badge
|
||||
variant={row.original.invitee_enable ? "default" : "secondary"}
|
||||
>
|
||||
{row.original.invitee_enable
|
||||
? t("enabled", "Enabled")
|
||||
: t("disabled", "Disabled")}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "invited_at",
|
||||
header: t("invitedAt", "Invited At"),
|
||||
cell: ({ row }) => formatDate(row.original.invited_at),
|
||||
},
|
||||
{
|
||||
accessorKey: "order_count",
|
||||
header: t("orderCount", "Orders"),
|
||||
},
|
||||
{
|
||||
accessorKey: "has_purchased",
|
||||
header: t("hasPurchased", "Purchased"),
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={row.original.has_purchased ? "default" : "outline"}>
|
||||
{row.original.has_purchased ? t("yes", "Yes") : t("no", "No")}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "inviter_commission",
|
||||
header: t("commission", "Commission"),
|
||||
cell: ({ row }) => (
|
||||
<Display type="currency" value={row.original.inviter_commission} />
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "inviter_gift_days",
|
||||
header: t("inviterGiftDays", "Inviter Gift Days"),
|
||||
cell: ({ row }) =>
|
||||
t("days", "{{count}} days", {
|
||||
count: row.original.inviter_gift_days,
|
||||
}),
|
||||
},
|
||||
{
|
||||
accessorKey: "invitee_gift_days",
|
||||
header: t("inviteeGiftDays", "Invitee Gift Days"),
|
||||
cell: ({ row }) =>
|
||||
t("days", "{{count}} days", {
|
||||
count: row.original.invitee_gift_days,
|
||||
}),
|
||||
},
|
||||
]}
|
||||
empty={<Empty description={t("empty", "No invite records")} />}
|
||||
header={{ title: t("title", "Invite Management") }}
|
||||
params={[
|
||||
{
|
||||
key: "search",
|
||||
placeholder: t("searchPlaceholder", "Email or phone"),
|
||||
},
|
||||
{
|
||||
key: "inviter_id",
|
||||
placeholder: t("inviterId", "Inviter ID"),
|
||||
},
|
||||
{
|
||||
key: "invitee_id",
|
||||
placeholder: t("inviteeId", "Invitee ID"),
|
||||
},
|
||||
]}
|
||||
request={async (pagination, filters) => {
|
||||
const { data } = await getAdminInviteList({
|
||||
page: pagination.page,
|
||||
size: pagination.size,
|
||||
search: filters.search?.trim() || undefined,
|
||||
inviter_id: toOptionalNumber(filters.inviter_id),
|
||||
invitee_id: toOptionalNumber(filters.invitee_id),
|
||||
});
|
||||
|
||||
return {
|
||||
list:
|
||||
data.data?.list.map((item) => ({
|
||||
...item,
|
||||
id: `${item.inviter_id}-${item.invitee_id}-${item.invited_at}`,
|
||||
})) || [],
|
||||
total: data.data?.total || 0,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -68,13 +68,21 @@ function QrCodeCell({ url }: { url?: string }) {
|
||||
<img
|
||||
alt="收款码"
|
||||
className="h-12 w-12 cursor-zoom-in object-cover"
|
||||
height={48}
|
||||
src={url}
|
||||
width={48}
|
||||
/>
|
||||
</button>
|
||||
{zoomOpen && (
|
||||
<Dialog onOpenChange={setZoomOpen} open={zoomOpen}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<img alt="收款码" className="w-full" src={url} />
|
||||
<img
|
||||
alt="收款码"
|
||||
className="w-full"
|
||||
height={320}
|
||||
src={url}
|
||||
width={320}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
@@ -238,9 +246,7 @@ export default function WithdrawalPage() {
|
||||
{
|
||||
accessorKey: "qr_code_url",
|
||||
header: "收款码",
|
||||
cell: ({ row }) => (
|
||||
<QrCodeCell url={row.original.qr_code_url} />
|
||||
),
|
||||
cell: ({ row }) => <QrCodeCell url={row.original.qr_code_url} />,
|
||||
},
|
||||
{
|
||||
accessorKey: "content",
|
||||
|
||||
Reference in New Issue
Block a user