Compare commits

..

7 Commits

Author SHA1 Message Date
shanshanzhong147 511ce4ff65 Merge branch 'internal' into main
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-06-23 08:49:48 -07:00
shanshanzhong147 64fe23f877 fix: show user subscription speed override
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-06-11 02:39:16 -07:00
shanshanzhong147 09c5216f60 修复(#14): 调整 USDT 提现方式枚举口径
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-06-09 06:37:15 -07:00
shanshanzhong147 4d84095af2 修复(#14): 支持 USDT 提现方式展示 2026-06-09 06:37:14 -07:00
shanshanzhong147 d66b664198 修复(#122): 补齐促销价档位提交
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-05-29 02:36:30 -07:00
shanshanzhong147 a7d89acc7f 新功能(#113): 发布促销管理后台页面到main
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-05-29 00:40:33 -07:00
shanshanzhong147 2a3d5a3234 修复(#117): 补齐用户订阅限速配置 UI
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-05-29 00:31:56 -07:00
31 changed files with 1288 additions and 365 deletions
@@ -29,5 +29,6 @@
"users": "Users", "users": "Users",
"userTitle": "User Statistics", "userTitle": "User Statistics",
"userTraffic": "User Traffic", "userTraffic": "User Traffic",
"withdrawalManagement": "Withdrawal Management",
"yesterday": "Yesterday" "yesterday": "Yesterday"
} }
@@ -22,10 +22,13 @@
"inactiveMonthsPlaceholder": "Months without purchase", "inactiveMonthsPlaceholder": "Months without purchase",
"name": "Name", "name": "Name",
"namePlaceholder": "Rule name", "namePlaceholder": "Rule name",
"noDiscounts": "This subscribe has no discount quantities and cannot be configured.",
"promoPriceLessThanOriginalPrice": "Promo price must be lower than original price",
"promoPriceLessThanUnitPrice": "Promo price must be lower than unit price", "promoPriceLessThanUnitPrice": "Promo price must be lower than unit price",
"selectEndTime": "Select time", "selectEndTime": "Select time",
"selectRule": "Select rule", "selectRule": "Select rule",
"selectStartTime": "Select time", "selectStartTime": "Select time",
"selectQuantity": "Select discount quantity",
"selectSubscribe": "Select subscribe", "selectSubscribe": "Select subscribe",
"type": "Rule Type", "type": "Rule Type",
"windowHours": "Window Hours", "windowHours": "Window Hours",
@@ -38,10 +41,12 @@
"name": "Name", "name": "Name",
"no": "No", "no": "No",
"orderNo": "Order No.", "orderNo": "Order No.",
"originalPriceHint": "Original price",
"params": "Params", "params": "Params",
"prices": "Prices", "prices": "Prices",
"priority": "Priority", "priority": "Priority",
"promoPrice": "Promo Price", "promoPrice": "Promo Price",
"quantity": "Quantity",
"rule": "Rule", "rule": "Rule",
"ruleDetail": "Rule Detail", "ruleDetail": "Rule Detail",
"rules": "Rules", "rules": "Rules",
@@ -100,10 +100,12 @@
"manager": "Administrator", "manager": "Administrator",
"memberCount": "Member Count", "memberCount": "Member Count",
"more": "More", "more": "More",
"neverLoggedIn": "Never logged in",
"normal": "Normal", "normal": "Normal",
"next": "Next", "next": "Next",
"noInvitedUsers": "No invited users yet", "noInvitedUsers": "No invited users yet",
"notifySettingsTitle": "Notify Settings", "notifySettingsTitle": "Notify Settings",
"inactive": "Inactive",
"offline": "Offline", "offline": "Offline",
"online": "Online", "online": "Online",
"onlineDevices": "Online Devices", "onlineDevices": "Online Devices",
@@ -189,6 +191,7 @@
"groupUpdated": "Group updated successfully", "groupUpdated": "Group updated successfully",
"upload": "Upload", "upload": "Upload",
"uploadTraffic": "Upload Traffic", "uploadTraffic": "Upload Traffic",
"userStatus": "User Status",
"userAgent": "User Agent", "userAgent": "User Agent",
"userEmail": "Email", "userEmail": "Email",
"userEmailPlaceholder": "Enter email", "userEmailPlaceholder": "Enter email",
@@ -198,6 +201,7 @@
"userName": "Username", "userName": "Username",
"userProfile": "User Profile", "userProfile": "User Profile",
"userGroup": "User Group", "userGroup": "User Group",
"active": "Active",
"verified": "Verified", "verified": "Verified",
"viewDeviceGroup": "View Device Group", "viewDeviceGroup": "View Device Group",
"viewOwner": "View Owner", "viewOwner": "View Owner",
@@ -29,5 +29,6 @@
"users": "用户", "users": "用户",
"userTitle": "用户统计", "userTitle": "用户统计",
"userTraffic": "用户流量", "userTraffic": "用户流量",
"withdrawalManagement": "提现管理",
"yesterday": "昨日" "yesterday": "昨日"
} }
@@ -22,10 +22,13 @@
"inactiveMonthsPlaceholder": "未购买的月数", "inactiveMonthsPlaceholder": "未购买的月数",
"name": "名称", "name": "名称",
"namePlaceholder": "规则名称", "namePlaceholder": "规则名称",
"noDiscounts": "该订阅没有 discount 档位,不能配置促销价。",
"promoPriceLessThanOriginalPrice": "促销价必须低于原价",
"promoPriceLessThanUnitPrice": "促销价必须低于原价", "promoPriceLessThanUnitPrice": "促销价必须低于原价",
"selectEndTime": "选择时间", "selectEndTime": "选择时间",
"selectRule": "选择规则", "selectRule": "选择规则",
"selectStartTime": "选择时间", "selectStartTime": "选择时间",
"selectQuantity": "选择 discount 档位",
"selectSubscribe": "选择订阅", "selectSubscribe": "选择订阅",
"type": "规则类型", "type": "规则类型",
"windowHours": "新用户窗口小时数", "windowHours": "新用户窗口小时数",
@@ -38,10 +41,12 @@
"name": "名称", "name": "名称",
"no": "否", "no": "否",
"orderNo": "订单号", "orderNo": "订单号",
"originalPriceHint": "原价",
"params": "参数", "params": "参数",
"prices": "商品促销价", "prices": "商品促销价",
"priority": "优先级", "priority": "优先级",
"promoPrice": "促销价", "promoPrice": "促销价",
"quantity": "档位",
"rule": "规则", "rule": "规则",
"ruleDetail": "规则详情", "ruleDetail": "规则详情",
"rules": "促销规则", "rules": "促销规则",
@@ -101,10 +101,12 @@
"manager": "管理员", "manager": "管理员",
"memberCount": "成员数量", "memberCount": "成员数量",
"more": "更多", "more": "更多",
"neverLoggedIn": "从未登录",
"normal": "正常", "normal": "正常",
"next": "下一页", "next": "下一页",
"noInvitedUsers": "暂无邀请用户", "noInvitedUsers": "暂无邀请用户",
"notifySettingsTitle": "通知设置", "notifySettingsTitle": "通知设置",
"inactive": "未活跃",
"offline": "离线", "offline": "离线",
"online": "在线", "online": "在线",
"onlineDevices": "在线设备", "onlineDevices": "在线设备",
@@ -190,6 +192,7 @@
"groupUpdated": "分组更新成功", "groupUpdated": "分组更新成功",
"upload": "上传", "upload": "上传",
"uploadTraffic": "上传流量", "uploadTraffic": "上传流量",
"userStatus": "用户状态",
"userAgent": "用户代理", "userAgent": "用户代理",
"userEmail": "邮箱", "userEmail": "邮箱",
"userEmailPlaceholder": "输入邮箱", "userEmailPlaceholder": "输入邮箱",
@@ -199,6 +202,7 @@
"userName": "用户名", "userName": "用户名",
"userProfile": "用户资料", "userProfile": "用户资料",
"userGroup": "用户分组", "userGroup": "用户分组",
"active": "活跃",
"verified": "已验证", "verified": "已验证",
"viewDeviceGroup": "查看设备组", "viewDeviceGroup": "查看设备组",
"viewOwner": "查看所有者", "viewOwner": "查看所有者",
@@ -241,11 +241,11 @@ export default function Statistics() {
iconBg: "bg-green-100 dark:bg-green-900/30", iconBg: "bg-green-100 dark:bg-green-900/30",
}, },
{ {
title: t("pendingTickets", "Pending Tickets"), title: t("withdrawalManagement", "提现管理"),
value: TicketTotal || 0, value: TicketTotal || 0,
subtitle: t("pending", "Pending"), subtitle: t("pending", "Pending"),
icon: "uil:clipboard-notes", icon: "uil:clipboard-notes",
href: "/dashboard/ticket", href: "/dashboard/withdrawal",
color: "text-red-600 dark:text-red-400", color: "text-red-600 dark:text-red-400",
iconBg: "bg-red-100 dark:bg-red-900/30", iconBg: "bg-red-100 dark:bg-red-900/30",
}, },
+23 -12
View File
@@ -46,7 +46,7 @@ type RuleFilters = {
}; };
type PriceFilters = { type PriceFilters = {
rule_id?: string; promo_rule_id?: string;
subscribe_id?: string; subscribe_id?: string;
}; };
@@ -301,12 +301,13 @@ export default function PromoPage() {
}} }}
columns={[ columns={[
{ {
accessorKey: "rule_id", accessorKey: "promo_rule_id",
header: t("rule", "Rule"), header: t("rule", "Rule"),
cell: ({ row }) => cell: ({ row }) =>
row.original.rule_id row.original.promo_rule_id
? rules.find((rule) => rule.id === row.original.rule_id) ? rules.find(
?.name || `#${row.original.rule_id}` (rule) => rule.id === row.original.promo_rule_id
)?.name || `#${row.original.promo_rule_id}`
: "--", : "--",
}, },
{ {
@@ -316,6 +317,11 @@ export default function PromoPage() {
row.original.subscribe_name || row.original.subscribe_name ||
getSubscribeName(row.original.subscribe_id), getSubscribeName(row.original.subscribe_id),
}, },
{
accessorKey: "quantity",
header: t("quantity", "Quantity"),
cell: ({ row }) => row.original.quantity || "--",
},
{ {
accessorKey: "unit_price", accessorKey: "unit_price",
header: t("unitPrice", "Unit Price"), header: t("unitPrice", "Unit Price"),
@@ -361,7 +367,7 @@ export default function PromoPage() {
}} }}
params={[ params={[
{ {
key: "rule_id", key: "promo_rule_id",
placeholder: t("rule", "Rule"), placeholder: t("rule", "Rule"),
options: rules.map((rule) => ({ options: rules.map((rule) => ({
label: rule.name, label: rule.name,
@@ -382,7 +388,7 @@ export default function PromoPage() {
request={async (pagination, filters) => { request={async (pagination, filters) => {
const { data } = await getPromoPriceList({ const { data } = await getPromoPriceList({
...pagination, ...pagination,
rule_id: parseOptionalNumber(filters.rule_id), promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
subscribe_id: parseOptionalNumber(filters.subscribe_id), subscribe_id: parseOptionalNumber(filters.subscribe_id),
}); });
return { return {
@@ -398,13 +404,13 @@ export default function PromoPage() {
action={usageRef} action={usageRef}
columns={[ columns={[
{ {
accessorKey: "rule_id", accessorKey: "promo_rule_id",
header: t("rule", "Rule"), header: t("rule", "Rule"),
cell: ({ row }) => cell: ({ row }) =>
row.original.rule_name || row.original.rule_name ||
rules.find((rule) => rule.id === row.original.rule_id) rules.find((rule) => rule.id === row.original.promo_rule_id)
?.name || ?.name ||
`#${row.original.rule_id}`, `#${row.original.promo_rule_id}`,
}, },
{ {
accessorKey: "user_id", accessorKey: "user_id",
@@ -418,6 +424,11 @@ export default function PromoPage() {
row.original.subscribe_name || row.original.subscribe_name ||
getSubscribeName(row.original.subscribe_id), getSubscribeName(row.original.subscribe_id),
}, },
{
accessorKey: "quantity",
header: t("quantity", "Quantity"),
cell: ({ row }) => row.original.quantity || "--",
},
{ {
accessorKey: "order_no", accessorKey: "order_no",
header: t("orderNo", "Order No."), header: t("orderNo", "Order No."),
@@ -447,7 +458,7 @@ export default function PromoPage() {
} }
params={[ params={[
{ {
key: "rule_id", key: "promo_rule_id",
placeholder: t("rule", "Rule"), placeholder: t("rule", "Rule"),
options: rules.map((rule) => ({ options: rules.map((rule) => ({
label: rule.name, label: rule.name,
@@ -470,7 +481,7 @@ export default function PromoPage() {
request={async (pagination, filters) => { request={async (pagination, filters) => {
const { data } = await getPromoUsageList({ const { data } = await getPromoUsageList({
...pagination, ...pagination,
rule_id: parseOptionalNumber(filters.rule_id), promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
subscribe_id: parseOptionalNumber(filters.subscribe_id), subscribe_id: parseOptionalNumber(filters.subscribe_id),
user_id: parseOptionalNumber(filters.user_id), user_id: parseOptionalNumber(filters.user_id),
order_no: filters.order_no?.trim() || undefined, order_no: filters.order_no?.trim() || undefined,
@@ -0,0 +1,152 @@
/**
* @vitest-environment jsdom
*/
import {
cleanup,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import PriceForm from "./price-form";
globalThis.ResizeObserver = class ResizeObserver {
observe() {
return;
}
unobserve() {
return;
}
disconnect() {
return;
}
};
Element.prototype.scrollIntoView = function scrollIntoView() {
return;
};
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (_key: string, fallback: string): string => fallback,
}),
}));
const rules: API.PromoRule[] = [
{
id: 1,
name: "Campaign Rule",
type: "campaign",
params: {},
priority: 1,
enabled: true,
},
];
const subscribes: API.SubscribeItem[] = [
{
id: 8,
name: "Monthly Plan",
unit_price: 1200,
unit_time: "Month",
sold: 0,
discount: [
{
quantity: 3,
discount: 90,
},
],
},
];
const subscribesWithoutDiscounts: API.SubscribeItem[] = [
{
id: 8,
name: "Monthly Plan",
unit_price: 1200,
unit_time: "Month",
sold: 0,
discount: [],
},
];
async function selectCombobox(index: number, option: string) {
const combobox = screen.getAllByRole("combobox")[index];
if (!combobox) throw new Error(`Combobox ${index} not found`);
fireEvent.click(combobox);
fireEvent.click(await screen.findByText(option));
}
afterEach(() => {
cleanup();
vi.clearAllMocks();
});
describe("PriceForm", () => {
it("submits promo price with promo_rule_id and selected quantity item", async () => {
const onSubmit = vi.fn().mockResolvedValue(true);
render(
<PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
);
fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
await selectCombobox(0, "Campaign Rule");
await selectCombobox(1, "Monthly Plan");
await selectCombobox(2, "3 x Month");
fireEvent.change(screen.getByPlaceholderText("Enter price"), {
target: { value: "20" },
});
fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
await waitFor(() =>
expect(onSubmit).toHaveBeenCalledWith({
promo_rule_id: 1,
items: [{ subscribe_id: 8, quantity: 3, promo_price: 2000 }],
})
);
});
it("blocks submit when subscribe has no discount quantities", async () => {
const onSubmit = vi.fn();
render(
<PriceForm
onSubmit={onSubmit}
rules={rules}
subscribes={subscribesWithoutDiscounts}
/>
);
fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
await selectCombobox(1, "Monthly Plan");
expect(
screen.getByText(
"This subscribe has no discount quantities and cannot be configured."
)
).not.toBeNull();
expect(screen.getByRole("button", { name: "Confirm" })).toHaveProperty(
"disabled",
true
);
});
it("keeps the form open and shows an error when promo price reaches original price", async () => {
const onSubmit = vi.fn();
render(
<PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
);
fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
await selectCombobox(0, "Campaign Rule");
await selectCombobox(1, "Monthly Plan");
await selectCombobox(2, "3 x Month");
fireEvent.change(screen.getByPlaceholderText("Enter price"), {
target: { value: "36" },
});
fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
expect(
await screen.findByText("Promo price must be lower than original price")
).not.toBeNull();
expect(onSubmit).not.toHaveBeenCalled();
});
});
+86 -14
View File
@@ -23,11 +23,16 @@ import { useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { z } from "zod"; import { z } from "zod";
import { getSubscribeUnitPrice } from "./utils"; import {
formatCurrency,
getSubscribeDiscounts,
getSubscribeUnitPrice,
} from "./utils";
const priceSchema = z.object({ const priceSchema = z.object({
rule_id: z.number().min(1), promo_rule_id: z.number().min(1),
subscribe_id: z.number().min(1), subscribe_id: z.number().min(1),
quantity: z.number().min(1),
promo_price: z.number().min(1), promo_price: z.number().min(1),
}); });
@@ -51,26 +56,42 @@ export default function PriceForm({
const form = useForm<PriceFormValues>({ const form = useForm<PriceFormValues>({
resolver: zodResolver(priceSchema), resolver: zodResolver(priceSchema),
defaultValues: { defaultValues: {
rule_id: 0, promo_rule_id: 0,
subscribe_id: 0, subscribe_id: 0,
quantity: 0,
promo_price: 0, promo_price: 0,
}, },
}); });
const subscribeId = form.watch("subscribe_id"); const subscribeId = form.watch("subscribe_id");
const quantity = form.watch("quantity");
const subscribe = subscribes.find((item) => item.id === subscribeId); const subscribe = subscribes.find((item) => item.id === subscribeId);
const discounts = getSubscribeDiscounts(subscribe);
const unitPrice = getSubscribeUnitPrice(subscribe); const unitPrice = getSubscribeUnitPrice(subscribe);
const originalPrice = unitPrice * quantity;
const hasSelectedSubscribe = subscribeId > 0;
const hasDiscounts = discounts.length > 0;
async function handleSubmit(values: PriceFormValues) { async function handleSubmit(values: PriceFormValues) {
if (unitPrice > 0 && values.promo_price >= unitPrice) { const maxPrice = unitPrice * values.quantity;
if (maxPrice > 0 && values.promo_price >= maxPrice) {
form.setError("promo_price", { form.setError("promo_price", {
message: t( message: t(
"form.promoPriceLessThanUnitPrice", "form.promoPriceLessThanOriginalPrice",
"Promo price must be lower than unit price" "Promo price must be lower than original price"
), ),
}); });
return; return;
} }
const success = await onSubmit(values); const success = await onSubmit({
promo_rule_id: values.promo_rule_id,
items: [
{
subscribe_id: values.subscribe_id,
quantity: values.quantity,
promo_price: values.promo_price,
},
],
});
if (success) setOpen(false); if (success) setOpen(false);
} }
@@ -79,7 +100,12 @@ export default function PriceForm({
<SheetTrigger asChild> <SheetTrigger asChild>
<Button <Button
onClick={() => { onClick={() => {
form.reset({ rule_id: 0, subscribe_id: 0, promo_price: 0 }); form.reset({
promo_rule_id: 0,
subscribe_id: 0,
quantity: 0,
promo_price: 0,
});
setOpen(true); setOpen(true);
}} }}
size="sm" size="sm"
@@ -99,7 +125,7 @@ export default function PriceForm({
> >
<FormField <FormField
control={form.control} control={form.control}
name="rule_id" name="promo_rule_id"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("rule", "Rule")}</FormLabel> <FormLabel>{t("rule", "Rule")}</FormLabel>
@@ -126,7 +152,14 @@ export default function PriceForm({
<FormLabel>{t("subscribe", "Subscribe")}</FormLabel> <FormLabel>{t("subscribe", "Subscribe")}</FormLabel>
<FormControl> <FormControl>
<Combobox<number> <Combobox<number>
onChange={field.onChange} onChange={(value) => {
field.onChange(value);
form.setValue("quantity", 0, {
shouldDirty: true,
shouldValidate: true,
});
form.clearErrors(["quantity", "promo_price"]);
}}
options={subscribes options={subscribes
.filter((item) => typeof item.id === "number") .filter((item) => typeof item.id === "number")
.map((item) => ({ .map((item) => ({
@@ -144,6 +177,41 @@ export default function PriceForm({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="quantity"
render={({ field }) => (
<FormItem>
<FormLabel>{t("quantity", "Quantity")}</FormLabel>
<FormControl>
<Combobox<number>
onChange={field.onChange}
options={discounts.map((item) => ({
label: `${item.quantity} x ${t(
subscribe?.unit_time || "Month",
subscribe?.unit_time || "Month"
)}`,
value: item.quantity,
}))}
placeholder={t(
"form.selectQuantity",
"Select discount quantity"
)}
value={field.value}
/>
</FormControl>
{hasSelectedSubscribe && !hasDiscounts && (
<p className="text-destructive text-xs">
{t(
"form.noDiscounts",
"This subscribe has no discount quantities and cannot be configured."
)}
</p>
)}
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="promo_price" name="promo_price"
@@ -165,10 +233,10 @@ export default function PriceForm({
value={field.value} value={field.value}
/> />
</FormControl> </FormControl>
{unitPrice > 0 && ( {originalPrice > 0 && (
<p className="text-muted-foreground text-xs"> <p className="text-muted-foreground text-xs">
{t("unitPriceHint", "Unit price")}:{" "} {t("originalPriceHint", "Original price")}:{" "}
{unitConversion("centsToDollars", unitPrice)} {formatCurrency(originalPrice)}
</p> </p>
)} )}
<FormMessage /> <FormMessage />
@@ -178,7 +246,11 @@ export default function PriceForm({
</form> </form>
</Form> </Form>
<SheetFooter> <SheetFooter>
<Button disabled={loading} form="promo-price-form" type="submit"> <Button
disabled={loading || (hasSelectedSubscribe && !hasDiscounts)}
form="promo-price-form"
type="submit"
>
{t("confirm", "Confirm")} {t("confirm", "Confirm")}
</Button> </Button>
</SheetFooter> </SheetFooter>
+6
View File
@@ -20,3 +20,9 @@ export function parseOptionalNumber(value?: string) {
export function getSubscribeUnitPrice(subscribe?: API.SubscribeItem) { export function getSubscribeUnitPrice(subscribe?: API.SubscribeItem) {
return typeof subscribe?.unit_price === "number" ? subscribe.unit_price : 0; return typeof subscribe?.unit_price === "number" ? subscribe.unit_price : 0;
} }
export function getSubscribeDiscounts(subscribe?: API.SubscribeItem) {
return (subscribe?.discount || []).filter(
(item) => typeof item.quantity === "number" && item.quantity > 0
);
}
+124 -159
View File
@@ -1,34 +1,25 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Link, useSearch } from "@tanstack/react-router"; import { Link, useSearch } from "@tanstack/react-router";
import { Badge } from "@workspace/ui/components/badge";
import { Button } from "@workspace/ui/components/button"; import { Button } from "@workspace/ui/components/button";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger,
} from "@workspace/ui/components/dialog"; } from "@workspace/ui/components/dialog";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@workspace/ui/components/dropdown-menu"; } from "@workspace/ui/components/dropdown-menu";
import { Input } from "@workspace/ui/components/input";
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@workspace/ui/components/popover"; } from "@workspace/ui/components/popover";
import { ScrollArea } from "@workspace/ui/components/scroll-area"; import { ScrollArea } from "@workspace/ui/components/scroll-area";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@workspace/ui/components/select";
import { import {
Sheet, Sheet,
SheetContent, SheetContent,
@@ -43,7 +34,12 @@ import {
TabsList, TabsList,
TabsTrigger, TabsTrigger,
} from "@workspace/ui/components/tabs"; } from "@workspace/ui/components/tabs";
import { Combobox } from "@workspace/ui/composed/combobox"; import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@workspace/ui/components/tooltip";
// import { ConfirmButton } from "@workspace/ui/composed/confirm-button"; // import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
import { import {
ProTable, ProTable,
@@ -60,9 +56,8 @@ import {
getUserList, getUserList,
updateUserBasicInfo, updateUserBasicInfo,
} from "@workspace/ui/services/admin/user"; } from "@workspace/ui/services/admin/user";
import { parseDeviceType } from "@workspace/ui/utils/device";
import { FilePenLine } from "lucide-react"; import { FilePenLine } from "lucide-react";
import { useCallback, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { toast } from "sonner"; import { toast } from "sonner";
import { Display } from "@/components/display"; import { Display } from "@/components/display";
@@ -73,18 +68,16 @@ import { RemarkForm } from "./remark-form";
import { buildUserBasicInfoPayload } from "./user-basic-info-payload"; import { buildUserBasicInfoPayload } from "./user-basic-info-payload";
import { UserDetail } from "./user-detail"; import { UserDetail } from "./user-detail";
import UserForm from "./user-form"; import UserForm from "./user-form";
import { UserIdentifier } from "./user-identifier";
import { UserInviteStatsSheet } from "./user-invite-stats-sheet"; import { UserInviteStatsSheet } from "./user-invite-stats-sheet";
import { AuthMethodsForm } from "./user-profile/auth-methods-form"; import { AuthMethodsForm } from "./user-profile/auth-methods-form";
import { BasicInfoForm } from "./user-profile/basic-info-form"; import { BasicInfoForm } from "./user-profile/basic-info-form";
import { NotifySettingsForm } from "./user-profile/notify-settings-form"; import { NotifySettingsForm } from "./user-profile/notify-settings-form";
import { UserSearchBar } from "./user-search-bar";
import UserSubscription from "./user-subscription"; import UserSubscription from "./user-subscription";
// import EditUserGroupDialog from "./edit-user-group-dialog"; // import EditUserGroupDialog from "./edit-user-group-dialog";
type UserDeviceWithDeviceNo = API.UserDevice & {
device_no?: string;
};
export default function User() { export default function User() {
const { t } = useTranslation("user"); const { t } = useTranslation("user");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -98,6 +91,14 @@ export default function User() {
value: sp.search || sp.user_id || "", value: sp.search || sp.user_id || "",
}); });
useEffect(() => {
searchRef.current = {
type: sp.user_id ? "user_id" : "email",
value: sp.search || sp.user_id || "",
};
ref.current?.refresh();
}, [sp.search, sp.user_id]);
const handleSearch = useCallback((type: string, value: string) => { const handleSearch = useCallback((type: string, value: string) => {
searchRef.current = { type, value }; searchRef.current = { type, value };
ref.current?.refresh(); ref.current?.refresh();
@@ -151,7 +152,6 @@ export default function User() {
onChanged={() => ref.current?.refresh()} onChanged={() => ref.current?.refresh()}
userId={row.id} userId={row.id}
/>, />,
<PreviewNodesDialog key="preview-nodes" userId={row.id} />,
/* <ConfirmButton /* <ConfirmButton
cancelText={t("cancel", "Cancel")} cancelText={t("cancel", "Cancel")}
confirmText={t("confirm", "Confirm")} confirmText={t("confirm", "Confirm")}
@@ -176,6 +176,8 @@ export default function User() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<InviteStatsMenuItem userId={row.id} /> <InviteStatsMenuItem userId={row.id} />
<PreviewNodesMenuItem userId={row.id} />
<DropdownMenuSeparator />
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link search={{ user_id: row.id }} to="/dashboard/order"> <Link search={{ user_id: row.id }} to="/dashboard/order">
{t("orderList", "Order List")} {t("orderList", "Order List")}
@@ -262,62 +264,43 @@ export default function User() {
id: "auth_methods", id: "auth_methods",
accessorKey: "auth_methods", accessorKey: "auth_methods",
header: "设备码/邮箱", header: "设备码/邮箱",
cell: ({ row }) => { cell: ({ row }) => (
const method = row.original.auth_methods?.[0]; <div className="flex items-center">
const identifier = method?.auth_identifier || ""; <UserIdentifier
const isDevice = method?.auth_type === "device"; className="flex items-center"
const firstDevice = row.original.user_devices?.[0] as user={row.original}
| UserDeviceWithDeviceNo />
| undefined; <Popover>
const deviceNo = firstDevice?.device_no; <PopoverTrigger>
const deviceType = parseDeviceType(firstDevice?.user_agent || ""); <div className={"flex items-center"}>
const display = isDevice ? deviceNo || identifier : identifier; {row.original?.remark ? `${row.original.remark}` : ""}
return ( <FilePenLine className={"ml-2 text-primary"} size={14} />
<div className="flex items-center"> </div>
{/* <Badge </PopoverTrigger>
className="mr-1 uppercase" <PopoverContent className={"w-64"}>
title={method?.verified ? t("verified", "Verified") : ""} <RemarkForm
> initialRemark={row.original.remark}
{method?.auth_type} onSave={async (remark) => {
</Badge>*/} const { data } = await getUserDetail({
{deviceType && ( id: row.original.id,
<Badge className="mr-1" variant="secondary"> });
{deviceType} const user = data.data;
</Badge>
)}
<span title={isDevice ? display : undefined}>{display}</span>
<Popover>
<PopoverTrigger>
<div className={"flex items-center"}>
{row.original?.remark ? `${row.original.remark}` : ""}
<FilePenLine className={"ml-2 text-primary"} size={14} />
</div>
</PopoverTrigger>
<PopoverContent className={"w-64"}>
<RemarkForm
initialRemark={row.original.remark}
onSave={async (remark) => {
const { data } = await getUserDetail({
id: row.original.id,
});
const user = data.data;
if (!user) { if (!user) {
throw new Error("User detail not found"); throw new Error("User detail not found");
} }
await updateUserBasicInfo( await updateUserBasicInfo(
buildUserBasicInfoPayload(user, remark) buildUserBasicInfoPayload(user, remark)
); );
toast.success(t("updateSuccess")); toast.success(t("updateSuccess"));
ref.current?.refresh(); ref.current?.refresh();
}} }}
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
); ),
},
}, },
/* { /* {
id: "balance", id: "balance",
@@ -355,6 +338,48 @@ export default function User() {
header: t("referer", "Referer"), header: t("referer", "Referer"),
cell: ({ row }) => <UserDetail id={row.original.referer_id} />, cell: ({ row }) => <UserDetail id={row.original.referer_id} />,
}, },
{
id: "last_login_time",
accessorKey: "last_login_time",
header: t("userStatus", "用户状态"),
cell: ({ row }) => {
const lastLoginTime = (
row.original as API.User & {
last_login_time?: number;
}
).last_login_time;
const isOnline = Boolean(lastLoginTime);
const dotClassName = isOnline ? "bg-green-500" : "bg-gray-400";
const statusLabel = isOnline
? t("active", "Active")
: t("inactive", "Inactive");
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="inline-flex items-center gap-2">
<span
aria-hidden="true"
className={`h-2.5 w-2.5 rounded-full ${dotClassName}`}
/>
<span className="sr-only">
{isOnline
? `${statusLabel}: ${formatDate(lastLoginTime)}`
: statusLabel}
</span>
</div>
</TooltipTrigger>
<TooltipContent>
{isOnline
? formatDate(lastLoginTime)
: t("neverLoggedIn", "Never logged in")}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
},
},
{ {
id: "created_at", id: "created_at",
accessorKey: "created_at", accessorKey: "created_at",
@@ -523,6 +548,25 @@ function InviteStatsMenuItem({ userId }: { userId: number }) {
); );
} }
function PreviewNodesMenuItem({ userId }: { userId: number }) {
const { t } = useTranslation("user");
const [open, setOpen] = useState(false);
return (
<>
<DropdownMenuItem
onSelect={(e) => {
e.preventDefault();
setOpen(true);
}}
>
{t("previewNodes", "Preview Nodes")}
</DropdownMenuItem>
<PreviewNodesDialog onOpenChange={setOpen} open={open} userId={userId} />
</>
);
}
function DeviceGroupSheet({ function DeviceGroupSheet({
userId, userId,
onChanged, onChanged,
@@ -551,92 +595,16 @@ function DeviceGroupSheet({
); );
} }
function UserSearchBar({ function PreviewNodesDialog({
initialType, userId,
initialValue, open,
onSearch, onOpenChange,
subscribes,
}: { }: {
initialType: string; userId: number;
initialValue: string; open: boolean;
onSearch: (type: string, value: string) => void; onOpenChange: (open: boolean) => void;
subscribes?: API.SubscribeItem[];
}) { }) {
const { t } = useTranslation("user"); const { t } = useTranslation("user");
const [searchType, setSearchType] = useState(initialType);
const [searchValue, setSearchValue] = useState(initialValue);
return (
<div className="flex items-center gap-2">
<Select
onValueChange={(v) => {
setSearchType(v);
setSearchValue("");
}}
value={searchType}
>
<SelectTrigger className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="email">/</SelectItem>
<SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
<SelectItem value="subscribe_id">
{t("subscription", "Subscription")}
</SelectItem>
</SelectContent>
</Select>
{searchType === "subscribe_id" ? (
<Combobox
className="w-48"
onChange={(value) => {
setSearchValue(value);
onSearch("subscribe_id", value);
}}
options={subscribes?.map((item) => ({
label: item.name!,
value: String(item.id!),
}))}
placeholder={t("subscription", "Subscription")}
value={searchValue}
/>
) : (
<>
<Input
className="w-48"
onChange={(e) => setSearchValue(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" && onSearch(searchType, searchValue)
}
placeholder={t("searchInputPlaceholder", "Enter search term")}
value={searchValue}
/>
<Button
onClick={() => onSearch(searchType, searchValue)}
variant="default"
>
{t("search", "Search")}
</Button>
{searchValue && (
<Button
onClick={() => {
setSearchValue("");
onSearch(searchType, "");
}}
variant="outline"
>
{t("resetSearch", "Reset")}
</Button>
)}
</>
)}
</div>
);
}
function PreviewNodesDialog({ userId }: { userId: number }) {
const { t } = useTranslation("user");
const [open, setOpen] = useState(false);
const { data: previewData, isLoading } = useQuery({ const { data: previewData, isLoading } = useQuery({
enabled: open, enabled: open,
queryKey: ["previewUserNodes", userId], queryKey: ["previewUserNodes", userId],
@@ -647,10 +615,7 @@ function PreviewNodesDialog({ userId }: { userId: number }) {
}); });
return ( return (
<Dialog onOpenChange={setOpen} open={open}> <Dialog onOpenChange={onOpenChange} open={open}>
<DialogTrigger asChild>
<Button variant="outline">{t("previewNodes", "Preview Nodes")}</Button>
</DialogTrigger>
<DialogContent className="max-w-2xl"> <DialogContent className="max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
+2 -14
View File
@@ -16,6 +16,7 @@ import { formatBytes } from "@workspace/ui/utils/formatting";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Display } from "@/components/display"; import { Display } from "@/components/display";
import { formatDate } from "@/utils/common"; import { formatDate } from "@/utils/common";
import { UserIdentifier } from "./user-identifier";
// import EditUserGroupDialog from "./edit-user-group-dialog"; // import EditUserGroupDialog from "./edit-user-group-dialog";
// import { getUserGroupList } from "@workspace/ui/services/admin/group"; // import { getUserGroupList } from "@workspace/ui/services/admin/group";
@@ -229,26 +230,13 @@ export function UserDetail({ id }: { id: number }) {
if (!id) return "--"; if (!id) return "--";
const firstMethod = data?.auth_methods[0];
const isDevice = firstMethod?.auth_type === "device";
const deviceNo = (data as any)?.user_devices?.[0]?.device_no;
const rawIdentifier = firstMethod?.auth_identifier || "";
const identifier = isDevice ? deviceNo || rawIdentifier : rawIdentifier;
return ( return (
<HoverCard> <HoverCard>
<HoverCardTrigger asChild> <HoverCardTrigger asChild>
<Button asChild className="p-0" variant="link"> <Button asChild className="p-0" variant="link">
<Link search={{ user_id: id }} to="/dashboard/user"> <Link search={{ user_id: id }} to="/dashboard/user">
{data ? ( {data ? (
<> <UserIdentifier className="flex items-center" user={data} />
{firstMethod && (
<span className="mr-1 inline-flex items-center rounded border px-1 py-0.5 font-mono text-xs uppercase">
{firstMethod.auth_type}
</span>
)}
{identifier}
</>
) : ( ) : (
t("loading", "Loading...") t("loading", "Loading...")
)} )}
@@ -0,0 +1,101 @@
/**
* @vitest-environment jsdom
*/
import { cleanup, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";
import { getUserIdentifierParts, UserIdentifier } from "./user-identifier";
afterEach(() => {
cleanup();
});
type DeviceWithOptionalNo = API.UserDevice & { device_no?: string };
describe("getUserIdentifierParts", () => {
it("uses the device number and D label for device-auth users", () => {
expect(
getUserIdentifierParts({
auth_methods: [
{
auth_type: "device",
auth_identifier: "raw-device-id",
verified: true,
},
],
user_devices: [
{
id: 1,
ip: "127.0.0.1",
identifier: "device-id",
user_agent:
"Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)",
online: true,
enabled: true,
created_at: 0,
updated_at: 0,
device_no: "DVC-001",
} satisfies DeviceWithOptionalNo,
],
})
).toMatchObject({
authLabel: "(D)",
identifier: "DVC-001",
isDevice: true,
});
});
it("falls back to the raw identifier and E label for email-auth users", () => {
expect(
getUserIdentifierParts({
auth_methods: [
{
auth_type: "email",
auth_identifier: "user@example.com",
verified: true,
},
],
user_devices: [],
})
).toMatchObject({
authLabel: "(E)",
identifier: "user@example.com",
isDevice: false,
});
});
});
describe("UserIdentifier", () => {
it("renders the compact auth label and visible identifier", () => {
render(
<UserIdentifier
user={{
auth_methods: [
{
auth_type: "email",
auth_identifier: "referrer@example.com",
verified: true,
},
],
user_devices: [],
}}
/>
);
expect(screen.getByText("(E)")).not.toBeNull();
expect(screen.getByText("referrer@example.com")).not.toBeNull();
});
it("renders an empty fallback when no identifier is available", () => {
render(
<UserIdentifier
user={{
auth_methods: [],
user_devices: [],
}}
/>
);
expect(screen.getByText("(E)")).not.toBeNull();
expect(screen.getByText("--")).not.toBeNull();
});
});
@@ -0,0 +1,66 @@
"use client";
import { Badge } from "@workspace/ui/components/badge";
import { parseDeviceType } from "@workspace/ui/utils/device";
type UserDeviceWithDeviceNo = API.UserDevice & {
device_no?: string;
};
type UserIdentifierUser = {
auth_methods?: API.UserAuthMethod[];
user_devices?: UserDeviceWithDeviceNo[];
};
type UserIdentifierParts = {
authLabel: "(D)" | "(E)";
deviceBadge?: string;
identifier: string;
isDevice: boolean;
};
export function getUserIdentifierParts(
user?: UserIdentifierUser
): UserIdentifierParts {
const method = user?.auth_methods?.[0];
const firstDevice = user?.user_devices?.[0] as
| UserDeviceWithDeviceNo
| undefined;
const isDevice = method?.auth_type === "device";
const rawIdentifier = method?.auth_identifier || "";
const identifier = isDevice
? firstDevice?.device_no || rawIdentifier
: rawIdentifier;
return {
authLabel: isDevice ? "(D)" : "(E)",
deviceBadge: parseDeviceType(firstDevice?.user_agent || ""),
identifier,
isDevice,
};
}
export function UserIdentifier({
className,
user,
}: {
className?: string;
user?: UserIdentifierUser;
}) {
const { authLabel, deviceBadge, identifier, isDevice } =
getUserIdentifierParts(user);
return (
<div className={className}>
{deviceBadge ? (
<Badge className="mr-1" variant="secondary">
{deviceBadge}
</Badge>
) : null}
<span className="mr-1 font-mono text-xs uppercase">{authLabel}</span>
<span title={isDevice ? identifier : undefined}>
{identifier || "--"}
</span>
</div>
);
}
@@ -0,0 +1,92 @@
/**
* @vitest-environment jsdom
*/
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { UserSearchBar } from "./user-search-bar";
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (_key: string, fallback: string): string => fallback,
}),
}));
afterEach(() => {
cleanup();
});
describe("UserSearchBar", () => {
it("keeps the controls usable on a narrow mobile viewport", () => {
Object.defineProperty(window, "innerWidth", {
configurable: true,
value: 390,
});
render(
<UserSearchBar
initialType="email"
initialValue=""
onSearch={vi.fn()}
subscribes={[]}
/>
);
expect(screen.getByRole("combobox")).not.toBeNull();
expect(screen.getByRole("button", { name: "Search" })).not.toBeNull();
});
it("keeps the typed happy-path value and triggers search", () => {
const onSearch = vi.fn();
render(
<UserSearchBar
initialType="email"
initialValue=""
onSearch={onSearch}
subscribes={[]}
/>
);
fireEvent.change(screen.getByPlaceholderText("Enter search term"), {
target: { value: "user@example.com" },
});
fireEvent.click(screen.getByRole("button", { name: "Search" }));
expect(onSearch).toHaveBeenCalledWith("email", "user@example.com");
expect(
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
.value
).toBe("user@example.com");
});
it("syncs to external search changes for precise referrer navigation", () => {
const onSearch = vi.fn();
const { rerender } = render(
<UserSearchBar
initialType="email"
initialValue="old@example.com"
onSearch={onSearch}
subscribes={[]}
/>
);
expect(
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
.value
).toBe("old@example.com");
rerender(
<UserSearchBar
initialType="user_id"
initialValue="1024"
onSearch={onSearch}
subscribes={[]}
/>
);
expect(
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
.value
).toBe("1024");
});
});
@@ -0,0 +1,102 @@
"use client";
import { Button } from "@workspace/ui/components/button";
import { Input } from "@workspace/ui/components/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@workspace/ui/components/select";
import { Combobox } from "@workspace/ui/composed/combobox";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
export function UserSearchBar({
initialType,
initialValue,
onSearch,
subscribes,
}: {
initialType: string;
initialValue: string;
onSearch: (type: string, value: string) => void;
subscribes?: API.SubscribeItem[];
}) {
const { t } = useTranslation("user");
const [searchType, setSearchType] = useState(initialType);
const [searchValue, setSearchValue] = useState(initialValue);
useEffect(() => {
setSearchType(initialType);
setSearchValue(initialValue);
}, [initialType, initialValue]);
return (
<div className="flex items-center gap-2">
<Select
onValueChange={(v) => {
setSearchType(v);
setSearchValue("");
}}
value={searchType}
>
<SelectTrigger className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="email">/</SelectItem>
<SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
<SelectItem value="subscribe_id">
{t("subscription", "Subscription")}
</SelectItem>
</SelectContent>
</Select>
{searchType === "subscribe_id" ? (
<Combobox
className="w-48"
onChange={(value) => {
setSearchValue(value);
onSearch("subscribe_id", value);
}}
options={subscribes?.map((item) => ({
label: item.name!,
value: String(item.id!),
}))}
placeholder={t("subscription", "Subscription")}
value={searchValue}
/>
) : (
<>
<Input
className="w-48"
onChange={(e) => setSearchValue(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" && onSearch(searchType, searchValue)
}
placeholder={t("searchInputPlaceholder", "Enter search term")}
value={searchValue}
/>
<Button
onClick={() => onSearch(searchType, searchValue)}
variant="default"
>
{t("search", "Search")}
</Button>
{searchValue && (
<Button
onClick={() => {
setSearchValue("");
onSearch(searchType, "");
}}
variant="outline"
>
{t("resetSearch", "Reset")}
</Button>
)}
</>
)}
</div>
);
}
@@ -30,13 +30,34 @@ import { Display } from "@/components/display";
import { useGlobalStore } from "@/stores/global"; import { useGlobalStore } from "@/stores/global";
import { formatDate } from "@/utils/common"; import { formatDate } from "@/utils/common";
import { SubscriptionDetail } from "./subscription-detail"; import { SubscriptionDetail } from "./subscription-detail";
import { SubscriptionForm } from "./subscription-form"; import {
SubscriptionForm,
type SubscriptionFormValues,
} from "./subscription-form";
interface SharedInfo { interface SharedInfo {
ownerUserId: number; ownerUserId: number;
familyId: number; familyId: number;
} }
function toUserSubscribePayload(values: SubscriptionFormValues) {
return {
...values,
expired_at: values.expired_at || 0,
subscribe_id: values.subscribe_id || 0,
traffic: values.traffic || 0,
upload: values.upload || 0,
download: values.download || 0,
speed_limit: values.speed_limit || 0,
device_limit: values.device_limit || 0,
traffic_limit: values.traffic_limit || [],
};
}
function resolvePlanSpeed(row: API.UserSubscribe) {
return row.plan_speed_limit ?? row.subscribe?.speed_limit ?? 0;
}
export default function UserSubscription({ userId }: { userId: number }) { export default function UserSubscription({ userId }: { userId: number }) {
const { t } = useTranslation("user"); const { t } = useTranslation("user");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -166,7 +187,7 @@ export default function UserSubscription({ userId }: { userId: number }) {
await updateUserSubscribe({ await updateUserSubscribe({
user_id: Number(userId), user_id: Number(userId),
user_subscribe_id: row.id, user_subscribe_id: row.id,
...values, ...toUserSubscribePayload(values),
}); });
toast.success(t("updateSuccess", "Updated successfully")); toast.success(t("updateSuccess", "Updated successfully"));
ref.current?.refresh(); ref.current?.refresh();
@@ -278,17 +299,6 @@ export default function UserSubscription({ userId }: { userId: number }) {
/> />
), ),
}, },
{
accessorKey: "traffic_limit",
header: t("userTrafficLimit", "User Traffic Limit"),
cell: ({ row }) => (
<Display
type="traffic"
unlimited
value={row.original.traffic_limit}
/>
),
},
{ {
id: "remaining_traffic", id: "remaining_traffic",
header: t("remainingTraffic", "Remaining Traffic"), header: t("remainingTraffic", "Remaining Traffic"),
@@ -307,10 +317,41 @@ export default function UserSubscription({ userId }: { userId: number }) {
accessorKey: "speed_limit", accessorKey: "speed_limit",
header: t("speedLimit", "Speed Limit"), header: t("speedLimit", "Speed Limit"),
cell: ({ row }) => { cell: ({ row }) => {
const speed = const userSpeed = row.original.speed_limit ?? 0;
row.original.speed_limit || const effectiveSpeed = row.original.effective_speed ?? 0;
row.original?.subscribe?.speed_limit; const planSpeed = resolvePlanSpeed(row.original);
return <Display type="trafficSpeed" unlimited value={speed} />; const speed = effectiveSpeed || userSpeed || planSpeed;
const source = row.original.is_throttled
? t("effectiveSpeed", "Effective Speed")
: userSpeed > 0
? t("userOverride", "User Override")
: t("subscriptionDefault", "Subscription Default");
return (
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<Display type="trafficSpeed" value={speed} />
{row.original.is_throttled && (
<Badge variant="destructive">
{t("throttled", "Throttled")}
</Badge>
)}
</div>
<span className="text-muted-foreground text-xs">
{source}
</span>
<span className="text-muted-foreground text-xs">
{t("userOverride", "User Override")}:{" "}
<span className="inline-block">
<Display type="trafficSpeed" value={userSpeed} />
</span>{" "}
/ {t("subscriptionDefault", "Subscription Default")}:{" "}
<span className="inline-block">
<Display type="trafficSpeed" value={planSpeed} />
</span>
</span>
</div>
);
}, },
}, },
{ {
@@ -367,7 +408,7 @@ export default function UserSubscription({ userId }: { userId: number }) {
setLoading(true); setLoading(true);
await createUserSubscribe({ await createUserSubscribe({
user_id: Number(userId), user_id: Number(userId),
...values, ...toUserSubscribePayload(values),
}); });
toast.success(t("createSuccess", "Created successfully")); toast.success(t("createSuccess", "Created successfully"));
ref.current?.refresh(); ref.current?.refresh();
@@ -7,6 +7,7 @@ import {
SheetTitle, SheetTitle,
SheetTrigger, SheetTrigger,
} from "@workspace/ui/components/sheet"; } from "@workspace/ui/components/sheet";
import { Skeleton } from "@workspace/ui/components/skeleton";
import { Switch } from "@workspace/ui/components/switch"; import { Switch } from "@workspace/ui/components/switch";
import { ConfirmButton } from "@workspace/ui/composed/confirm-button"; import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
import { ProTable } from "@workspace/ui/composed/pro-table/pro-table"; import { ProTable } from "@workspace/ui/composed/pro-table/pro-table";
@@ -16,41 +17,91 @@ import {
kickOfflineByUserDevice, kickOfflineByUserDevice,
} from "@workspace/ui/services/admin/user"; } from "@workspace/ui/services/admin/user";
import { deviceIdToHash } from "@workspace/ui/utils/device"; import { deviceIdToHash } from "@workspace/ui/utils/device";
import { AlertTriangle, Gauge } from "lucide-react"; import { AlertCircle, AlertTriangle, Gauge } from "lucide-react";
import { type ReactNode, useEffect, useState } from "react"; import { type ReactNode, useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { toast } from "sonner"; import { toast } from "sonner";
import { Display } from "@/components/display";
import { IpLink } from "@/components/ip-link"; import { IpLink } from "@/components/ip-link";
import { formatDate } from "@/utils/common"; import { formatDate } from "@/utils/common";
function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) { function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
const { t } = useTranslation("user"); const { t } = useTranslation("user");
const [detail, setDetail] = useState<API.UserSubscribeDetail | null>(null); const [detail, setDetail] = useState<API.UserSubscribeDetail | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => { useEffect(() => {
getUserSubscribeById({ id: subscriptionId }).then(({ data }) => { let ignore = false;
if (data.data) setDetail(data.data);
}); setIsLoading(true);
setIsError(false);
getUserSubscribeById({ id: subscriptionId })
.then(({ data }) => {
if (!ignore) setDetail(data.data || null);
})
.catch(() => {
if (!ignore) {
setDetail(null);
setIsError(true);
}
})
.finally(() => {
if (!ignore) setIsLoading(false);
});
return () => {
ignore = true;
};
}, [subscriptionId]); }, [subscriptionId]);
if (!detail || detail.status !== 1) return null; if (isLoading) {
return (
<div className="mb-4 rounded-lg border bg-muted/30 p-3">
<Skeleton className="mb-3 h-5 w-40" />
<div className="grid grid-cols-2 gap-3">
<Skeleton className="h-16" />
<Skeleton className="h-16" />
</div>
</div>
);
}
const baseSpeed = detail.subscribe?.speed_limit ?? 0; if (isError) {
return (
<div className="mb-4 flex items-start gap-3 rounded-lg border border-destructive/40 bg-destructive/5 p-3 text-destructive text-sm">
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
<span>
{t("subscriptionDetailLoadFailed", "Failed to load speed settings.")}
</span>
</div>
);
}
if (!detail) {
return (
<div className="mb-4 rounded-lg border bg-muted/30 p-3 text-muted-foreground text-sm">
{t("subscriptionDetailEmpty", "No subscription details found.")}
</div>
);
}
if (detail.status !== 1) return null;
const baseSpeed =
detail.plan_speed_limit ?? detail.subscribe?.speed_limit ?? 0;
const userSpeed = detail.speed_limit ?? 0; const userSpeed = detail.speed_limit ?? 0;
const userTraffic = detail.traffic_limit ?? 0;
const userDeviceLimit = detail.device_limit ?? 0;
const effectiveSpeed = detail.effective_speed ?? 0; const effectiveSpeed = detail.effective_speed ?? 0;
const isThrottled = detail.is_throttled; const isThrottled = detail.is_throttled;
const rules = detail.user_traffic_limit || detail.traffic_limit || [];
const hasLimitConfig =
baseSpeed > 0 || userSpeed > 0 || effectiveSpeed > 0 || rules.length > 0;
if ( if (!(hasLimitConfig || isThrottled)) {
baseSpeed === 0 && return (
userSpeed === 0 && <div className="mb-4 rounded-lg border bg-muted/30 p-3 text-muted-foreground text-sm">
userTraffic === 0 && {t("speedLimitEmpty", "No user-level speed limit rules configured.")}
userDeviceLimit === 0 && </div>
!isThrottled );
) {
return null;
} }
return ( return (
@@ -66,7 +117,7 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
) : ( ) : (
<Gauge className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" /> <Gauge className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
)} )}
<div className="space-y-1"> <div className="min-w-0 flex-1 space-y-3">
<div className="flex flex-wrap items-center gap-2 font-medium"> <div className="flex flex-wrap items-center gap-2 font-medium">
{isThrottled ? ( {isThrottled ? (
<> <>
@@ -76,6 +127,7 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
</Badge> </Badge>
{baseSpeed > 0 && ( {baseSpeed > 0 && (
<span className="text-muted-foreground text-xs line-through"> <span className="text-muted-foreground text-xs line-through">
{t("subscriptionDefault", "Subscription Default")}:{" "}
{baseSpeed} Mbps {baseSpeed} Mbps
</span> </span>
)} )}
@@ -93,6 +145,20 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
</> </>
)} )}
</div> </div>
<div className="grid gap-2 sm:grid-cols-3">
<SpeedMetric
label={t("subscriptionDefault", "Subscription Default")}
value={baseSpeed}
/>
<SpeedMetric
label={t("userOverride", "User Override")}
value={userSpeed}
/>
<SpeedMetric
label={t("effectiveSpeed", "Effective Speed")}
value={effectiveSpeed}
/>
</div>
{isThrottled && detail.throttle_rule && ( {isThrottled && detail.throttle_rule && (
<p className="text-muted-foreground text-xs"> <p className="text-muted-foreground text-xs">
{detail.throttle_rule} {detail.throttle_rule}
@@ -104,39 +170,51 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
{formatDate(detail.throttle_end)} {formatDate(detail.throttle_end)}
</p> </p>
)} )}
{(userSpeed > 0 || userTraffic > 0 || userDeviceLimit > 0) && ( {rules.length > 0 && (
<dl className="grid gap-2 pt-2 text-xs sm:grid-cols-3"> <div className="space-y-2">
<div> <p className="font-medium text-foreground text-xs">
<dt className="text-muted-foreground"> {t("trafficLimitRules", "Traffic Limit Rules")}
{t("userSpeedLimit", "User Speed Limit")} </p>
</dt> <div className="grid gap-2">
<dd className="font-medium"> {rules.map((rule, index) => (
<Display type="trafficSpeed" unlimited value={userSpeed} /> <div
</dd> className="rounded-md border bg-background/60 px-3 py-2 text-muted-foreground text-xs"
key={`${rule.stat_type}-${rule.stat_value}-${index}`}
>
{t("trafficLimitRuleSummary", {
defaultValue:
"{{traffic}} GB in {{value}} {{type}} -> {{speed}} Mbps",
traffic: rule.traffic_usage,
value: rule.stat_value,
type:
rule.stat_type === "hour"
? t("hour", "Hour")
: t("day", "Day"),
speed: rule.speed_limit,
})}
</div>
))}
</div> </div>
<div> </div>
<dt className="text-muted-foreground">
{t("userTrafficLimit", "User Traffic Limit")}
</dt>
<dd className="font-medium">
<Display type="traffic" unlimited value={userTraffic} />
</dd>
</div>
<div>
<dt className="text-muted-foreground">
{t("userDeviceLimit", "User Device Limit")}
</dt>
<dd className="font-medium">
<Display type="number" unlimited value={userDeviceLimit} />
</dd>
</div>
</dl>
)} )}
</div> </div>
</div> </div>
); );
} }
function SpeedMetric({ label, value }: { label: string; value: number }) {
const { t } = useTranslation("user");
return (
<div className="rounded-md border bg-background/60 p-2">
<div className="text-muted-foreground text-xs">{label}</div>
<div className="font-medium text-foreground">
{value > 0 ? `${value} Mbps` : t("unlimited", "Unlimited")}
</div>
</div>
);
}
export function SubscriptionDetail({ export function SubscriptionDetail({
trigger, trigger,
userId, userId,
@@ -195,11 +273,7 @@ export function SubscriptionDetail({
accessorKey: "enabled", accessorKey: "enabled",
header: t("enable", "Enable"), header: t("enable", "Enable"),
cell: ({ row }) => ( cell: ({ row }) => (
<Switch <Switch checked={row.getValue("enabled")} disabled />
aria-label={t("deviceEnabled", "Device enabled")}
checked={row.getValue("enabled")}
disabled
/>
), ),
}, },
{ accessorKey: "id", header: "ID" }, { accessorKey: "id", header: "ID" },
@@ -3,6 +3,7 @@ import { Button } from "@workspace/ui/components/button";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
@@ -19,10 +20,11 @@ import {
} from "@workspace/ui/components/sheet"; } from "@workspace/ui/components/sheet";
import { Combobox } from "@workspace/ui/composed/combobox"; import { Combobox } from "@workspace/ui/composed/combobox";
import { DatePicker } from "@workspace/ui/composed/date-picker"; import { DatePicker } from "@workspace/ui/composed/date-picker";
import { ArrayInput } from "@workspace/ui/composed/dynamic-inputs";
import { EnhancedInput } from "@workspace/ui/composed/enhanced-input"; import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
import { Icon } from "@workspace/ui/composed/icon"; import { Icon } from "@workspace/ui/composed/icon";
import { unitConversion } from "@workspace/ui/utils/unit-conversions"; import { unitConversion } from "@workspace/ui/utils/unit-conversions";
import { type ReactNode, useState } from "react"; import { type KeyboardEvent, type ReactNode, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { z } from "zod"; import { z } from "zod";
@@ -36,19 +38,54 @@ interface Props {
onSubmit: (values: SubscriptionFormValues) => Promise<boolean>; onSubmit: (values: SubscriptionFormValues) => Promise<boolean>;
} }
type SubscriptionTrafficLimitRule = API.UserSubscribeTrafficLimitRule;
function getUserTrafficLimitRules(
data?: Pick<API.UserSubscribe, "traffic_limit" | "user_traffic_limit">
) {
return data?.user_traffic_limit || data?.traffic_limit || [];
}
const defaultLimitRule: SubscriptionTrafficLimitRule = {
stat_type: "day",
stat_value: 1,
traffic_usage: 0,
speed_limit: 0,
};
const formSchema = z.object({ const formSchema = z.object({
subscribe_id: z.number().default(0), subscribe_id: z.number().optional(),
traffic: z.number().default(0), traffic: z.number().min(0).optional(),
speed_limit: z.number().optional(), speed_limit: z.number().min(0).optional(),
traffic_limit: z.number().optional(), device_limit: z.number().min(0).optional(),
device_limit: z.number().optional(), expired_at: z.number().nullish().optional(),
expired_at: z.number().default(0), upload: z.number().min(0).optional(),
upload: z.number().default(0), download: z.number().min(0).optional(),
download: z.number().default(0),
id: z.number().optional(), id: z.number().optional(),
traffic_limit: z
.array(
z.object({
stat_type: z.string(),
stat_value: z.number().int().min(1),
traffic_usage: z.number().min(0),
speed_limit: z.number().min(0),
})
)
.optional(),
}); });
export type SubscriptionFormValues = z.infer<typeof formSchema>; type SubscriptionFormValues = z.infer<typeof formSchema>;
export type { SubscriptionFormValues };
const normalizeLimitRule = (
item: SubscriptionTrafficLimitRule
): SubscriptionTrafficLimitRule => ({
stat_type: item.stat_type || "day",
stat_value: Math.max(1, Math.floor(Number(item.stat_value) || 1)),
traffic_usage: Math.max(0, Number(item.traffic_usage) || 0),
speed_limit: Math.max(0, Number(item.speed_limit) || 0),
});
export function SubscriptionForm({ export function SubscriptionForm({
trigger, trigger,
@@ -60,14 +97,14 @@ export function SubscriptionForm({
const { t } = useTranslation("user"); const { t } = useTranslation("user");
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const form = useForm({ const form = useForm<SubscriptionFormValues>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { defaultValues: {
subscribe_id: initialData?.subscribe_id || 0, subscribe_id: initialData?.subscribe_id || 0,
traffic: initialData?.traffic || 0, traffic: initialData?.traffic || 0,
traffic_limit: initialData?.traffic_limit || 0,
speed_limit: initialData?.speed_limit || 0, speed_limit: initialData?.speed_limit || 0,
device_limit: initialData?.device_limit || 0, device_limit: initialData?.device_limit || 0,
traffic_limit: getUserTrafficLimitRules(initialData),
upload: initialData?.upload || 0, upload: initialData?.upload || 0,
download: initialData?.download || 0, download: initialData?.download || 0,
expired_at: initialData?.expire_time || 0, expired_at: initialData?.expire_time || 0,
@@ -141,6 +178,7 @@ export function SubscriptionForm({
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<EnhancedInput <EnhancedInput
min={0}
placeholder={t("unlimited", "Unlimited")} placeholder={t("unlimited", "Unlimited")}
type="number" type="number"
{...field} {...field}
@@ -160,52 +198,16 @@ export function SubscriptionForm({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="traffic_limit"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("userTrafficLimit", "User Traffic Limit")}
</FormLabel>
<FormControl>
<EnhancedInput
placeholder={t(
"followSubscription",
"Follow Subscription"
)}
type="number"
{...field}
formatInput={(value) =>
unitConversion("bytesToGb", value)
}
formatOutput={(value) =>
unitConversion("gbToBytes", value)
}
onValueChange={(value) => {
form.setValue(field.name, value as number);
}}
suffix="GB"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="speed_limit" name="speed_limit"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>{t("speedLimit", "Speed Limit")}</FormLabel>
{t("userSpeedLimit", "User Speed Limit")}
</FormLabel>
<FormControl> <FormControl>
<EnhancedInput <EnhancedInput
placeholder={t( min={0}
"followSubscription", placeholder={t("unlimited", "Unlimited")}
"Follow Subscription"
)}
type="number" type="number"
{...field} {...field}
onValueChange={(value) => { onValueChange={(value) => {
@@ -214,6 +216,12 @@ export function SubscriptionForm({
suffix="Mbps" suffix="Mbps"
/> />
</FormControl> </FormControl>
<FormDescription>
{t(
"userSpeedLimitDescription",
"Set to 0 to use the subscription default speed limit."
)}
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -223,15 +231,12 @@ export function SubscriptionForm({
name="device_limit" name="device_limit"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>{t("deviceLimit", "Device Limit")}</FormLabel>
{t("userDeviceLimit", "User Device Limit")}
</FormLabel>
<FormControl> <FormControl>
<EnhancedInput <EnhancedInput
placeholder={t( min={0}
"followSubscription", placeholder={t("unlimited", "Unlimited")}
"Follow Subscription" step={1}
)}
type="number" type="number"
{...field} {...field}
onValueChange={(value) => { onValueChange={(value) => {
@@ -253,6 +258,7 @@ export function SubscriptionForm({
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<EnhancedInput <EnhancedInput
min={0}
placeholder="0" placeholder="0"
type="number" type="number"
{...field} {...field}
@@ -282,6 +288,7 @@ export function SubscriptionForm({
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<EnhancedInput <EnhancedInput
min={0}
placeholder="0" placeholder="0"
type="number" type="number"
{...field} {...field}
@@ -301,6 +308,119 @@ export function SubscriptionForm({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="traffic_limit"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("trafficLimitRules", "Traffic Limit Rules")}
</FormLabel>
<FormControl>
<ArrayInput<SubscriptionTrafficLimitRule>
className="grid grid-cols-2 gap-3 lg:grid-cols-4"
fields={[
{
name: "stat_type",
type: "select",
placeholder: t("statType", "Statistics Type"),
value: "day",
options: [
{
label: t("statTypeHour", "Hour"),
value: "hour",
},
{
label: t("statTypeDay", "Day"),
value: "day",
},
],
},
{
name: "stat_value",
type: "number",
placeholder: t("statValue", "Time Value"),
min: 1,
step: 1,
onKeyDown: (
e: KeyboardEvent<HTMLInputElement>
) => {
if (e.key === "." || e.key === ",") {
e.preventDefault();
}
},
formatOutput: (value: string | number) => {
const num = Number(value);
return String(
Number.isNaN(num) ? 1 : Math.floor(num)
);
},
},
{
name: "traffic_usage",
type: "number",
placeholder: t(
"trafficUsage",
"Traffic Usage (GB)"
),
min: 0,
onKeyDown: (
e: KeyboardEvent<HTMLInputElement>
) => {
if (e.key === "." || e.key === ",") {
e.preventDefault();
}
},
formatOutput: (value: string | number) => {
const num = Number(value);
return String(
Number.isNaN(num) ? 0 : Math.floor(num)
);
},
},
{
name: "speed_limit",
type: "number",
placeholder: t(
"speedLimitMbps",
"Speed Limit (Mbps)"
),
min: 0,
onKeyDown: (
e: KeyboardEvent<HTMLInputElement>
) => {
if (e.key === "." || e.key === ",") {
e.preventDefault();
}
},
formatOutput: (value: string | number) => {
const num = Number(value);
return String(
Number.isNaN(num) ? 0 : Math.floor(num)
);
},
},
]}
onChange={(items) => {
field.onChange(items.map(normalizeLimitRule));
}}
value={
field.value && field.value.length > 0
? field.value
: [defaultLimitRule]
}
/>
</FormControl>
<FormDescription>
{t(
"trafficLimitDescription",
"Limit speed when usage reaches the configured amount in the selected time window."
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="expired_at" name="expired_at"
+2 -2
View File
@@ -44,7 +44,7 @@ const WITHDRAWAL_METHOD_MAP: Record<number, string> = {
0: "其他", 0: "其他",
1: "支付宝", 1: "支付宝",
2: "微信", 2: "微信",
3: "银行卡", 3: "USDT(TRC20)",
}; };
const rejectSchema = z.object({ const rejectSchema = z.object({
@@ -143,7 +143,7 @@ export default function WithdrawalPage() {
const methodOptions = [ const methodOptions = [
{ value: "1", label: "支付宝" }, { value: "1", label: "支付宝" },
{ value: "2", label: "微信" }, { value: "2", label: "微信" },
{ value: "3", label: "银行卡" }, { value: "3", label: "USDT(TRC20)" },
{ value: "0", label: "其他" }, { value: "0", label: "其他" },
]; ];
@@ -9,6 +9,7 @@
"originalPrice": "Original Price (Monthly)", "originalPrice": "Original Price (Monthly)",
"price": "Price", "price": "Price",
"productDiscount": "Product Discount", "productDiscount": "Product Discount",
"promoDiscount": "Promo Discount",
"total": "Total" "total": "Total"
}, },
"buy": "Buy", "buy": "Buy",
@@ -37,6 +38,10 @@
"passwordHint": "If you do not enter a password, we will automatically generate one and send it to your email.", "passwordHint": "If you do not enter a password, we will automatically generate one and send it to your email.",
"paymentMethod": "Payment Method", "paymentMethod": "Payment Method",
"productDescription": "productDescription", "productDescription": "productDescription",
"promo": {
"available": "Promo Available",
"validUntil": "Valid until"
},
"purchaseDuration": "Purchase Duration", "purchaseDuration": "Purchase Duration",
"recharge": "Recharge", "recharge": "Recharge",
"rechargeAmount": "Recharge Amount", "rechargeAmount": "Recharge Amount",
@@ -9,6 +9,7 @@
"originalPrice": "原价(按月)", "originalPrice": "原价(按月)",
"price": "价格", "price": "价格",
"productDiscount": "商品折扣", "productDiscount": "商品折扣",
"promoDiscount": "促销优惠",
"total": "总价" "total": "总价"
}, },
"buy": "购买", "buy": "购买",
@@ -37,6 +38,10 @@
"passwordHint": "如果您不输入密码,我们将自动生成一个并发送到您的邮箱。", "passwordHint": "如果您不输入密码,我们将自动生成一个并发送到您的邮箱。",
"paymentMethod": "支付方式", "paymentMethod": "支付方式",
"productDescription": "商品描述", "productDescription": "商品描述",
"promo": {
"available": "促销可用",
"validUntil": "有效期至"
},
"purchaseDuration": "购买时长", "purchaseDuration": "购买时长",
"recharge": "充值", "recharge": "充值",
"rechargeAmount": "充值金额", "rechargeAmount": "充值金额",
@@ -17,6 +17,7 @@ import CouponInput from "@/sections/subscribe/coupon-input";
import { SubscribeDetail } from "@/sections/subscribe/detail"; import { SubscribeDetail } from "@/sections/subscribe/detail";
import DurationSelector from "@/sections/subscribe/duration-selector"; import DurationSelector from "@/sections/subscribe/duration-selector";
import PaymentMethods from "@/sections/subscribe/payment-methods"; import PaymentMethods from "@/sections/subscribe/payment-methods";
import { PromoInfo } from "@/sections/subscribe/promo-info";
import { useGlobalStore } from "@/stores/global"; import { useGlobalStore } from "@/stores/global";
export default function Content({ export default function Content({
@@ -49,6 +50,9 @@ export default function Content({
valid: false, valid: false,
message: "", message: "",
}); });
const selectedDiscount = subscription?.discount?.find(
(item) => item.quantity === params.quantity
);
const { data: order } = useQuery({ const { data: order } = useQuery({
enabled: !!subscription?.id && !!params.payment, enabled: !!subscription?.id && !!params.payment,
@@ -103,7 +107,10 @@ export default function Content({
navigate({ to: "/purchasing/order", search: { order_no } }); navigate({ to: "/purchasing/order", search: { order_no } });
} }
} catch (error) { } catch (error) {
console.log(error); setIsEmailValid((prev) => ({
...prev,
message: error instanceof Error ? error.message : prev.message,
}));
} }
}); });
}, [params, navigate]); }, [params, navigate]);
@@ -285,6 +292,7 @@ export default function Content({
show_original_price: subscription?.show_original_price, show_original_price: subscription?.show_original_price,
}} }}
/> />
<PromoInfo discount={selectedDiscount} />
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -10,6 +10,7 @@ interface SubscribeBillingProps {
unit_price: number; unit_price: number;
unit_time: string; unit_time: string;
subscribe_discount: number; subscribe_discount: number;
promo_discount: number;
show_original_price?: boolean; show_original_price?: boolean;
} }
>; >;
@@ -66,6 +67,14 @@ export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
<Display type="currency" value={order?.discount} /> <Display type="currency" value={order?.discount} />
</span> </span>
</li> </li>
<li>
<span className="text-muted-foreground">
{t("billing.promoDiscount", "Promo Discount")}
</span>
<span>
<Display type="currency" value={order?.promo_discount} />
</span>
</li>
<li> <li>
<span className="text-muted-foreground"> <span className="text-muted-foreground">
{t("billing.couponDiscount", "Coupon Discount")} {t("billing.couponDiscount", "Coupon Discount")}
@@ -0,0 +1,33 @@
import { Badge } from "@workspace/ui/components/badge";
import { useTranslation } from "react-i18next";
import { Display } from "@/components/display";
interface PromoInfoProps {
discount?: API.SubscribeDiscount;
}
export function PromoInfo({ discount }: Readonly<PromoInfoProps>) {
const { t } = useTranslation("subscribe");
const promo = discount?.promo;
if (!promo) return null;
return (
<div className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 p-3 text-sm">
<div className="grid gap-1">
<span className="font-medium">
{promo.rule_name || t("promo.available", "Promo Available")}
</span>
{promo.expires_at && (
<span className="text-muted-foreground text-xs">
{t("promo.validUntil", "Valid until")}:{" "}
{new Date(promo.expires_at * 1000).toLocaleString()}
</span>
)}
</div>
<Badge variant="secondary">
<Display type="currency" value={promo.promo_price} />
</Badge>
</div>
);
}
@@ -18,6 +18,7 @@ import { useTranslation } from "react-i18next";
import CouponInput from "@/sections/subscribe/coupon-input"; import CouponInput from "@/sections/subscribe/coupon-input";
import DurationSelector from "@/sections/subscribe/duration-selector"; import DurationSelector from "@/sections/subscribe/duration-selector";
import PaymentMethods from "@/sections/subscribe/payment-methods"; import PaymentMethods from "@/sections/subscribe/payment-methods";
import { PromoInfo } from "@/sections/subscribe/promo-info";
import { useGlobalStore } from "@/stores/global"; import { useGlobalStore } from "@/stores/global";
import { SubscribeBilling } from "./billing"; import { SubscribeBilling } from "./billing";
import { SubscribeDetail } from "./detail"; import { SubscribeDetail } from "./detail";
@@ -41,7 +42,12 @@ export default function Purchase({
coupon: "", coupon: "",
}); });
const [loading, startTransition] = useTransition(); const [loading, startTransition] = useTransition();
const lastSuccessOrderRef = useRef<any>(null); const lastSuccessOrderRef = useRef<API.PreOrderResponse | undefined>(
undefined
);
const selectedDiscount = subscribe?.discount?.find(
(item) => item.quantity === params.quantity
);
const { data: order } = useQuery({ const { data: order } = useQuery({
enabled: !!subscribe?.id, enabled: !!subscribe?.id,
@@ -140,6 +146,7 @@ export default function Purchase({
show_original_price: subscribe?.show_original_price, show_original_price: subscribe?.show_original_price,
}} }}
/> />
<PromoInfo discount={selectedDiscount} />
</CardContent> </CardContent>
</Card> </Card>
<div className="flex flex-col justify-between text-sm"> <div className="flex flex-col justify-between text-sm">
+23 -19
View File
@@ -63,7 +63,7 @@ import { useGlobalStore } from "@/stores/global";
const WITHDRAWAL_METHODS = [ const WITHDRAWAL_METHODS = [
{ value: 1, label: "支付宝" }, { value: 1, label: "支付宝" },
{ value: 2, label: "微信" }, { value: 2, label: "微信" },
{ value: 3, label: "银行卡" }, { value: 3, label: "USDT(TRC20)" },
{ value: 0, label: "其他" }, { value: 0, label: "其他" },
] as const; ] as const;
@@ -111,13 +111,21 @@ function QrCodeView({ url }: { url: string }) {
<img <img
alt="收款码" alt="收款码"
className="h-16 w-16 cursor-zoom-in object-cover" className="h-16 w-16 cursor-zoom-in object-cover"
height={64}
src={url} src={url}
width={64}
/> />
</button> </button>
{zoomOpen && ( {zoomOpen && (
<Dialog onOpenChange={setZoomOpen} open={zoomOpen}> <Dialog onOpenChange={setZoomOpen} open={zoomOpen}>
<DialogContent className="max-w-sm"> <DialogContent className="max-w-sm">
<img alt="收款码" className="w-full" src={url} /> <img
alt="收款码"
className="w-full"
height={320}
src={url}
width={320}
/>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
)} )}
@@ -153,18 +161,16 @@ const withdrawalFormSchema = z
if (!data.account) { if (!data.account) {
ctx.addIssue({ ctx.addIssue({
code: z.ZodIssueCode.custom, code: z.ZodIssueCode.custom,
message: "银行卡收款账号为必填", message: "USDT(TRC20) 地址为必填",
path: ["account"],
});
}
} else if (data.method === 0) {
if (!data.account && !data.content) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "收款账号和备注至少填一项",
path: ["account"], path: ["account"],
}); });
} }
} else if (data.method === 0 && !(data.account || data.content)) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "收款账号和备注至少填一项",
path: ["account"],
});
} }
}); });
@@ -421,9 +427,7 @@ export default function Affiliate() {
<FormItem> <FormItem>
<FormLabel> <FormLabel>
<span className="ml-1 text-destructive"> <span className="ml-1 text-destructive">*</span>
*
</span>
</FormLabel> </FormLabel>
{watchedQrCodeUrl ? ( {watchedQrCodeUrl ? (
<div className="relative inline-block"> <div className="relative inline-block">
@@ -446,7 +450,9 @@ export default function Affiliate() {
returnType="file" returnType="file"
> >
<div className="flex h-24 w-24 flex-col items-center justify-center rounded border-2 border-dashed text-muted-foreground text-xs"> <div className="flex h-24 w-24 flex-col items-center justify-center rounded border-2 border-dashed text-muted-foreground text-xs">
{qrUploading ? "上传中..." : "点击上传\n收款码"} {qrUploading
? "上传中..."
: "点击上传\n收款码"}
</div> </div>
</UploadImage> </UploadImage>
)} )}
@@ -474,7 +480,7 @@ export default function Affiliate() {
<Input <Input
placeholder={ placeholder={
watchedMethod === 3 watchedMethod === 3
? "请输入银行卡号或账户信息" ? "请输入 USDT(TRC20) 收款地址"
: "请输入收款账号(与备注至少填一项)" : "请输入收款账号(与备注至少填一项)"
} }
{...field} {...field}
@@ -519,9 +525,7 @@ export default function Affiliate() {
</Button> </Button>
<Button <Button
disabled={ disabled={
submitting || submitting || qrUploading || availableCommission <= 0
qrUploading ||
availableCommission <= 0
} }
form="withdrawal-form" form="withdrawal-form"
type="submit" type="submit"
+42 -16
View File
@@ -307,27 +307,34 @@ declare namespace API {
type PromoPrice = { type PromoPrice = {
id: number; id: number;
rule_id: number; promo_rule_id: number;
subscribe_id: number; subscribe_id: number;
subscribe_name?: string; subscribe_name?: string;
quantity: number;
unit_price: number; unit_price: number;
promo_price: number; promo_price: number;
created_at?: number; created_at?: number;
updated_at?: number; updated_at?: number;
}; };
type CreatePromoPriceRequest = { type CreatePromoPriceItem = {
rule_id: number;
subscribe_id: number; subscribe_id: number;
quantity: number;
promo_price: number; promo_price: number;
}; };
type CreatePromoPriceRequest = {
promo_rule_id: number;
items: CreatePromoPriceItem[];
};
type PromoUsage = { type PromoUsage = {
id: number; id: number;
rule_id: number; promo_rule_id: number;
rule_name?: string; rule_name?: string;
subscribe_id: number; subscribe_id: number;
subscribe_name?: string; subscribe_name?: string;
quantity: number;
user_id: number; user_id: number;
order_no: string; order_no: string;
unit_price: number; unit_price: number;
@@ -462,10 +469,8 @@ declare namespace API {
traffic: number; traffic: number;
subscribe_id: number; subscribe_id: number;
speed_limit?: number; speed_limit?: number;
traffic_limit?: number;
device_limit?: number; device_limit?: number;
upload?: number; traffic_limit?: UserSubscribeTrafficLimitRule[];
download?: number;
}; };
type CurrencyConfig = { type CurrencyConfig = {
@@ -1022,7 +1027,7 @@ declare namespace API {
type GetPromoPriceListParams = { type GetPromoPriceListParams = {
page: number; page: number;
size: number; size: number;
rule_id?: number; promo_rule_id?: number;
subscribe_id?: number; subscribe_id?: number;
}; };
@@ -1038,7 +1043,7 @@ declare namespace API {
type GetPromoUsageListParams = { type GetPromoUsageListParams = {
page: number; page: number;
size: number; size: number;
rule_id?: number; promo_rule_id?: number;
subscribe_id?: number; subscribe_id?: number;
user_id?: number; user_id?: number;
order_no?: string; order_no?: string;
@@ -2221,6 +2226,13 @@ declare namespace API {
quantity: number; quantity: number;
discount: number; discount: number;
map_apple?: string; map_apple?: string;
promo?: SubscribeDiscountPromo;
};
type SubscribeDiscountPromo = {
rule_name?: string;
promo_price: number;
end_time?: number;
}; };
type SubscribeGroup = { type SubscribeGroup = {
@@ -2559,8 +2571,8 @@ declare namespace API {
upload: number; upload: number;
download: number; download: number;
speed_limit?: number; speed_limit?: number;
traffic_limit?: number;
device_limit?: number; device_limit?: number;
traffic_limit?: UserSubscribeTrafficLimitRule[];
}; };
type User = { type User = {
@@ -2649,11 +2661,16 @@ declare namespace API {
finished_at: number; finished_at: number;
reset_time: number; reset_time: number;
traffic: number; traffic: number;
traffic_limit?: number;
speed_limit?: number;
device_limit?: number;
download: number; download: number;
upload: number; upload: number;
speed_limit?: number;
plan_speed_limit?: number;
device_limit?: number;
effective_speed?: number;
is_throttled?: boolean;
throttle_rule?: string;
traffic_limit?: UserSubscribeTrafficLimitRule[];
user_traffic_limit?: UserSubscribeTrafficLimitRule[];
token: string; token: string;
status: number; status: number;
short: string; short: string;
@@ -2663,6 +2680,13 @@ declare namespace API {
updated_at: number; updated_at: number;
}; };
type UserSubscribeTrafficLimitRule = {
stat_type: string;
stat_value: number;
traffic_usage: number;
speed_limit: number;
};
type UserSubscribeDetail = { type UserSubscribeDetail = {
id: number; id: number;
user_id: number; user_id: number;
@@ -2674,11 +2698,13 @@ declare namespace API {
expire_time: number; expire_time: number;
reset_time: number; reset_time: number;
traffic: number; traffic: number;
traffic_limit?: number;
speed_limit?: number;
device_limit?: number;
download: number; download: number;
upload: number; upload: number;
speed_limit?: number;
plan_speed_limit?: number;
device_limit?: number;
traffic_limit?: UserSubscribeTrafficLimitRule[];
user_traffic_limit?: UserSubscribeTrafficLimitRule[];
token: string; token: string;
status: number; status: number;
effective_speed: number; effective_speed: number;
+7
View File
@@ -910,6 +910,13 @@ declare namespace API {
quantity: number; quantity: number;
discount: number; discount: number;
map_apple?: string; map_apple?: string;
promo?: SubscribeDiscountPromo;
};
type SubscribeDiscountPromo = {
rule_name?: string;
promo_price: number;
end_time?: number;
}; };
type SubscribeGroup = { type SubscribeGroup = {
+9
View File
@@ -548,6 +548,7 @@ declare namespace API {
price: number; price: number;
amount: number; amount: number;
discount: number; discount: number;
promo_discount: number;
gift_amount: number; gift_amount: number;
coupon: string; coupon: string;
coupon_discount: number; coupon_discount: number;
@@ -1019,6 +1020,14 @@ declare namespace API {
quantity: number; quantity: number;
discount: number; discount: number;
map_apple?: string; map_apple?: string;
promo?: SubscribeDiscountPromo;
};
type SubscribeDiscountPromo = {
rule_name?: string;
rule_type?: string;
promo_price: number;
expires_at?: number;
}; };
type SubscribeGroup = { type SubscribeGroup = {