✨ feat: Added localized support for user subscription and deletion status, and optimized the subscription form and user interface.
This commit is contained in:
web@ppanel
parent
3751f64f73
commit
9f95cec876
@ -25,9 +25,11 @@
|
||||
"createSuccess": "Created successfully",
|
||||
"createUser": "Create User",
|
||||
"delete": "Delete",
|
||||
"deleted": "Deleted",
|
||||
"deleteDescription": "This action cannot be undone.",
|
||||
"deleteSubscriptionDescription": "This action cannot be undone.",
|
||||
"deleteSuccess": "Deleted successfully",
|
||||
"isDeleted": "Status",
|
||||
"deviceLimit": "Device Limit",
|
||||
"download": "Download",
|
||||
"downloadTraffic": "Download Traffic",
|
||||
@ -51,6 +53,7 @@
|
||||
"loginStatus": "Login Status",
|
||||
"manager": "Administrator",
|
||||
"more": "More",
|
||||
"normal": "Normal",
|
||||
"notifySettingsTitle": "Notify Settings",
|
||||
"offline": "Offline",
|
||||
"online": "Online",
|
||||
|
||||
@ -25,9 +25,11 @@
|
||||
"createSuccess": "创建成功",
|
||||
"createUser": "创建用户",
|
||||
"delete": "删除",
|
||||
"deleted": "已删除",
|
||||
"deleteDescription": "此操作无法撤销。",
|
||||
"deleteSubscriptionDescription": "此操作无法撤销。",
|
||||
"deleteSuccess": "删除成功",
|
||||
"isDeleted": "状态",
|
||||
"deviceLimit": "IP限制",
|
||||
"download": "下载",
|
||||
"downloadTraffic": "下载流量",
|
||||
@ -51,6 +53,7 @@
|
||||
"loginStatus": "登录状态",
|
||||
"manager": "管理员",
|
||||
"more": "更多",
|
||||
"normal": "正常",
|
||||
"notifySettingsTitle": "通知设置",
|
||||
"offline": "离线",
|
||||
"online": "在线",
|
||||
|
||||
@ -277,7 +277,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
|
||||
{trigger}
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="w-[800px] max-w-full gap-0 md:max-w-screen-md">
|
||||
<SheetContent className="w-[800px] max-w-full gap-0 md:max-w-3xl">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{title}</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
@ -172,6 +172,18 @@ export default function User() {
|
||||
accessorKey: "id",
|
||||
header: "ID",
|
||||
},
|
||||
{
|
||||
accessorKey: "deleted_at",
|
||||
header: t("isDeleted", "Deleted"),
|
||||
cell: ({ row }) => {
|
||||
const deletedAt = row.getValue("deleted_at") as number | undefined;
|
||||
return deletedAt ? (
|
||||
<Badge variant="destructive">{t("deleted", "Deleted")}</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{t("normal", "Normal")}</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "auth_methods",
|
||||
header: t("userName", "Username"),
|
||||
@ -355,16 +367,13 @@ function SubscriptionSheet({ userId }: { userId: number }) {
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="secondary">{t("subscription", "Subscription")}</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
className="w-[1000px] max-w-full md:max-w-screen-xl"
|
||||
side="right"
|
||||
>
|
||||
<SheetContent className="w-[1000px] max-w-full md:max-w-7xl" side="right">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
{t("subscriptionList", "Subscription List")} · ID: {userId}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="mt-2">
|
||||
<div className="mt-2 px-4">
|
||||
<UserSubscription userId={userId} />
|
||||
</div>
|
||||
</SheetContent>
|
||||
|
||||
@ -33,7 +33,6 @@ export default function UserSubscription({ userId }: { userId: number }) {
|
||||
const { t } = useTranslation("user");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const ref = useRef<ProTableActions>(null);
|
||||
const { getUserSubscribe: getUserSubscribeUrls } = useGlobalStore();
|
||||
|
||||
return (
|
||||
<ProTable<API.UserSubscribe, Record<string, unknown>>
|
||||
@ -59,105 +58,13 @@ export default function UserSubscription({ userId }: { userId: number }) {
|
||||
title={t("editSubscription", "Edit Subscription")}
|
||||
trigger={t("edit", "Edit")}
|
||||
/>,
|
||||
<Button
|
||||
key="copy"
|
||||
onClick={async () => {
|
||||
await navigator.clipboard.writeText(
|
||||
getUserSubscribeUrls(row.token)[0] || ""
|
||||
);
|
||||
toast.success(t("copySuccess", "Copied successfully"));
|
||||
}}
|
||||
variant="secondary"
|
||||
>
|
||||
{t("copySubscription", "Copy Subscription")}
|
||||
</Button>,
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={t(
|
||||
"resetTokenDescription",
|
||||
"This will reset the subscription address and regenerate a new token."
|
||||
)}
|
||||
key="resetToken"
|
||||
onConfirm={async () => {
|
||||
await resetUserSubscribeToken({ user_subscribe_id: row.id });
|
||||
toast.success(
|
||||
t(
|
||||
"resetTokenSuccess",
|
||||
"Subscription address reset successfully"
|
||||
)
|
||||
);
|
||||
ref.current?.refresh();
|
||||
}}
|
||||
title={t("confirmResetToken", "Confirm Reset Subscription Address")}
|
||||
trigger={
|
||||
<Button variant="outline">
|
||||
{t("resetToken", "Reset Subscription Address")}
|
||||
</Button>
|
||||
}
|
||||
<RowMoreActions
|
||||
key="more"
|
||||
refresh={() => ref.current?.refresh()}
|
||||
row={row}
|
||||
token={row.token}
|
||||
userId={userId}
|
||||
/>,
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={
|
||||
row.status === 5
|
||||
? t(
|
||||
"resumeSubscribeDescription",
|
||||
"This will resume the subscription and allow the user to use it."
|
||||
)
|
||||
: t(
|
||||
"stopSubscribeDescription",
|
||||
"This will stop the subscription temporarily. User will not be able to use it."
|
||||
)
|
||||
}
|
||||
key="toggle"
|
||||
onConfirm={async () => {
|
||||
await toggleUserSubscribeStatus({ user_subscribe_id: row.id });
|
||||
toast.success(
|
||||
row.status === 5
|
||||
? t(
|
||||
"resumeSubscribeSuccess",
|
||||
"Subscription resumed successfully"
|
||||
)
|
||||
: t(
|
||||
"stopSubscribeSuccess",
|
||||
"Subscription stopped successfully"
|
||||
)
|
||||
);
|
||||
ref.current?.refresh();
|
||||
}}
|
||||
title={
|
||||
row.status === 5
|
||||
? t("confirmResumeSubscribe", "Confirm Resume Subscription")
|
||||
: t("confirmStopSubscribe", "Confirm Stop Subscription")
|
||||
}
|
||||
trigger={
|
||||
<Button variant="secondary">
|
||||
{row.status === 5
|
||||
? t("resumeSubscribe", "Resume Subscription")
|
||||
: t("stopSubscribe", "Stop Subscription")}
|
||||
</Button>
|
||||
}
|
||||
/>,
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={t(
|
||||
"deleteSubscriptionDescription",
|
||||
"This action cannot be undone."
|
||||
)}
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteUserSubscribe({ user_subscribe_id: row.id });
|
||||
toast.success(t("deleteSuccess", "Deleted successfully"));
|
||||
ref.current?.refresh();
|
||||
}}
|
||||
title={t("confirmDelete", "Confirm Delete")}
|
||||
trigger={
|
||||
<Button variant="destructive">{t("delete", "Delete")}</Button>
|
||||
}
|
||||
/>,
|
||||
<RowMoreActions key="more" subId={row.id} userId={userId} />,
|
||||
],
|
||||
}}
|
||||
columns={[
|
||||
@ -175,6 +82,11 @@ export default function UserSubscription({ userId }: { userId: number }) {
|
||||
header: t("status", "Status"),
|
||||
cell: ({ row }) => {
|
||||
const status = row.getValue("status") as number;
|
||||
const expireTime = row.original.expire_time;
|
||||
|
||||
// 如果过期时间为0，说明是永久订阅，应该显示为激活状态
|
||||
const displayStatus = status === 3 && expireTime === 0 ? 1 : status;
|
||||
|
||||
const statusMap: Record<
|
||||
number,
|
||||
{
|
||||
@ -201,7 +113,7 @@ export default function UserSubscription({ userId }: { userId: number }) {
|
||||
variant: "destructive",
|
||||
},
|
||||
};
|
||||
const statusInfo = statusMap[status] || {
|
||||
const statusInfo = statusMap[displayStatus] || {
|
||||
label: "Unknown",
|
||||
variant: "outline",
|
||||
};
|
||||
@ -261,10 +173,12 @@ export default function UserSubscription({ userId }: { userId: number }) {
|
||||
{
|
||||
accessorKey: "expire_time",
|
||||
header: t("expireTime", "Expire Time"),
|
||||
cell: ({ row }) =>
|
||||
row.getValue("expire_time")
|
||||
? formatDate(row.getValue("expire_time"))
|
||||
: t("permanent", "Permanent"),
|
||||
cell: ({ row }) => {
|
||||
const expireTime = row.getValue("expire_time") as number;
|
||||
return expireTime && expireTime !== 0
|
||||
? formatDate(expireTime)
|
||||
: t("permanent", "Permanent");
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "created_at",
|
||||
@ -308,9 +222,24 @@ export default function UserSubscription({ userId }: { userId: number }) {
|
||||
);
|
||||
}
|
||||
|
||||
function RowMoreActions({ userId, subId }: { userId: number; subId: number }) {
|
||||
function RowMoreActions({
|
||||
userId,
|
||||
row,
|
||||
token,
|
||||
refresh,
|
||||
}: {
|
||||
userId: number;
|
||||
row: API.UserSubscribe;
|
||||
token: string;
|
||||
refresh: () => void;
|
||||
}) {
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
const resetTokenRef = useRef<HTMLButtonElement>(null);
|
||||
const toggleStatusRef = useRef<HTMLButtonElement>(null);
|
||||
const deleteRef = useRef<HTMLButtonElement>(null);
|
||||
const { t } = useTranslation("user");
|
||||
const { getUserSubscribe: getUserSubscribeUrls } = useGlobalStore();
|
||||
|
||||
return (
|
||||
<div className="inline-flex">
|
||||
<DropdownMenu>
|
||||
@ -318,9 +247,47 @@ function RowMoreActions({ userId, subId }: { userId: number; subId: number }) {
|
||||
<Button variant="outline">{t("more", "More")}</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onSelect={async (e) => {
|
||||
e.preventDefault();
|
||||
await navigator.clipboard.writeText(
|
||||
getUserSubscribeUrls(token)[0] || ""
|
||||
);
|
||||
toast.success(t("copySuccess", "Copied successfully"));
|
||||
}}
|
||||
>
|
||||
{t("copySubscription", "Copy Subscription")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
resetTokenRef.current?.click();
|
||||
}}
|
||||
>
|
||||
{t("resetToken", "Reset Subscription Address")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
toggleStatusRef.current?.click();
|
||||
}}
|
||||
>
|
||||
{row.status === 5
|
||||
? t("resumeSubscribe", "Resume Subscription")
|
||||
: t("stopSubscribe", "Stop Subscription")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
deleteRef.current?.click();
|
||||
}}
|
||||
>
|
||||
{t("delete", "Delete")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
search={{ user_id: userId, user_subscribe_id: subId }}
|
||||
search={{ user_id: userId, user_subscribe_id: row.id }}
|
||||
to="/dashboard/log/subscribe"
|
||||
>
|
||||
{t("subscriptionLogs", "Subscription Logs")}
|
||||
@ -328,7 +295,7 @@ function RowMoreActions({ userId, subId }: { userId: number; subId: number }) {
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
search={{ user_id: userId, user_subscribe_id: subId }}
|
||||
search={{ user_id: userId, user_subscribe_id: row.id }}
|
||||
to="/dashboard/log/reset-subscribe"
|
||||
>
|
||||
{t("resetLogs", "Reset Logs")}
|
||||
@ -336,7 +303,7 @@ function RowMoreActions({ userId, subId }: { userId: number; subId: number }) {
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
search={{ user_id: userId, user_subscribe_id: subId }}
|
||||
search={{ user_id: userId, user_subscribe_id: row.id }}
|
||||
to="/dashboard/log/subscribe-traffic"
|
||||
>
|
||||
{t("trafficStats", "Traffic Stats")}
|
||||
@ -344,7 +311,7 @@ function RowMoreActions({ userId, subId }: { userId: number; subId: number }) {
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
search={{ user_id: userId, subscribe_id: subId }}
|
||||
search={{ user_id: userId, subscribe_id: row.id }}
|
||||
to="/dashboard/log/traffic-details"
|
||||
>
|
||||
{t("trafficDetails", "Traffic Details")}
|
||||
@ -361,8 +328,78 @@ function RowMoreActions({ userId, subId }: { userId: number; subId: number }) {
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Hidden triggers for confirm dialogs */}
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={t(
|
||||
"resetTokenDescription",
|
||||
"This will reset the subscription address and regenerate a new token."
|
||||
)}
|
||||
onConfirm={async () => {
|
||||
await resetUserSubscribeToken({
|
||||
user_subscribe_id: row.subscribe_id,
|
||||
});
|
||||
toast.success(
|
||||
t("resetTokenSuccess", "Subscription address reset successfully")
|
||||
);
|
||||
refresh();
|
||||
}}
|
||||
title={t("confirmResetToken", "Confirm Reset Subscription Address")}
|
||||
trigger={<Button className="hidden" ref={resetTokenRef} />}
|
||||
/>
|
||||
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={
|
||||
row.status === 5
|
||||
? t(
|
||||
"resumeSubscribeDescription",
|
||||
"This will resume the subscription and allow the user to use it."
|
||||
)
|
||||
: t(
|
||||
"stopSubscribeDescription",
|
||||
"This will stop the subscription temporarily. User will not be able to use it."
|
||||
)
|
||||
}
|
||||
onConfirm={async () => {
|
||||
await toggleUserSubscribeStatus({
|
||||
user_subscribe_id: row.subscribe_id,
|
||||
});
|
||||
toast.success(
|
||||
row.status === 5
|
||||
? t("resumeSubscribeSuccess", "Subscription resumed successfully")
|
||||
: t("stopSubscribeSuccess", "Subscription stopped successfully")
|
||||
);
|
||||
refresh();
|
||||
}}
|
||||
title={
|
||||
row.status === 5
|
||||
? t("confirmResumeSubscribe", "Confirm Resume Subscription")
|
||||
: t("confirmStopSubscribe", "Confirm Stop Subscription")
|
||||
}
|
||||
trigger={<Button className="hidden" ref={toggleStatusRef} />}
|
||||
/>
|
||||
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={t(
|
||||
"deleteSubscriptionDescription",
|
||||
"This action cannot be undone."
|
||||
)}
|
||||
onConfirm={async () => {
|
||||
await deleteUserSubscribe({ user_subscribe_id: row.id });
|
||||
toast.success(t("deleteSuccess", "Deleted successfully"));
|
||||
refresh();
|
||||
}}
|
||||
title={t("confirmDelete", "Confirm Delete")}
|
||||
trigger={<Button className="hidden" ref={deleteRef} />}
|
||||
/>
|
||||
|
||||
<SubscriptionDetail
|
||||
subscriptionId={subId}
|
||||
subscriptionId={row.id}
|
||||
trigger={<Button className="hidden" ref={triggerRef} />}
|
||||
userId={userId}
|
||||
/>
|
||||
|
||||
@ -95,7 +95,7 @@ export function SubscriptionForm({
|
||||
<SheetHeader>
|
||||
<SheetTitle>{title}</SheetTitle>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]">
|
||||
<ScrollArea className="h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-4">
|
||||
<div className="pr-4">
|
||||
<Form {...form}>
|
||||
<form
|
||||
|
||||
@ -218,337 +218,354 @@ export default function Content() {
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
{userSubscribe.map((item) => (
|
||||
<Card
|
||||
className={cn("relative", {
|
||||
"relative opacity-80 grayscale": item.status === 3,
|
||||
"relative hidden opacity-60 blur-[0.3px] grayscale":
|
||||
item.status === 4,
|
||||
})}
|
||||
key={item.id}
|
||||
>
|
||||
{item.status >= 2 && (
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-none absolute top-0 left-0 z-10 h-full w-full overflow-hidden mix-blend-difference brightness-150 contrast-200 invert-[0.2]",
|
||||
{
|
||||
"text-destructive": item.status === 2,
|
||||
"text-white": item.status === 3 || item.status === 4,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
{Array.from({ length: 16 }).map((_, i) => {
|
||||
const row = Math.floor(i / 4);
|
||||
const col = i % 4;
|
||||
const top = 10 + row * 25 + (col % 2 === 0 ? 5 : -5);
|
||||
const left = 5 + col * 30 + (row % 2 === 0 ? 0 : 10);
|
||||
{userSubscribe.map((item) => {
|
||||
// 如果过期时间为0，说明是永久订阅，不应该显示过期状态
|
||||
const isActuallyExpired =
|
||||
item.status === 3 && item.expire_time !== 0;
|
||||
const shouldShowWatermark =
|
||||
item.status === 2 || item.status === 4 || isActuallyExpired;
|
||||
|
||||
return (
|
||||
<span
|
||||
className="absolute rotate-[-30deg] whitespace-nowrap font-black text-lg opacity-40 shadow-[0px_0px_1px_rgba(255,255,255,0.5)]"
|
||||
key={i}
|
||||
style={{
|
||||
top: `${top}%`,
|
||||
left: `${left}%`,
|
||||
}}
|
||||
>
|
||||
{
|
||||
statusWatermarks[
|
||||
item.status as keyof typeof statusWatermarks
|
||||
]
|
||||
}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<CardHeader className="flex flex-row flex-wrap items-center justify-between gap-2 space-y-0">
|
||||
<CardTitle className="font-medium">
|
||||
{item.subscribe.name}
|
||||
<p className="mt-1 text-foreground/50 text-sm">
|
||||
{formatDate(item.start_time)}
|
||||
</p>
|
||||
</CardTitle>
|
||||
{item.status !== 4 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button size="sm" variant="destructive">
|
||||
{t("resetSubscription", "Reset Subscription")}
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
{t("prompt", "Prompt")}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t(
|
||||
"confirmResetSubscription",
|
||||
"Are you sure you want to reset your subscription?"
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>
|
||||
{t("cancel", "Cancel")}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={async () => {
|
||||
await resetUserSubscribeToken({
|
||||
user_subscribe_id: item.id,
|
||||
});
|
||||
await refetch();
|
||||
toast.success(t("resetSuccess", "Reset Success"));
|
||||
return (
|
||||
<Card
|
||||
className={cn("relative", {
|
||||
"relative opacity-80 grayscale": isActuallyExpired,
|
||||
"relative hidden opacity-60 blur-[0.3px] grayscale":
|
||||
item.status === 4,
|
||||
})}
|
||||
key={item.id}
|
||||
>
|
||||
{shouldShowWatermark && (
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-none absolute top-0 left-0 z-10 h-full w-full overflow-hidden mix-blend-difference brightness-150 contrast-200 invert-[0.2]",
|
||||
{
|
||||
"text-destructive": item.status === 2,
|
||||
"text-white": isActuallyExpired || item.status === 4,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
{Array.from({ length: 16 }).map((_, i) => {
|
||||
const row = Math.floor(i / 4);
|
||||
const col = i % 4;
|
||||
const top = 10 + row * 25 + (col % 2 === 0 ? 5 : -5);
|
||||
const left = 5 + col * 30 + (row % 2 === 0 ? 0 : 10);
|
||||
|
||||
return (
|
||||
<span
|
||||
className="absolute rotate-[-30deg] whitespace-nowrap font-black text-lg opacity-40 shadow-[0px_0px_1px_rgba(255,255,255,0.5)]"
|
||||
key={i}
|
||||
style={{
|
||||
top: `${top}%`,
|
||||
left: `${left}%`,
|
||||
}}
|
||||
>
|
||||
{t("confirm", "Confirm")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<ResetTraffic
|
||||
id={item.id}
|
||||
replacement={item.subscribe.replacement}
|
||||
/>
|
||||
{item.expire_time !== 0 && (
|
||||
<Renewal id={item.id} subscribe={item.subscribe} />
|
||||
)}
|
||||
<Unsubscribe
|
||||
allowDeduction={item.subscribe.allow_deduction}
|
||||
id={item.id}
|
||||
onSuccess={refetch}
|
||||
/>
|
||||
{
|
||||
statusWatermarks[
|
||||
item.status as keyof typeof statusWatermarks
|
||||
]
|
||||
}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="grid grid-cols-2 gap-3 *:flex *:flex-col *:justify-between lg:grid-cols-4">
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("used", "Used")}
|
||||
</span>
|
||||
<span className="font-bold text-2xl">
|
||||
<Display
|
||||
type="traffic"
|
||||
unlimited={!item.traffic}
|
||||
value={item.upload + item.download}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("totalTraffic", "Total Traffic")}
|
||||
</span>
|
||||
<span className="font-bold text-2xl">
|
||||
<Display
|
||||
type="traffic"
|
||||
unlimited={!item.traffic}
|
||||
value={item.traffic}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("nextResetDays", "Next Reset Days")}
|
||||
</span>
|
||||
<span className="font-semibold text-2xl">
|
||||
{item.reset_time
|
||||
? differenceInDays(
|
||||
new Date(item.reset_time),
|
||||
new Date()
|
||||
)
|
||||
: t("noReset", "No Reset")}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("expirationDays", "Expiration Days")}
|
||||
</span>
|
||||
<span className="font-semibold text-2xl">
|
||||
{}
|
||||
{item.expire_time
|
||||
? differenceInDays(
|
||||
new Date(item.expire_time),
|
||||
new Date()
|
||||
) || t("unknown", "Unknown")
|
||||
: t("noLimit", "No Limit")}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Separator className="mt-4" />
|
||||
<Accordion
|
||||
className="w-full"
|
||||
collapsible
|
||||
defaultValue="0"
|
||||
type="single"
|
||||
>
|
||||
{getUserSubscribe(item.token, protocol)?.map((url, index) => (
|
||||
<AccordionItem key={url} value={String(index)}>
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex w-full flex-row items-center justify-between">
|
||||
<CardTitle className="font-medium text-sm">
|
||||
{t("subscriptionUrl", "Subscription URL")}{" "}
|
||||
{index + 1}
|
||||
</CardTitle>
|
||||
|
||||
<CopyToClipboard
|
||||
onCopy={(_, result) => {
|
||||
if (result) {
|
||||
toast.success(t("copySuccess", "Copy Success"));
|
||||
}
|
||||
}}
|
||||
text={url}
|
||||
>
|
||||
<span
|
||||
className="mr-4 flex cursor-pointer rounded p-2 text-primary text-sm hover:bg-accent"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
<CardHeader className="flex flex-row flex-wrap items-center justify-between gap-2 space-y-0">
|
||||
<CardTitle className="font-medium">
|
||||
{item.subscribe.name}
|
||||
<p className="mt-1 text-foreground/50 text-sm">
|
||||
{formatDate(item.start_time)}
|
||||
</p>
|
||||
</CardTitle>
|
||||
{item.status !== 4 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button size="sm" variant="destructive">
|
||||
{t("resetSubscription", "Reset Subscription")}
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
{t("prompt", "Prompt")}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t(
|
||||
"confirmResetSubscription",
|
||||
"Are you sure you want to reset your subscription?"
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>
|
||||
{t("cancel", "Cancel")}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={async () => {
|
||||
await resetUserSubscribeToken({
|
||||
user_subscribe_id: item.id,
|
||||
});
|
||||
await refetch();
|
||||
toast.success(
|
||||
t("resetSuccess", "Reset Success")
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Icon className="mr-2 size-5" icon="uil:copy" />
|
||||
{t("copy", "Copy")}
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
|
||||
{applications
|
||||
?.filter(
|
||||
(application) =>
|
||||
!!(
|
||||
application.download_link?.[platform] &&
|
||||
application.scheme
|
||||
)
|
||||
{t("confirm", "Confirm")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<ResetTraffic
|
||||
id={item.id}
|
||||
replacement={item.subscribe.replacement}
|
||||
/>
|
||||
{item.expire_time !== 0 && (
|
||||
<Renewal id={item.id} subscribe={item.subscribe} />
|
||||
)}
|
||||
<Unsubscribe
|
||||
allowDeduction={item.subscribe.allow_deduction}
|
||||
id={item.id}
|
||||
onSuccess={refetch}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="grid grid-cols-2 gap-3 *:flex *:flex-col *:justify-between lg:grid-cols-4">
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("used", "Used")}
|
||||
</span>
|
||||
<span className="font-bold text-2xl">
|
||||
<Display
|
||||
type="traffic"
|
||||
unlimited={!item.traffic}
|
||||
value={item.upload + item.download}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("totalTraffic", "Total Traffic")}
|
||||
</span>
|
||||
<span className="font-bold text-2xl">
|
||||
<Display
|
||||
type="traffic"
|
||||
unlimited={!item.traffic}
|
||||
value={item.traffic}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("nextResetDays", "Next Reset Days")}
|
||||
</span>
|
||||
<span className="font-semibold text-2xl">
|
||||
{item.reset_time
|
||||
? differenceInDays(
|
||||
new Date(item.reset_time),
|
||||
new Date()
|
||||
)
|
||||
.map((application) => {
|
||||
const downloadUrl =
|
||||
application.download_link?.[platform];
|
||||
: t("noReset", "No Reset")}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-muted-foreground">
|
||||
{t("expirationDays", "Expiration Days")}
|
||||
</span>
|
||||
<span className="font-semibold text-2xl">
|
||||
{}
|
||||
{item.expire_time
|
||||
? differenceInDays(
|
||||
new Date(item.expire_time),
|
||||
new Date()
|
||||
) || t("unknown", "Unknown")
|
||||
: t("noLimit", "No Limit")}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Separator className="mt-4" />
|
||||
<Accordion
|
||||
className="w-full"
|
||||
collapsible
|
||||
defaultValue="0"
|
||||
type="single"
|
||||
>
|
||||
{getUserSubscribe(item.token, protocol)?.map(
|
||||
(url, index) => (
|
||||
<AccordionItem key={url} value={String(index)}>
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex w-full flex-row items-center justify-between">
|
||||
<CardTitle className="font-medium text-sm">
|
||||
{t("subscriptionUrl", "Subscription URL")}{" "}
|
||||
{index + 1}
|
||||
</CardTitle>
|
||||
|
||||
const handleCopy = (
|
||||
_: string,
|
||||
result: boolean
|
||||
) => {
|
||||
if (result) {
|
||||
const href = getAppSubLink(
|
||||
url,
|
||||
application.scheme
|
||||
);
|
||||
const showSuccessMessage = () => {
|
||||
<CopyToClipboard
|
||||
onCopy={(_, result) => {
|
||||
if (result) {
|
||||
toast.success(
|
||||
<>
|
||||
<p>
|
||||
{t("copySuccess", "Copy Success")}
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
{t(
|
||||
"manualImportMessage",
|
||||
"Please import manually"
|
||||
)}
|
||||
</p>
|
||||
</>
|
||||
t("copySuccess", "Copy Success")
|
||||
);
|
||||
}
|
||||
}}
|
||||
text={url}
|
||||
>
|
||||
<span
|
||||
className="mr-4 flex cursor-pointer rounded p-2 text-primary text-sm hover:bg-accent"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Icon
|
||||
className="mr-2 size-5"
|
||||
icon="uil:copy"
|
||||
/>
|
||||
{t("copy", "Copy")}
|
||||
</span>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
|
||||
{applications
|
||||
?.filter(
|
||||
(application) =>
|
||||
!!(
|
||||
application.download_link?.[platform] &&
|
||||
application.scheme
|
||||
)
|
||||
)
|
||||
.map((application) => {
|
||||
const downloadUrl =
|
||||
application.download_link?.[platform];
|
||||
|
||||
const handleCopy = (
|
||||
_: string,
|
||||
result: boolean
|
||||
) => {
|
||||
if (result) {
|
||||
const href = getAppSubLink(
|
||||
url,
|
||||
application.scheme
|
||||
);
|
||||
const showSuccessMessage = () => {
|
||||
toast.success(
|
||||
<>
|
||||
<p>
|
||||
{t("copySuccess", "Copy Success")}
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
{t(
|
||||
"manualImportMessage",
|
||||
"Please import manually"
|
||||
)}
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
if (isBrowser() && href) {
|
||||
window.location.href = href;
|
||||
const checkRedirect = setTimeout(() => {
|
||||
if (window.location.href !== href) {
|
||||
showSuccessMessage();
|
||||
}
|
||||
clearTimeout(checkRedirect);
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
showSuccessMessage();
|
||||
}
|
||||
};
|
||||
|
||||
if (isBrowser() && href) {
|
||||
window.location.href = href;
|
||||
const checkRedirect = setTimeout(() => {
|
||||
if (window.location.href !== href) {
|
||||
showSuccessMessage();
|
||||
}
|
||||
clearTimeout(checkRedirect);
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="flex size-full flex-col items-center justify-between gap-2 text-muted-foreground text-xs"
|
||||
key={application.name}
|
||||
>
|
||||
<span>{application.name}</span>
|
||||
|
||||
showSuccessMessage();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex size-full flex-col items-center justify-between gap-2 text-muted-foreground text-xs"
|
||||
key={application.name}
|
||||
>
|
||||
<span>{application.name}</span>
|
||||
|
||||
{application.icon && (
|
||||
<img
|
||||
alt={application.name}
|
||||
className="p-1"
|
||||
height={64}
|
||||
src={application.icon}
|
||||
width={64}
|
||||
/>
|
||||
)}
|
||||
<div className="flex">
|
||||
{downloadUrl && (
|
||||
<Button
|
||||
asChild
|
||||
className={
|
||||
application.scheme
|
||||
? "rounded-r-none px-1.5"
|
||||
: "px-1.5"
|
||||
}
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
>
|
||||
<a
|
||||
href={downloadUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{t("download", "Download")}
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{application.scheme && (
|
||||
<CopyToClipboard
|
||||
onCopy={handleCopy}
|
||||
text={getAppSubLink(
|
||||
url,
|
||||
application.scheme
|
||||
{application.icon && (
|
||||
<img
|
||||
alt={application.name}
|
||||
className="p-1"
|
||||
height={64}
|
||||
src={application.icon}
|
||||
width={64}
|
||||
/>
|
||||
)}
|
||||
<div className="flex">
|
||||
{downloadUrl && (
|
||||
<Button
|
||||
asChild
|
||||
className={
|
||||
application.scheme
|
||||
? "rounded-r-none px-1.5"
|
||||
: "px-1.5"
|
||||
}
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
>
|
||||
<a
|
||||
href={downloadUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{t("download", "Download")}
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
className={
|
||||
downloadUrl
|
||||
? "rounded-l-none p-2"
|
||||
: "p-2"
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{t("import", "Import")}
|
||||
</Button>
|
||||
</CopyToClipboard>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="hidden size-full flex-col items-center justify-between gap-2 text-muted-foreground text-sm lg:flex">
|
||||
<span>{t("qrCode", "QR Code")}</span>
|
||||
<QRCodeCanvas
|
||||
bgColor="transparent"
|
||||
fgColor="rgb(59, 130, 246)"
|
||||
size={80}
|
||||
value={url}
|
||||
/>
|
||||
<span className="text-center">
|
||||
{t("scanToSubscribe", "Scan to Subscribe")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{application.scheme && (
|
||||
<CopyToClipboard
|
||||
onCopy={handleCopy}
|
||||
text={getAppSubLink(
|
||||
url,
|
||||
application.scheme
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
className={
|
||||
downloadUrl
|
||||
? "rounded-l-none p-2"
|
||||
: "p-2"
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{t("import", "Import")}
|
||||
</Button>
|
||||
</CopyToClipboard>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="hidden size-full flex-col items-center justify-between gap-2 text-muted-foreground text-sm lg:flex">
|
||||
<span>{t("qrCode", "QR Code")}</span>
|
||||
<QRCodeCanvas
|
||||
bgColor="transparent"
|
||||
fgColor="rgb(59, 130, 246)"
|
||||
size={80}
|
||||
value={url}
|
||||
/>
|
||||
<span className="text-center">
|
||||
{t("scanToSubscribe", "Scan to Subscribe")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
)
|
||||
)}
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@ -34,6 +34,15 @@ export function DatePicker({
|
||||
}
|
||||
};
|
||||
|
||||
const handleClear = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDate(undefined);
|
||||
if (onChange) {
|
||||
onChange(0);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
@ -47,16 +56,14 @@ export function DatePicker({
|
||||
{value ? intlFormat(value) : <span>{placeholder}</span>}
|
||||
<div className="flex items-center gap-2">
|
||||
{value && (
|
||||
<X
|
||||
className="size-4 opacity-50 hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDate(undefined);
|
||||
if (onChange) {
|
||||
onChange(0);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="flex items-center"
|
||||
onClick={handleClear}
|
||||
onMouseDown={handleClear}
|
||||
type="button"
|
||||
>
|
||||
<X className="size-4 opacity-50 hover:opacity-100" />
|
||||
</button>
|
||||
)}
|
||||
<CalendarIcon className="size-4" />
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user