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

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

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

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

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

apps/admin/src/sections/product/subscribe-form.tsx

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

apps/admin/src/sections/user/index.tsx

@@ -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
+      <SheetContent className="w-[1000px] max-w-full md:max-w-7xl" side="right">
-        className="w-[1000px] max-w-full md:max-w-screen-xl"
-        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>

apps/admin/src/sections/user/user-subscription/index.tsx

@@ -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
+          <RowMoreActions
-            key="copy"
+            key="more"
-            onClick={async () => {
+            refresh={() => ref.current?.refresh()}
-              await navigator.clipboard.writeText(
+            row={row}
-                getUserSubscribeUrls(row.token)[0] || ""
+            token={row.token}
-              );
+            userId={userId}
-              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>
-            }
           />,
-          <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 }) =>
+          cell: ({ row }) => {
-            row.getValue("expire_time")
+            const expireTime = row.getValue("expire_time") as number;
-              ? formatDate(row.getValue("expire_time"))
+            return expireTime && expireTime !== 0
-              : t("permanent", "Permanent"),
+              ? 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}
       />

apps/admin/src/sections/user/user-subscription/subscription-form.tsx

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

apps/user/src/sections/user/dashboard/content.tsx

@@ -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>
-          ))}
+            );
+          })}
         </>
       ) : (
         <>

packages/ui/src/composed/date-picker.tsx

@@ -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
+              <button
-                className="size-4 opacity-50 hover:opacity-100"
+                className="flex items-center"
-                onClick={(e) => {
+                onClick={handleClear}
-                  e.stopPropagation();
+                onMouseDown={handleClear}
-                  setDate(undefined);
+                type="button"
-                  if (onChange) {
+              >
-                    onChange(0);
+                <X className="size-4 opacity-50 hover:opacity-100" />
-                  }
+              </button>
-                }}
-              />
             )}
             <CalendarIcon className="size-4" />
           </div>