HI-VPN/hi-frontend
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨ feat: Added localized support for user subscription and deletion status, and optimized the subscription form and user interface.

Browse Source
This commit is contained in:
web@ppanel 2025-12-29 07:02:31 +00:00
parent 3751f64f73
commit 9f95cec876
8 changed files with 520 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/admin/public/assets/locales/en-US/user.json
View File

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

3
apps/admin/public/assets/locales/zh-CN/user.json
View File

@ -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": "在线",

2
apps/admin/src/sections/product/subscribe-form.tsx
View File

@ -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>

19
apps/admin/src/sections/user/index.tsx
View File

@ -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>

257
apps/admin/src/sections/user/user-subscription/index.tsx
View File

@ -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}
/>

2
apps/admin/src/sections/user/user-subscription/subscription-form.tsx
View File

@ -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

37
apps/user/src/sections/user/dashboard/content.tsx
View File

@ -218,22 +218,29 @@ export default function Content() {
</Tabs>
)}
</div>
{userSubscribe.map((item) => (
{userSubscribe.map((item) => {
// 如果过期时间为0，说明是永久订阅，不应该显示过期状态
const isActuallyExpired =
item.status === 3 && item.expire_time !== 0;
const shouldShowWatermark =
item.status === 2 || item.status === 4 || isActuallyExpired;
return (
<Card
className={cn("relative", {
"relative opacity-80 grayscale": item.status === 3,
"relative opacity-80 grayscale": isActuallyExpired,
"relative hidden opacity-60 blur-[0.3px] grayscale":
item.status === 4,
})}
key={item.id}
>
{item.status >= 2 && (
{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": item.status === 3 || item.status === 4,
"text-white": isActuallyExpired || item.status === 4,
}
)}
>
@ -301,7 +308,9 @@ export default function Content() {
user_subscribe_id: item.id,
});
await refetch();
toast.success(t("resetSuccess", "Reset Success"));
toast.success(
t("resetSuccess", "Reset Success")
);
}}
>
{t("confirm", "Confirm")}
@ -385,7 +394,8 @@ export default function Content() {
defaultValue="0"
type="single"
>
{getUserSubscribe(item.token, protocol)?.map((url, index) => (
{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">
@ -397,7 +407,9 @@ export default function Content() {
<CopyToClipboard
onCopy={(_, result) => {
if (result) {
toast.success(t("copySuccess", "Copy Success"));
toast.success(
t("copySuccess", "Copy Success")
);
}
}}
text={url}
@ -406,7 +418,10 @@ export default function Content() {
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" />
<Icon
className="mr-2 size-5"
icon="uil:copy"
/>
{t("copy", "Copy")}
</span>
</CopyToClipboard>
@ -544,11 +559,13 @@ export default function Content() {
</div>
</AccordionContent>
</AccordionItem>
))}
)
)}
</Accordion>
</CardContent>
</Card>
))}
);
})}
</>
) : (
<>

27
packages/ui/src/composed/date-picker.tsx
View File

@ -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>