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

2025-12-29 07:02:31 +00:00
parent 3751f64f73
commit 9f95cec876
8 changed files with 520 additions and 444 deletions
@@ -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