merge: 同步 upstream/main 新功能到定制版本

- feat: Add slider verification code (bd67997)
- fix bug: Inventory cannot be zero (1f7a6ee)
- fix: resolve merge conflicts and lint errors

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

@@ -4,7 +4,21 @@
     "noImage": "No Image",
     "placeholder": "Enter captcha code...",
     "refresh": "Refresh captcha",
-    "required": "Please enter captcha code"
+    "required": "Please enter captcha code",
+    "sliderRequired": "Please complete the slider verification",
+    "slider": {
+      "clickToVerify": "Click to verify",
+      "fail": "Try again",
+      "hint": "Drag the piece to fit the puzzle",
+      "success": "Verified",
+      "title": "Security Verification"
+    },
+    "turnstile": {
+      "cancel": "Cancel",
+      "clickToVerify": "Click to verify",
+      "success": "Verified",
+      "title": "Security Verification"
+    }
   },
   "check": {
     "description": "Verify your identity",

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

@@ -7,11 +7,11 @@
   "confirmDeleteTitle": "Delete this node?",
   "copied": "Copied",
   "copy": "Copy",
-  "create": "Create",
+  "create": "Create Landing Node",
   "created": "Created",
   "delete": "Delete",
   "deleted": "Deleted",
-  "drawerCreateTitle": "Create Node",
+  "drawerCreateTitle": "Create Landing Node",
   "drawerEditTitle": "Edit Node",
   "edit": "Edit",
   "enabled": "Enabled",

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

@@ -126,9 +126,10 @@
   "userSecuritySettings": "User & Security",
   "verify": {
     "captchaType": "Captcha Type",
-    "captchaTypeDescription": "Choose between local image captcha (offline) or Cloudflare Turnstile",
+    "captchaTypeDescription": "Choose between local image captcha, local slider captcha (offline) or Cloudflare Turnstile",
     "captchaTypeLocal": "Local Image Captcha",
     "captchaTypePlaceholder": "Select captcha type",
+    "captchaTypeSlider": "Local Slider Captcha",
     "captchaTypeTurnstile": "Cloudflare Turnstile",
     "description": "Configure captcha type and verification settings",
     "enableAdminLoginCaptcha": "Enable Admin Authentication Captcha",

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

@@ -4,7 +4,21 @@
     "noImage": "无图片",
     "placeholder": "请输入验证码...",
     "refresh": "刷新验证码",
-    "required": "请输入验证码"
+    "required": "请输入验证码",
+    "sliderRequired": "请完成滑块验证",
+    "slider": {
+      "clickToVerify": "点击进行验证",
+      "fail": "请重试",
+      "hint": "拖动拼图块到对应位置",
+      "success": "验证成功",
+      "title": "安全验证"
+    },
+    "turnstile": {
+      "cancel": "取消",
+      "clickToVerify": "点击进行验证",
+      "success": "验证成功",
+      "title": "安全验证"
+    }
   },
   "check": {
     "description": "验证您的身份",

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

@@ -198,4 +198,3 @@
   "nodeGroupUsedBySubscribe": "该节点组已被订阅商品设置为默认节点组，不能设为过期节点组",
   "expiredGroupForCalculationDescription": "过期专用节点组不能参与分组计算"
 }
-

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

@@ -7,11 +7,11 @@
   "confirmDeleteTitle": "删除此节点？",
   "copied": "已复制",
   "copy": "复制",
-  "create": "创建",
+  "create": "创建落地节点",
   "created": "已创建",
   "delete": "删除",
   "deleted": "已删除",
-  "drawerCreateTitle": "创建节点",
+  "drawerCreateTitle": "创建落地节点",
   "drawerEditTitle": "编辑节点",
   "edit": "编辑",
   "enabled": "已启用",

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

@@ -126,9 +126,10 @@
   "userSecuritySettings": "用户与安全",
   "verify": {
     "captchaType": "验证码类型",
-    "captchaTypeDescription": "选择本地图形验证码（离线）或 Cloudflare Turnstile",
+    "captchaTypeDescription": "选择本地图形验证码、本地滑块验证码（均可离线）或 Cloudflare Turnstile",
     "captchaTypeLocal": "本地图形验证码",
     "captchaTypePlaceholder": "选择验证码类型",
+    "captchaTypeSlider": "本地滑块验证码",
     "captchaTypeTurnstile": "Cloudflare Turnstile",
     "description": "配置验证码类型和验证设置",
     "enableAdminLoginCaptcha": "启用管理端认证验证码",

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

@@ -34,7 +34,6 @@
   "deleteDescription": "此操作无法撤销。",
   "deleteSubscriptionDescription": "此操作无法撤销。",
   "deleteSuccess": "删除成功",
-  "isDeleted": "状态",
   "deviceGroup": "设备组",
   "deviceLimit": "IP限制",
   "deviceNo": "设备编号",

apps/admin/src/sections/auth/email/auth-form.tsx

@@ -2,10 +2,10 @@
 
 import { useNavigate } from "@tanstack/react-router";
 import {
-  resetPassword,
+  adminLogin,
-  userLogin,
+  adminResetPassword,
-  userRegister,
+} from "@workspace/ui/services/admin/auth";
-} from "@workspace/ui/services/common/auth";
+import { userRegister } from "@workspace/ui/services/common/auth";
 import type { ReactNode } from "react";
 import { useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
@@ -42,7 +42,7 @@ export default function EmailAuthForm() {
       try {
         switch (type) {
           case "login": {
-            const login = await userLogin(params);
+            const login = await adminLogin(params);
             toast.success(t("login.success", "Login successful!"));
             onLogin(login.data.data?.token);
             break;
@@ -54,7 +54,7 @@ export default function EmailAuthForm() {
             break;
           }
           case "reset":
-            await resetPassword(params);
+            await adminResetPassword(params);
             toast.success(t("reset.success", "Password reset successful!"));
             setType("login");
             break;

apps/admin/src/sections/auth/email/login-form.tsx

@@ -15,8 +15,9 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
-import CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
 import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
+import CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
 
 export default function LoginForm({
   loading,
@@ -38,6 +39,7 @@ export default function LoginForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_admin_login_captcha;
 
   const formSchema = z.object({
@@ -53,14 +55,26 @@ export default function LoginForm({
       captchaEnabled && isLocal
         ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
         : z.string().optional(),
+    slider_token:
+      captchaEnabled && isSlider
+        ? z
+            .string()
+            .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+        : z.string().optional(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
+    defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
+      ...initialValues,
+    },
   });
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -71,6 +85,7 @@ export default function LoginForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -143,8 +158,8 @@ export default function LoginForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      ref={localCaptcha}
                       onCaptchaIdChange={setCaptchaId}
+                      ref={localCaptcha}
                     />
                   </FormControl>
                   <FormMessage />
@@ -152,6 +167,20 @@ export default function LoginForm({
               )}
             />
           )}
+          {captchaEnabled && isSlider && (
+            <FormField
+              control={form.control}
+              name="slider_token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <SliderCaptcha {...field} ref={sliderCaptcha} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
           <Button disabled={loading} type="submit">
             {loading && <Icon className="animate-spin" icon="mdi:loading" />}
             {t("login.title", "Login")}

apps/admin/src/sections/auth/email/reset-form.tsx

@@ -15,9 +15,10 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
-import SendCode from "../send-code";
-import CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
 import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
+import SendCode from "../send-code";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
+import CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
 
 export default function ResetForm({
   loading,
@@ -40,6 +41,7 @@ export default function ResetForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_user_reset_password_captcha;
 
   const formSchema = z.object({
@@ -56,14 +58,26 @@ export default function ResetForm({
       captchaEnabled && isLocal
         ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
         : z.string().nullish(),
+    slider_token:
+      captchaEnabled && isSlider
+        ? z
+            .string()
+            .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+        : z.string().optional(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
+    defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
+      ...initialValues,
+    },
   });
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -74,6 +88,7 @@ export default function ResetForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -173,8 +188,8 @@ export default function ResetForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      ref={localCaptcha}
                       onCaptchaIdChange={setCaptchaId}
+                      ref={localCaptcha}
                     />
                   </FormControl>
                   <FormMessage />
@@ -182,6 +197,20 @@ export default function ResetForm({
               )}
             />
           )}
+          {captchaEnabled && isSlider && (
+            <FormField
+              control={form.control}
+              name="slider_token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <SliderCaptcha {...field} ref={sliderCaptcha} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
           <Button disabled={loading} type="submit">
             {loading && <Icon className="animate-spin" icon="mdi:loading" />}
             {t("reset.title", "Reset Password")}

apps/admin/src/sections/auth/local-captcha.tsx

@@ -2,7 +2,7 @@ import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
 import { Icon } from "@workspace/ui/composed/icon";
 import { adminGenerateCaptcha } from "@workspace/ui/services/admin/auth";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface LocalCaptchaRef {
@@ -15,8 +15,12 @@ interface LocalCaptchaProps {
   onCaptchaIdChange?: (id: string) => void;
 }
 
-const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
+const LocalCaptcha = ({
-  ({ value, onChange, onCaptchaIdChange }, ref) => {
+  value,
+  onChange,
+  onCaptchaIdChange,
+  ref,
+}: LocalCaptchaProps & { ref?: RefObject<LocalCaptchaRef | null> }) => {
   const { t } = useTranslation("auth");
   const [captchaImage, setCaptchaImage] = useState("");
   const [loading, setLoading] = useState(false);
@@ -51,10 +55,10 @@ const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
   return (
     <div className="flex gap-2">
       <Input
+        className="flex-1"
+        onChange={(e) => onChange?.(e.target.value)}
         placeholder={t("captcha.placeholder", "Enter captcha code...")}
         value={value || ""}
-          onChange={(e) => onChange?.(e.target.value)}
-          className="flex-1"
       />
       <div className="relative h-10 w-32 flex-shrink-0">
         {loading ? (
@@ -63,32 +67,33 @@ const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
           </div>
         ) : captchaImage ? (
           <img
-              src={captchaImage}
             alt="captcha"
             className="h-full w-full cursor-pointer object-contain"
+            height={40}
             onClick={fetchCaptcha}
+            src={captchaImage}
             title={t("captcha.clickToRefresh", "Click to refresh")}
+            width={120}
           />
         ) : (
-            <div className="flex h-full items-center justify-center bg-muted text-xs text-muted-foreground">
+          <div className="flex h-full items-center justify-center bg-muted text-muted-foreground text-xs">
             {t("captcha.noImage", "No Image")}
           </div>
         )}
       </div>
       <Button
+        disabled={loading}
+        onClick={fetchCaptcha}
+        size="icon"
+        title={t("captcha.refresh", "Refresh captcha")}
         type="button"
         variant="outline"
-          size="icon"
-          onClick={fetchCaptcha}
-          disabled={loading}
-          title={t("captcha.refresh", "Refresh captcha")}
       >
         <Icon icon="mdi:refresh" />
       </Button>
     </div>
   );
-  }
+};
-);
 
 LocalCaptcha.displayName = "LocalCaptcha";
 

apps/admin/src/sections/auth/slider-captcha.tsx

@@ -0,0 +1,358 @@
+import { Button } from "@workspace/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog";
+import { Icon } from "@workspace/ui/composed/icon";
+import {
+  adminGenerateCaptcha,
+  adminVerifyCaptchaSlider,
+} from "@workspace/ui/services/admin/auth";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export interface SliderCaptchaRef {
+  reset: () => void;
+}
+
+interface SliderCaptchaProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+interface TrailPoint {
+  x: number;
+  y: number;
+  t: number;
+}
+
+const BLOCK_SIZE = 100;
+const BG_NATURAL_WIDTH = 560;
+const BG_NATURAL_HEIGHT = 280;
+
+const SliderCaptcha = ({
+  onChange,
+  ref,
+}: SliderCaptchaProps & { ref?: RefObject<SliderCaptchaRef | null> }) => {
+  const { t } = useTranslation("auth");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [captchaId, setCaptchaId] = useState("");
+  const [bgImage, setBgImage] = useState("");
+  const [blockImage, setBlockImage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [verified, setVerified] = useState(false);
+  const [status, setStatus] = useState<"idle" | "success" | "fail">("idle");
+  const [blockPos, setBlockPos] = useState({ x: 0, y: 50 });
+  const [shaking, setShaking] = useState(false);
+
+  const dragging = useRef(false);
+  const startPointer = useRef({ x: 0, y: 0 });
+  const startBlock = useRef({ x: 0, y: 50 });
+  const dragStartTime = useRef(0);
+  const trail = useRef<TrailPoint[]>([]);
+
+  const getContainerSize = () => {
+    const el = containerRef.current;
+    if (!el) return { w: BG_NATURAL_WIDTH, h: BG_NATURAL_HEIGHT };
+    return { w: el.clientWidth, h: el.clientHeight };
+  };
+
+  const fetchCaptcha = useCallback(async () => {
+    setLoading(true);
+    setStatus("idle");
+    setBlockPos({ x: 0, y: 50 });
+    trail.current = [];
+    try {
+      const res = await adminGenerateCaptcha();
+      const data = res.data?.data;
+      if (data) {
+        setCaptchaId(data.id);
+        setBgImage(data.image);
+        setBlockImage(data.block_image ?? "");
+      }
+    } catch (e) {
+      console.error("Failed to generate slider captcha:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleOpen = () => {
+    if (verified) return;
+    setOpen(true);
+    fetchCaptcha();
+  };
+
+  useImperativeHandle(ref, () => ({
+    reset: () => {
+      setVerified(false);
+      onChange?.("");
+      setOpen(false);
+      trail.current = [];
+    },
+  }));
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (status === "success" || loading) return;
+    dragging.current = true;
+    dragStartTime.current = Date.now();
+    trail.current = [];
+    startPointer.current = { x: e.clientX, y: e.clientY };
+    startBlock.current = { ...blockPos };
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    e.preventDefault();
+
+    const { w, h } = getContainerSize();
+    const _scaleX = BG_NATURAL_WIDTH / w;
+    const _scaleY = BG_NATURAL_HEIGHT / h;
+    trail.current.push({
+      x: Math.round(startBlock.current.x),
+      y: Math.round(startBlock.current.y),
+      t: 0,
+    });
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging.current) return;
+    const { w, h } = getContainerSize();
+    const scaleX = BG_NATURAL_WIDTH / w;
+    const scaleY = BG_NATURAL_HEIGHT / h;
+    const dx = (e.clientX - startPointer.current.x) * scaleX;
+    const dy = (e.clientY - startPointer.current.y) * scaleY;
+    const newX = Math.max(
+      0,
+      Math.min(startBlock.current.x + dx, BG_NATURAL_WIDTH - BLOCK_SIZE)
+    );
+    const newY = Math.max(
+      0,
+      Math.min(startBlock.current.y + dy, BG_NATURAL_HEIGHT - BLOCK_SIZE)
+    );
+    setBlockPos({ x: newX, y: newY });
+
+    trail.current.push({
+      x: Math.round(newX),
+      y: Math.round(newY),
+      t: Date.now() - dragStartTime.current,
+    });
+  };
+
+  const onPointerUp = async (e: React.PointerEvent) => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    const { w, h } = getContainerSize();
+    const scaleX = BG_NATURAL_WIDTH / w;
+    const scaleY = BG_NATURAL_HEIGHT / h;
+    const dx = (e.clientX - startPointer.current.x) * scaleX;
+    const dy = (e.clientY - startPointer.current.y) * scaleY;
+    const finalX = Math.round(
+      Math.max(
+        0,
+        Math.min(startBlock.current.x + dx, BG_NATURAL_WIDTH - BLOCK_SIZE)
+      )
+    );
+    const finalY = Math.round(
+      Math.max(
+        0,
+        Math.min(startBlock.current.y + dy, BG_NATURAL_HEIGHT - BLOCK_SIZE)
+      )
+    );
+    setBlockPos({ x: finalX, y: finalY });
+
+    trail.current.push({
+      x: finalX,
+      y: finalY,
+      t: Date.now() - dragStartTime.current,
+    });
+
+    try {
+      const res = await adminVerifyCaptchaSlider({
+        id: captchaId,
+        x: finalX,
+        y: finalY,
+        trail: JSON.stringify(trail.current),
+      });
+      const token = res.data?.data?.token;
+      if (token) {
+        setStatus("success");
+        setTimeout(() => {
+          setVerified(true);
+          onChange?.(token);
+          setOpen(false);
+        }, 600);
+      } else {
+        triggerFail();
+      }
+    } catch {
+      triggerFail();
+    }
+  };
+
+  const triggerFail = () => {
+    setStatus("fail");
+    setShaking(true);
+    setTimeout(() => {
+      setShaking(false);
+      fetchCaptcha();
+    }, 800);
+  };
+
+  const blockLeftPct = (blockPos.x / BG_NATURAL_WIDTH) * 100;
+  const blockTopPct = (blockPos.y / BG_NATURAL_HEIGHT) * 100;
+  const blockSizeWPct = (BLOCK_SIZE / BG_NATURAL_WIDTH) * 100;
+  const blockSizeHPct = (BLOCK_SIZE / BG_NATURAL_HEIGHT) * 100;
+
+  return (
+    <>
+      {/* Trigger button */}
+      <button
+        className={`relative flex w-full items-center gap-3 rounded-md border px-4 py-3 text-sm transition-colors ${
+          verified
+            ? "border-green-400 bg-green-50 text-green-700 dark:bg-green-950/30"
+            : "border-input bg-background hover:bg-muted"
+        }`}
+        onClick={handleOpen}
+        type="button"
+      >
+        <span
+          className={`relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${
+            verified ? "bg-green-500" : "bg-primary"
+          }`}
+        >
+          {verified ? (
+            <Icon className="text-white text-xs" icon="mdi:check" />
+          ) : (
+            <>
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
+              <span className="relative inline-flex h-3 w-3 rounded-full bg-primary" />
+            </>
+          )}
+        </span>
+        <span className={verified ? "font-medium" : "text-muted-foreground"}>
+          {verified
+            ? t("captcha.slider.success", "Verified")
+            : t("captcha.slider.clickToVerify", "Click to verify")}
+        </span>
+        {verified && (
+          <Icon className="ml-auto text-green-500" icon="mdi:check-circle" />
+        )}
+      </button>
+
+      {/* Slider dialog */}
+      <Dialog
+        onOpenChange={(o) => {
+          if (!o) setOpen(false);
+        }}
+        open={open}
+      >
+        <DialogContent className="select-none p-6 sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {t("captcha.slider.title", "Security Verification")}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div
+            className={`relative w-full overflow-hidden rounded-md bg-muted ${
+              shaking ? "animate-[shake_0.4s_ease-in-out]" : ""
+            }`}
+            ref={containerRef}
+            style={{
+              paddingTop: `${(BG_NATURAL_HEIGHT / BG_NATURAL_WIDTH) * 100}%`,
+            }}
+          >
+            <div className="absolute inset-0">
+              {loading ? (
+                <div className="flex h-full items-center justify-center">
+                  <Icon className="animate-spin text-2xl" icon="mdi:loading" />
+                </div>
+              ) : bgImage ? (
+                <>
+                  <img
+                    alt="captcha background"
+                    className="absolute inset-0 h-full w-full"
+                    draggable={false}
+                    height={BG_NATURAL_HEIGHT}
+                    src={bgImage}
+                    width={BG_NATURAL_WIDTH}
+                  />
+                  {blockImage && (
+                    <img
+                      alt="captcha block"
+                      className="absolute cursor-grab active:cursor-grabbing"
+                      draggable={false}
+                      height={BG_NATURAL_HEIGHT}
+                      onPointerDown={onPointerDown}
+                      onPointerMove={onPointerMove}
+                      onPointerUp={onPointerUp}
+                      src={blockImage}
+                      style={{
+                        filter:
+                          status === "success"
+                            ? "drop-shadow(0 0 3px rgba(74,222,128,0.9))"
+                            : status === "fail"
+                              ? "drop-shadow(0 0 3px rgba(248,113,113,0.9))"
+                              : "drop-shadow(0 0 2px rgba(255,255,255,0.7))",
+                        left: `${blockLeftPct}%`,
+                        top: `${blockTopPct}%`,
+                        width: `${blockSizeWPct}%`,
+                        height: `${blockSizeHPct}%`,
+                        touchAction: "none",
+                      }}
+                      width={BG_NATURAL_WIDTH}
+                    />
+                  )}
+                  {status !== "idle" && (
+                    <div
+                      className={`absolute inset-0 flex items-center justify-center font-medium text-sm ${
+                        status === "success"
+                          ? "bg-green-500/20 text-green-700"
+                          : "bg-red-500/20 text-red-700"
+                      }`}
+                    >
+                      {status === "success"
+                        ? t("captcha.slider.success", "Verified")
+                        : t("captcha.slider.fail", "Try again")}
+                    </div>
+                  )}
+                </>
+              ) : null}
+            </div>
+          </div>
+
+          <p className="text-center text-muted-foreground text-xs">
+            {t("captcha.slider.hint", "Drag the piece to fit the puzzle")}
+          </p>
+
+          <Button
+            className="w-full"
+            disabled={loading}
+            onClick={fetchCaptcha}
+            size="sm"
+            type="button"
+            variant="ghost"
+          >
+            <Icon icon="mdi:refresh" />
+            {t("captcha.clickToRefresh", "Refresh")}
+          </Button>
+        </DialogContent>
+      </Dialog>
+
+      <style>{`
+          @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            20% { transform: translateX(-8px); }
+            40% { transform: translateX(8px); }
+            60% { transform: translateX(-6px); }
+            80% { transform: translateX(6px); }
+          }
+        `}</style>
+    </>
+  );
+};
+
+SliderCaptcha.displayName = "SliderCaptcha";
+
+export default SliderCaptcha;

apps/admin/src/sections/auth/turnstile.tsx

@@ -1,5 +1,18 @@
+import { Button } from "@workspace/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog";
+import { Icon } from "@workspace/ui/composed/icon";
 import { useTheme } from "next-themes";
-import { type RefObject, useEffect, useImperativeHandle } from "react";
+import {
+  type RefObject,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import Turnstile, { useTurnstile } from "react-turnstile";
 
@@ -23,43 +36,119 @@ const CloudFlareTurnstile = function CloudFlareTurnstile({
   const { common } = useGlobalStore();
   const { verify } = common;
   const { resolvedTheme } = useTheme();
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation("auth");
   const locale = i18n.language;
   const turnstile = useTurnstile();
+  const [open, setOpen] = useState(false);
+  const [verified, setVerified] = useState(false);
 
   useImperativeHandle(
     ref,
     () => ({
-      reset: () => turnstile.reset(),
+      reset: () => {
+        setVerified(false);
+        onChange("");
+        turnstile.reset();
+      },
     }),
-    [turnstile]
+    [turnstile, onChange]
   );
 
   useEffect(() => {
     if (value === "") {
+      setVerified(false);
       turnstile.reset();
     }
   }, [turnstile, value]);
 
+  const handleOpen = () => {
+    if (verified) return;
+    setOpen(true);
+  };
+
+  if (!verify.turnstile_site_key) return null;
+
   return (
-    verify.turnstile_site_key && (
+    <>
+      {/* Trigger button */}
+      <button
+        className={`relative flex w-full items-center gap-3 rounded-md border px-4 py-3 text-sm transition-colors ${
+          verified
+            ? "border-green-400 bg-green-50 text-green-700 dark:bg-green-950/30"
+            : "border-input bg-background hover:bg-muted"
+        }`}
+        onClick={handleOpen}
+        type="button"
+      >
+        <span
+          className={`relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${
+            verified ? "bg-green-500" : "bg-primary"
+          }`}
+        >
+          {verified ? (
+            <Icon className="text-white text-xs" icon="mdi:check" />
+          ) : (
+            <>
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
+              <span className="relative inline-flex h-3 w-3 rounded-full bg-primary" />
+            </>
+          )}
+        </span>
+        <span className={verified ? "font-medium" : "text-muted-foreground"}>
+          {verified
+            ? t("captcha.turnstile.success", "Verified")
+            : t("captcha.turnstile.clickToVerify", "Click to verify")}
+        </span>
+        {verified && (
+          <Icon className="ml-auto text-green-500" icon="mdi:check-circle" />
+        )}
+      </button>
+
+      {/* Turnstile dialog */}
+      <Dialog
+        onOpenChange={(o) => {
+          if (!o) setOpen(false);
+        }}
+        open={open}
+      >
+        <DialogContent className="flex w-auto flex-col items-center gap-4 p-6">
+          <DialogHeader>
+            <DialogTitle>
+              {t("captcha.turnstile.title", "Security Verification")}
+            </DialogTitle>
+          </DialogHeader>
           <Turnstile
             fixedSize
             id={id}
             language={locale.toLowerCase()}
             onExpire={() => {
-          onChange();
+              onChange("");
               turnstile.reset();
             }}
             onTimeout={() => {
-          onChange();
+              onChange("");
               turnstile.reset();
             }}
-        onVerify={(token) => onChange(token)}
+            onVerify={(token) => {
+              setVerified(true);
+              onChange(token);
+              setTimeout(() => setOpen(false), 400);
+            }}
             sitekey={verify.turnstile_site_key}
             theme={resolvedTheme as "light" | "dark"}
           />
-    )
+          <Button
+            className="w-full"
+            onClick={() => setOpen(false)}
+            size="sm"
+            type="button"
+            variant="ghost"
+          >
+            {t("captcha.turnstile.cancel", "Cancel")}
+          </Button>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };
 

apps/admin/src/sections/group/average-mode-tab.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -11,17 +12,16 @@ import {
 } from "@workspace/ui/components/card";
 import { Input } from "@workspace/ui/components/input";
 import { Label } from "@workspace/ui/components/label";
-import { Loader2 } from "lucide-react";
-import { useEffect, useState, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { useQuery } from "@tanstack/react-query";
-import { toast } from "sonner";
 import {
   getGroupConfig,
   getNodeGroupList,
   getRecalculationStatus,
   recalculateGroup,
 } from "@workspace/ui/services/admin/group";
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 export default function AverageModeTab() {
   const { t } = useTranslation("group");
@@ -147,7 +147,9 @@ export default function AverageModeTab() {
       {/* Configuration Card */}
       <Card>
         <CardHeader>
-          <CardTitle>{t("averageModeConfig", "Average Mode Configuration")}</CardTitle>
+          <CardTitle>
+            {t("averageModeConfig", "Average Mode Configuration")}
+          </CardTitle>
           <CardDescription>
             {t(
               "averageModeDescription",
@@ -162,15 +164,18 @@ export default function AverageModeTab() {
                 {t("availableNodeGroups", "Available Node Groups")}
               </Label>
               <Input
-                id="node_group_count"
-                type="number"
-                min={1}
-                value={averageConfig.node_group_count}
-                readOnly
                 className="bg-muted"
+                id="node_group_count"
+                min={1}
+                readOnly
+                type="number"
+                value={averageConfig.node_group_count}
               />
-              <p className="text-xs text-muted-foreground">
+              <p className="text-muted-foreground text-xs">
-                {t("nodeGroupCountAutoCalculated", "Auto-calculated from actual node groups")}
+                {t(
+                  "nodeGroupCountAutoCalculated",
+                  "Auto-calculated from actual node groups"
+                )}
               </p>
             </div>
           </div>
@@ -180,7 +185,9 @@ export default function AverageModeTab() {
       {/* Recalculation Card */}
       <Card>
         <CardHeader>
-          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
+          <CardTitle>
+            {t("groupRecalculation", "Group Recalculation")}
+          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -192,7 +199,7 @@ export default function AverageModeTab() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">
+              <span className="font-medium text-sm">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -224,14 +231,20 @@ export default function AverageModeTab() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
-                {t("recalculationCompleted", "Recalculation completed successfully")}
+                {t(
+                  "recalculationCompleted",
+                  "Recalculation completed successfully"
+                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-sm text-destructive">
+              <div className="text-destructive text-sm">
-                {t("recalculationFailed", "Recalculation failed. Please try again.")}
+                {t(
+                  "recalculationFailed",
+                  "Recalculation failed. Please try again."
+                )}
               </div>
             )}
           </div>
@@ -239,8 +252,8 @@ export default function AverageModeTab() {
           {/* Recalculate Button */}
           <div className="flex justify-end">
             <Button
-              onClick={handleRecalculate}
               disabled={recalculating || status?.state === "running"}
+              onClick={handleRecalculate}
             >
               {recalculating && (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />

apps/admin/src/sections/group/bind-node-groups-dialog.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { Button } from "@workspace/ui/components/button";
 import {
   Dialog,
@@ -18,12 +19,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@workspace/ui/components/select";
+import {
+  bindNodeGroups,
+  getNodeGroupList,
+} from "@workspace/ui/services/admin/group";
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { getNodeGroupList, bindNodeGroups } from "@workspace/ui/services/admin/group";
 
 interface BindNodeGroupsDialogProps {
   userGroupIds: number[];
@@ -41,7 +44,9 @@ export default function BindNodeGroupsDialog({
   const { t } = useTranslation("group");
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [selectedNodeGroupId, setSelectedNodeGroupId] = useState<number | undefined>();
+  const [selectedNodeGroupId, setSelectedNodeGroupId] = useState<
+    number | undefined
+  >();
 
   const { data: nodeGroupsData, isLoading } = useQuery({
     queryKey: ["nodeGroups"],
@@ -78,10 +83,10 @@ export default function BindNodeGroupsDialog({
       } as API.BindNodeGroupsRequest);
 
       toast.success(
-        t("bindSuccess", "Successfully bound {{userGroupCount}} user groups to node group").replace(
+        t(
-          /{{userGroupCount}}/g,
+          "bindSuccess",
-          String(userGroupIds.length)
+          "Successfully bound {{userGroupCount}} user groups to node group"
-        )
+        ).replace(/{{userGroupCount}}/g, String(userGroupIds.length))
       );
 
       setOpen(false);
@@ -101,12 +106,15 @@ export default function BindNodeGroupsDialog({
       : userGroupNames.join(", ");
 
   return (
-    <Dialog open={open} onOpenChange={(newOpen) => {
+    <Dialog
+      onOpenChange={(newOpen) => {
         setOpen(newOpen);
         onOpenChange?.(newOpen);
-    }}>
+      }}
+      open={open}
+    >
       <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
+        <Button size="sm" variant="outline">
           {t("bindNodeGroup", "Bind Node Group")}
         </Button>
       </DialogTrigger>
@@ -129,18 +137,25 @@ export default function BindNodeGroupsDialog({
             </div>
           ) : (
             <div className="space-y-2">
-              <Label htmlFor="node-group">{t("selectNodeGroup", "Select Node Group")}</Label>
+              <Label htmlFor="node-group">
+                {t("selectNodeGroup", "Select Node Group")}
+              </Label>
               <Select
+                onValueChange={(val) =>
+                  setSelectedNodeGroupId(Number.parseInt(val, 10) || undefined)
+                }
                 value={selectedNodeGroupId?.toString() || ""}
-                onValueChange={(val) => setSelectedNodeGroupId(parseInt(val) || undefined)}
               >
-                <SelectTrigger id="node-group" className="w-full">
+                <SelectTrigger className="w-full" id="node-group">
-                  <SelectValue placeholder={t("selectNodeGroupPlaceholder", "Select a node group...")} />
+                  <SelectValue
+                    placeholder={t(
+                      "selectNodeGroupPlaceholder",
+                      "Select a node group..."
+                    )}
+                  />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="0">
+                  <SelectItem value="0">{t("unbound", "Unbound")}</SelectItem>
-                    {t("unbound", "Unbound")}
-                  </SelectItem>
                   {nodeGroupsData?.map((nodeGroup) => (
                     <SelectItem key={nodeGroup.id} value={String(nodeGroup.id)}>
                       {nodeGroup.name}
@@ -154,16 +169,19 @@ export default function BindNodeGroupsDialog({
 
         <DialogFooter>
           <Button
-            variant="outline"
+            disabled={saving}
             onClick={() => {
               setOpen(false);
               onOpenChange?.(false);
             }}
-            disabled={saving}
+            variant="outline"
           >
             {t("cancel", "Cancel")}
           </Button>
-          <Button onClick={handleBind} disabled={saving || selectedNodeGroupId === undefined}>
+          <Button
+            disabled={saving || selectedNodeGroupId === undefined}
+            onClick={handleBind}
+          >
             {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
             {t("confirm", "Confirm")}
           </Button>

apps/admin/src/sections/group/current-group-results.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import {
   Card,
   CardContent,
@@ -22,11 +23,14 @@ import {
   TableHeader,
   TableRow,
 } from "@workspace/ui/components/table";
+import {
+  getGroupHistory,
+  getGroupHistoryDetail,
+  getNodeGroupList,
+} from "@workspace/ui/services/admin/group";
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useQuery } from "@tanstack/react-query";
-import { getGroupHistory, getGroupHistoryDetail, getNodeGroupList } from "@workspace/ui/services/admin/group";
 
 export default function CurrentGroupResults() {
   const { t } = useTranslation("group");
@@ -37,7 +41,8 @@ export default function CurrentGroupResults() {
 
   // User list dialog state
   const [userListOpen, setUserListOpen] = useState(false);
-  const [selectedNodeGroupName, setSelectedNodeGroupName] = useState<string>("");
+  const [selectedNodeGroupName, setSelectedNodeGroupName] =
+    useState<string>("");
   const [userList, setUserList] = useState<any[]>([]);
   const [userListLoading, setUserListLoading] = useState(false);
   const [userListTotal, setUserListTotal] = useState(0);
@@ -94,7 +99,10 @@ export default function CurrentGroupResults() {
     loadData();
   }, []);
 
-  const handleShowUserList = async (nodeGroupId: number, nodeGroupName: string) => {
+  const handleShowUserList = async (
+    nodeGroupId: number,
+    nodeGroupName: string
+  ) => {
     setSelectedNodeGroupName(nodeGroupName);
     setUserListOpen(true);
     setUserListLoading(true);
@@ -132,10 +140,10 @@ export default function CurrentGroupResults() {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t("currentGroupingResult", "Current Grouping Result")}</CardTitle>
+          <CardTitle>
-          <CardDescription>
+            {t("currentGroupingResult", "Current Grouping Result")}
-            {t("loading", "Loading...")}
+          </CardTitle>
-          </CardDescription>
+          <CardDescription>{t("loading", "Loading...")}</CardDescription>
         </CardHeader>
       </Card>
     );
@@ -144,81 +152,103 @@ export default function CurrentGroupResults() {
   return (
     <div className="space-y-4">
       {/* Latest Result Card */}
-      {!latestResult ? (
+      {latestResult ? (
         <Card>
           <CardHeader>
-            <CardTitle>{t("currentGroupingResult", "Current Grouping Result")}</CardTitle>
+            <CardTitle>
-          </CardHeader>
+              {t("currentGroupingResult", "Current Grouping Result")}
-          <CardContent>
+            </CardTitle>
-            <div className="text-center py-8 text-sm text-muted-foreground">
-              {t("noDetails", "No details available")}
-            </div>
-          </CardContent>
-        </Card>
-      ) : (
-        <Card>
-          <CardHeader>
-            <CardTitle>{t("currentGroupingResult", "Current Grouping Result")}</CardTitle>
             <CardDescription>
-              {t("latestGroupingCalculation", "Latest grouping calculation details")}
+              {t(
+                "latestGroupingCalculation",
+                "Latest grouping calculation details"
+              )}
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             {/* Calculation Info */}
             <div className="space-y-2">
-              <h3 className="text-sm font-medium">{t("calculationInfo", "Calculation Information")}</h3>
+              <h3 className="font-medium text-sm">
+                {t("calculationInfo", "Calculation Information")}
+              </h3>
               <div className="grid grid-cols-2 gap-4 rounded-lg bg-muted/50 p-4">
                 <div>
-                <div className="text-xs text-muted-foreground">{t("groupMode", "Group Mode")}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {t("groupMode", "Group Mode")}
+                  </div>
                   <div className="font-medium">
-                  {(latestResult.GroupMode || latestResult.group_mode) === "average"
+                    {(latestResult.GroupMode || latestResult.group_mode) ===
+                    "average"
                       ? t("averageMode", "Average Mode")
-                    : (latestResult.GroupMode || latestResult.group_mode) === "subscribe"
+                      : (latestResult.GroupMode || latestResult.group_mode) ===
+                          "subscribe"
                         ? t("subscribeMode", "Subscribe Mode")
                         : t("trafficMode", "Traffic Mode")}
                   </div>
                 </div>
                 <div>
-                <div className="text-xs text-muted-foreground">{t("state", "State")}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {t("state", "State")}
+                  </div>
                   <div className="font-medium">
                     {(latestResult.State || latestResult.state) === "completed"
                       ? t("completed", "Completed")
                       : (latestResult.State || latestResult.state) === "running"
                         ? t("running", "Running")
-                    : (latestResult.State || latestResult.state) === "failed"
+                        : (latestResult.State || latestResult.state) ===
+                            "failed"
                           ? t("failed", "Failed")
                           : t("idle", "Idle")}
                   </div>
                 </div>
                 <div>
-                <div className="text-xs text-muted-foreground">{t("triggerType", "Trigger Type")}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {t("triggerType", "Trigger Type")}
+                  </div>
                   <div className="font-medium">
-                  {(latestResult.TriggerType || latestResult.trigger_type) === "manual"
+                    {(latestResult.TriggerType || latestResult.trigger_type) ===
+                    "manual"
                       ? t("manualTrigger", "Manual")
-                    : (latestResult.TriggerType || latestResult.trigger_type) === "auto"
+                      : (latestResult.TriggerType ||
+                            latestResult.trigger_type) === "auto"
                         ? t("autoTrigger", "Auto")
                         : t("scheduleTrigger", "Schedule")}
                   </div>
                 </div>
                 <div>
-                <div className="text-xs text-muted-foreground">{t("successFailedCount", "Success/Failed")}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {t("successFailedCount", "Success/Failed")}
+                  </div>
                   <div className="font-medium">
-                  {latestResult.SuccessCount || latestResult.success_count || 0} / {latestResult.FailedCount || latestResult.failed_count || 0}
+                    {latestResult.SuccessCount ||
+                      latestResult.success_count ||
+                      0}{" "}
+                    /{" "}
+                    {latestResult.FailedCount || latestResult.failed_count || 0}
                   </div>
                 </div>
                 <div>
-                <div className="text-xs text-muted-foreground">{t("startTime", "Start Time")}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {t("startTime", "Start Time")}
+                  </div>
                   <div className="font-medium">
                     {latestResult.StartTime || latestResult.start_time
-                    ? new Date((latestResult.StartTime || latestResult.start_time) * 1000).toLocaleString()
+                      ? new Date(
+                          (latestResult.StartTime || latestResult.start_time) *
+                            1000
+                        ).toLocaleString()
                       : "-"}
                   </div>
                 </div>
                 <div>
-                <div className="text-xs text-muted-foreground">{t("endTime", "End Time")}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {t("endTime", "End Time")}
+                  </div>
                   <div className="font-medium">
                     {latestResult.EndTime || latestResult.end_time
-                    ? new Date((latestResult.EndTime || latestResult.end_time) * 1000).toLocaleString()
+                      ? new Date(
+                          (latestResult.EndTime || latestResult.end_time) * 1000
+                        ).toLocaleString()
                       : "-"}
                   </div>
                 </div>
@@ -227,27 +257,39 @@ export default function CurrentGroupResults() {
 
             {/* Grouping Details */}
             <div className="space-y-2">
-              <h3 className="text-sm font-medium">{t("groupingDetailsStatistics", "Grouping Details Statistics")}</h3>
+              <h3 className="font-medium text-sm">
+                {t("groupingDetailsStatistics", "Grouping Details Statistics")}
+              </h3>
               <div className="grid grid-cols-3 gap-4 rounded-lg bg-muted/50 p-4">
                 <div className="text-center">
-                  <div className="text-2xl font-bold">
+                  <div className="font-bold text-2xl">
-                    {latestDetails.reduce((sum: number, d: any) => sum + (d.UserCount || d.user_count || 0), 0)}
+                    {latestDetails.reduce(
+                      (sum: number, d: any) =>
+                        sum + (d.UserCount || d.user_count || 0),
+                      0
+                    )}
                   </div>
-                  <div className="text-xs text-muted-foreground">
+                  <div className="text-muted-foreground text-xs">
                     {t("totalUsers", "Total Users")}
                   </div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold">
+                  <div className="font-bold text-2xl">
-                    {latestDetails.reduce((sum: number, d: any) => sum + (d.NodeCount || d.node_count || 0), 0)}
+                    {latestDetails.reduce(
+                      (sum: number, d: any) =>
+                        sum + (d.NodeCount || d.node_count || 0),
+                      0
+                    )}
                   </div>
-                  <div className="text-xs text-muted-foreground">
+                  <div className="text-muted-foreground text-xs">
                     {t("totalNodes", "Total Nodes")}
                   </div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold">{latestDetails.length}</div>
+                  <div className="font-bold text-2xl">
-                  <div className="text-xs text-muted-foreground">
+                    {latestDetails.length}
+                  </div>
+                  <div className="text-muted-foreground text-xs">
                     {t("totalNodeGroups", "Total Node Groups")}
                   </div>
                 </div>
@@ -257,7 +299,7 @@ export default function CurrentGroupResults() {
             {detailsLoading ? (
               <div className="flex items-center justify-center py-8">
                 <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                <span className="ml-2 text-sm text-muted-foreground">
+                <span className="ml-2 text-muted-foreground text-sm">
                   {t("loading", "Loading...")}
                 </span>
               </div>
@@ -281,26 +323,41 @@ export default function CurrentGroupResults() {
                     </thead>
                     <tbody>
                       {latestDetails.map((detail: any, index: number) => {
-                        const nodeGroupId = detail.NodeGroupId || detail.node_group_id;
+                        const nodeGroupId =
-                        const nodeGroup = nodeGroups?.find((ng) => ng.id === nodeGroupId);
+                          detail.NodeGroupId || detail.node_group_id;
-                        const nodeGroupName = nodeGroup?.name || `${t("idPrefix", "#")}${nodeGroupId}`;
+                        const nodeGroup = nodeGroups?.find(
-                        const userCount = detail.UserCount || detail.user_count || 0;
+                          (ng) => ng.id === nodeGroupId
+                        );
+                        const nodeGroupName =
+                          nodeGroup?.name ||
+                          `${t("idPrefix", "#")}${nodeGroupId}`;
+                        const userCount =
+                          detail.UserCount || detail.user_count || 0;
 
                         return (
                           <tr key={index}>
                             <td className="border-b px-4 py-2">
                               <div>
-                                <div className="font-medium">{nodeGroupName}</div>
+                                <div className="font-medium">
-                                <div className="text-xs text-muted-foreground">{t("id", "ID")}: {nodeGroupId}</div>
+                                  {nodeGroupName}
+                                </div>
+                                <div className="text-muted-foreground text-xs">
+                                  {t("id", "ID")}: {nodeGroupId}
+                                </div>
                               </div>
                             </td>
                             <td className="border-b px-4 py-2 text-right">
                               <button
                                 className={`font-semibold hover:underline ${
-                                  userCount === 0 ? 'text-muted-foreground cursor-not-allowed' : 'cursor-pointer'
+                                  userCount === 0
+                                    ? "cursor-not-allowed text-muted-foreground"
+                                    : "cursor-pointer"
                                 }`}
-                                onClick={() => handleShowUserList(nodeGroupId, nodeGroupName)}
                                 disabled={userCount === 0}
+                                onClick={() =>
+                                  handleShowUserList(nodeGroupId, nodeGroupName)
+                                }
+                                type="button"
                               >
                                 {userCount}
                               </button>
@@ -316,17 +373,30 @@ export default function CurrentGroupResults() {
                 </div>
               </>
             ) : (
-              <div className="text-center py-8 text-sm text-muted-foreground">
+              <div className="py-8 text-center text-muted-foreground text-sm">
                 {t("noDetails", "No details available")}
               </div>
             )}
           </CardContent>
         </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              {t("currentGroupingResult", "Current Grouping Result")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="py-8 text-center text-muted-foreground text-sm">
+              {t("noDetails", "No details available")}
+            </div>
+          </CardContent>
+        </Card>
       )}
 
       {/* User List Dialog */}
-      <Dialog open={userListOpen} onOpenChange={setUserListOpen}>
+      <Dialog onOpenChange={setUserListOpen} open={userListOpen}>
-        <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[700px]">
           <DialogHeader>
             <DialogTitle>
               {selectedNodeGroupName} - {t("userList", "User List")}
@@ -339,7 +409,7 @@ export default function CurrentGroupResults() {
             {userListLoading ? (
               <div className="flex items-center justify-center py-8">
                 <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                <span className="ml-2 text-sm text-muted-foreground">
+                <span className="ml-2 text-muted-foreground text-sm">
                   {t("loading", "Loading...")}
                 </span>
               </div>
@@ -355,15 +425,13 @@ export default function CurrentGroupResults() {
                   {userList.map((user) => (
                     <TableRow key={user.id}>
                       <TableCell className="font-medium">{user.id}</TableCell>
-                      <TableCell>
+                      <TableCell>{user.email || "-"}</TableCell>
-                        {user.email || "-"}
-                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
             ) : (
-              <div className="text-center py-8 text-sm text-muted-foreground">
+              <div className="py-8 text-center text-muted-foreground text-sm">
                 {t("noUsers", "No users found")}
               </div>
             )}

apps/admin/src/sections/group/group-config.tsx

@@ -1,22 +1,5 @@
 "use client";
 
-import { Button } from "@workspace/ui/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@workspace/ui/components/card";
-import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import {
-  getGroupConfig,
-  updateGroupConfig,
-  resetGroups,
-} from "@workspace/ui/services/admin/group";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,6 +11,23 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@workspace/ui/components/alert-dialog";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+import {
+  getGroupConfig,
+  resetGroups,
+  updateGroupConfig,
+} from "@workspace/ui/services/admin/group";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 export default function GroupConfig() {
   const { t } = useTranslation("group");
@@ -47,8 +47,11 @@ export default function GroupConfig() {
       const { data } = await getGroupConfig();
       if (data.data) {
         setConfig({
-          enabled: data.data.enabled || false,
+          enabled: data.data.enabled,
-          mode: (data.data.mode || "average") as "average" | "subscribe" | "traffic",
+          mode: (data.data.mode || "average") as
+            | "average"
+            | "subscribe"
+            | "traffic",
         });
       }
     } catch (error) {
@@ -79,7 +82,9 @@ export default function GroupConfig() {
     }
   };
 
-  const handleUpdateMode = async (mode: "average" | "subscribe" | "traffic") => {
+  const handleUpdateMode = async (
+    mode: "average" | "subscribe" | "traffic"
+  ) => {
     setSaving(true);
     try {
       const payload: any = {
@@ -101,7 +106,9 @@ export default function GroupConfig() {
     setResetting(true);
     try {
       await resetGroups({ confirm: true });
-      toast.success(t("resetSuccess", "All groups have been reset successfully"));
+      toast.success(
+        t("resetSuccess", "All groups have been reset successfully")
+      );
       setShowResetDialog(false);
       // Reload config after reset
       await loadConfig();
@@ -129,10 +136,10 @@ export default function GroupConfig() {
           {/* Enable/Disable */}
           <div className="flex items-center justify-between">
             <div>
-              <label htmlFor="enabled" className="font-medium">
+              <label className="font-medium" htmlFor="enabled">
                 {t("enableGrouping", "Enable Grouping")}
               </label>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
                 {t(
                   "enableGroupingDescription",
                   "When enabled, users will only see nodes from their assigned group"
@@ -140,36 +147,36 @@ export default function GroupConfig() {
               </p>
             </div>
             <input
-              id="enabled"
-              type="checkbox"
               checked={config.enabled}
-              onChange={(e) => handleUpdateEnabled(e.target.checked)}
-              disabled={saving}
               className="h-4 w-4"
+              disabled={saving}
+              id="enabled"
+              onChange={(e) => handleUpdateEnabled(e.target.checked)}
+              type="checkbox"
             />
           </div>
 
           {/* Mode Selection */}
           {config.enabled && (
             <div className="space-y-2">
-              <label className="font-medium">
+              <p className="font-medium">
                 {t("groupingMode", "Grouping Mode")}
-              </label>
+              </p>
               <div className="grid grid-cols-3 gap-4">
                 <button
-                  type="button"
-                  onClick={() => handleUpdateMode("average")}
-                  disabled={saving}
                   className={`rounded-lg border p-4 text-left transition-colors ${
                     config.mode === "average"
                       ? "border-primary bg-primary/10"
                       : "border-border hover:bg-muted"
-                  } ${saving ? "opacity-50 cursor-not-allowed" : ""}`}
+                  } ${saving ? "cursor-not-allowed opacity-50" : ""}`}
+                  disabled={saving}
+                  onClick={() => handleUpdateMode("average")}
+                  type="button"
                 >
                   <div className="font-medium">
                     {t("averageMode", "Average Mode")}
                   </div>
-                  <div className="text-sm text-muted-foreground">
+                  <div className="text-muted-foreground text-sm">
                     {t(
                       "averageModeDescription",
                       "Distribute users evenly across groups"
@@ -178,19 +185,19 @@ export default function GroupConfig() {
                 </button>
 
                 <button
-                  type="button"
-                  onClick={() => handleUpdateMode("subscribe")}
-                  disabled={saving}
                   className={`rounded-lg border p-4 text-left transition-colors ${
                     config.mode === "subscribe"
                       ? "border-primary bg-primary/10"
                       : "border-border hover:bg-muted"
-                  } ${saving ? "opacity-50 cursor-not-allowed" : ""}`}
+                  } ${saving ? "cursor-not-allowed opacity-50" : ""}`}
+                  disabled={saving}
+                  onClick={() => handleUpdateMode("subscribe")}
+                  type="button"
                 >
                   <div className="font-medium">
                     {t("subscribeMode", "Subscribe Mode")}
                   </div>
-                  <div className="text-sm text-muted-foreground">
+                  <div className="text-muted-foreground text-sm">
                     {t(
                       "subscribeModeDescription",
                       "Group users by their subscription plan"
@@ -199,19 +206,19 @@ export default function GroupConfig() {
                 </button>
 
                 <button
-                  type="button"
-                  onClick={() => handleUpdateMode("traffic")}
-                  disabled={saving}
                   className={`rounded-lg border p-4 text-left transition-colors ${
                     config.mode === "traffic"
                       ? "border-primary bg-primary/10"
                       : "border-border hover:bg-muted"
-                  } ${saving ? "opacity-50 cursor-not-allowed" : ""}`}
+                  } ${saving ? "cursor-not-allowed opacity-50" : ""}`}
+                  disabled={saving}
+                  onClick={() => handleUpdateMode("traffic")}
+                  type="button"
                 >
                   <div className="font-medium">
                     {t("trafficMode", "Traffic Mode")}
                   </div>
-                  <div className="text-sm text-muted-foreground">
+                  <div className="text-muted-foreground text-sm">
                     {t(
                       "trafficModeDescription",
                       "Group users by their traffic usage"
@@ -223,8 +230,11 @@ export default function GroupConfig() {
           )}
 
           {/* Reset Button */}
-          <div className="flex justify-end pt-4 border-t">
+          <div className="flex justify-end border-t pt-4">
-            <AlertDialog open={showResetDialog} onOpenChange={setShowResetDialog}>
+            <AlertDialog
+              onOpenChange={setShowResetDialog}
+              open={showResetDialog}
+            >
               <AlertDialogTrigger asChild>
                 <Button variant="destructive">
                   {t("resetGroups", "Reset All Groups")}
@@ -243,14 +253,14 @@ export default function GroupConfig() {
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
-                  <AlertDialogCancel>
+                  <AlertDialogCancel>{t("cancel", "Cancel")}</AlertDialogCancel>
-                    {t("cancel", "Cancel")}
-                  </AlertDialogCancel>
                   <AlertDialogAction
-                    onClick={handleResetGroups}
                     className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    onClick={handleResetGroups}
                   >
-                    {resetting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {resetting && (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    )}
                     {t("confirm", "Confirm")}
                   </AlertDialogAction>
                 </AlertDialogFooter>

apps/admin/src/sections/group/group-history.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -33,24 +34,27 @@ import {
   getGroupHistoryDetail,
   getNodeGroupList,
 } from "@workspace/ui/services/admin/group";
+import { Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { formatDate } from "@/utils/common";
-import { Loader2 } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
 
 export default function GroupHistory() {
   const { t } = useTranslation("group");
   const ref = useRef<ProTableActions>(null);
   const [detailOpen, setDetailOpen] = useState(false);
   const [detailLoading, setDetailLoading] = useState(false);
-  const [selectedHistory, setSelectedHistory] = useState<API.GroupHistory | null>(null);
+  const [selectedHistory, setSelectedHistory] =
+    useState<API.GroupHistory | null>(null);
   const [details, setDetails] = useState<any[]>([]);
-  const [nodeGroupMap, setNodeGroupMap] = useState<Map<number, string>>(new Map());
+  const [nodeGroupMap, setNodeGroupMap] = useState<Map<number, string>>(
+    new Map()
+  );
 
   // User list dialog state
   const [userListOpen, setUserListOpen] = useState(false);
-  const [selectedNodeGroupName, setSelectedNodeGroupName] = useState<string>("");
+  const [selectedNodeGroupName, setSelectedNodeGroupName] =
+    useState<string>("");
   const [userList, setUserList] = useState<any[]>([]);
   const [userListTotal, setUserListTotal] = useState(0);
 
@@ -130,7 +134,10 @@ export default function GroupHistory() {
     }
   };
 
-  const handleShowUserList = async (nodeGroupId: number, nodeGroupName: string) => {
+  const handleShowUserList = async (
+    nodeGroupId: number,
+    nodeGroupName: string
+  ) => {
     setSelectedNodeGroupName(nodeGroupName);
     setUserListOpen(true);
 
@@ -166,23 +173,30 @@ export default function GroupHistory() {
     <div className="space-y-4">
       <Card>
         <CardHeader>
-          <CardTitle>{t("groupHistory", "Group Calculation History")}</CardTitle>
+          <CardTitle>
+            {t("groupHistory", "Group Calculation History")}
+          </CardTitle>
           <CardDescription>
-            {t("groupHistoryDescription", "View group recalculation history and results")}
+            {t(
+              "groupHistoryDescription",
+              "View group recalculation history and results"
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
           <ProTable<API.GroupHistory, API.GetGroupHistoryRequest>
             action={ref}
-            request={async (params) => {
+            actions={{
-              const { data } = await getGroupHistory({
+              render: (row: any) => [
-                page: params.page || 1,
+                <Button
-                size: params.size || 10,
+                  key="detail"
-              });
+                  onClick={() => handleViewDetail(row)}
-              return {
+                  size="sm"
-                list: data.data?.list || [],
+                  variant="outline"
-                total: data.data?.total || 0,
+                >
-              };
+                  {t("viewDetail", "View Detail")}
+                </Button>,
+              ],
             }}
             columns={[
               {
@@ -191,7 +205,8 @@ export default function GroupHistory() {
                 header: t("id", "ID"),
                 cell: ({ row }: { row: any }) => (
                   <span className="text-muted-foreground">
-                    {t("idPrefix", "#")}{row.getValue("id")}
+                    {t("idPrefix", "#")}
+                    {row.getValue("id")}
                   </span>
                 ),
               },
@@ -220,7 +235,9 @@ export default function GroupHistory() {
                 accessorKey: "total_users",
                 header: t("totalUsers", "Total Users"),
                 cell: ({ row }: { row: any }) => (
-                  <span className="font-semibold">{row.getValue("total_users")}</span>
+                  <span className="font-semibold">
+                    {row.getValue("total_users")}
+                  </span>
                 ),
               },
               {
@@ -231,10 +248,10 @@ export default function GroupHistory() {
                   const record = row.original;
                   return (
                     <div className="space-y-1">
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-muted-foreground text-xs">
-                        {t("successCount", "Success")}: {record.success_count}
+                        {t("successCount", "Success")}: {record.success_count}{" "}
-                        {" "}{t("separator", "/")}{" "}
+                        {t("separator", "/")} {t("failedCount", "Failed")}:{" "}
-                        {t("failedCount", "Failed")}: {record.failed_count}
+                        {record.failed_count}
                       </div>
                       {record.error_log && (
                         <Badge variant="destructive">
@@ -254,31 +271,30 @@ export default function GroupHistory() {
                 id: "created_at",
                 accessorKey: "created_at",
                 header: t("createdAt", "Created At"),
-                cell: ({ row }: { row: any }) => formatDate(row.getValue("created_at")),
+                cell: ({ row }: { row: any }) =>
+                  formatDate(row.getValue("created_at")),
               },
             ]}
-            actions={{
-              render: (row: any) => [
-                <Button
-                  key="detail"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => handleViewDetail(row)}
-                >
-                  {t("viewDetail", "View Detail")}
-                </Button>,
-              ],
-            }}
             header={{
               title: t("groupHistory", "Group Calculation History"),
             }}
+            request={async (params) => {
+              const { data } = await getGroupHistory({
+                page: params.page || 1,
+                size: params.size || 10,
+              });
+              return {
+                list: data.data?.list || [],
+                total: data.data?.total || 0,
+              };
+            }}
           />
         </CardContent>
       </Card>
 
       {/* Detail Dialog */}
-      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+      <Dialog onOpenChange={setDetailOpen} open={detailOpen}>
-        <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[700px]">
           <DialogHeader>
             <DialogTitle>
               {t("groupHistoryDetail", "Group Calculation Detail")}
@@ -292,7 +308,7 @@ export default function GroupHistory() {
               <>
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-muted-foreground text-sm">
                       {t("groupMode", "Group Mode")}
                     </div>
                     <div className="font-medium">
@@ -300,7 +316,7 @@ export default function GroupHistory() {
                     </div>
                   </div>
                   <div>
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-muted-foreground text-sm">
                       {t("triggerType", "Trigger Type")}
                     </div>
                     <div className="font-medium">
@@ -308,24 +324,27 @@ export default function GroupHistory() {
                     </div>
                   </div>
                   <div>
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-muted-foreground text-sm">
                       {t("totalUsers", "Total Users")}
                     </div>
-                    <div className="font-medium">{selectedHistory.total_users}</div>
+                    <div className="font-medium">
+                      {selectedHistory.total_users}
+                    </div>
                   </div>
                   <div>
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-muted-foreground text-sm">
                       {t("result", "Result")}
                     </div>
                     <div className="font-medium">
-                      {t("successCount", "Success")}: {selectedHistory.success_count}
+                      {t("successCount", "Success")}:{" "}
-                      {" "}{t("separator", "/")}{" "}
+                      {selectedHistory.success_count} {t("separator", "/")}{" "}
-                      {t("failedCount", "Failed")}: {selectedHistory.failed_count}
+                      {t("failedCount", "Failed")}:{" "}
+                      {selectedHistory.failed_count}
                     </div>
                   </div>
                   {selectedHistory.start_time && (
                     <div>
-                      <div className="text-sm text-muted-foreground">
+                      <div className="text-muted-foreground text-sm">
                         {t("startTime", "Start Time")}
                       </div>
                       <div className="font-medium">
@@ -335,7 +354,7 @@ export default function GroupHistory() {
                   )}
                   {selectedHistory.end_time && (
                     <div>
-                      <div className="text-sm text-muted-foreground">
+                      <div className="text-muted-foreground text-sm">
                         {t("endTime", "End Time")}
                       </div>
                       <div className="font-medium">
@@ -347,10 +366,10 @@ export default function GroupHistory() {
 
                 {selectedHistory.error_log && (
                   <div>
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-muted-foreground text-sm">
                       {t("errorMessage", "Error Message")}
                     </div>
-                    <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                    <div className="rounded-md bg-destructive/10 p-3 text-destructive text-sm">
                       {selectedHistory.error_log}
                     </div>
                   </div>
@@ -359,13 +378,13 @@ export default function GroupHistory() {
             )}
 
             <div>
-              <div className="mb-2 text-sm font-medium">
+              <div className="mb-2 font-medium text-sm">
                 {t("groupDetails", "Group Details")}
               </div>
               {detailLoading ? (
                 <div className="flex items-center justify-center py-8">
                   <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  <span className="ml-2 text-sm text-muted-foreground">
+                  <span className="ml-2 text-muted-foreground text-sm">
                     {t("loading", "Loading...")}
                   </span>
                 </div>
@@ -374,24 +393,32 @@ export default function GroupHistory() {
                   {/* 统计信息 */}
                   <div className="mb-4 grid grid-cols-3 gap-4 rounded-lg bg-muted/50 p-4">
                     <div className="text-center">
-                      <div className="text-2xl font-bold">
+                      <div className="font-bold text-2xl">
-                        {details.reduce((sum: number, d: any) => sum + (d.UserCount || d.user_count || 0), 0)}
+                        {details.reduce(
+                          (sum: number, d: any) =>
+                            sum + (d.UserCount || d.user_count || 0),
+                          0
+                        )}
                       </div>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-muted-foreground text-xs">
                         {t("totalUsers", "Total Users")}
                       </div>
                     </div>
                     <div className="text-center">
-                      <div className="text-2xl font-bold">
+                      <div className="font-bold text-2xl">
-                        {details.reduce((sum: number, d: any) => sum + (d.NodeCount || d.node_count || 0), 0)}
+                        {details.reduce(
+                          (sum: number, d: any) =>
+                            sum + (d.NodeCount || d.node_count || 0),
+                          0
+                        )}
                       </div>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-muted-foreground text-xs">
                         {t("totalNodes", "Total Nodes")}
                       </div>
                     </div>
                     <div className="text-center">
-                      <div className="text-2xl font-bold">{details.length}</div>
+                      <div className="font-bold text-2xl">{details.length}</div>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-muted-foreground text-xs">
                         {t("totalNodeGroups", "Total Node Groups")}
                       </div>
                     </div>
@@ -415,22 +442,39 @@ export default function GroupHistory() {
                       </thead>
                       <tbody>
                         {details.map((detail: any, index: number) => {
-                          const nodeGroupId = detail.NodeGroupId || detail.node_group_id;
+                          const nodeGroupId =
-                          const nodeGroupName = nodeGroupMap.get(nodeGroupId) || `${t("idPrefix", "#")}${nodeGroupId}`;
+                            detail.NodeGroupId || detail.node_group_id;
+                          const nodeGroupName =
+                            nodeGroupMap.get(nodeGroupId) ||
+                            `${t("idPrefix", "#")}${nodeGroupId}`;
 
                           return (
                             <tr key={index}>
                               <td className="border-b px-4 py-2">
                                 <div>
-                                  <div className="font-medium">{nodeGroupName}</div>
+                                  <div className="font-medium">
-                                  <div className="text-xs text-muted-foreground">{t("id", "ID")}: {nodeGroupId}</div>
+                                    {nodeGroupName}
+                                  </div>
+                                  <div className="text-muted-foreground text-xs">
+                                    {t("id", "ID")}: {nodeGroupId}
+                                  </div>
                                 </div>
                               </td>
                               <td className="border-b px-4 py-2 text-right">
                                 <button
-                                  className="font-semibold hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                                  className="cursor-pointer font-semibold hover:underline disabled:cursor-not-allowed disabled:opacity-50"
-                                  onClick={() => handleShowUserList(nodeGroupId, nodeGroupName)}
+                                  disabled={
-                                  disabled={(detail.UserCount || detail.user_count || 0) === 0}
+                                    (detail.UserCount ||
+                                      detail.user_count ||
+                                      0) === 0
+                                  }
+                                  onClick={() =>
+                                    handleShowUserList(
+                                      nodeGroupId,
+                                      nodeGroupName
+                                    )
+                                  }
+                                  type="button"
                                 >
                                   {detail.UserCount || detail.user_count || 0}
                                 </button>
@@ -446,7 +490,7 @@ export default function GroupHistory() {
                   </div>
                 </>
               ) : (
-                <div className="text-center py-8 text-sm text-muted-foreground">
+                <div className="py-8 text-center text-muted-foreground text-sm">
                   {t("noDetails", "No details available")}
                 </div>
               )}
@@ -456,8 +500,8 @@ export default function GroupHistory() {
       </Dialog>
 
       {/* User List Dialog */}
-      <Dialog open={userListOpen} onOpenChange={setUserListOpen}>
+      <Dialog onOpenChange={setUserListOpen} open={userListOpen}>
-        <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[700px]">
           <DialogHeader>
             <DialogTitle>
               {selectedNodeGroupName} - {t("userList", "User List")}
@@ -479,15 +523,13 @@ export default function GroupHistory() {
                   {userList.map((user) => (
                     <TableRow key={user.id}>
                       <TableCell className="font-medium">{user.id}</TableCell>
-                      <TableCell>
+                      <TableCell>{user.email || "-"}</TableCell>
-                        {user.email || "-"}
-                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
             ) : (
-              <div className="text-center py-8 text-sm text-muted-foreground">
+              <div className="py-8 text-center text-muted-foreground text-sm">
                 {t("noUsers", "No users found")}
               </div>
             )}

apps/admin/src/sections/group/group-recalculate.tsx

@@ -9,14 +9,14 @@ import {
   CardHeader,
   CardTitle,
 } from "@workspace/ui/components/card";
-import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import {
   getRecalculationStatus,
   recalculateGroup,
 } from "@workspace/ui/services/admin/group";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 export default function GroupRecalculate() {
   const { t } = useTranslation("group");
@@ -54,7 +54,9 @@ export default function GroupRecalculate() {
     return () => clearInterval(interval);
   }, [status?.state]);
 
-  const handleRecalculate = async (mode: "average" | "subscribe" | "traffic") => {
+  const handleRecalculate = async (
+    mode: "average" | "subscribe" | "traffic"
+  ) => {
     setRecalculating(mode);
     try {
       await recalculateGroup({ mode });
@@ -98,7 +100,9 @@ export default function GroupRecalculate() {
     <div className="space-y-4">
       <Card>
         <CardHeader>
-          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
+          <CardTitle>
+            {t("groupRecalculation", "Group Recalculation")}
+          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -110,7 +114,7 @@ export default function GroupRecalculate() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">
+              <span className="font-medium text-sm">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -142,14 +146,20 @@ export default function GroupRecalculate() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
-                {t("recalculationCompleted", "Recalculation completed successfully")}
+                {t(
+                  "recalculationCompleted",
+                  "Recalculation completed successfully"
+                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-sm text-destructive">
+              <div className="text-destructive text-sm">
-                {t("recalculationFailed", "Recalculation failed. Please try again.")}
+                {t(
+                  "recalculationFailed",
+                  "Recalculation failed. Please try again."
+                )}
               </div>
             )}
           </div>
@@ -163,9 +173,11 @@ export default function GroupRecalculate() {
                   {t("averageMode", "Average Mode")}
                 </div>
                 <Button
-                  onClick={() => handleRecalculate("average")}
-                  disabled={recalculating === "average" || status?.state === "running"}
                   className="w-full"
+                  disabled={
+                    recalculating === "average" || status?.state === "running"
+                  }
+                  onClick={() => handleRecalculate("average")}
                   variant="outline"
                 >
                   {recalculating === "average" && (
@@ -181,9 +193,11 @@ export default function GroupRecalculate() {
                   {t("subscribeMode", "Subscribe Mode")}
                 </div>
                 <Button
-                  onClick={() => handleRecalculate("subscribe")}
-                  disabled={recalculating === "subscribe" || status?.state === "running"}
                   className="w-full"
+                  disabled={
+                    recalculating === "subscribe" || status?.state === "running"
+                  }
+                  onClick={() => handleRecalculate("subscribe")}
                   variant="outline"
                 >
                   {recalculating === "subscribe" && (
@@ -199,9 +213,11 @@ export default function GroupRecalculate() {
                   {t("trafficMode", "Traffic Mode")}
                 </div>
                 <Button
-                  onClick={() => handleRecalculate("traffic")}
-                  disabled={recalculating === "traffic" || status?.state === "running"}
                   className="w-full"
+                  disabled={
+                    recalculating === "traffic" || status?.state === "running"
+                  }
+                  onClick={() => handleRecalculate("traffic")}
                   variant="outline"
                 >
                   {recalculating === "traffic" && (

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

@@ -1,15 +1,20 @@
 "use client";
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@workspace/ui/components/tabs";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@workspace/ui/components/tabs";
 import { useTranslation } from "react-i18next";
+import AverageModeTab from "./average-mode-tab";
+import CurrentGroupResults from "./current-group-results";
+import GroupConfig from "./group-config";
+import GroupHistory from "./group-history";
 // import UserGroups from "./user-groups";
 import NodeGroups from "./node-groups";
-import GroupHistory from "./group-history";
-import GroupConfig from "./group-config";
-import AverageModeTab from "./average-mode-tab";
 import SubscribeModeTab from "./subscribe-mode-tab";
 import TrafficModeTab from "./traffic-mode-tab";
-import CurrentGroupResults from "./current-group-results";
 
 export default function Group() {
   const { t } = useTranslation("group");
@@ -22,9 +27,7 @@ export default function Group() {
 
       <Tabs defaultValue="config">
         <TabsList className="flex flex-wrap gap-2">
-          <TabsTrigger value="config">
+          <TabsTrigger value="config">{t("config", "Config")}</TabsTrigger>
-            {t("config", "Config")}
-          </TabsTrigger>
           {/* <TabsTrigger value="user">
             {t("userGroups", "User Groups")}
           </TabsTrigger> */}
@@ -43,12 +46,10 @@ export default function Group() {
           <TabsTrigger value="results">
             {t("currentGroupingResult", "Current Grouping Result")}
           </TabsTrigger>
-          <TabsTrigger value="history">
+          <TabsTrigger value="history">{t("history", "History")}</TabsTrigger>
-            {t("history", "History")}
-          </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="config" className="mt-4">
+        <TabsContent className="mt-4" value="config">
           <GroupConfig />
         </TabsContent>
 
@@ -56,27 +57,27 @@ export default function Group() {
           <UserGroups />
         </TabsContent> */}
 
-        <TabsContent value="node" className="mt-4">
+        <TabsContent className="mt-4" value="node">
           <NodeGroups />
         </TabsContent>
 
-        <TabsContent value="average" className="mt-4">
+        <TabsContent className="mt-4" value="average">
           <AverageModeTab />
         </TabsContent>
 
-        <TabsContent value="subscribe" className="mt-4">
+        <TabsContent className="mt-4" value="subscribe">
           <SubscribeModeTab />
         </TabsContent>
 
-        <TabsContent value="traffic" className="mt-4">
+        <TabsContent className="mt-4" value="traffic">
           <TrafficModeTab />
         </TabsContent>
 
-        <TabsContent value="results" className="mt-4">
+        <TabsContent className="mt-4" value="results">
           <CurrentGroupResults />
         </TabsContent>
 
-        <TabsContent value="history" className="mt-4">
+        <TabsContent className="mt-4" value="history">
           <GroupHistory />
         </TabsContent>
       </Tabs>

apps/admin/src/sections/group/node-group-form.tsx

@@ -10,10 +10,10 @@ import {
 } from "@workspace/ui/components/dialog";
 import { Input } from "@workspace/ui/components/input";
 import { Label } from "@workspace/ui/components/label";
-import { Textarea } from "@workspace/ui/components/textarea";
 import { Switch } from "@workspace/ui/components/switch";
+import { Textarea } from "@workspace/ui/components/textarea";
 import { AlertCircle, Loader2 } from "lucide-react";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 interface NodeGroupFormProps {
@@ -26,10 +26,16 @@ interface NodeGroupFormProps {
   trigger: React.ReactNode;
 }
 
-const NodeGroupForm = forwardRef<
+const NodeGroupForm = ({
-  HTMLButtonElement,
+  initialValues,
-  NodeGroupFormProps
+  allNodeGroups = [],
->(({ initialValues, allNodeGroups = [], currentGroupId, loading, onSubmit, title, trigger }, ref) => {
+  currentGroupId,
+  loading,
+  onSubmit,
+  title,
+  trigger,
+  ref,
+}: NodeGroupFormProps & { ref?: RefObject<HTMLButtonElement | null> }) => {
   const { t } = useTranslation("group");
   const [open, setOpen] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -82,7 +88,10 @@ const NodeGroupForm = forwardRef<
   }, [initialValues, open]);
 
   // 检测流量区间冲突
-  const checkTrafficRangeConflict = (minTraffic: number, maxTraffic: number): string => {
+  const checkTrafficRangeConflict = (
+    minTraffic: number,
+    maxTraffic: number
+  ): string => {
     // 如果 min=0 且 max=0，表示不参与流量分组，跳过所有验证
     if (minTraffic === 0 && maxTraffic === 0) {
       return "";
@@ -111,12 +120,14 @@ const NodeGroupForm = forwardRef<
       }
 
       // 处理现有节点组 max=0 的情况
-      const actualExistingMax = existingMax === 0 ? Number.MAX_VALUE : existingMax;
+      const actualExistingMax =
+        existingMax === 0 ? Number.MAX_VALUE : existingMax;
 
       // 检测区间重叠
       // 两个区间 [min1, max1] 和 [min2, max2] 重叠的条件：
       // max1 > min2 && max2 > min1
-      const hasOverlap = actualMax > existingMin && actualExistingMax > minTraffic;
+      const hasOverlap =
+        actualMax > existingMin && actualExistingMax > minTraffic;
 
       if (hasOverlap) {
         return t("rangeConflict", {
@@ -131,7 +142,9 @@ const NodeGroupForm = forwardRef<
   };
 
   // 检测过期节点组冲突
-  const checkExpiredGroupConflict = async (isExpiredGroup: boolean): Promise<string> => {
+  const checkExpiredGroupConflict = async (
+    isExpiredGroup: boolean
+  ): Promise<string> => {
     if (!isExpiredGroup) {
       return "";
     }
@@ -142,21 +155,29 @@ const NodeGroupForm = forwardRef<
     );
 
     if (existingExpiredGroup) {
-      return t("expiredGroupExists", `System already has an expired node group: ${existingExpiredGroup.name}`);
+      return t(
+        "expiredGroupExists",
+        `System already has an expired node group: ${existingExpiredGroup.name}`
+      );
     }
 
     // 检查当前节点组是否被订阅商品使用
     if (currentGroupId) {
       try {
-        const { getSubscribeList } = await import("@workspace/ui/services/admin/subscribe");
+        const { getSubscribeList } = await import(
+          "@workspace/ui/services/admin/subscribe"
+        );
         const { data } = await getSubscribeList({
           page: 1,
           size: 1,
-          node_group_id: currentGroupId
+          node_group_id: currentGroupId,
         });
 
         if (data.data && data.data.total > 0) {
-          return t("nodeGroupUsedBySubscribe", "This node group is used as default node group in subscription products, cannot set as expired group");
+          return t(
+            "nodeGroupUsedBySubscribe",
+            "This node group is used as default node group in subscription products, cannot set as expired group"
+          );
         }
       } catch (error) {
         console.error("Failed to check subscribe usage:", error);
@@ -178,7 +199,9 @@ const NodeGroupForm = forwardRef<
     e.preventDefault();
 
     // 检测过期节点组冲突
-    const expiredGroupConflict = await checkExpiredGroupConflict(values.is_expired_group);
+    const expiredGroupConflict = await checkExpiredGroupConflict(
+      values.is_expired_group
+    );
     if (expiredGroupConflict) {
       setConflictError(expiredGroupConflict);
       return;
@@ -186,7 +209,10 @@ const NodeGroupForm = forwardRef<
 
     // 仅在非过期节点组时检测流量区间冲突
     if (!values.is_expired_group) {
-      const conflict = checkTrafficRangeConflict(values.min_traffic_gb, values.max_traffic_gb);
+      const conflict = checkTrafficRangeConflict(
+        values.min_traffic_gb,
+        values.max_traffic_gb
+      );
       if (conflict) {
         setConflictError(conflict);
         return;
@@ -215,7 +241,7 @@ const NodeGroupForm = forwardRef<
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog onOpenChange={setOpen} open={open}>
       <DialogTrigger asChild ref={ref}>
         {trigger}
       </DialogTrigger>
@@ -226,19 +252,15 @@ const NodeGroupForm = forwardRef<
             {t("nodeGroupFormDescription", "Configure node group settings")}
           </DialogDescription>
         </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form className="space-y-4" onSubmit={handleSubmit}>
           <div className="space-y-2">
-            <Label htmlFor="name">
+            <Label htmlFor="name">{t("name", "Name")} *</Label>
-              {t("name", "Name")} *
-            </Label>
             <Input
               id="name"
-              value={values.name}
+              onChange={(e) => setValues({ ...values, name: e.target.value })}
-              onChange={(e) =>
-                setValues({ ...values, name: e.target.value })
-              }
               placeholder={t("namePlaceholder", "Enter name")}
               required
+              value={values.name}
             />
           </div>
 
@@ -248,12 +270,12 @@ const NodeGroupForm = forwardRef<
             </Label>
             <Textarea
               id="description"
-              value={values.description}
               onChange={(e) =>
                 setValues({ ...values, description: e.target.value })
               }
               placeholder={t("descriptionPlaceholder", "Enter description")}
               rows={3}
+              value={values.description}
             />
           </div>
 
@@ -261,12 +283,15 @@ const NodeGroupForm = forwardRef<
             <Label htmlFor="sort">{t("sort", "Sort Order")}</Label>
             <Input
               id="sort"
+              min={0}
+              onChange={(e) =>
+                setValues({
+                  ...values,
+                  sort: Number.parseInt(e.target.value, 10) || 0,
+                })
+              }
               type="number"
               value={values.sort}
-              onChange={(e) =>
-                setValues({ ...values, sort: parseInt(e.target.value) || 0 })
-              }
-              min={0}
             />
           </div>
 
@@ -275,16 +300,22 @@ const NodeGroupForm = forwardRef<
               <Label htmlFor="for_calculation">
                 {t("forCalculation", "For Calculation")}
               </Label>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
                 {values.is_expired_group
-                  ? t("expiredGroupForCalculationDescription", "Expired-only node groups cannot participate in group calculation")
+                  ? t(
-                  : t("forCalculationDescription", "Whether this node group participates in grouping calculation")}
+                      "expiredGroupForCalculationDescription",
+                      "Expired-only node groups cannot participate in group calculation"
+                    )
+                  : t(
+                      "forCalculationDescription",
+                      "Whether this node group participates in grouping calculation"
+                    )}
               </p>
             </div>
             <Switch
-              id="for_calculation"
               checked={values.for_calculation}
               disabled={values.is_expired_group}
+              id="for_calculation"
               onCheckedChange={(checked) =>
                 setValues({ ...values, for_calculation: checked })
               }
@@ -298,13 +329,16 @@ const NodeGroupForm = forwardRef<
                 <Label htmlFor="is_expired_group">
                   {t("isExpiredGroup", "Expired Node Group")}
                 </Label>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
-                  {t("isExpiredGroupDescription", "Allow expired users to use limited nodes")}
+                  {t(
+                    "isExpiredGroupDescription",
+                    "Allow expired users to use limited nodes"
+                  )}
                 </p>
               </div>
               <Switch
-                id="is_expired_group"
                 checked={values.is_expired_group}
+                id="is_expired_group"
                 onCheckedChange={async (checked) => {
                   setValues({
                     ...values,
@@ -327,35 +361,52 @@ const NodeGroupForm = forwardRef<
                 <Label htmlFor="expired_days_limit">
                   {t("expiredDaysLimit", "Expired Days Limit")}
                 </Label>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
-                  {t("expiredDaysLimitDescription", "Number of days after expiration that users can still access nodes")}
+                  {t(
+                    "expiredDaysLimitDescription",
+                    "Number of days after expiration that users can still access nodes"
+                  )}
                 </p>
                 <Input
                   id="expired_days_limit"
-                  type="number"
                   min={1}
-                  value={values.expired_days_limit}
                   onChange={(e) =>
-                    setValues({ ...values, expired_days_limit: parseInt(e.target.value) || 7 })
+                    setValues({
+                      ...values,
+                      expired_days_limit:
+                        Number.parseInt(e.target.value, 10) || 7,
+                    })
                   }
+                  type="number"
+                  value={values.expired_days_limit}
                 />
               </div>
 
               <div className="space-y-2">
                 <Label htmlFor="max_traffic_gb_expired">
-                  {t("maxTrafficGBExpired", "Max Traffic for Expired Users (GB)")}
+                  {t(
+                    "maxTrafficGBExpired",
+                    "Max Traffic for Expired Users (GB)"
+                  )}
                 </Label>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
-                  {t("maxTrafficGBExpiredDescription", "Maximum traffic allowed for expired users (0 = unlimited)")}
+                  {t(
+                    "maxTrafficGBExpiredDescription",
+                    "Maximum traffic allowed for expired users (0 = unlimited)"
+                  )}
                 </p>
                 <Input
                   id="max_traffic_gb_expired"
-                  type="number"
                   min={0}
-                  value={values.max_traffic_gb_expired}
                   onChange={(e) =>
-                    setValues({ ...values, max_traffic_gb_expired: parseInt(e.target.value) || 0 })
+                    setValues({
+                      ...values,
+                      max_traffic_gb_expired:
+                        Number.parseInt(e.target.value, 10) || 0,
+                    })
                   }
+                  type="number"
+                  value={values.max_traffic_gb_expired}
                 />
               </div>
 
@@ -365,12 +416,15 @@ const NodeGroupForm = forwardRef<
                 </Label>
                 <Input
                   id="speed_limit"
-                  type="number"
                   min={0}
-                  value={values.speed_limit}
                   onChange={(e) =>
-                    setValues({ ...values, speed_limit: parseInt(e.target.value) || 0 })
+                    setValues({
+                      ...values,
+                      speed_limit: Number.parseInt(e.target.value, 10) || 0,
+                    })
                   }
+                  type="number"
+                  value={values.speed_limit}
                 />
               </div>
             </>
@@ -381,48 +435,61 @@ const NodeGroupForm = forwardRef<
               <div className="flex items-center justify-between">
                 <Label>{t("trafficRangeGB", "Traffic Range (GB)")}</Label>
               </div>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
-                {t("trafficRangeDescription", "Users with traffic >= Min and < Max will be assigned to this node group")}
+                {t(
+                  "trafficRangeDescription",
+                  "Users with traffic >= Min and < Max will be assigned to this node group"
+                )}
               </p>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label htmlFor="min_traffic_gb">{t("minTrafficGB", "Min Traffic (GB)")}</Label>
+                  <Label htmlFor="min_traffic_gb">
+                    {t("minTrafficGB", "Min Traffic (GB)")}
+                  </Label>
                   <Input
                     id="min_traffic_gb"
-                    type="number"
                     min={0}
-                    step={1}
-                    value={values.min_traffic_gb}
                     onChange={(e) => {
-                      const newValue = parseFloat(e.target.value) || 0;
+                      const newValue = Number.parseFloat(e.target.value) || 0;
                       setValues({ ...values, min_traffic_gb: newValue });
                       // 实时检测冲突
-                      const conflict = checkTrafficRangeConflict(newValue, values.max_traffic_gb);
+                      const conflict = checkTrafficRangeConflict(
+                        newValue,
+                        values.max_traffic_gb
+                      );
                       setConflictError(conflict);
                     }}
+                    step={1}
+                    type="number"
+                    value={values.min_traffic_gb}
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="max_traffic_gb">{t("maxTrafficGB", "Max Traffic (GB)")}</Label>
+                  <Label htmlFor="max_traffic_gb">
+                    {t("maxTrafficGB", "Max Traffic (GB)")}
+                  </Label>
                   <Input
                     id="max_traffic_gb"
-                    type="number"
                     min={0}
-                    step={1}
-                    value={values.max_traffic_gb}
                     onChange={(e) => {
-                      const newValue = parseFloat(e.target.value) || 0;
+                      const newValue = Number.parseFloat(e.target.value) || 0;
                       setValues({ ...values, max_traffic_gb: newValue });
                       // 实时检测冲突
-                      const conflict = checkTrafficRangeConflict(values.min_traffic_gb, newValue);
+                      const conflict = checkTrafficRangeConflict(
+                        values.min_traffic_gb,
+                        newValue
+                      );
                       setConflictError(conflict);
                     }}
+                    step={1}
+                    type="number"
+                    value={values.max_traffic_gb}
                   />
                 </div>
               </div>
               {/* 显示冲突错误 */}
               {conflictError && (
-                <div className="flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                <div className="flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm">
                   <AlertCircle className="h-4 w-4 flex-shrink-0" />
                   <span>{conflictError}</span>
                 </div>
@@ -432,17 +499,17 @@ const NodeGroupForm = forwardRef<
 
           <div className="flex justify-end gap-2">
             <button
-              type="button"
-              onClick={() => setOpen(false)}
               className="rounded-md border px-4 py-2 text-sm"
               disabled={submitting || loading}
+              onClick={() => setOpen(false)}
+              type="button"
             >
               {t("cancel", "Cancel")}
             </button>
             <button
-              type="submit"
+              className="flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-primary-foreground text-sm disabled:opacity-50"
               disabled={submitting || loading || !!conflictError}
-              className="flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground disabled:opacity-50"
+              type="submit"
             >
               {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
               {t("save", "Save")}
@@ -452,7 +519,7 @@ const NodeGroupForm = forwardRef<
       </DialogContent>
     </Dialog>
   );
-});
+};
 
 NodeGroupForm.displayName = "NodeGroupForm";
 

apps/admin/src/sections/group/node-groups.tsx

@@ -50,28 +50,91 @@ export default function NodeGroups() {
         <CardHeader>
           <CardTitle>{t("nodeGroups", "Node Groups")}</CardTitle>
           <CardDescription>
-            {t("nodeGroupsDescription", "Manage node groups for user access control")}
+            {t(
+              "nodeGroupsDescription",
+              "Manage node groups for user access control"
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
           <ProTable<API.NodeGroup, API.GetNodeGroupListRequest>
             action={ref}
-            request={async (params) => {
+            actions={{
+              render: (row: any) => [
+                <NodeGroupForm
+                  allNodeGroups={allNodeGroups}
+                  currentGroupId={row.id}
+                  initialValues={row}
+                  key={`edit-${row.id}`}
+                  loading={loading}
+                  onSubmit={async (values) => {
+                    setLoading(true);
+                    try {
+                      await updateNodeGroup({
+                        id: row.id,
+                        ...values,
+                      } as API.UpdateNodeGroupRequest);
+                      toast.success(t("updated", "Updated successfully"));
+                      // 刷新节点组列表
                       const { data } = await getNodeGroupList({
-                page: params.page || 1,
+                        page: 1,
-                size: params.size || 10,
+                        size: 1000,
                       });
-              return {
+                      setAllNodeGroups(data.data?.list || []);
-                list: data.data?.list || [],
+                      ref.current?.refresh();
-                total: data.data?.total || 0,
+                      setLoading(false);
-              };
+                      return true;
+                    } catch {
+                      setLoading(false);
+                      return false;
+                    }
+                  }}
+                  title={t("editNodeGroup", "Edit Node Group")}
+                  trigger={
+                    <Button size="sm" variant="outline">
+                      {t("edit", "Edit")}
+                    </Button>
+                  }
+                />,
+                <ConfirmButton
+                  cancelText={t("cancel", "Cancel")}
+                  confirmText={t("confirm", "Confirm")}
+                  description={t(
+                    "deleteNodeGroupConfirm",
+                    "This will delete the node group. Nodes in this group will be reassigned."
+                  )}
+                  key="delete"
+                  onConfirm={async () => {
+                    await deleteNodeGroup({ id: row.id });
+                    toast.success(t("deleted", "Deleted successfully"));
+                    // 刷新节点组列表
+                    const { data } = await getNodeGroupList({
+                      page: 1,
+                      size: 1000,
+                    });
+                    setAllNodeGroups(data.data?.list || []);
+                    ref.current?.refresh();
+                    setLoading(false);
+                  }}
+                  title={t("confirmDelete", "Confirm Delete")}
+                  trigger={
+                    <Button size="sm" variant="destructive">
+                      {t("delete", "Delete")}
+                    </Button>
+                  }
+                />,
+              ],
             }}
             columns={[
               {
                 id: "id",
                 accessorKey: "id",
                 header: t("id", "ID"),
-                cell: ({ row }: { row: any }) => <span className="text-muted-foreground">#{row.getValue("id")}</span>,
+                cell: ({ row }: { row: any }) => (
+                  <span className="text-muted-foreground">
+                    #{row.getValue("id")}
+                  </span>
+                ),
               },
               {
                 id: "name",
@@ -95,7 +158,8 @@ export default function NodeGroups() {
                 id: "description",
                 accessorKey: "description",
                 header: t("description", "Description"),
-                cell: ({ row }: { row: any }) => row.getValue("description") || "--",
+                cell: ({ row }: { row: any }) =>
+                  row.getValue("description") || "--",
               },
               {
                 id: "for_calculation",
@@ -134,82 +198,27 @@ export default function NodeGroups() {
                 header: t("sort", "Sort"),
               },
             ]}
-            actions={{
-              render: (row: any) => [
-                <NodeGroupForm
-                  key={`edit-${row.id}`}
-                  initialValues={row}
-                  allNodeGroups={allNodeGroups}
-                  currentGroupId={row.id}
-                  loading={loading}
-                  onSubmit={async (values) => {
-                    setLoading(true);
-                    try {
-                      await updateNodeGroup({
-                        id: row.id,
-                        ...values,
-                      } as API.UpdateNodeGroupRequest);
-                      toast.success(t("updated", "Updated successfully"));
-                      // 刷新节点组列表
-                      const { data } = await getNodeGroupList({ page: 1, size: 1000 });
-                      setAllNodeGroups(data.data?.list || []);
-                      ref.current?.refresh();
-                      setLoading(false);
-                      return true;
-                    } catch {
-                      setLoading(false);
-                      return false;
-                    }
-                  }}
-                  title={t("editNodeGroup", "Edit Node Group")}
-                  trigger={
-                    <Button variant="outline" size="sm">
-                      {t("edit", "Edit")}
-                    </Button>
-                  }
-                />,
-                <ConfirmButton
-                  key="delete"
-                  cancelText={t("cancel", "Cancel")}
-                  confirmText={t("confirm", "Confirm")}
-                  description={t(
-                    "deleteNodeGroupConfirm",
-                    "This will delete the node group. Nodes in this group will be reassigned."
-                  )}
-                  onConfirm={async () => {
-                    await deleteNodeGroup({ id: row.id });
-                    toast.success(t("deleted", "Deleted successfully"));
-                    // 刷新节点组列表
-                    const { data } = await getNodeGroupList({ page: 1, size: 1000 });
-                    setAllNodeGroups(data.data?.list || []);
-                    ref.current?.refresh();
-                    setLoading(false);
-                  }}
-                  title={t("confirmDelete", "Confirm Delete")}
-                  trigger={
-                    <Button variant="destructive" size="sm">
-                      {t("delete", "Delete")}
-                    </Button>
-                  }
-                />,
-              ],
-            }}
             header={{
               title: t("nodeGroups", "Node Groups"),
               toolbar: (
                 <NodeGroupForm
-                  key="create"
-                  initialValues={undefined}
                   allNodeGroups={allNodeGroups}
                   currentGroupId={undefined}
+                  initialValues={undefined}
+                  key="create"
                   loading={loading}
                   onSubmit={async (values) => {
                     setLoading(true);
                     try {
-                      await createNodeGroup(values as API.CreateNodeGroupRequest);
+                      await createNodeGroup(
+                        values as API.CreateNodeGroupRequest
+                      );
                       toast.success(t("created", "Created successfully"));
                       // 刷新节点组列表
-                      const { data } = await getNodeGroupList({ page: 1, size: 1000 });
+                      const { data } = await getNodeGroupList({
+                        page: 1,
+                        size: 1000,
+                      });
                       setAllNodeGroups(data.data?.list || []);
                       ref.current?.refresh();
                       setLoading(false);
@@ -220,14 +229,20 @@ export default function NodeGroups() {
                     }
                   }}
                   title={t("createNodeGroup", "Create Node Group")}
-                  trigger={
+                  trigger={<Button>{t("create", "Create")}</Button>}
-                    <Button>
-                      {t("create", "Create")}
-                    </Button>
-                  }
                 />
               ),
             }}
+            request={async (params) => {
+              const { data } = await getNodeGroupList({
+                page: params.page || 1,
+                size: params.size || 10,
+              });
+              return {
+                list: data.data?.list || [],
+                total: data.data?.total || 0,
+              };
+            }}
           />
         </CardContent>
       </Card>

apps/admin/src/sections/group/subscribe-mode-tab.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -15,16 +16,15 @@ import {
   TableCell,
   TableRow,
 } from "@workspace/ui/components/table";
+import {
+  getRecalculationStatus,
+  getSubscribeGroupMapping,
+  recalculateGroup,
+} from "@workspace/ui/services/admin/group";
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { useQuery } from "@tanstack/react-query";
-import {
-  getRecalculationStatus,
-  recalculateGroup,
-  getSubscribeGroupMapping,
-} from "@workspace/ui/services/admin/group";
 
 interface SubscribeGroupMapping {
   subscribe_name: string;
@@ -51,7 +51,6 @@ export default function SubscribeModeTab() {
     },
   });
 
-
   const loadStatus = async () => {
     setLoadingStatus(true);
     try {
@@ -124,9 +123,14 @@ export default function SubscribeModeTab() {
       {/* Configuration Card */}
       <Card>
         <CardHeader>
-          <CardTitle>{t("subscribeModeConfig", "Subscribe Mode Configuration")}</CardTitle>
+          <CardTitle>
+            {t("subscribeModeConfig", "Subscribe Mode Configuration")}
+          </CardTitle>
           <CardDescription>
-            {t("subscribeModeDescription", "Group users by their purchased subscription plan")}
+            {t(
+              "subscribeModeDescription",
+              "Group users by their purchased subscription plan"
+            )}
           </CardDescription>
         </CardHeader>
       </Card>
@@ -134,7 +138,9 @@ export default function SubscribeModeTab() {
       {/* Subscribe Group Mapping Card */}
       <Card>
         <CardHeader>
-          <CardTitle>{t("subscribeGroupMappingTitle", "套餐-节点组对应关系")}</CardTitle>
+          <CardTitle>
+            {t("subscribeGroupMappingTitle", "套餐-节点组对应关系")}
+          </CardTitle>
         </CardHeader>
         <CardContent>
           {mappingLoading ? (
@@ -147,16 +153,21 @@ export default function SubscribeModeTab() {
                 {mappingData && mappingData.length > 0 ? (
                   mappingData
                     .filter(
-                      (item: SubscribeGroupMapping) => item.subscribe_name && item.node_group_name
+                      (item: SubscribeGroupMapping) =>
+                        item.subscribe_name && item.node_group_name
                     )
                     .map((item: SubscribeGroupMapping, index: number) => (
                       <TableRow key={index}>
                         <TableCell>
-                          <span className="font-medium">{item.subscribe_name}</span>
+                          <span className="font-medium">
+                            {item.subscribe_name}
+                          </span>
                           <span className="mx-2 text-muted-foreground">
                             {t("arrow", "→")}
                           </span>
-                          <Badge variant="outline">{item.node_group_name}</Badge>
+                          <Badge variant="outline">
+                            {item.node_group_name}
+                          </Badge>
                         </TableCell>
                       </TableRow>
                     ))
@@ -176,7 +187,9 @@ export default function SubscribeModeTab() {
       {/* Recalculation Card */}
       <Card>
         <CardHeader>
-          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
+          <CardTitle>
+            {t("groupRecalculation", "Group Recalculation")}
+          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -188,7 +201,7 @@ export default function SubscribeModeTab() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">
+              <span className="font-medium text-sm">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -220,14 +233,20 @@ export default function SubscribeModeTab() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
-                {t("recalculationCompleted", "Recalculation completed successfully")}
+                {t(
+                  "recalculationCompleted",
+                  "Recalculation completed successfully"
+                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-sm text-destructive">
+              <div className="text-destructive text-sm">
-                {t("recalculationFailed", "Recalculation failed. Please try again.")}
+                {t(
+                  "recalculationFailed",
+                  "Recalculation failed. Please try again."
+                )}
               </div>
             )}
           </div>
@@ -235,8 +254,8 @@ export default function SubscribeModeTab() {
           {/* Recalculate Button */}
           <div className="flex justify-end">
             <Button
-              onClick={handleRecalculate}
               disabled={recalculating || status?.state === "running"}
+              onClick={handleRecalculate}
             >
               {recalculating && (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />

apps/admin/src/sections/group/traffic-mode-tab.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -9,17 +10,16 @@ import {
   CardHeader,
   CardTitle,
 } from "@workspace/ui/components/card";
+import {
+  getNodeGroupList,
+  getRecalculationStatus,
+  recalculateGroup,
+  updateNodeGroup,
+} from "@workspace/ui/services/admin/group";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { useQuery } from "@tanstack/react-query";
-import {
-  getNodeGroupList,
-  updateNodeGroup,
-  getRecalculationStatus,
-  recalculateGroup,
-} from "@workspace/ui/services/admin/group";
 import TrafficRangeConfig from "./traffic-ranges-config";
 
 export default function TrafficModeTab() {
@@ -34,7 +34,11 @@ export default function TrafficModeTab() {
   } | null>(null);
 
   // Fetch node groups
-  const { data: nodeGroupsData, isLoading: isLoadingNodeGroups, refetch: refetchNodeGroups } = useQuery({
+  const {
+    data: nodeGroupsData,
+    isLoading: isLoadingNodeGroups,
+    refetch: refetchNodeGroups,
+  } = useQuery({
     queryKey: ["nodeGroups"],
     queryFn: async () => {
       const { data } = await getNodeGroupList({ page: 1, size: 1000 });
@@ -56,7 +60,10 @@ export default function TrafficModeTab() {
     }
   };
 
-  const handleTrafficUpdate = async (nodeGroupId: number, fields: { min_traffic_gb?: number; max_traffic_gb?: number }) => {
+  const handleTrafficUpdate = async (
+    nodeGroupId: number,
+    fields: { min_traffic_gb?: number; max_traffic_gb?: number }
+  ) => {
     try {
       await updateNodeGroup({
         id: nodeGroupId,
@@ -116,7 +123,9 @@ export default function TrafficModeTab() {
       {/* Node Groups Traffic Configuration Card */}
       <Card>
         <CardHeader>
-          <CardTitle>{t("trafficModeConfig", "Traffic Mode Configuration")}</CardTitle>
+          <CardTitle>
+            {t("trafficModeConfig", "Traffic Mode Configuration")}
+          </CardTitle>
           <CardDescription>
             {t(
               "trafficModeDescription",
@@ -128,7 +137,7 @@ export default function TrafficModeTab() {
           {isLoadingNodeGroups ? (
             <div className="flex items-center justify-center py-8">
               <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              <span className="ml-2 text-sm text-muted-foreground">
+              <span className="ml-2 text-muted-foreground text-sm">
                 {t("loading", "Loading...")}
               </span>
             </div>
@@ -144,7 +153,9 @@ export default function TrafficModeTab() {
       {/* Recalculation Card */}
       <Card>
         <CardHeader>
-          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
+          <CardTitle>
+            {t("groupRecalculation", "Group Recalculation")}
+          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -156,7 +167,7 @@ export default function TrafficModeTab() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">
+              <span className="font-medium text-sm">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -188,14 +199,20 @@ export default function TrafficModeTab() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
-                {t("recalculationCompleted", "Recalculation completed successfully")}
+                {t(
+                  "recalculationCompleted",
+                  "Recalculation completed successfully"
+                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-sm text-destructive">
+              <div className="text-destructive text-sm">
-                {t("recalculationFailed", "Recalculation failed. Please try again.")}
+                {t(
+                  "recalculationFailed",
+                  "Recalculation failed. Please try again."
+                )}
               </div>
             )}
           </div>
@@ -203,8 +220,8 @@ export default function TrafficModeTab() {
           {/* Recalculate Button */}
           <div className="flex justify-end">
             <Button
-              onClick={handleRecalculate}
               disabled={recalculating || status?.state === "running"}
+              onClick={handleRecalculate}
             >
               {recalculating && (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />

apps/admin/src/sections/group/traffic-ranges-config.tsx

@@ -2,8 +2,8 @@
 
 import { Input } from "@workspace/ui/components/input";
 import { Loader2 } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
 interface NodeGroup {
@@ -15,12 +15,15 @@ interface NodeGroup {
 
 interface TrafficRangeConfigProps {
   nodeGroups: NodeGroup[];
-  onTrafficUpdate: (nodeGroupId: number, fields: { min_traffic_gb?: number; max_traffic_gb?: number }) => Promise<void>;
+  onTrafficUpdate: (
+    nodeGroupId: number,
+    fields: { min_traffic_gb?: number; max_traffic_gb?: number }
+  ) => Promise<void>;
 }
 
 interface UpdatingNode {
   nodeGroupId: number;
-  field: 'min_traffic_gb' | 'max_traffic_gb';
+  field: "min_traffic_gb" | "max_traffic_gb";
 }
 
 interface NodeGroupTempValues {
@@ -28,20 +31,30 @@ interface NodeGroupTempValues {
   max_traffic_gb?: number;
 }
 
-export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: TrafficRangeConfigProps) {
+export default function TrafficRangeConfig({
+  nodeGroups,
+  onTrafficUpdate,
+}: TrafficRangeConfigProps) {
   const { t } = useTranslation("group");
   const [updatingNodes, setUpdatingNodes] = useState<UpdatingNode[]>([]);
   // 使用对象存储每个节点组的临时值
-  const [temporaryValues, setTemporaryValues] = useState<Record<number, NodeGroupTempValues>>({});
+  const [temporaryValues, setTemporaryValues] = useState<
+    Record<number, NodeGroupTempValues>
+  >({});
 
   // Get the display value (temporary or actual)
-  const getDisplayValue = (nodeGroupId: number, field: 'min_traffic_gb' | 'max_traffic_gb'): number => {
+  const getDisplayValue = (
+    nodeGroupId: number,
+    field: "min_traffic_gb" | "max_traffic_gb"
+  ): number => {
     const temp = temporaryValues[nodeGroupId];
     if (temp && temp[field] !== undefined) {
       return temp[field]!;
     }
-    const nodeGroup = nodeGroups.find(ng => ng.id === nodeGroupId);
+    const nodeGroup = nodeGroups.find((ng) => ng.id === nodeGroupId);
-    return field === 'min_traffic_gb' ? (nodeGroup?.min_traffic_gb ?? 0) : (nodeGroup?.max_traffic_gb ?? 0);
+    return field === "min_traffic_gb"
+      ? (nodeGroup?.min_traffic_gb ?? 0)
+      : (nodeGroup?.max_traffic_gb ?? 0);
   };
 
   // Validate traffic ranges: no overlaps
@@ -57,22 +70,34 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
 
     // Check if min >= max (both > 0)
     if (minTraffic > 0 && maxTraffic > 0 && minTraffic >= maxTraffic) {
-      return { valid: false, error: t("minCannotExceedMax", "Minimum traffic cannot exceed maximum traffic") };
+      return {
+        valid: false,
+        error: t(
+          "minCannotExceedMax",
+          "Minimum traffic cannot exceed maximum traffic"
+        ),
+      };
     }
 
     // Check for overlaps with other node groups
     const otherGroups = nodeGroups
-      .filter(ng => ng.id !== nodeGroupId)
+      .filter((ng) => ng.id !== nodeGroupId)
-      .map(ng => {
+      .map((ng) => {
         const temp = temporaryValues[ng.id];
         return {
           id: ng.id,
           name: ng.name,
-          min: temp?.min_traffic_gb !== undefined ? temp.min_traffic_gb : (ng.min_traffic_gb ?? 0),
+          min:
-          max: temp?.max_traffic_gb !== undefined ? temp.max_traffic_gb : (ng.max_traffic_gb ?? 0),
+            temp?.min_traffic_gb !== undefined
+              ? temp.min_traffic_gb
+              : (ng.min_traffic_gb ?? 0),
+          max:
+            temp?.max_traffic_gb !== undefined
+              ? temp.max_traffic_gb
+              : (ng.max_traffic_gb ?? 0),
         };
       })
-      .filter(ng => !(ng.min === 0 && ng.max === 0))  // 跳过未配置流量区间的组
+      .filter((ng) => !(ng.min === 0 && ng.max === 0)) // 跳过未配置流量区间的组
       .sort((a, b) => a.min - b.min);
 
     for (const other of otherGroups) {
@@ -85,7 +110,11 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
       if (currentMax > other.min && otherMax > minTraffic) {
         return {
           valid: false,
-          error: t("rangeOverlap", "Range overlaps with node group \"{{name}}\"", { name: other.name })
+          error: t(
+            "rangeOverlap",
+            'Range overlaps with node group "{{name}}"',
+            { name: other.name }
+          ),
         };
       }
     }
@@ -94,31 +123,39 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
   };
 
   const handleTrafficBlur = async (nodeGroupId: number) => {
-    const nodeGroup = nodeGroups.find(ng => ng.id === nodeGroupId);
+    const nodeGroup = nodeGroups.find((ng) => ng.id === nodeGroupId);
     if (!nodeGroup) return;
 
     const tempValues = temporaryValues[nodeGroupId];
     if (!tempValues) return;
 
     // 获取当前的临时值或实际值
-    const currentMin = tempValues.min_traffic_gb !== undefined
+    const currentMin =
+      tempValues.min_traffic_gb !== undefined
         ? tempValues.min_traffic_gb
         : (nodeGroup.min_traffic_gb ?? 0);
-    const currentMax = tempValues.max_traffic_gb !== undefined
+    const currentMax =
+      tempValues.max_traffic_gb !== undefined
         ? tempValues.max_traffic_gb
         : (nodeGroup.max_traffic_gb ?? 0);
 
     // 只要有一个字段被修改了就保存
     const hasMinChange = tempValues.min_traffic_gb !== undefined;
     const hasMaxChange = tempValues.max_traffic_gb !== undefined;
-    if (!hasMinChange && !hasMaxChange) {
+    if (!(hasMinChange || hasMaxChange)) {
       return;
     }
 
     // 验证
-    const validation = validateTrafficRange(nodeGroupId, currentMin, currentMax);
+    const validation = validateTrafficRange(
+      nodeGroupId,
+      currentMin,
+      currentMax
+    );
     if (!validation.valid) {
-      toast.error(validation.error || t("validationFailed", "Validation failed"));
+      toast.error(
+        validation.error || t("validationFailed", "Validation failed")
+      );
       return;
     }
 
@@ -131,15 +168,24 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
 
     // 标记为更新中（只标记被修改的字段）
     if (hasMinChange) {
-      setUpdatingNodes(prev => [...prev, { nodeGroupId, field: 'min_traffic_gb' }]);
+      setUpdatingNodes((prev) => [
+        ...prev,
+        { nodeGroupId, field: "min_traffic_gb" },
+      ]);
     }
     if (hasMaxChange) {
-      setUpdatingNodes(prev => [...prev, { nodeGroupId, field: 'max_traffic_gb' }]);
+      setUpdatingNodes((prev) => [
+        ...prev,
+        { nodeGroupId, field: "max_traffic_gb" },
+      ]);
     }
 
     try {
       // 一次性传递两个字段
-      const fieldsToUpdate: { min_traffic_gb?: number; max_traffic_gb?: number } = {};
+      const fieldsToUpdate: {
+        min_traffic_gb?: number;
+        max_traffic_gb?: number;
+      } = {};
       if (currentMin !== originalMin) {
         fieldsToUpdate.min_traffic_gb = currentMin;
       }
@@ -152,40 +198,44 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
       }
     } finally {
       // 移除更新状态
-      setUpdatingNodes(prev => prev.filter(u => !(u.nodeGroupId === nodeGroupId)));
+      setUpdatingNodes((prev) =>
+        prev.filter((u) => !(u.nodeGroupId === nodeGroupId))
+      );
     }
   };
 
-  const isUpdating = (nodeGroupId: number) => {
+  const isUpdating = (nodeGroupId: number) =>
-    return updatingNodes.some(u => u.nodeGroupId === nodeGroupId);
+    updatingNodes.some((u) => u.nodeGroupId === nodeGroupId);
-  };
 
   return (
     <>
       <div className="space-y-2">
-        <div className="grid grid-cols-12 gap-2 text-sm font-medium text-muted-foreground">
+        <div className="grid grid-cols-12 gap-2 font-medium text-muted-foreground text-sm">
           <div className="col-span-6">{t("nodeGroup", "Node Group")}</div>
           <div className="col-span-3">{t("minTrafficGB", "Min (GB)")}</div>
           <div className="col-span-3">{t("maxTrafficGB", "Max (GB)")}</div>
         </div>
 
         {nodeGroups.map((nodeGroup) => (
-          <div key={nodeGroup.id} className="grid grid-cols-12 gap-2 items-center">
+          <div
+            className="grid grid-cols-12 items-center gap-2"
+            key={nodeGroup.id}
+          >
             <div className="col-span-6">
               <div className="font-medium">{nodeGroup.name}</div>
-              <div className="text-xs text-muted-foreground">{t("id", "ID")}: {nodeGroup.id}</div>
+              <div className="text-muted-foreground text-xs">
+                {t("id", "ID")}: {nodeGroup.id}
               </div>
-            <div className="col-span-3 relative">
+            </div>
+            <div className="relative col-span-3">
               <Input
-                type="number"
+                disabled={isUpdating(nodeGroup.id)}
                 min={0}
-                step={1}
+                onBlur={() => handleTrafficBlur(nodeGroup.id)}
-                placeholder="0"
-                value={getDisplayValue(nodeGroup.id, "min_traffic_gb")}
                 onChange={(e) => {
-                  const newValue = parseFloat(e.target.value) || 0;
+                  const newValue = Number.parseFloat(e.target.value) || 0;
                   // 更新临时状态
-                  setTemporaryValues(prev => ({
+                  setTemporaryValues((prev) => ({
                     ...prev,
                     [nodeGroup.id]: {
                       ...prev[nodeGroup.id],
@@ -194,26 +244,26 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
                     },
                   }));
                 }}
-                onBlur={() => handleTrafficBlur(nodeGroup.id)}
+                placeholder="0"
-                disabled={isUpdating(nodeGroup.id)}
+                step={1}
+                type="number"
+                value={getDisplayValue(nodeGroup.id, "min_traffic_gb")}
               />
               {isUpdating(nodeGroup.id) && (
-                <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                <div className="-translate-y-1/2 absolute top-1/2 right-2">
                   <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                 </div>
               )}
             </div>
-            <div className="col-span-3 relative">
+            <div className="relative col-span-3">
               <Input
-                type="number"
+                disabled={isUpdating(nodeGroup.id)}
                 min={0}
-                step={1}
+                onBlur={() => handleTrafficBlur(nodeGroup.id)}
-                placeholder="0"
-                value={getDisplayValue(nodeGroup.id, "max_traffic_gb")}
                 onChange={(e) => {
-                  const newValue = parseFloat(e.target.value) || 0;
+                  const newValue = Number.parseFloat(e.target.value) || 0;
                   // 更新临时状态
-                  setTemporaryValues(prev => ({
+                  setTemporaryValues((prev) => ({
                     ...prev,
                     [nodeGroup.id]: {
                       ...prev[nodeGroup.id],
@@ -222,11 +272,13 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
                     },
                   }));
                 }}
-                onBlur={() => handleTrafficBlur(nodeGroup.id)}
+                placeholder="0"
-                disabled={isUpdating(nodeGroup.id)}
+                step={1}
+                type="number"
+                value={getDisplayValue(nodeGroup.id, "max_traffic_gb")}
               />
               {isUpdating(nodeGroup.id) && (
-                <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                <div className="-translate-y-1/2 absolute top-1/2 right-2">
                   <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                 </div>
               )}
@@ -235,7 +287,7 @@ export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: Traf
         ))}
       </div>
 
-      <div className="rounded-md bg-muted p-4 text-sm text-muted-foreground">
+      <div className="rounded-md bg-muted p-4 text-muted-foreground text-sm">
         <strong>{t("note", "Note")}:</strong>{" "}
         {t(
           "trafficRangesNote",

apps/admin/src/sections/log/reset-subscribe/index.tsx

@@ -81,7 +81,9 @@ export default function ResetSubscribeLogPage() {
           page: pagination.page,
           size: pagination.size,
           date: (filter as any)?.date,
-          user_subscribe_id: (filter as any)?.user_subscribe_id ? Number((filter as any)?.user_subscribe_id) : undefined,
+          user_subscribe_id: (filter as any)?.user_subscribe_id
+            ? Number((filter as any)?.user_subscribe_id)
+            : undefined,
         });
         const list = (data?.data?.list || []) as any[];
         const total = Number(data?.data?.total || list.length);

apps/admin/src/sections/log/subscribe-traffic/index.tsx

@@ -93,7 +93,9 @@ export default function SubscribeTrafficLogPage() {
           size: pagination.size,
           date: (filter as any)?.date,
           user_id: (filter as any)?.user_id,
-          user_subscribe_id: (filter as any)?.user_subscribe_id ? Number((filter as any)?.user_subscribe_id) : undefined,
+          user_subscribe_id: (filter as any)?.user_subscribe_id
+            ? Number((filter as any)?.user_subscribe_id)
+            : undefined,
         });
         const list =
           ((data?.data?.list || []) as API.UserSubscribeTrafficLog[]) || [];

apps/admin/src/sections/log/subscribe/index.tsx

@@ -26,7 +26,10 @@ export default function SubscribeLogPage() {
     user_subscribe_id: sp.user_subscribe_id || undefined,
   };
   return (
-    <ProTable<API.SubscribeLog, { date?: string; user_id?: number; user_subscribe_id?: string }>
+    <ProTable<
+      API.SubscribeLog,
+      { date?: string; user_id?: number; user_subscribe_id?: string }
+    >
       columns={[
         {
           accessorKey: "user",
@@ -94,7 +97,9 @@ export default function SubscribeLogPage() {
           size: pagination.size,
           date: (filter as any)?.date,
           user_id: (filter as any)?.user_id,
-          user_subscribe_id: (filter as any)?.user_subscribe_id ? Number((filter as any)?.user_subscribe_id) : undefined,
+          user_subscribe_id: (filter as any)?.user_subscribe_id
+            ? Number((filter as any)?.user_subscribe_id)
+            : undefined,
         });
         const list = (data?.data?.list || []) as any[];
         const total = Number(data?.data?.total || list.length);

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import { Switch } from "@workspace/ui/components/switch";
@@ -8,6 +9,10 @@ import {
   ProTable,
   type ProTableActions,
 } from "@workspace/ui/composed/pro-table/pro-table";
+import {
+  getGroupConfig,
+  getNodeGroupList,
+} from "@workspace/ui/services/admin/group";
 import {
   createNode,
   deleteNode,
@@ -16,8 +21,6 @@ import {
   toggleNodeStatus,
   updateNode,
 } from "@workspace/ui/services/admin/server";
-import { getGroupConfig, getNodeGroupList } from "@workspace/ui/services/admin/group";
-import { useQuery } from "@tanstack/react-query";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -52,7 +55,7 @@ export default function Nodes() {
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled || false;
+  const isGroupEnabled = groupConfigData?.enabled;
 
   // Dynamic columns based on group feature status
   const columns = useMemo(() => {
@@ -121,13 +124,13 @@ export default function Nodes() {
         id: "node_group_ids",
         header: t("nodeGroups", "Node Groups"),
         cell: ({ row }: { row: any }) => {
-          const groupIds = row.original.node_group_ids as number[] || [];
+          const groupIds = (row.original.node_group_ids as number[]) || [];
 
           // Public node indicator (when node_group_ids is empty)
           if (groupIds.length === 0) {
             return (
               <div className="flex items-center gap-2">
-                <Badge variant="secondary" className="text-xs">
+                <Badge className="text-xs" variant="secondary">
                   {t("public", "Public")}
                 </Badge>
               </div>
@@ -151,7 +154,14 @@ export default function Nodes() {
     }
 
     return baseColumns;
-  }, [isGroupEnabled, nodeGroupsData, t, getServerName, getServerAddress, getProtocolPort]);
+  }, [
+    isGroupEnabled,
+    nodeGroupsData,
+    t,
+    getServerName,
+    getServerAddress,
+    getProtocolPort,
+  ]);
 
   return (
     <ProTable<API.Node, { search: string; node_group_id?: number }>
@@ -168,7 +178,10 @@ export default function Nodes() {
                 const body: API.UpdateNodeRequest = {
                   ...row,
                   ...values,
-                  node_group_ids: values.node_group_ids?.map((id: string | number) => Number(id)) || [],
+                  node_group_ids:
+                    values.node_group_ids?.map((id: string | number) =>
+                      Number(id)
+                    ) || [],
                 } as any;
                 await updateNode(body);
                 toast.success(t("updated", "Updated"));
@@ -274,9 +287,10 @@ export default function Nodes() {
                   port: Number(values.port!),
                   tags: values.tags || [],
                 };
-                // Add node_group_ids if it exists
                 if (values.node_group_ids) {
-                  body.node_group_ids = values.node_group_ids.map((id: string | number) => Number(id));
+                  body.node_group_ids = values.node_group_ids.map(
+                    (id: string | number) => Number(id)
+                  );
                 }
                 await createNode(body);
                 toast.success(t("created", "Created"));
@@ -290,8 +304,8 @@ export default function Nodes() {
                 return false;
               }
             }}
-            title={t("drawerCreateTitle", "Create Node")}
+            title={t("drawerCreateTitle", "Create Landing Node")}
-            trigger={t("create", "Create")}
+            trigger={t("create", "Create Landing Node")}
           />
         ),
       }}
@@ -372,7 +386,9 @@ export default function Nodes() {
           page: pagination.page,
           size: pagination.size,
           search: filter?.search || undefined,
-          node_group_id: filter?.node_group_id ? Number(filter.node_group_id) : undefined,
+          node_group_id: filter?.node_group_id
+            ? Number(filter.node_group_id)
+            : undefined,
         };
 
         const { data } = await filterNodeList(filters);

apps/admin/src/sections/nodes/node-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { Button } from "@workspace/ui/components/button";
 import { Checkbox } from "@workspace/ui/components/checkbox";
 import {
@@ -25,8 +26,10 @@ import {
 import { Combobox } from "@workspace/ui/composed/combobox";
 import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
 import TagInput from "@workspace/ui/composed/tag-input";
-import { getGroupConfig, getNodeGroupList } from "@workspace/ui/services/admin/group";
+import {
-import { useQuery } from "@tanstack/react-query";
+  getGroupConfig,
+  getNodeGroupList,
+} from "@workspace/ui/services/admin/group";
 import type { TFunction } from "i18next";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -150,7 +153,7 @@ export default function NodeForm(props: {
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled || false;
+  const isGroupEnabled = groupConfigData?.enabled;
 
   useEffect(() => {
     if (initialValues) {
@@ -166,15 +169,21 @@ export default function NodeForm(props: {
 
       // Copy only the values we need from initialValues
       if (initialValues.name) resetValues.name = initialValues.name;
-      if (initialValues.server_id) resetValues.server_id = initialValues.server_id;
+      if (initialValues.server_id)
+        resetValues.server_id = initialValues.server_id;
       if (initialValues.protocol) resetValues.protocol = initialValues.protocol;
       if (initialValues.address) resetValues.address = initialValues.address;
       if (initialValues.port) resetValues.port = initialValues.port;
       if (initialValues.tags) resetValues.tags = initialValues.tags;
 
       // Convert node_group_ids from number[] to string[], ensure it's always an array
-      if (initialValues.node_group_ids && Array.isArray(initialValues.node_group_ids)) {
+      if (
-        resetValues.node_group_ids = initialValues.node_group_ids.map((id: string | number) => String(id));
+        initialValues.node_group_ids &&
+        Array.isArray(initialValues.node_group_ids)
+      ) {
+        resetValues.node_group_ids = initialValues.node_group_ids.map(
+          (id: string | number) => String(id)
+        );
       } else {
         resetValues.node_group_ids = [];
       }
@@ -449,23 +458,32 @@ export default function NodeForm(props: {
                         <div className="grid grid-cols-2 gap-2">
                           {nodeGroupsData?.map((g) => (
                             <div
-                              key={g.id}
                               className="flex items-center space-x-2"
+                              key={g.id}
                             >
                               <Checkbox
+                                checked={field.value?.includes(String(g.id))}
                                 id={`node-group-${g.id}`}
-                                checked={field.value?.includes(String(g.id)) || false}
                                 onCheckedChange={(checked) => {
                                   // Ensure field.value is always an array
-                                  const currentValue = Array.isArray(field.value) ? field.value : [];
+                                  const currentValue = Array.isArray(
+                                    field.value
+                                  )
+                                    ? field.value
+                                    : [];
                                   if (checked) {
-                                    const newValue = [...currentValue, String(g.id)];
+                                    const newValue = [
+                                      ...currentValue,
+                                      String(g.id),
+                                    ];
                                     form.setValue(field.name, newValue, {
                                       shouldValidate: true,
                                       shouldDirty: true,
                                     });
                                   } else {
-                                    const newValue = currentValue.filter((v: string) => v !== String(g.id));
+                                    const newValue = currentValue.filter(
+                                      (v: string) => v !== String(g.id)
+                                    );
                                     form.setValue(field.name, newValue, {
                                       shouldValidate: true,
                                       shouldDirty: true,
@@ -474,8 +492,8 @@ export default function NodeForm(props: {
                                 }}
                               />
                               <Label
-                                htmlFor={`node-group-${g.id}`}
                                 className="cursor-pointer"
+                                htmlFor={`node-group-${g.id}`}
                               >
                                 {g.name}
                               </Label>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import {
   Accordion,
   AccordionContent,
@@ -41,12 +42,14 @@ import { ArrayInput } from "@workspace/ui/composed/dynamic-inputs";
 import { JSONEditor } from "@workspace/ui/composed/editor/index";
 import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
 import { Icon } from "@workspace/ui/composed/icon";
+import {
+  getGroupConfig,
+  getNodeGroupList,
+} from "@workspace/ui/services/admin/group";
 import {
   evaluateWithPrecision,
   unitConversion,
 } from "@workspace/ui/utils/unit-conversions";
-import { getGroupConfig, getNodeGroupList } from "@workspace/ui/services/admin/group";
-import { useQuery } from "@tanstack/react-query";
 import { CreditCard, Server, Settings } from "lucide-react";
 import { assign, shake } from "radash";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -263,8 +266,13 @@ export default function SubscribeForm<T extends Record<string, any>>({
     }
 
     // Convert node_group_ids from number[] to string[]
-    if (initialValues?.node_group_ids && Array.isArray(initialValues.node_group_ids)) {
+    if (
-      processedValues.node_group_ids = (initialValues.node_group_ids as any[]).map((id) => String(id));
+      initialValues?.node_group_ids &&
+      Array.isArray(initialValues.node_group_ids)
+    ) {
+      processedValues.node_group_ids = (
+        initialValues.node_group_ids as any[]
+      ).map((id) => String(id));
     }
 
     form?.reset(processedValues);
@@ -290,7 +298,13 @@ export default function SubscribeForm<T extends Record<string, any>>({
     if (bool) setOpen(false);
   }
 
-  const { getAllAvailableTags, getNodesByTag, getNodesWithoutTags, getNodesWithoutGroups, nodes } = useNode();
+  const {
+    getAllAvailableTags,
+    getNodesByTag,
+    getNodesWithoutTags,
+    getNodesWithoutGroups,
+    nodes,
+  } = useNode();
 
   const tagGroups = getAllAvailableTags();
 
@@ -314,7 +328,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled || false;
+  const isGroupEnabled = groupConfigData?.enabled;
 
   const unit_time = form.watch("unit_time");
   const node_group_id = form.watch("node_group_id");
@@ -332,7 +346,11 @@ export default function SubscribeForm<T extends Record<string, any>>({
 
   // If node_group_id is empty or 0, automatically set it to the first item in node_group_ids
   useEffect(() => {
-    if ((!node_group_id || node_group_id === "0") && node_group_ids && node_group_ids.length > 0) {
+    if (
+      (!node_group_id || node_group_id === "0") &&
+      node_group_ids &&
+      node_group_ids.length > 0
+    ) {
       form.setValue("node_group_id", node_group_ids[0]);
     }
   }, [node_group_ids, node_group_id, form]);
@@ -1030,11 +1048,16 @@ export default function SubscribeForm<T extends Record<string, any>>({
                                   const nodesWithTag = getNodesByTag(tag);
 
                                   return (
-                                    <AccordionItem key={tag} value={String(tag)}>
+                                    <AccordionItem
+                                      key={tag}
+                                      value={String(tag)}
+                                    >
                                       <AccordionTrigger>
                                         <div className="flex items-center gap-2">
                                           <Checkbox
-                                            checked={value.includes(tagId as any)}
+                                            checked={value.includes(
+                                              tagId as any
+                                            )}
                                             onCheckedChange={(checked) =>
                                               checked
                                                 ? form.setValue(field.name, [
@@ -1098,7 +1121,10 @@ export default function SubscribeForm<T extends Record<string, any>>({
                             <div className="flex flex-col gap-2">
                               {/* When group feature is enabled, show nodes without groups */}
                               {/* When group feature is disabled, show nodes without tags */}
-                              {(isGroupEnabled ? getNodesWithoutGroups() : getNodesWithoutTags()).map((item: API.Node) => {
+                              {(isGroupEnabled
+                                ? getNodesWithoutGroups()
+                                : getNodesWithoutTags()
+                              ).map((item: API.Node) => {
                                 const value = field.value || [];
 
                                 return (
@@ -1141,9 +1167,14 @@ export default function SubscribeForm<T extends Record<string, any>>({
                           </FormControl>
                           <FormDescription>
                             {isGroupEnabled
-                              ? t("form.nodesWithoutGroupsDescription", "Nodes without group assignment will be shown here (nodes that belong to groups are managed in the Node Groups section above)")
+                              ? t(
-                              : t("form.nodesDescription", "Select nodes for this subscription")
+                                  "form.nodesWithoutGroupsDescription",
-                            }
+                                  "Nodes without group assignment will be shown here (nodes that belong to groups are managed in the Node Groups section above)"
+                                )
+                              : t(
+                                  "form.nodesDescription",
+                                  "Select nodes for this subscription"
+                                )}
                           </FormDescription>
                           <FormMessage />
                         </FormItem>
@@ -1154,70 +1185,325 @@ export default function SubscribeForm<T extends Record<string, any>>({
                     {isGroupEnabled && (
                       <>
                         {/* When no default node group is set, show simple node group selection */}
-                        {!node_group_id ? (
+                        {node_group_id ? (
+                          <>
+                            {/* Default Node Group Selection - shown when default is set */}
+                            <FormField
+                              control={form.control}
+                              name="node_group_id"
+                              render={({ field }) => {
+                                // Find the selected node group
+                                const selectedNodeGroup = nodeGroupsData?.find(
+                                  (g) => String(g.id) === field.value
+                                );
+                                // Filter nodes that belong to this group
+                                const nodesInGroup = selectedNodeGroup
+                                  ? (nodes || []).filter((node) => {
+                                      const nodeGroupIds =
+                                        (node as any).node_group_ids || [];
+                                      return nodeGroupIds.includes(
+                                        selectedNodeGroup.id
+                                      );
+                                    })
+                                  : [];
+
+                                return (
+                                  <FormItem>
+                                    <FormLabel>
+                                      {t(
+                                        "form.defaultNodeGroup",
+                                        "Default Node Group"
+                                      )}
+                                    </FormLabel>
+                                    <Card className="p-4">
+                                      <FormControl>
+                                        <Combobox
+                                          onChange={(value) => {
+                                            form.setValue(
+                                              field.name,
+                                              value || ""
+                                            );
+                                          }}
+                                          options={[
+                                            {
+                                              label: t(
+                                                "form.noDefaultNodeGroup",
+                                                "No Default Node Group"
+                                              ),
+                                              value: "",
+                                            },
+                                            ...(nodeGroupsData?.map((g) => ({
+                                              label: g.name,
+                                              value: String(g.id),
+                                            })) || []),
+                                          ]}
+                                          placeholder={t(
+                                            "form.selectDefaultNodeGroup",
+                                            "Select a default node group..."
+                                          )}
+                                          value={field.value}
+                                        />
+                                      </FormControl>
+                                      <FormDescription className="mt-2">
+                                        {t(
+                                          "form.defaultNodeGroupDescription",
+                                          "The default node group for this product."
+                                        )}
+                                      </FormDescription>
+                                      {/* Show nodes in the selected default node group */}
+                                      {nodesInGroup.length > 0 && (
+                                        <>
+                                          <div className="mt-3 mb-2 text-muted-foreground text-xs">
+                                            {t(
+                                              "form.nodesInGroup",
+                                              "Nodes in this group:"
+                                            )}
+                                          </div>
+                                          <div className="grid grid-cols-1 gap-2">
+                                            {nodesInGroup.map((node) => (
+                                              <div
+                                                className="flex items-center justify-between rounded border bg-muted/30 p-2 text-sm"
+                                                key={node.id}
+                                              >
+                                                <span className="flex-1 font-medium">
+                                                  {node.name}
+                                                </span>
+                                                <span className="flex-1 text-muted-foreground">
+                                                  {node.address}:{node.port}
+                                                </span>
+                                                <span className="flex-1 text-right text-muted-foreground">
+                                                  {node.protocol}
+                                                </span>
+                                              </div>
+                                            ))}
+                                          </div>
+                                        </>
+                                      )}
+                                    </Card>
+                                    <FormMessage />
+                                  </FormItem>
+                                );
+                              }}
+                            />
+
+                            {/* Backup Node Groups Selection - filter out default node group */}
                             <FormField
                               control={form.control}
                               name="node_group_ids"
                               render={({ field }) => (
                                 <FormItem>
-                                <FormLabel>{t("form.nodeGroups", "Node Groups")}</FormLabel>
+                                  <FormLabel>
+                                    {t(
+                                      "form.backupNodeGroups",
+                                      "Backup Node Groups"
+                                    )}
+                                  </FormLabel>
                                   <FormControl>
                                     <div className="space-y-4">
-                                    {nodeGroupsData?.map((g) => {
+                                      {nodeGroupsData
+                                        ?.filter(
+                                          (g) => String(g.id) !== node_group_id
+                                        )
+                                        ?.map((g) => {
                                           // Filter nodes that belong to this group
-                                      const nodesInGroup = (nodes || []).filter((node) => {
+                                          const nodesInGroup = (
-                                        const nodeGroupIds = (node as any).node_group_ids || [];
+                                            nodes || []
+                                          ).filter((node) => {
+                                            const nodeGroupIds =
+                                              (node as any).node_group_ids ||
+                                              [];
                                             return nodeGroupIds.includes(g.id);
                                           });
 
                                           return (
-                                        <div key={g.id} className="border rounded-lg p-4">
+                                            <div
-                                          <div className="flex items-center space-x-2 mb-3">
+                                              className="rounded-lg border p-4"
+                                              key={g.id}
+                                            >
+                                              <div className="mb-3 flex items-center space-x-2">
                                                 <Checkbox
-                                              id={`subscribe-node-group-${g.id}`}
+                                                  checked={field.value?.includes(
-                                              checked={field.value?.includes(String(g.id))}
+                                                    String(g.id)
-                                              onCheckedChange={(checked) => {
+                                                  )}
-                                                const currentValue = field.value || [];
+                                                  id={`subscribe-backup-node-group-${g.id}`}
-                                                const currentDefaultGroupId = form.getValues("node_group_id");
+                                                  onCheckedChange={(
-
+                                                    checked
+                                                  ) => {
+                                                    const currentValue =
+                                                      field.value || [];
                                                     if (checked) {
-                                                  const newValue = [...currentValue, String(g.id)];
+                                                      form.setValue(
-                                                  form.setValue(field.name, newValue);
+                                                        field.name,
-
+                                                        [
-                                                  // If no default node group is set, set this one as default
+                                                          ...currentValue,
-                                                  if (!currentDefaultGroupId) {
+                                                          String(g.id),
-                                                    form.setValue("node_group_id", String(g.id));
+                                                        ]
-                                                  }
+                                                      );
                                                     } else {
                                                       form.setValue(
                                                         field.name,
-                                                    currentValue.filter((v: string) => v !== String(g.id))
+                                                        currentValue.filter(
+                                                          (v: string) =>
+                                                            v !== String(g.id)
+                                                        )
                                                       );
                                                     }
                                                   }}
                                                 />
                                                 <Label
-                                              htmlFor={`subscribe-node-group-${g.id}`}
                                                   className="cursor-pointer font-medium"
+                                                  htmlFor={`subscribe-backup-node-group-${g.id}`}
                                                 >
                                                   {g.name}
                                                   <span className="ml-2 text-muted-foreground text-sm">
-                                                ({nodesInGroup.length} {t("form.nodes", "nodes")})
+                                                    ({nodesInGroup.length}{" "}
+                                                    {t("form.nodes", "nodes")})
                                                   </span>
                                                 </Label>
                                               </div>
 
                                               {/* Show nodes in this group */}
                                               {nodesInGroup.length > 0 && (
-                                            <div className="ml-6 mt-3">
+                                                <div className="mt-3 ml-6">
-                                              <div className="text-xs text-muted-foreground mb-2">
+                                                  <div className="mb-2 text-muted-foreground text-xs">
-                                                {t("form.nodesInGroup", "Nodes in this group:")}
+                                                    {t(
+                                                      "form.nodesInGroup",
+                                                      "Nodes in this group:"
+                                                    )}
+                                                  </div>
+                                                  <div className="grid grid-cols-1 gap-2">
+                                                    {nodesInGroup.map(
+                                                      (node) => (
+                                                        <div
+                                                          className="flex items-center justify-between rounded border bg-muted/30 p-2 text-sm"
+                                                          key={node.id}
+                                                        >
+                                                          <span className="flex-1 font-medium">
+                                                            {node.name}
+                                                          </span>
+                                                          <span className="flex-1 text-muted-foreground">
+                                                            {node.address}:
+                                                            {node.port}
+                                                          </span>
+                                                          <span className="flex-1 text-right text-muted-foreground">
+                                                            {node.protocol}
+                                                          </span>
+                                                        </div>
+                                                      )
+                                                    )}
+                                                  </div>
+                                                </div>
+                                              )}
+                                            </div>
+                                          );
+                                        })}
+                                    </div>
+                                  </FormControl>
+                                  <FormDescription>
+                                    {t(
+                                      "form.backupNodeGroupsDescription",
+                                      "Select additional backup node groups."
+                                    )}
+                                  </FormDescription>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          </>
+                        ) : (
+                          <FormField
+                            control={form.control}
+                            name="node_group_ids"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  {t("form.nodeGroups", "Node Groups")}
+                                </FormLabel>
+                                <FormControl>
+                                  <div className="space-y-4">
+                                    {nodeGroupsData?.map((g) => {
+                                      // Filter nodes that belong to this group
+                                      const nodesInGroup = (nodes || []).filter(
+                                        (node) => {
+                                          const nodeGroupIds =
+                                            (node as any).node_group_ids || [];
+                                          return nodeGroupIds.includes(g.id);
+                                        }
+                                      );
+
+                                      return (
+                                        <div
+                                          className="rounded-lg border p-4"
+                                          key={g.id}
+                                        >
+                                          <div className="mb-3 flex items-center space-x-2">
+                                            <Checkbox
+                                              checked={field.value?.includes(
+                                                String(g.id)
+                                              )}
+                                              id={`subscribe-node-group-${g.id}`}
+                                              onCheckedChange={(checked) => {
+                                                const currentValue =
+                                                  field.value || [];
+                                                const currentDefaultGroupId =
+                                                  form.getValues(
+                                                    "node_group_id"
+                                                  );
+
+                                                if (checked) {
+                                                  const newValue = [
+                                                    ...currentValue,
+                                                    String(g.id),
+                                                  ];
+                                                  form.setValue(
+                                                    field.name,
+                                                    newValue
+                                                  );
+
+                                                  // If no default node group is set, set this one as default
+                                                  if (!currentDefaultGroupId) {
+                                                    form.setValue(
+                                                      "node_group_id",
+                                                      String(g.id)
+                                                    );
+                                                  }
+                                                } else {
+                                                  form.setValue(
+                                                    field.name,
+                                                    currentValue.filter(
+                                                      (v: string) =>
+                                                        v !== String(g.id)
+                                                    )
+                                                  );
+                                                }
+                                              }}
+                                            />
+                                            <Label
+                                              className="cursor-pointer font-medium"
+                                              htmlFor={`subscribe-node-group-${g.id}`}
+                                            >
+                                              {g.name}
+                                              <span className="ml-2 text-muted-foreground text-sm">
+                                                ({nodesInGroup.length}{" "}
+                                                {t("form.nodes", "nodes")})
+                                              </span>
+                                            </Label>
+                                          </div>
+
+                                          {/* Show nodes in this group */}
+                                          {nodesInGroup.length > 0 && (
+                                            <div className="mt-3 ml-6">
+                                              <div className="mb-2 text-muted-foreground text-xs">
+                                                {t(
+                                                  "form.nodesInGroup",
+                                                  "Nodes in this group:"
+                                                )}
                                               </div>
                                               <div className="grid grid-cols-1 gap-2">
                                                 {nodesInGroup.map((node) => (
                                                   <div
+                                                    className="flex items-center justify-between rounded border bg-muted/30 p-2 text-sm"
                                                     key={node.id}
-                                                    className="flex items-center justify-between rounded border p-2 text-sm bg-muted/30"
                                                   >
                                                     <span className="flex-1 font-medium">
                                                       {node.name}
@@ -1248,169 +1534,6 @@ export default function SubscribeForm<T extends Record<string, any>>({
                               </FormItem>
                             )}
                           />
-                        ) : (
-                          <>
-                            {/* Default Node Group Selection - shown when default is set */}
-                            <FormField
-                              control={form.control}
-                              name="node_group_id"
-                              render={({ field }) => {
-                                // Find the selected node group
-                                const selectedNodeGroup = nodeGroupsData?.find((g) => String(g.id) === field.value);
-                                // Filter nodes that belong to this group
-                                const nodesInGroup = selectedNodeGroup ? (nodes || []).filter((node) => {
-                                  const nodeGroupIds = (node as any).node_group_ids || [];
-                                  return nodeGroupIds.includes(selectedNodeGroup.id);
-                                }) : [];
-
-                                return (
-                                  <FormItem>
-                                    <FormLabel>{t("form.defaultNodeGroup", "Default Node Group")}</FormLabel>
-                                    <Card className="p-4">
-                                      <FormControl>
-                                        <Combobox
-                                          placeholder={t("form.selectDefaultNodeGroup", "Select a default node group...")}
-                                          value={field.value}
-                                          onChange={(value) => {
-                                            form.setValue(field.name, value || "");
-                                          }}
-                                          options={[
-                                            { label: t("form.noDefaultNodeGroup", "No Default Node Group"), value: "" },
-                                            ...(nodeGroupsData?.map((g) => ({
-                                              label: g.name,
-                                              value: String(g.id),
-                                            })) || []),
-                                          ]}
-                                        />
-                                      </FormControl>
-                                      <FormDescription className="mt-2">
-                                        {t(
-                                          "form.defaultNodeGroupDescription",
-                                          "The default node group for this product."
-                                        )}
-                                      </FormDescription>
-                                      {/* Show nodes in the selected default node group */}
-                                      {nodesInGroup.length > 0 && (
-                                        <>
-                                          <div className="text-xs text-muted-foreground mb-2 mt-3">
-                                            {t("form.nodesInGroup", "Nodes in this group:")}
-                                          </div>
-                                          <div className="grid grid-cols-1 gap-2">
-                                            {nodesInGroup.map((node) => (
-                                              <div
-                                                key={node.id}
-                                                className="flex items-center justify-between rounded border p-2 text-sm bg-muted/30"
-                                              >
-                                                <span className="flex-1 font-medium">
-                                                  {node.name}
-                                                </span>
-                                                <span className="flex-1 text-muted-foreground">
-                                                  {node.address}:{node.port}
-                                                </span>
-                                                <span className="flex-1 text-right text-muted-foreground">
-                                                  {node.protocol}
-                                                </span>
-                                              </div>
-                                            ))}
-                                          </div>
-                                        </>
-                                      )}
-                                    </Card>
-                                    <FormMessage />
-                                  </FormItem>
-                                );
-                              }}
-                            />
-
-                            {/* Backup Node Groups Selection - filter out default node group */}
-                            <FormField
-                              control={form.control}
-                              name="node_group_ids"
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormLabel>{t("form.backupNodeGroups", "Backup Node Groups")}</FormLabel>
-                                  <FormControl>
-                                    <div className="space-y-4">
-                                      {nodeGroupsData
-                                        ?.filter((g) => String(g.id) !== node_group_id)
-                                        ?.map((g) => {
-                                          // Filter nodes that belong to this group
-                                          const nodesInGroup = (nodes || []).filter((node) => {
-                                            const nodeGroupIds = (node as any).node_group_ids || [];
-                                            return nodeGroupIds.includes(g.id);
-                                          });
-
-                                          return (
-                                            <div key={g.id} className="border rounded-lg p-4">
-                                              <div className="flex items-center space-x-2 mb-3">
-                                                <Checkbox
-                                                  id={`subscribe-backup-node-group-${g.id}`}
-                                                  checked={field.value?.includes(String(g.id))}
-                                                  onCheckedChange={(checked) => {
-                                                    const currentValue = field.value || [];
-                                                    if (checked) {
-                                                      form.setValue(field.name, [...currentValue, String(g.id)]);
-                                                    } else {
-                                                      form.setValue(
-                                                        field.name,
-                                                        currentValue.filter((v: string) => v !== String(g.id))
-                                                      );
-                                                    }
-                                                  }}
-                                                />
-                                                <Label
-                                                  htmlFor={`subscribe-backup-node-group-${g.id}`}
-                                                  className="cursor-pointer font-medium"
-                                                >
-                                                  {g.name}
-                                                  <span className="ml-2 text-muted-foreground text-sm">
-                                                    ({nodesInGroup.length} {t("form.nodes", "nodes")})
-                                                  </span>
-                                                </Label>
-                                              </div>
-
-                                              {/* Show nodes in this group */}
-                                              {nodesInGroup.length > 0 && (
-                                                <div className="ml-6 mt-3">
-                                                  <div className="text-xs text-muted-foreground mb-2">
-                                                    {t("form.nodesInGroup", "Nodes in this group:")}
-                                                  </div>
-                                                  <div className="grid grid-cols-1 gap-2">
-                                                    {nodesInGroup.map((node) => (
-                                                      <div
-                                                        key={node.id}
-                                                        className="flex items-center justify-between rounded border p-2 text-sm bg-muted/30"
-                                                      >
-                                                        <span className="flex-1 font-medium">
-                                                          {node.name}
-                                                        </span>
-                                                        <span className="flex-1 text-muted-foreground">
-                                                          {node.address}:{node.port}
-                                                        </span>
-                                                        <span className="flex-1 text-right text-muted-foreground">
-                                                          {node.protocol}
-                                                        </span>
-                                                      </div>
-                                                    ))}
-                                                  </div>
-                                                </div>
-                                              )}
-                                            </div>
-                                          );
-                                        })}
-                                    </div>
-                                  </FormControl>
-                                  <FormDescription>
-                                    {t(
-                                      "form.backupNodeGroupsDescription",
-                                      "Select additional backup node groups."
-                                    )}
-                                  </FormDescription>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-                          </>
                         )}
                       </>
                     )}
@@ -1425,68 +1548,111 @@ export default function SubscribeForm<T extends Record<string, any>>({
                       name="traffic_limit"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>{t("form.trafficLimitRules", "Traffic Limit Rules")}</FormLabel>
+                          <FormLabel>
+                            {t("form.trafficLimitRules", "Traffic Limit Rules")}
+                          </FormLabel>
                           <FormControl>
                             <ArrayInput
-                              value={field.value && field.value.length > 0 ? field.value : [{ stat_type: "day" }]}
-                              onChange={field.onChange}
                               fields={[
                                 {
                                   name: "stat_type",
                                   type: "select",
-                                  placeholder: t("form.statType", "Statistics Type"),
+                                  placeholder: t(
+                                    "form.statType",
+                                    "Statistics Type"
+                                  ),
                                   value: "day",
                                   options: [
-                                    { label: t("form.statTypeHour", "Hour"), value: "hour" },
+                                    {
-                                    { label: t("form.statTypeDay", "Day"), value: "day" },
+                                      label: t("form.statTypeHour", "Hour"),
+                                      value: "hour",
+                                    },
+                                    {
+                                      label: t("form.statTypeDay", "Day"),
+                                      value: "day",
+                                    },
                                   ],
                                 },
                                 {
                                   name: "stat_value",
                                   type: "number",
-                                  placeholder: t("form.statValue", "Time Value"),
+                                  placeholder: t(
+                                    "form.statValue",
+                                    "Time Value"
+                                  ),
                                   min: 1,
-                                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+                                  onKeyDown: (
-                                    if (e.key === '.' || e.key === ',') {
+                                    e: React.KeyboardEvent<HTMLInputElement>
+                                  ) => {
+                                    if (e.key === "." || e.key === ",") {
                                       e.preventDefault();
                                     }
                                   },
                                   formatOutput: (value: string | number) => {
                                     const num = Number(value);
-                                    return isNaN(num) ? 0 : Math.floor(num);
+                                    return String(
+                                      Number.isNaN(num) ? 0 : Math.floor(num)
+                                    );
                                   },
                                 },
                                 {
                                   name: "traffic_usage",
                                   type: "number",
-                                  placeholder: t("form.trafficUsage", "Traffic Usage (GB)"),
+                                  placeholder: t(
+                                    "form.trafficUsage",
+                                    "Traffic Usage (GB)"
+                                  ),
                                   min: 0,
-                                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+                                  onKeyDown: (
-                                    if (e.key === '.' || e.key === ',') {
+                                    e: React.KeyboardEvent<HTMLInputElement>
+                                  ) => {
+                                    if (e.key === "." || e.key === ",") {
                                       e.preventDefault();
                                     }
                                   },
                                   formatOutput: (value: string | number) => {
                                     const num = Number(value);
-                                    return isNaN(num) ? 0 : Math.floor(num);
+                                    return String(
+                                      Number.isNaN(num) ? 0 : Math.floor(num)
+                                    );
                                   },
                                 },
                                 {
                                   name: "speed_limit",
                                   type: "number",
-                                  placeholder: t("form.speedLimitKb", "Speed Limit (kb)"),
+                                  placeholder: t(
+                                    "form.speedLimitKb",
+                                    "Speed Limit (kb)"
+                                  ),
                                   min: 0,
-                                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+                                  onKeyDown: (
-                                    if (e.key === '.' || e.key === ',') {
+                                    e: React.KeyboardEvent<HTMLInputElement>
+                                  ) => {
+                                    if (e.key === "." || e.key === ",") {
                                       e.preventDefault();
                                     }
                                   },
                                   formatOutput: (value: string | number) => {
                                     const num = Number(value);
-                                    return isNaN(num) ? 0 : Math.floor(num);
+                                    return String(
+                                      Number.isNaN(num) ? 0 : Math.floor(num)
+                                    );
                                   },
                                 },
                               ]}
+                              onChange={field.onChange}
+                              value={
+                                field.value && field.value.length > 0
+                                  ? field.value
+                                  : [
+                                      {
+                                        stat_type: "day",
+                                        stat_value: 1,
+                                        traffic_usage: 0,
+                                        speed_limit: 0,
+                                      },
+                                    ]
+                              }
                             />
                           </FormControl>
                           <FormDescription>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import { Switch } from "@workspace/ui/components/switch";
@@ -8,6 +9,7 @@ import {
   ProTable,
   type ProTableActions,
 } from "@workspace/ui/composed/pro-table/pro-table";
+import { getNodeGroupList } from "@workspace/ui/services/admin/group";
 import {
   batchDeleteSubscribe,
   createSubscribe,
@@ -16,8 +18,6 @@ import {
   subscribeSort,
   updateSubscribe,
 } from "@workspace/ui/services/admin/subscribe";
-import { getNodeGroupList } from "@workspace/ui/services/admin/group";
-import { useQuery } from "@tanstack/react-query";
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -46,15 +46,20 @@ export default function SubscribeTable() {
   const { data: groupConfigData } = useQuery({
     queryKey: ["groupConfig"],
     queryFn: async () => {
-      const { data } = await (await import("@workspace/ui/services/admin/group")).getGroupConfig();
+      const { data } = await (
+        await import("@workspace/ui/services/admin/group")
+      ).getGroupConfig();
       return data.data;
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled || false;
+  const isGroupEnabled = groupConfigData?.enabled;
 
   return (
-    <ProTable<API.SubscribeItem, { group_id: number; query: string; node_group_id?: number }>
+    <ProTable<
+      API.SubscribeItem,
+      { group_id: number; query: string; node_group_id?: number }
+    >
       action={ref}
       actions={{
         render: (row) => [
@@ -72,7 +77,9 @@ export default function SubscribeTable() {
                 // Add node_group_ids if it exists in values
                 const vals = values as any;
                 if (vals.node_group_ids) {
-                  updateBody.node_group_ids = vals.node_group_ids.map((id: string | number) => Number(id));
+                  updateBody.node_group_ids = vals.node_group_ids.map(
+                    (id: string | number) => Number(id)
+                  );
                 }
                 await updateSubscribe(updateBody as API.UpdateSubscribeRequest);
                 toast.success(t("updateSuccess"));
@@ -241,10 +248,12 @@ export default function SubscribeTable() {
           header: t("inventory"),
           cell: ({ row }) => {
             const inventory = row.getValue("inventory") as number;
-            return inventory === -1 ? (
+            return (
-              <Display type="number" unlimited value={0} />
+              <Display
-            ) : (
+                type="number"
-              <Display type="number" unlimited value={inventory} />
+                unlimited={inventory === -1}
+                value={inventory === -1 ? 0 : inventory}
+              />
             );
           },
         },
@@ -281,7 +290,9 @@ export default function SubscribeTable() {
                 header: t("defaultNodeGroup", "Default Node Group"),
                 cell: ({ row }: { row: any }) => {
                   const nodeGroupId = row.original.node_group_id;
-                  const nodeGroup = nodeGroupsData?.find((g) => g.id === nodeGroupId);
+                  const nodeGroup = nodeGroupsData?.find(
+                    (g) => g.id === nodeGroupId
+                  );
 
                   return (
                     <div>
@@ -310,7 +321,9 @@ export default function SubscribeTable() {
                 // Add node_group_ids if it exists in values
                 const vals = values as any;
                 if (vals.node_group_ids) {
-                  createBody.node_group_ids = vals.node_group_ids.map((id: string | number) => Number(id));
+                  createBody.node_group_ids = vals.node_group_ids.map(
+                    (id: string | number) => Number(id)
+                  );
                 }
                 await createSubscribe(createBody);
                 toast.success(t("createSuccess"));
@@ -389,7 +402,9 @@ export default function SubscribeTable() {
         const params = {
           ...pagination,
           ...filters,
-          node_group_id: filters?.node_group_id ? Number(filters.node_group_id) : undefined,
+          node_group_id: filters?.node_group_id
+            ? Number(filters.node_group_id)
+            : undefined,
         } as any;
 
         const { data } = await getSubscribeList(params);

apps/admin/src/sections/system/user-security/verify-form.tsx

@@ -158,7 +158,16 @@ export default function VerifyConfig() {
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="local">
-                            {t("verify.captchaTypeLocal", "Local Image Captcha")}
+                            {t(
+                              "verify.captchaTypeLocal",
+                              "Local Image Captcha"
+                            )}
+                          </SelectItem>
+                          <SelectItem value="slider">
+                            {t(
+                              "verify.captchaTypeSlider",
+                              "Local Slider Captcha"
+                            )}
                           </SelectItem>
                           <SelectItem value="turnstile">
                             {t(

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

@@ -44,6 +44,10 @@ import {
   ProTable,
   type ProTableActions,
 } from "@workspace/ui/composed/pro-table/pro-table";
+import {
+  // getUserGroupList,
+  previewUserNodes,
+} from "@workspace/ui/services/admin/group";
 import {
   createUser,
   deleteUser,
@@ -51,10 +55,6 @@ import {
   getUserList,
   updateUserBasicInfo,
 } from "@workspace/ui/services/admin/user";
-import {
-  // getUserGroupList,
-  previewUserNodes,
-} from "@workspace/ui/services/admin/group";
 import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -639,16 +639,19 @@ function PreviewNodesDialog({ userId }: { userId: number }) {
         ) : previewData ? (
           <div className="space-y-4">
             <div>
-              <span className="text-sm font-medium text-muted-foreground">
+              <span className="font-medium text-muted-foreground text-sm">
                 {t("availableNodes", "Available Nodes")}:
               </span>{" "}
-              {previewData.node_groups?.reduce((sum, group) => sum + (group.nodes?.length || 0), 0) || 0}
+              {previewData.node_groups?.reduce(
+                (sum, group) => sum + (group.nodes?.length || 0),
+                0
+              ) || 0}
             </div>
             {previewData.node_groups && previewData.node_groups.length > 0 ? (
-              <div className="max-h-[400px] overflow-y-auto space-y-4">
+              <div className="max-h-[400px] space-y-4 overflow-y-auto">
                 {previewData.node_groups.map((group) => (
                   <div key={group.id}>
-                    <h4 className="text-sm font-semibold mb-2">
+                    <h4 className="mb-2 font-semibold text-sm">
                       {group.name ||
                         (group.id === -1
                           ? t("subscriptionNodes", "Subscription Nodes")
@@ -661,16 +664,22 @@ function PreviewNodesDialog({ userId }: { userId: number }) {
                         <thead>
                           <tr className="border-b">
                             <th className="p-2 text-left font-medium">ID</th>
-                            <th className="p-2 text-left font-medium">{t("name", "Name")}</th>
+                            <th className="p-2 text-left font-medium">
-                            <th className="p-2 text-left font-medium">{t("address", "Address")}</th>
+                              {t("name", "Name")}
+                            </th>
+                            <th className="p-2 text-left font-medium">
+                              {t("address", "Address")}
+                            </th>
                           </tr>
                         </thead>
                         <tbody>
                           {group.nodes.map((node) => (
-                            <tr key={node.id} className="border-b">
+                            <tr className="border-b" key={node.id}>
                               <td className="p-2">{node.id}</td>
                               <td className="p-2">{node.name}</td>
-                              <td className="p-2">{node.address}:{node.port}</td>
+                              <td className="p-2">
+                                {node.address}:{node.port}
+                              </td>
                             </tr>
                           ))}
                         </tbody>

apps/admin/src/sections/user/user-detail.tsx

@@ -103,7 +103,9 @@ export function UserSubscribeDetail({
               </span>
             </li>
             <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">{t("remainingTraffic")}</span>
+              <span className="text-muted-foreground">
+                {t("remainingTraffic")}
+              </span>
               <span>
                 {data
                   ? totalTraffic === 0

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

@@ -280,7 +280,8 @@ export default function UserSubscription({ userId }: { userId: number }) {
               const upload = row.original.upload || 0;
               const download = row.original.download || 0;
               const totalTraffic = row.original.traffic || 0;
-              const remainingTraffic = totalTraffic > 0 ? totalTraffic - upload - download : 0;
+              const remainingTraffic =
+                totalTraffic > 0 ? totalTraffic - upload - download : 0;
               return (
                 <Display type="traffic" unlimited value={remainingTraffic} />
               );

apps/admin/src/utils/common.ts

@@ -29,12 +29,9 @@ export function formatDate(date?: Date | number, showTime = true) {
   // Unix timestamps (seconds): 10 digits e.g. 1771936457
   // JavaScript timestamps (milliseconds): 13 digits
   let dateValue = date;
-  if (typeof date === "number") {
+  if (typeof date === "number" && date < 10_000_000_000) {
-    if (date < 10000000000) {
     dateValue = date * 1000;
   }
-  }
-
 
   const timeZone = localStorage.getItem("timezone") || "UTC";
   return intlFormat(dateValue, {

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

@@ -6,7 +6,21 @@
     "noImage": "No Image",
     "placeholder": "Enter captcha code...",
     "refresh": "Refresh captcha",
-    "required": "Please enter captcha code"
+    "required": "Please enter captcha code",
+    "sliderRequired": "Please complete the slider verification",
+    "slider": {
+      "clickToVerify": "Click to verify",
+      "fail": "Try again",
+      "hint": "Drag the piece to fit the puzzle",
+      "success": "Verified",
+      "title": "Security Verification"
+    },
+    "turnstile": {
+      "cancel": "Cancel",
+      "clickToVerify": "Click to verify",
+      "success": "Verified",
+      "title": "Security Verification"
+    }
   },
   "get": "Get Code",
   "login": {

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

@@ -6,7 +6,21 @@
     "noImage": "无图片",
     "placeholder": "请输入验证码...",
     "refresh": "刷新验证码",
-    "required": "请输入验证码"
+    "required": "请输入验证码",
+    "sliderRequired": "请完成滑块验证",
+    "slider": {
+      "clickToVerify": "点击进行验证",
+      "fail": "请重试",
+      "hint": "拖动拼图块到对应位置",
+      "success": "验证成功",
+      "title": "安全验证"
+    },
+    "turnstile": {
+      "cancel": "取消",
+      "clickToVerify": "点击进行验证",
+      "success": "验证成功",
+      "title": "安全验证"
+    }
   },
   "get": "获取验证码",
   "login": {

apps/user/src/sections/auth/email/login-form.tsx

@@ -15,9 +15,10 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
-import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function LoginForm({
   loading,
@@ -39,6 +40,7 @@ export default function LoginForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_user_login_captcha;
 
   const formSchema = z.object({
@@ -52,14 +54,26 @@ export default function LoginForm({
       captchaEnabled && isLocal
         ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
         : z.string().optional(),
+    slider_token:
+      captchaEnabled && isSlider
+        ? z
+            .string()
+            .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+        : z.string().optional(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
+    defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
+      ...initialValues,
+    },
   });
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -70,6 +84,7 @@ export default function LoginForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -84,7 +99,10 @@ export default function LoginForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t("login.emailPlaceholder", "Enter your email...")}
+                    placeholder={t(
+                      "login.emailPlaceholder",
+                      "Enter your email..."
+                    )}
                     type="email"
                     {...field}
                   />
@@ -100,7 +118,10 @@ export default function LoginForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t("login.passwordPlaceholder", "Enter your password...")}
+                    placeholder={t(
+                      "login.passwordPlaceholder",
+                      "Enter your password..."
+                    )}
                     type="password"
                     {...field}
                   />
@@ -136,8 +157,8 @@ export default function LoginForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      ref={localCaptcha}
                       onCaptchaIdChange={setCaptchaId}
+                      ref={localCaptcha}
                     />
                   </FormControl>
                   <FormMessage />
@@ -145,6 +166,20 @@ export default function LoginForm({
               )}
             />
           )}
+          {captchaEnabled && isSlider && (
+            <FormField
+              control={form.control}
+              name="slider_token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <SliderCaptcha {...field} ref={sliderCaptcha} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
           <Button disabled={loading} type="submit">
             {loading && <Icon className="animate-spin" icon="mdi:loading" />}
             {t("login.title", "Login")}

apps/user/src/sections/auth/email/register-form.tsx

@@ -16,10 +16,11 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 import SendCode from "../send-code";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
-import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function RegisterForm({
   loading,
@@ -41,6 +42,7 @@ export default function RegisterForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_user_register_captcha;
 
   const handleCheckUser = async (email: string) => {
@@ -78,8 +80,16 @@ export default function RegisterForm({
           : z.string().nullish(),
       captcha_code:
         captchaEnabled && isLocal
-          ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
+          ? z
+              .string()
+              .min(1, t("captcha.required", "Please enter captcha code"))
           : z.string().nullish(),
+      slider_token:
+        captchaEnabled && isSlider
+          ? z
+              .string()
+              .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+          : z.string().optional(),
     })
     .superRefine(({ password, repeat_password }, ctx) => {
       if (password !== repeat_password) {
@@ -94,6 +104,9 @@ export default function RegisterForm({
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
       ...initialValues,
       invite: localStorage.getItem("invite") || "",
     },
@@ -101,6 +114,7 @@ export default function RegisterForm({
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -111,6 +125,7 @@ export default function RegisterForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -130,7 +145,10 @@ export default function RegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      placeholder={t("register.emailPlaceholder", "Enter your email...")}
+                      placeholder={t(
+                        "register.emailPlaceholder",
+                        "Enter your email..."
+                      )}
                       type="email"
                       {...field}
                     />
@@ -146,7 +164,10 @@ export default function RegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      placeholder={t("register.passwordPlaceholder", "Enter your password...")}
+                      placeholder={t(
+                        "register.passwordPlaceholder",
+                        "Enter your password..."
+                      )}
                       type="password"
                       {...field}
                     />
@@ -163,7 +184,10 @@ export default function RegisterForm({
                   <FormControl>
                     <Input
                       disabled={loading}
-                      placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
+                      placeholder={t(
+                        "register.repeatPasswordPlaceholder",
+                        "Enter password again..."
+                      )}
                       type="password"
                       {...field}
                     />
@@ -182,7 +206,10 @@ export default function RegisterForm({
                       <div className="flex items-center gap-2">
                         <Input
                           disabled={loading}
-                          placeholder={t("register.codePlaceholder", "Enter code...")}
+                          placeholder={t(
+                            "register.codePlaceholder",
+                            "Enter code..."
+                          )}
                           type="text"
                           {...field}
                           value={field.value as string}
@@ -248,8 +275,8 @@ export default function RegisterForm({
                     <FormControl>
                       <LocalCaptcha
                         {...field}
-                        ref={localCaptcha}
                         onCaptchaIdChange={setCaptchaId}
+                        ref={localCaptcha}
                       />
                     </FormControl>
                     <FormMessage />
@@ -257,6 +284,20 @@ export default function RegisterForm({
                 )}
               />
             )}
+            {captchaEnabled && isSlider && (
+              <FormField
+                control={form.control}
+                name="slider_token"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <SliderCaptcha {...field} ref={sliderCaptcha} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
             <Button disabled={loading} type="submit">
               {loading && <Icon className="animate-spin" icon="mdi:loading" />}
               {t("register.title", "Register")}

apps/user/src/sections/auth/email/reset-form.tsx

@@ -15,10 +15,11 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 import SendCode from "../send-code";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
-import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function ResetForm({
   loading,
@@ -41,6 +42,7 @@ export default function ResetForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_user_reset_password_captcha;
 
   const formSchema = z.object({
@@ -57,14 +59,26 @@ export default function ResetForm({
       captchaEnabled && isLocal
         ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
         : z.string().nullish(),
+    slider_token:
+      captchaEnabled && isSlider
+        ? z
+            .string()
+            .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+        : z.string().optional(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
+    defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
+      ...initialValues,
+    },
   });
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -75,6 +89,7 @@ export default function ResetForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -89,7 +104,10 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t("reset.emailPlaceholder", "Enter your email...")}
+                    placeholder={t(
+                      "reset.emailPlaceholder",
+                      "Enter your email..."
+                    )}
                     type="email"
                     {...field}
                   />
@@ -132,7 +150,10 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t("reset.passwordPlaceholder", "Enter your new password...")}
+                    placeholder={t(
+                      "reset.passwordPlaceholder",
+                      "Enter your new password..."
+                    )}
                     type="password"
                     {...field}
                   />
@@ -168,8 +189,8 @@ export default function ResetForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      ref={localCaptcha}
                       onCaptchaIdChange={setCaptchaId}
+                      ref={localCaptcha}
                     />
                   </FormControl>
                   <FormMessage />
@@ -177,6 +198,20 @@ export default function ResetForm({
               )}
             />
           )}
+          {captchaEnabled && isSlider && (
+            <FormField
+              control={form.control}
+              name="slider_token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <SliderCaptcha {...field} ref={sliderCaptcha} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
           <Button disabled={loading} type="submit">
             {loading && <Icon className="animate-spin" icon="mdi:loading" />}
             {t("reset.title", "Reset Password")}

apps/user/src/sections/auth/local-captcha.tsx

@@ -2,7 +2,7 @@ import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
 import { Icon } from "@workspace/ui/composed/icon";
 import { generateCaptcha } from "@workspace/ui/services/common/auth";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface LocalCaptchaRef {
@@ -15,8 +15,12 @@ interface LocalCaptchaProps {
   onCaptchaIdChange?: (id: string) => void;
 }
 
-const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
+const LocalCaptcha = ({
-  ({ value, onChange, onCaptchaIdChange }, ref) => {
+  value,
+  onChange,
+  onCaptchaIdChange,
+  ref,
+}: LocalCaptchaProps & { ref?: RefObject<LocalCaptchaRef | null> }) => {
   const { t } = useTranslation("auth");
   const [captchaImage, setCaptchaImage] = useState("");
   const [loading, setLoading] = useState(false);
@@ -51,10 +55,10 @@ const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
   return (
     <div className="flex gap-2">
       <Input
+        className="flex-1"
+        onChange={(e) => onChange?.(e.target.value)}
         placeholder={t("captcha.placeholder", "Enter captcha code...")}
         value={value || ""}
-          onChange={(e) => onChange?.(e.target.value)}
-          className="flex-1"
       />
       <div className="relative h-10 w-32 flex-shrink-0">
         {loading ? (
@@ -63,32 +67,33 @@ const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
           </div>
         ) : captchaImage ? (
           <img
-              src={captchaImage}
             alt="captcha"
             className="h-full w-full cursor-pointer object-contain"
+            height={40}
             onClick={fetchCaptcha}
+            src={captchaImage}
             title={t("captcha.clickToRefresh", "Click to refresh")}
+            width={120}
           />
         ) : (
-            <div className="flex h-full items-center justify-center bg-muted text-xs text-muted-foreground">
+          <div className="flex h-full items-center justify-center bg-muted text-muted-foreground text-xs">
             {t("captcha.noImage", "No Image")}
           </div>
         )}
       </div>
       <Button
+        disabled={loading}
+        onClick={fetchCaptcha}
+        size="icon"
+        title={t("captcha.refresh", "Refresh captcha")}
         type="button"
         variant="outline"
-          size="icon"
-          onClick={fetchCaptcha}
-          disabled={loading}
-          title={t("captcha.refresh", "Refresh captcha")}
       >
         <Icon icon="mdi:refresh" />
       </Button>
     </div>
   );
-  }
+};
-);
 
 LocalCaptcha.displayName = "LocalCaptcha";
 

apps/user/src/sections/auth/phone/login-form.tsx

@@ -16,10 +16,11 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 import SendCode from "../send-code";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
-import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function LoginForm({
   loading,
@@ -39,6 +40,7 @@ export default function LoginForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_user_login_captcha;
 
   const formSchema = z.object({
@@ -54,16 +56,28 @@ export default function LoginForm({
       captchaEnabled && isLocal
         ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
         : z.string().optional(),
+    slider_token:
+      captchaEnabled && isSlider
+        ? z
+            .string()
+            .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+        : z.string().optional(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
+    defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
+      ...initialValues,
+    },
   });
 
   const [mode, setMode] = useState<"password" | "code">("password");
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -74,6 +88,7 @@ export default function LoginForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -104,7 +119,10 @@ export default function LoginForm({
                                   );
                                 }
                               }}
-                              placeholder={t("register.areaCodePlaceholder", "Area code...")}
+                              placeholder={t(
+                                "register.areaCodePlaceholder",
+                                "Area code..."
+                              )}
                               simple
                               value={field.value}
                             />
@@ -115,7 +133,10 @@ export default function LoginForm({
                     />
                     <Input
                       className="rounded-l-none"
-                      placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
+                      placeholder={t(
+                        "register.telephonePlaceholder",
+                        "Enter your telephone..."
+                      )}
                       type="tel"
                       {...field}
                     />
@@ -137,7 +158,10 @@ export default function LoginForm({
                       placeholder={
                         mode === "code"
                           ? t("register.codePlaceholder", "Enter code...")
-                          : t("login.passwordPlaceholder", "Enter your password...")
+                          : t(
+                              "login.passwordPlaceholder",
+                              "Enter your password..."
+                            )
                       }
                       type={mode === "code" ? "text" : "password"}
                       {...field}
@@ -202,8 +226,8 @@ export default function LoginForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      ref={localCaptcha}
                       onCaptchaIdChange={setCaptchaId}
+                      ref={localCaptcha}
                     />
                   </FormControl>
                   <FormMessage />
@@ -211,6 +235,20 @@ export default function LoginForm({
               )}
             />
           )}
+          {captchaEnabled && isSlider && (
+            <FormField
+              control={form.control}
+              name="slider_token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <SliderCaptcha {...field} ref={sliderCaptcha} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
           <Button disabled={loading} type="submit">
             {loading && <Icon className="animate-spin" icon="mdi:loading" />}
             {t("login.title", "Login")}

apps/user/src/sections/auth/phone/register-form.tsx

@@ -17,10 +17,11 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 import SendCode from "../send-code";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
-import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function RegisterForm({
   loading,
@@ -41,6 +42,7 @@ export default function RegisterForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_user_register_captcha;
 
   const formSchema = z
@@ -57,8 +59,16 @@ export default function RegisterForm({
           : z.string().nullish(),
       captcha_code:
         captchaEnabled && isLocal
-          ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
+          ? z
+              .string()
+              .min(1, t("captcha.required", "Please enter captcha code"))
           : z.string().nullish(),
+      slider_token:
+        captchaEnabled && isSlider
+          ? z
+              .string()
+              .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+          : z.string().optional(),
     })
     .superRefine(({ password, repeat_password }, ctx) => {
       if (password !== repeat_password) {
@@ -73,6 +83,9 @@ export default function RegisterForm({
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
       ...initialValues,
       telephone_area_code: initialValues?.telephone_area_code || "1",
       invite: localStorage.getItem("invite") || "",
@@ -81,6 +94,7 @@ export default function RegisterForm({
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -91,6 +105,7 @@ export default function RegisterForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -126,7 +141,10 @@ export default function RegisterForm({
                                     );
                                   }
                                 }}
-                                placeholder={t("register.areaCodePlaceholder", "Area code...")}
+                                placeholder={t(
+                                  "register.areaCodePlaceholder",
+                                  "Area code..."
+                                )}
                                 simple
                                 value={field.value}
                                 whitelist={enable_whitelist ? whitelist : []}
@@ -138,7 +156,10 @@ export default function RegisterForm({
                       />
                       <Input
                         className="rounded-l-none"
-                        placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
+                        placeholder={t(
+                          "register.telephonePlaceholder",
+                          "Enter your telephone..."
+                        )}
                         type="tel"
                         {...field}
                       />
@@ -155,7 +176,10 @@ export default function RegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      placeholder={t("register.passwordPlaceholder", "Enter your password...")}
+                      placeholder={t(
+                        "register.passwordPlaceholder",
+                        "Enter your password..."
+                      )}
                       type="password"
                       {...field}
                     />
@@ -172,7 +196,10 @@ export default function RegisterForm({
                   <FormControl>
                     <Input
                       disabled={loading}
-                      placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
+                      placeholder={t(
+                        "register.repeatPasswordPlaceholder",
+                        "Enter password again..."
+                      )}
                       type="password"
                       {...field}
                     />
@@ -190,7 +217,10 @@ export default function RegisterForm({
                     <div className="flex items-center gap-2">
                       <Input
                         disabled={loading}
-                        placeholder={t("register.codePlaceholder", "Enter code...")}
+                        placeholder={t(
+                          "register.codePlaceholder",
+                          "Enter code..."
+                        )}
                         type="text"
                         {...field}
                         value={field.value as string}
@@ -259,8 +289,8 @@ export default function RegisterForm({
                     <FormControl>
                       <LocalCaptcha
                         {...field}
-                        ref={localCaptcha}
                         onCaptchaIdChange={setCaptchaId}
+                        ref={localCaptcha}
                       />
                     </FormControl>
                     <FormMessage />
@@ -268,6 +298,20 @@ export default function RegisterForm({
                 )}
               />
             )}
+            {captchaEnabled && isSlider && (
+              <FormField
+                control={form.control}
+                name="slider_token"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <SliderCaptcha {...field} ref={sliderCaptcha} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
             <Button disabled={loading} type="submit">
               {loading && <Icon className="animate-spin" icon="mdi:loading" />}
               {t("register.title", "Register")}

apps/user/src/sections/auth/phone/reset-form.tsx

@@ -16,10 +16,11 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { useGlobalStore } from "@/stores/global";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 import SendCode from "../send-code";
+import SliderCaptcha, { type SliderCaptchaRef } from "../slider-captcha";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
-import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function ResetForm({
   loading,
@@ -41,6 +42,7 @@ export default function ResetForm({
 
   const isTurnstile = verify.captcha_type === "turnstile";
   const isLocal = verify.captcha_type === "local";
+  const isSlider = verify.captcha_type === "slider";
   const captchaEnabled = verify.enable_user_reset_password_captcha;
 
   const formSchema = z.object({
@@ -56,14 +58,26 @@ export default function ResetForm({
       captchaEnabled && isLocal
         ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
         : z.string().nullish(),
+    slider_token:
+      captchaEnabled && isSlider
+        ? z
+            .string()
+            .min(1, t("captcha.sliderRequired", "Please complete the slider"))
+        : z.string().optional(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
+    defaultValues: {
+      cf_token: "",
+      captcha_code: "",
+      slider_token: "",
+      ...initialValues,
+    },
   });
 
   const turnstile = useRef<TurnstileRef>(null);
   const localCaptcha = useRef<LocalCaptchaRef>(null);
+  const sliderCaptcha = useRef<SliderCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
       // Add captcha_id for local captcha
@@ -74,6 +88,7 @@ export default function ResetForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
+      sliderCaptcha.current?.reset();
     }
   });
 
@@ -104,7 +119,10 @@ export default function ResetForm({
                                   );
                                 }
                               }}
-                              placeholder={t("register.areaCodePlaceholder", "Area code...")}
+                              placeholder={t(
+                                "register.areaCodePlaceholder",
+                                "Area code..."
+                              )}
                               simple
                               value={field.value}
                             />
@@ -115,7 +133,10 @@ export default function ResetForm({
                     />
                     <Input
                       className="rounded-l-none"
-                      placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
+                      placeholder={t(
+                        "register.telephonePlaceholder",
+                        "Enter your telephone..."
+                      )}
                       type="tel"
                       {...field}
                     />
@@ -133,7 +154,10 @@ export default function ResetForm({
                 <FormControl>
                   <div className="flex items-center gap-2">
                     <Input
-                      placeholder={t("register.codePlaceholder", "Enter code...")}
+                      placeholder={t(
+                        "register.codePlaceholder",
+                        "Enter code..."
+                      )}
                       type="text"
                       {...field}
                       value={field.value as string}
@@ -159,7 +183,10 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t("reset.passwordPlaceholder", "Enter your new password...")}
+                    placeholder={t(
+                      "reset.passwordPlaceholder",
+                      "Enter your new password..."
+                    )}
                     type="password"
                     {...field}
                   />
@@ -195,8 +222,8 @@ export default function ResetForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      ref={localCaptcha}
                       onCaptchaIdChange={setCaptchaId}
+                      ref={localCaptcha}
                     />
                   </FormControl>
                   <FormMessage />
@@ -204,6 +231,20 @@ export default function ResetForm({
               )}
             />
           )}
+          {captchaEnabled && isSlider && (
+            <FormField
+              control={form.control}
+              name="slider_token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <SliderCaptcha {...field} ref={sliderCaptcha} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
           <Button disabled={loading} type="submit">
             {loading && <Icon className="animate-spin" icon="mdi:loading" />}
             {t("reset.title", "Reset Password")}

apps/user/src/sections/auth/slider-captcha.tsx

@@ -0,0 +1,355 @@
+import { Button } from "@workspace/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog";
+import { Icon } from "@workspace/ui/composed/icon";
+import {
+  generateCaptcha,
+  verifyCaptchaSlider,
+} from "@workspace/ui/services/common/auth";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export interface SliderCaptchaRef {
+  reset: () => void;
+}
+
+interface SliderCaptchaProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+interface TrailPoint {
+  x: number;
+  y: number;
+  t: number;
+}
+
+const BLOCK_SIZE = 100;
+const BG_NATURAL_WIDTH = 560;
+const BG_NATURAL_HEIGHT = 280;
+
+const SliderCaptcha = ({
+  onChange,
+  ref,
+}: SliderCaptchaProps & { ref?: RefObject<SliderCaptchaRef | null> }) => {
+  const { t } = useTranslation("auth");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [captchaId, setCaptchaId] = useState("");
+  const [bgImage, setBgImage] = useState("");
+  const [blockImage, setBlockImage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [verified, setVerified] = useState(false);
+  const [status, setStatus] = useState<"idle" | "success" | "fail">("idle");
+  const [blockPos, setBlockPos] = useState({ x: 0, y: 50 });
+  const [shaking, setShaking] = useState(false);
+
+  const dragging = useRef(false);
+  const startPointer = useRef({ x: 0, y: 0 });
+  const startBlock = useRef({ x: 0, y: 50 });
+  const dragStartTime = useRef(0);
+  const trail = useRef<TrailPoint[]>([]);
+
+  const getContainerSize = () => {
+    const el = containerRef.current;
+    if (!el) return { w: BG_NATURAL_WIDTH, h: BG_NATURAL_HEIGHT };
+    return { w: el.clientWidth, h: el.clientHeight };
+  };
+
+  const fetchCaptcha = useCallback(async () => {
+    setLoading(true);
+    setStatus("idle");
+    setBlockPos({ x: 0, y: 50 });
+    trail.current = [];
+    try {
+      const res = await generateCaptcha();
+      const data = res.data?.data;
+      if (data) {
+        setCaptchaId(data.id);
+        setBgImage(data.image);
+        setBlockImage(data.block_image ?? "");
+      }
+    } catch (e) {
+      console.error("Failed to generate slider captcha:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleOpen = () => {
+    if (verified) return;
+    setOpen(true);
+    fetchCaptcha();
+  };
+
+  useImperativeHandle(ref, () => ({
+    reset: () => {
+      setVerified(false);
+      onChange?.("");
+      setOpen(false);
+      trail.current = [];
+    },
+  }));
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (status === "success" || loading) return;
+    dragging.current = true;
+    dragStartTime.current = Date.now();
+    trail.current = [];
+    startPointer.current = { x: e.clientX, y: e.clientY };
+    startBlock.current = { ...blockPos };
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    e.preventDefault();
+
+    trail.current.push({
+      x: Math.round(startBlock.current.x),
+      y: Math.round(startBlock.current.y),
+      t: 0,
+    });
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging.current) return;
+    const { w, h } = getContainerSize();
+    const scaleX = BG_NATURAL_WIDTH / w;
+    const scaleY = BG_NATURAL_HEIGHT / h;
+    const dx = (e.clientX - startPointer.current.x) * scaleX;
+    const dy = (e.clientY - startPointer.current.y) * scaleY;
+    const newX = Math.max(
+      0,
+      Math.min(startBlock.current.x + dx, BG_NATURAL_WIDTH - BLOCK_SIZE)
+    );
+    const newY = Math.max(
+      0,
+      Math.min(startBlock.current.y + dy, BG_NATURAL_HEIGHT - BLOCK_SIZE)
+    );
+    setBlockPos({ x: newX, y: newY });
+
+    trail.current.push({
+      x: Math.round(newX),
+      y: Math.round(newY),
+      t: Date.now() - dragStartTime.current,
+    });
+  };
+
+  const onPointerUp = async (e: React.PointerEvent) => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    const { w, h } = getContainerSize();
+    const scaleX = BG_NATURAL_WIDTH / w;
+    const scaleY = BG_NATURAL_HEIGHT / h;
+    const dx = (e.clientX - startPointer.current.x) * scaleX;
+    const dy = (e.clientY - startPointer.current.y) * scaleY;
+    const finalX = Math.round(
+      Math.max(
+        0,
+        Math.min(startBlock.current.x + dx, BG_NATURAL_WIDTH - BLOCK_SIZE)
+      )
+    );
+    const finalY = Math.round(
+      Math.max(
+        0,
+        Math.min(startBlock.current.y + dy, BG_NATURAL_HEIGHT - BLOCK_SIZE)
+      )
+    );
+    setBlockPos({ x: finalX, y: finalY });
+
+    trail.current.push({
+      x: finalX,
+      y: finalY,
+      t: Date.now() - dragStartTime.current,
+    });
+
+    try {
+      const res = await verifyCaptchaSlider({
+        id: captchaId,
+        x: finalX,
+        y: finalY,
+        trail: JSON.stringify(trail.current),
+      });
+      const token = res.data?.data?.token;
+      if (token) {
+        setStatus("success");
+        setTimeout(() => {
+          setVerified(true);
+          onChange?.(token);
+          setOpen(false);
+        }, 600);
+      } else {
+        triggerFail();
+      }
+    } catch {
+      triggerFail();
+    }
+  };
+
+  const triggerFail = () => {
+    setStatus("fail");
+    setShaking(true);
+    setTimeout(() => {
+      setShaking(false);
+      fetchCaptcha();
+    }, 800);
+  };
+
+  const blockLeftPct = (blockPos.x / BG_NATURAL_WIDTH) * 100;
+  const blockTopPct = (blockPos.y / BG_NATURAL_HEIGHT) * 100;
+  const blockSizeWPct = (BLOCK_SIZE / BG_NATURAL_WIDTH) * 100;
+  const blockSizeHPct = (BLOCK_SIZE / BG_NATURAL_HEIGHT) * 100;
+
+  return (
+    <>
+      {/* Trigger button */}
+      <button
+        className={`relative flex w-full items-center gap-3 rounded-md border px-4 py-3 text-sm transition-colors ${
+          verified
+            ? "border-green-400 bg-green-50 text-green-700 dark:bg-green-950/30"
+            : "border-input bg-background hover:bg-muted"
+        }`}
+        onClick={handleOpen}
+        type="button"
+      >
+        <span
+          className={`relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${
+            verified ? "bg-green-500" : "bg-primary"
+          }`}
+        >
+          {verified ? (
+            <Icon className="text-white text-xs" icon="mdi:check" />
+          ) : (
+            <>
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
+              <span className="relative inline-flex h-3 w-3 rounded-full bg-primary" />
+            </>
+          )}
+        </span>
+        <span className={verified ? "font-medium" : "text-muted-foreground"}>
+          {verified
+            ? t("captcha.slider.success", "Verified")
+            : t("captcha.slider.clickToVerify", "Click to verify")}
+        </span>
+        {verified && (
+          <Icon className="ml-auto text-green-500" icon="mdi:check-circle" />
+        )}
+      </button>
+
+      {/* Slider dialog */}
+      <Dialog
+        onOpenChange={(o) => {
+          if (!o) setOpen(false);
+        }}
+        open={open}
+      >
+        <DialogContent className="select-none p-6 sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {t("captcha.slider.title", "Security Verification")}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div
+            className={`relative w-full overflow-hidden rounded-md bg-muted ${
+              shaking ? "animate-[shake_0.4s_ease-in-out]" : ""
+            }`}
+            ref={containerRef}
+            style={{
+              paddingTop: `${(BG_NATURAL_HEIGHT / BG_NATURAL_WIDTH) * 100}%`,
+            }}
+          >
+            <div className="absolute inset-0">
+              {loading ? (
+                <div className="flex h-full items-center justify-center">
+                  <Icon className="animate-spin text-2xl" icon="mdi:loading" />
+                </div>
+              ) : bgImage ? (
+                <>
+                  <img
+                    alt="captcha background"
+                    className="absolute inset-0 h-full w-full"
+                    draggable={false}
+                    height={BG_NATURAL_HEIGHT}
+                    src={bgImage}
+                    width={BG_NATURAL_WIDTH}
+                  />
+                  {blockImage && (
+                    <img
+                      alt="captcha block"
+                      className="absolute cursor-grab active:cursor-grabbing"
+                      draggable={false}
+                      height={BG_NATURAL_HEIGHT}
+                      onPointerDown={onPointerDown}
+                      onPointerMove={onPointerMove}
+                      onPointerUp={onPointerUp}
+                      src={blockImage}
+                      style={{
+                        filter:
+                          status === "success"
+                            ? "drop-shadow(0 0 3px rgba(74,222,128,0.9))"
+                            : status === "fail"
+                              ? "drop-shadow(0 0 3px rgba(248,113,113,0.9))"
+                              : "drop-shadow(0 0 2px rgba(255,255,255,0.7))",
+                        left: `${blockLeftPct}%`,
+                        top: `${blockTopPct}%`,
+                        width: `${blockSizeWPct}%`,
+                        height: `${blockSizeHPct}%`,
+                        touchAction: "none",
+                      }}
+                      width={BG_NATURAL_WIDTH}
+                    />
+                  )}
+                  {status !== "idle" && (
+                    <div
+                      className={`absolute inset-0 flex items-center justify-center font-medium text-sm ${
+                        status === "success"
+                          ? "bg-green-500/20 text-green-700"
+                          : "bg-red-500/20 text-red-700"
+                      }`}
+                    >
+                      {status === "success"
+                        ? t("captcha.slider.success", "Verified")
+                        : t("captcha.slider.fail", "Try again")}
+                    </div>
+                  )}
+                </>
+              ) : null}
+            </div>
+          </div>
+
+          <p className="text-center text-muted-foreground text-xs">
+            {t("captcha.slider.hint", "Drag the piece to fit the puzzle")}
+          </p>
+
+          <Button
+            className="w-full"
+            disabled={loading}
+            onClick={fetchCaptcha}
+            size="sm"
+            type="button"
+            variant="ghost"
+          >
+            <Icon icon="mdi:refresh" />
+            {t("captcha.clickToRefresh", "Refresh")}
+          </Button>
+        </DialogContent>
+      </Dialog>
+
+      <style>{`
+          @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            20% { transform: translateX(-8px); }
+            40% { transform: translateX(8px); }
+            60% { transform: translateX(-6px); }
+            80% { transform: translateX(6px); }
+          }
+        `}</style>
+    </>
+  );
+};
+
+SliderCaptcha.displayName = "SliderCaptcha";
+
+export default SliderCaptcha;

apps/user/src/sections/auth/turnstile.tsx

@@ -1,7 +1,20 @@
 "use client";
 
+import { Button } from "@workspace/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog";
+import { Icon } from "@workspace/ui/composed/icon";
 import { useTheme } from "next-themes";
-import { type RefObject, useEffect, useImperativeHandle } from "react";
+import {
+  type RefObject,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import Turnstile, { useTurnstile } from "react-turnstile";
 import { useGlobalStore } from "@/stores/global";
@@ -24,47 +37,119 @@ const CloudFlareTurnstile = function CloudFlareTurnstile({
   const { common } = useGlobalStore();
   const { verify } = common;
   const { resolvedTheme } = useTheme();
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation("auth");
   const locale = i18n.language;
   const turnstile = useTurnstile();
+  const [open, setOpen] = useState(false);
+  const [verified, setVerified] = useState(false);
 
   useImperativeHandle(
     ref,
     () => ({
-      reset: () => turnstile.reset(),
+      reset: () => {
+        setVerified(false);
+        onChange("");
+        turnstile.reset();
+      },
     }),
-    [turnstile]
+    [turnstile, onChange]
   );
 
   useEffect(() => {
     if (value === "") {
+      setVerified(false);
       turnstile.reset();
     }
   }, [turnstile, value]);
 
+  const handleOpen = () => {
+    if (verified) return;
+    setOpen(true);
+  };
+
+  if (!verify.turnstile_site_key) return null;
+
   return (
-    verify.turnstile_site_key && (
+    <>
+      {/* Trigger button */}
+      <button
+        className={`relative flex w-full items-center gap-3 rounded-md border px-4 py-3 text-sm transition-colors ${
+          verified
+            ? "border-green-400 bg-green-50 text-green-700 dark:bg-green-950/30"
+            : "border-input bg-background hover:bg-muted"
+        }`}
+        onClick={handleOpen}
+        type="button"
+      >
+        <span
+          className={`relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${
+            verified ? "bg-green-500" : "bg-primary"
+          }`}
+        >
+          {verified ? (
+            <Icon className="text-white text-xs" icon="mdi:check" />
+          ) : (
+            <>
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
+              <span className="relative inline-flex h-3 w-3 rounded-full bg-primary" />
+            </>
+          )}
+        </span>
+        <span className={verified ? "font-medium" : "text-muted-foreground"}>
+          {verified
+            ? t("captcha.turnstile.success", "Verified")
+            : t("captcha.turnstile.clickToVerify", "Click to verify")}
+        </span>
+        {verified && (
+          <Icon className="ml-auto text-green-500" icon="mdi:check-circle" />
+        )}
+      </button>
+
+      {/* Turnstile dialog */}
+      <Dialog
+        onOpenChange={(o) => {
+          if (!o) setOpen(false);
+        }}
+        open={open}
+      >
+        <DialogContent className="flex w-auto flex-col items-center gap-4 p-6">
+          <DialogHeader>
+            <DialogTitle>
+              {t("captcha.turnstile.title", "Security Verification")}
+            </DialogTitle>
+          </DialogHeader>
           <Turnstile
             fixedSize
             id={id}
             language={locale.toLowerCase()}
             onExpire={() => {
-          onChange();
+              onChange("");
               turnstile.reset();
             }}
             onTimeout={() => {
-          onChange();
+              onChange("");
               turnstile.reset();
             }}
-        onVerify={(token) => onChange(token)}
+            onVerify={(token) => {
-        // onError={() => {
+              setVerified(true);
-        //   onChange();
+              onChange(token);
-        //   turnstile.reset();
+              setTimeout(() => setOpen(false), 400);
-        // }}
+            }}
             sitekey={verify.turnstile_site_key}
             theme={resolvedTheme as "light" | "dark"}
           />
-    )
+          <Button
+            className="w-full"
+            onClick={() => setOpen(false)}
+            size="sm"
+            type="button"
+            variant="ghost"
+          >
+            {t("captcha.turnstile.cancel", "Cancel")}
+          </Button>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };
 

apps/user/src/sections/user/traffic-statistics/index.tsx

@@ -1,20 +1,33 @@
 import { useQuery } from "@tanstack/react-query";
-import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card";
+import {
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@workspace/ui/components/select";
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select";
 import { Tabs, TabsList, TabsTrigger } from "@workspace/ui/components/tabs";
 import { Icon } from "@workspace/ui/composed/icon";
-import { queryUserSubscribe } from "@workspace/ui/services/user/user";
 import { getUserTrafficStats } from "@workspace/ui/services/user/traffic";
+import { queryUserSubscribe } from "@workspace/ui/services/user/user";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import TrafficTrendChart from "./traffic-trend-chart";
 import TrafficRatioChart from "./traffic-ratio-chart";
 import TrafficStatsCards from "./traffic-stats-cards";
+import TrafficTrendChart from "./traffic-trend-chart";
 
 export default function TrafficStatistics() {
   const { t } = useTranslation("traffic");
   const [days, setDays] = useState<7 | 30>(7);
-  const [selectedSubscribeId, setSelectedSubscribeId] = useState<string | null>(null);
+  const [selectedSubscribeId, setSelectedSubscribeId] = useState<string | null>(
+    null
+  );
 
   // 查询用户订阅列表
   const { data: userSubscribe = [] } = useQuery({
@@ -26,7 +39,8 @@ export default function TrafficStatistics() {
   });
 
   // 使用 id_str 字段，避免 JavaScript 精度丢失
-  const activeSubscribeId = selectedSubscribeId || (userSubscribe[0]?.id_str || null);
+  const activeSubscribeId =
+    selectedSubscribeId || userSubscribe[0]?.id_str || null;
 
   // 查询流量统计数据
   const { data: trafficStats, isLoading } = useQuery({
@@ -54,11 +68,13 @@ export default function TrafficStatistics() {
           {/* 订阅选择 */}
           {userSubscribe.length > 1 && (
             <Select
-              value={activeSubscribeId || undefined}
               onValueChange={(value) => setSelectedSubscribeId(value)}
+              value={activeSubscribeId || undefined}
             >
               <SelectTrigger className="w-full md:w-[200px]">
-                <SelectValue placeholder={t("selectSubscription", "Select Subscription")} />
+                <SelectValue
+                  placeholder={t("selectSubscription", "Select Subscription")}
+                />
               </SelectTrigger>
               <SelectContent>
                 {userSubscribe.map((sub) => (
@@ -70,7 +86,10 @@ export default function TrafficStatistics() {
             </Select>
           )}
           {/* 时间范围切换 */}
-          <Tabs value={String(days)} onValueChange={(value) => setDays(Number(value) as 7 | 30)}>
+          <Tabs
+            onValueChange={(value) => setDays(Number(value) as 7 | 30)}
+            value={String(days)}
+          >
             <TabsList>
               <TabsTrigger value="7">{t("days7", "7 Days")}</TabsTrigger>
               <TabsTrigger value="30">{t("days30", "30 Days")}</TabsTrigger>
@@ -87,7 +106,9 @@ export default function TrafficStatistics() {
         {/* 流量趋势图 */}
         <Card>
           <CardHeader>
-            <CardTitle className="text-base">{t("trafficTrend", "Traffic Trend")}</CardTitle>
+            <CardTitle className="text-base">
+              {t("trafficTrend", "Traffic Trend")}
+            </CardTitle>
           </CardHeader>
           <CardContent>
             {isLoading ? (
@@ -107,17 +128,21 @@ export default function TrafficStatistics() {
         {/* 流量占比图 */}
         <Card>
           <CardHeader>
-            <CardTitle className="text-base">{t("trafficRatio", "Upload/Download Ratio")}</CardTitle>
+            <CardTitle className="text-base">
+              {t("trafficRatio", "Upload/Download Ratio")}
+            </CardTitle>
           </CardHeader>
           <CardContent>
             {isLoading ? (
               <div className="flex h-[300px] items-center justify-center">
                 <Icon className="size-8 animate-spin" icon="uil:spinner" />
               </div>
-            ) : trafficStats && (trafficStats.total_upload > 0 || trafficStats.total_download > 0) ? (
+            ) : trafficStats &&
+              (trafficStats.total_upload > 0 ||
+                trafficStats.total_download > 0) ? (
               <TrafficRatioChart
-                upload={trafficStats.total_upload}
                 download={trafficStats.total_download}
+                upload={trafficStats.total_upload}
               />
             ) : (
               <div className="flex h-[300px] items-center justify-center text-muted-foreground">

apps/user/src/sections/user/traffic-statistics/traffic-ratio-chart.tsx

@@ -1,12 +1,22 @@
 import { useTranslation } from "react-i18next";
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
 
 interface TrafficRatioChartProps {
   upload: number;
   download: number;
 }
 
-export default function TrafficRatioChart({ upload, download }: TrafficRatioChartProps) {
+export default function TrafficRatioChart({
+  upload,
+  download,
+}: TrafficRatioChartProps) {
   const { t } = useTranslation("traffic");
 
   const data = [
@@ -31,20 +41,22 @@ export default function TrafficRatioChart({ upload, download }: TrafficRatioChar
   };
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
+    <ResponsiveContainer height={300} width="100%">
       <PieChart>
         <Pie
-          data={data}
           cx="50%"
           cy="50%"
-          labelLine={false}
+          data={data}
-          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(1)}%`}
-          outerRadius={80}
-          fill="#8884d8"
           dataKey="value"
+          fill="#8884d8"
+          label={({ name, percent }) =>
+            `${name}: ${(percent * 100).toFixed(1)}%`
+          }
+          labelLine={false}
+          outerRadius={80}
         >
           {data.map((_, index) => (
-            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            <Cell fill={COLORS[index % COLORS.length]} key={`cell-${index}`} />
           ))}
         </Pie>
         <Tooltip formatter={(value: number) => formatTraffic(value)} />

apps/user/src/sections/user/traffic-statistics/traffic-stats-cards.tsx

@@ -38,7 +38,9 @@ export default function TrafficStatsCards({ stats }: TrafficStatsCardsProps) {
         <Card key={card.title}>
           <CardContent className="flex items-center justify-between p-6">
             <div className="flex flex-col gap-1">
-              <span className="text-muted-foreground text-sm">{card.title}</span>
+              <span className="text-muted-foreground text-sm">
+                {card.title}
+              </span>
               <span className="font-bold text-2xl">
                 <Display type="traffic" value={card.value} />
               </span>

apps/user/src/sections/user/traffic-statistics/traffic-trend-chart.tsx

@@ -2,14 +2,14 @@ import type { GetUserTrafficStatsResponse } from "@workspace/ui/services/user/tr
 import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import {
-  LineChart,
+  CartesianGrid,
+  Legend,
   Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
 } from "recharts";
 
 interface TrafficTrendChartProps {
@@ -28,7 +28,8 @@ export default function TrafficTrendChart({ data }: TrafficTrendChartProps) {
 
   // 格式化流量显示
   const formatTraffic = (value: number | string) => {
-    const numValue = typeof value === "string" ? parseFloat(value) : value;
+    const numValue =
+      typeof value === "string" ? Number.parseFloat(value) : value;
     if (numValue >= 1024) {
       return `${(numValue / 1024).toFixed(2)} GB`;
     }
@@ -36,44 +37,52 @@ export default function TrafficTrendChart({ data }: TrafficTrendChartProps) {
   };
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
+    <ResponsiveContainer height={300} width="100%">
       <LineChart data={chartData}>
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis
           dataKey="date"
-          label={{ value: t("date", "Date"), position: "insideBottom", offset: -5 }}
+          label={{
+            value: t("date", "Date"),
+            position: "insideBottom",
+            offset: -5,
+          }}
         />
         <YAxis
-          label={{ value: t("traffic", "Traffic (MB)"), angle: -90, position: "insideLeft" }}
+          label={{
+            value: t("traffic", "Traffic (MB)"),
+            angle: -90,
+            position: "insideLeft",
+          }}
         />
         <Tooltip
           formatter={(value: number | string) => formatTraffic(value)}
           labelStyle={{ color: "#000" }}
         />
         <Legend
-          verticalAlign="bottom"
           height={36}
+          verticalAlign="bottom"
           wrapperStyle={{
             position: "absolute",
             width: "444px",
             height: "36px",
             left: "5px",
-            bottom: "-5px"
+            bottom: "-5px",
           }}
         />
         <Line
-          type="monotone"
           dataKey="upload"
-          stroke="#10b981"
           name={t("upload", "Upload")}
+          stroke="#10b981"
           strokeWidth={2}
+          type="monotone"
         />
         <Line
-          type="monotone"
           dataKey="download"
-          stroke="#3b82f6"
           name={t("download", "Download")}
+          stroke="#3b82f6"
           strokeWidth={2}
+          type="monotone"
         />
       </LineChart>
     </ResponsiveContainer>

functions/v1/[[path]].ts

@@ -7,7 +7,7 @@ export const onRequest: PagesFunction<Env> = async (context) => {
 
   const apiBase = (env.API_BASE_URL || "https://api.ppanel.dev").replace(
     /\/$/,
-    "",
+    ""
   );
 
   const url = new URL(request.url);
@@ -41,11 +41,11 @@ export const onRequest: PagesFunction<Env> = async (context) => {
   responseHeaders.set("Access-Control-Allow-Origin", url.origin);
   responseHeaders.set(
     "Access-Control-Allow-Methods",
-    "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+    "GET, POST, PUT, DELETE, PATCH, OPTIONS"
   );
   responseHeaders.set(
     "Access-Control-Allow-Headers",
-    "Content-Type, Authorization",
+    "Content-Type, Authorization"
   );
 
   if (request.method === "OPTIONS") {

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

@@ -53,11 +53,13 @@ export function DatePicker({
           )}
           variant="outline"
         >
-          <span className="truncate">{value ? intlFormat(value) : <span>{placeholder}</span>}</span>
+          <span className="truncate">
+            {value ? intlFormat(value) : <span>{placeholder}</span>}
+          </span>
           <div className="flex items-center gap-2">
             {value && (
               <span
-                className="flex items-center cursor-pointer"
+                className="flex cursor-pointer items-center"
                 onClick={handleClear}
                 onMouseDown={handleClear}
                 role="button"

packages/ui/src/composed/enhanced-input.tsx

@@ -70,6 +70,13 @@ export function EnhancedInput<T = string>({
     let inputValue = e.target.value;
 
     if (props.type === "number") {
+      if (inputValue === "0") {
+        setValue("0");
+        setInternalValue(0);
+        onValueChange?.(processValue(0));
+        return;
+      }
+
       if (
         /^-?\d*\.?\d*$/.test(inputValue) ||
         inputValue === "-" ||
@@ -105,11 +112,7 @@ export function EnhancedInput<T = string>({
   };
 
   const handleBlur = () => {
-    if (
+    if (props.type === "number" && value && (value === "-" || value === ".")) {
-      props.type === "number" &&
-      value !== "" &&
-      (value === "-" || value === ".")
-    ) {
       setValue("");
       setInternalValue("");
       onValueBlur?.("" as T);

packages/ui/src/services/admin/auth.ts

@@ -2,6 +2,42 @@
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 
+/** Admin login POST /v1/auth/admin/login */
+export async function adminLogin(
+  body: API.UserLoginRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: API.LoginResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/auth/admin/login`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
+/** Admin reset password POST /v1/auth/admin/reset */
+export async function adminResetPassword(
+  body: API.ResetPasswordRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.Response>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/auth/admin/reset`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
 /** Generate captcha POST /v1/auth/admin/captcha/generate */
 export async function adminGenerateCaptcha(options?: { [key: string]: any }) {
   return request<API.Response & { data?: API.GenerateCaptchaResponse }>(
@@ -15,3 +51,21 @@ export async function adminGenerateCaptcha(options?: { [key: string]: any }) {
     }
   );
 }
+
+/** Verify slider captcha POST /v1/auth/admin/captcha/slider/verify */
+export async function adminVerifyCaptchaSlider(
+  body: { id: string; x: number; y: number; trail: string },
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: API.SliderVerifyCaptchaResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/auth/admin/captcha/slider/verify`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}

packages/ui/src/services/admin/group.ts

@@ -180,10 +180,12 @@ export async function updateSubscribeMapping(
 }
 
 /** Get subscribe group mapping GET /v1/admin/group/subscribe/mapping */
-export async function getSubscribeGroupMapping(
+export async function getSubscribeGroupMapping(options?: {
-  options?: { [key: string]: any }
+  [key: string]: any;
-) {
+}) {
-  return request<API.Response & { data?: API.GetSubscribeGroupMappingResponse }>(
+  return request<
+    API.Response & { data?: API.GetSubscribeGroupMappingResponse }
+  >(
     `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/group/subscribe/mapping`,
     {
       method: "GET",
@@ -298,7 +300,7 @@ export async function exportGroupResult(
     {
       method: "GET",
       params: params || {},
-      responseType: 'blob',
+      responseType: "blob",
       ...(options || {}),
     }
   );

packages/ui/src/services/admin/typings.d.ts

@@ -2807,7 +2807,7 @@ declare namespace API {
     list: RedemptionRecord[];
   };
 
-  type Subscribe = {
+  type SubscribeSimple = {
     id: number;
     name: string;
     unit_price: number;
@@ -2830,7 +2830,7 @@ declare namespace API {
     id: number;
     subscribe_id: number;
     user_group_id: number;
-    subscribe?: Subscribe;
+    subscribe?: SubscribeSimple;
     user_group?: UserGroup;
     created_at: number;
     updated_at: number;

packages/ui/src/services/common/auth.ts

@@ -177,3 +177,21 @@ export async function generateCaptcha(options?: { [key: string]: any }) {
     }
   );
 }
+
+/** Verify slider captcha POST /v1/auth/captcha/slider/verify */
+export async function verifyCaptchaSlider(
+  body: { id: string; x: number; y: number; trail: string },
+  options?: { [key: string]: any }
+) {
+  return request<API.Response & { data?: API.SliderVerifyCaptchaResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/auth/captcha/slider/verify`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}

packages/ui/src/services/common/typings.d.ts

@@ -338,6 +338,17 @@ declare namespace API {
     state: string;
   };
 
+  type GenerateCaptchaResponse = {
+    type: string;
+    id: string;
+    image: string;
+    block_image?: string;
+  };
+
+  type SliderVerifyCaptchaResponse = {
+    token: string;
+  };
+
   type HeartbeatResponse = {
     status: boolean;
     message?: string;
@@ -732,6 +743,9 @@ declare namespace API {
     password: string;
     code?: string;
     cf_token?: string;
+    captcha_id?: string;
+    captcha_code?: string;
+    slider_token?: string;
   };
 
   type ResetSubscribeTrafficLog = {
@@ -931,6 +945,9 @@ declare namespace API {
     telephone_area_code: string;
     password: string;
     cf_token?: string;
+    captcha_id?: string;
+    captcha_code?: string;
+    slider_token?: string;
   };
 
   type TelephoneRegisterRequest = {
@@ -941,6 +958,9 @@ declare namespace API {
     invite?: string;
     code?: string;
     cf_token?: string;
+    captcha_id?: string;
+    captcha_code?: string;
+    slider_token?: string;
   };
 
   type TelephoneResetPasswordRequest = {
@@ -950,6 +970,9 @@ declare namespace API {
     password: string;
     code?: string;
     cf_token?: string;
+    captcha_id?: string;
+    captcha_code?: string;
+    slider_token?: string;
   };
 
   type Ticket = {
@@ -1069,6 +1092,9 @@ declare namespace API {
     email: string;
     password: string;
     cf_token?: string;
+    captcha_id?: string;
+    captcha_code?: string;
+    slider_token?: string;
   };
 
   type UserRegisterRequest = {
@@ -1078,6 +1104,9 @@ declare namespace API {
     invite?: string;
     code?: string;
     cf_token?: string;
+    captcha_id?: string;
+    captcha_code?: string;
+    slider_token?: string;
   };
 
   type UserSubscribe = {