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

@@ -4,21 +4,7 @@
     "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 Landing Node",
+  "create": "Create",
   "created": "Created",
   "delete": "Delete",
   "deleted": "Deleted",
-  "drawerCreateTitle": "Create Landing Node",
+  "drawerCreateTitle": "Create Node",
   "drawerEditTitle": "Edit Node",
   "edit": "Edit",
   "enabled": "Enabled",

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

@@ -126,10 +126,9 @@
   "userSecuritySettings": "User & Security",
   "verify": {
     "captchaType": "Captcha Type",
-    "captchaTypeDescription": "Choose between local image captcha, local slider captcha (offline) or Cloudflare Turnstile",
+    "captchaTypeDescription": "Choose between local image 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,21 +4,7 @@
     "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,3 +198,4 @@
   "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,10 +126,9 @@
   "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,6 +34,7 @@
   "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 {
-  adminLogin,
+  resetPassword,
-  adminResetPassword,
+  userLogin,
-} from "@workspace/ui/services/admin/auth";
+  userRegister,
-import { userRegister } from "@workspace/ui/services/common/auth";
+} 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 adminLogin(params);
+            const login = await userLogin(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 adminResetPassword(params);
+            await resetPassword(params);
             toast.success(t("reset.success", "Password reset successful!"));
             setType("login");
             break;

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

@@ -15,9 +15,8 @@ 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 CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function LoginForm({
   loading,
@@ -39,7 +38,6 @@ 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({
@@ -55,26 +53,14 @@ 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: {
+    defaultValues: initialValues,
-      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
@@ -85,7 +71,6 @@ export default function LoginForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -158,8 +143,8 @@ export default function LoginForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      onCaptchaIdChange={setCaptchaId}
                       ref={localCaptcha}
+                      onCaptchaIdChange={setCaptchaId}
                     />
                   </FormControl>
                   <FormMessage />
@@ -167,20 +152,6 @@ 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,10 +15,9 @@ 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 CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function ResetForm({
   loading,
@@ -41,7 +40,6 @@ 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({
@@ -58,26 +56,14 @@ 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: {
+    defaultValues: initialValues,
-      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
@@ -88,7 +74,6 @@ export default function ResetForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -188,8 +173,8 @@ export default function ResetForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      onCaptchaIdChange={setCaptchaId}
                       ref={localCaptcha}
+                      onCaptchaIdChange={setCaptchaId}
                     />
                   </FormControl>
                   <FormMessage />
@@ -197,20 +182,6 @@ 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,13 +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 {
-  type RefObject,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from "react";
 import { useTranslation } from "react-i18next";
 
 export interface LocalCaptchaRef {
@@ -21,85 +15,80 @@ interface LocalCaptchaProps {
   onCaptchaIdChange?: (id: string) => void;
 }
 
-const LocalCaptcha = ({
+const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
-  value,
+  ({ value, onChange, onCaptchaIdChange }, ref) => {
-  onChange,
+    const { t } = useTranslation("auth");
-  onCaptchaIdChange,
+    const [captchaImage, setCaptchaImage] = useState("");
-  ref,
+    const [loading, setLoading] = useState(false);
-}: LocalCaptchaProps & { ref?: RefObject<LocalCaptchaRef | null> }) => {
-  const { t } = useTranslation("auth");
-  const [captchaImage, setCaptchaImage] = useState("");
-  const [loading, setLoading] = useState(false);
 
-  const fetchCaptcha = async () => {
+    const fetchCaptcha = async () => {
-    setLoading(true);
+      setLoading(true);
-    try {
+      try {
-      const res = await adminGenerateCaptcha();
+        const res = await adminGenerateCaptcha();
-      const captchaData = res.data?.data;
+        const captchaData = res.data?.data;
-      if (captchaData) {
+        if (captchaData) {
-        setCaptchaImage(captchaData.image);
+          setCaptchaImage(captchaData.image);
-        onCaptchaIdChange?.(captchaData.id);
+          onCaptchaIdChange?.(captchaData.id);
+        }
+      } catch (error) {
+        console.error("Failed to generate captcha:", error);
+      } finally {
+        setLoading(false);
       }
-    } catch (error) {
+    };
-      console.error("Failed to generate captcha:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
 
-  useEffect(() => {
+    useEffect(() => {
-    fetchCaptcha();
-  }, []);
-
-  useImperativeHandle(ref, () => ({
-    reset: () => {
-      onChange?.("");
       fetchCaptcha();
-    },
+    }, []);
-  }));
 
-  return (
+    useImperativeHandle(ref, () => ({
-    <div className="flex gap-2">
+      reset: () => {
-      <Input
+        onChange?.("");
-        className="flex-1"
+        fetchCaptcha();
-        onChange={(e) => onChange?.(e.target.value)}
+      },
-        placeholder={t("captcha.placeholder", "Enter captcha code...")}
+    }));
-        value={value || ""}
+
-      />
+    return (
-      <div className="relative h-10 w-32 flex-shrink-0">
+      <div className="flex gap-2">
-        {loading ? (
+        <Input
-          <div className="flex h-full items-center justify-center bg-muted">
+          placeholder={t("captcha.placeholder", "Enter captcha code...")}
-            <Icon className="animate-spin" icon="mdi:loading" />
+          value={value || ""}
-          </div>
+          onChange={(e) => onChange?.(e.target.value)}
-        ) : captchaImage ? (
+          className="flex-1"
-          <img
+        />
-            alt="captcha"
+        <div className="relative h-10 w-32 flex-shrink-0">
-            className="h-full w-full cursor-pointer object-contain"
+          {loading ? (
-            height={40}
+            <div className="flex h-full items-center justify-center bg-muted">
-            onClick={fetchCaptcha}
+              <Icon className="animate-spin" icon="mdi:loading" />
-            src={captchaImage}
+            </div>
-            title={t("captcha.clickToRefresh", "Click to refresh")}
+          ) : captchaImage ? (
-            width={120}
+            <img
-          />
+              src={captchaImage}
-        ) : (
+              alt="captcha"
-          <div className="flex h-full items-center justify-center bg-muted text-muted-foreground text-xs">
+              className="h-full w-full cursor-pointer object-contain"
-            {t("captcha.noImage", "No Image")}
+              onClick={fetchCaptcha}
-          </div>
+              title={t("captcha.clickToRefresh", "Click to refresh")}
-        )}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center bg-muted text-xs text-muted-foreground">
+              {t("captcha.noImage", "No Image")}
+            </div>
+          )}
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          onClick={fetchCaptcha}
+          disabled={loading}
+          title={t("captcha.refresh", "Refresh captcha")}
+        >
+          <Icon icon="mdi:refresh" />
+        </Button>
       </div>
-      <Button
+    );
-        disabled={loading}
+  }
-        onClick={fetchCaptcha}
+);
-        size="icon"
-        title={t("captcha.refresh", "Refresh captcha")}
-        type="button"
-        variant="outline"
-      >
-        <Icon icon="mdi:refresh" />
-      </Button>
-    </div>
-  );
-};
 
 LocalCaptcha.displayName = "LocalCaptcha";
 

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

@@ -1,363 +0,0 @@
-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 {
-  type RefObject,
-  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: _w, h: _h } = getContainerSize();
-    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,18 +1,5 @@
-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 {
+import { type RefObject, useEffect, useImperativeHandle } from "react";
-  type RefObject,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from "react";
 import { useTranslation } from "react-i18next";
 import Turnstile, { useTurnstile } from "react-turnstile";
 
@@ -36,119 +23,43 @@ const CloudFlareTurnstile = function CloudFlareTurnstile({
   const { common } = useGlobalStore();
   const { verify } = common;
   const { resolvedTheme } = useTheme();
-  const { i18n, t } = useTranslation("auth");
+  const { i18n } = useTranslation();
   const locale = i18n.language;
   const turnstile = useTurnstile();
-  const [open, setOpen] = useState(false);
-  const [verified, setVerified] = useState(false);
 
   useImperativeHandle(
     ref,
     () => ({
-      reset: () => {
+      reset: () => turnstile.reset(),
-        setVerified(false);
-        onChange("");
-        turnstile.reset();
-      },
     }),
-    [turnstile, onChange]
+    [turnstile]
   );
 
   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 */}
+      <Turnstile
-      <button
+        fixedSize
-        className={`relative flex w-full items-center gap-3 rounded-md border px-4 py-3 text-sm transition-colors ${
+        id={id}
-          verified
+        language={locale.toLowerCase()}
-            ? "border-green-400 bg-green-50 text-green-700 dark:bg-green-950/30"
+        onExpire={() => {
-            : "border-input bg-background hover:bg-muted"
+          onChange();
-        }`}
+          turnstile.reset();
-        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}
+        onTimeout={() => {
-      >
+          onChange();
-        <DialogContent className="flex w-auto flex-col items-center gap-4 p-6">
+          turnstile.reset();
-          <DialogHeader>
+        }}
-            <DialogTitle>
+        onVerify={(token) => onChange(token)}
-              {t("captcha.turnstile.title", "Security Verification")}
+        sitekey={verify.turnstile_site_key}
-            </DialogTitle>
+        theme={resolvedTheme as "light" | "dark"}
-          </DialogHeader>
+      />
-          <Turnstile
+    )
-            fixedSize
-            id={id}
-            language={locale.toLowerCase()}
-            onExpire={() => {
-              onChange("");
-              turnstile.reset();
-            }}
-            onTimeout={() => {
-              onChange("");
-              turnstile.reset();
-            }}
-            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,6 +1,5 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -12,16 +11,17 @@ 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,9 +147,7 @@ export default function AverageModeTab() {
       {/* Configuration Card */}
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("averageModeConfig", "Average Mode Configuration")}</CardTitle>
-            {t("averageModeConfig", "Average Mode Configuration")}
-          </CardTitle>
           <CardDescription>
             {t(
               "averageModeDescription",
@@ -164,18 +162,15 @@ export default function AverageModeTab() {
                 {t("availableNodeGroups", "Available Node Groups")}
               </Label>
               <Input
-                className="bg-muted"
                 id="node_group_count"
-                min={1}
-                readOnly
                 type="number"
+                min={1}
                 value={averageConfig.node_group_count}
+                readOnly
+                className="bg-muted"
               />
-              <p className="text-muted-foreground text-xs">
+              <p className="text-xs text-muted-foreground">
-                {t(
+                {t("nodeGroupCountAutoCalculated", "Auto-calculated from actual node groups")}
-                  "nodeGroupCountAutoCalculated",
-                  "Auto-calculated from actual node groups"
-                )}
               </p>
             </div>
           </div>
@@ -185,9 +180,7 @@ export default function AverageModeTab() {
       {/* Recalculation Card */}
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
-            {t("groupRecalculation", "Group Recalculation")}
-          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -199,7 +192,7 @@ export default function AverageModeTab() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="font-medium text-sm">
+              <span className="text-sm font-medium">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -231,20 +224,14 @@ export default function AverageModeTab() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-muted-foreground text-sm">
+              <div className="text-sm text-muted-foreground">
-                {t(
+                {t("recalculationCompleted", "Recalculation completed successfully")}
-                  "recalculationCompleted",
-                  "Recalculation completed successfully"
-                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-destructive text-sm">
+              <div className="text-sm text-destructive">
-                {t(
+                {t("recalculationFailed", "Recalculation failed. Please try again.")}
-                  "recalculationFailed",
-                  "Recalculation failed. Please try again."
-                )}
               </div>
             )}
           </div>
@@ -252,8 +239,8 @@ export default function AverageModeTab() {
           {/* Recalculate Button */}
           <div className="flex justify-end">
             <Button
-              disabled={recalculating || status?.state === "running"}
               onClick={handleRecalculate}
+              disabled={recalculating || status?.state === "running"}
             >
               {recalculating && (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { Button } from "@workspace/ui/components/button";
 import {
   Dialog,
@@ -19,14 +18,12 @@ 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[];
@@ -44,9 +41,7 @@ export default function BindNodeGroupsDialog({
   const { t } = useTranslation("group");
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [selectedNodeGroupId, setSelectedNodeGroupId] = useState<
+  const [selectedNodeGroupId, setSelectedNodeGroupId] = useState<number | undefined>();
-    number | undefined
-  >();
 
   const { data: nodeGroupsData, isLoading } = useQuery({
     queryKey: ["nodeGroups"],
@@ -83,10 +78,10 @@ export default function BindNodeGroupsDialog({
       } as API.BindNodeGroupsRequest);
 
       toast.success(
-        t(
+        t("bindSuccess", "Successfully bound {{userGroupCount}} user groups to node group").replace(
-          "bindSuccess",
+          /{{userGroupCount}}/g,
-          "Successfully bound {{userGroupCount}} user groups to node group"
+          String(userGroupIds.length)
-        ).replace(/{{userGroupCount}}/g, String(userGroupIds.length))
+        )
       );
 
       setOpen(false);
@@ -106,15 +101,12 @@ export default function BindNodeGroupsDialog({
       : userGroupNames.join(", ");
 
   return (
-    <Dialog
+    <Dialog open={open} onOpenChange={(newOpen) => {
-      onOpenChange={(newOpen) => {
+      setOpen(newOpen);
-        setOpen(newOpen);
+      onOpenChange?.(newOpen);
-        onOpenChange?.(newOpen);
+    }}>
-      }}
-      open={open}
-    >
       <DialogTrigger asChild>
-        <Button size="sm" variant="outline">
+        <Button variant="outline" size="sm">
           {t("bindNodeGroup", "Bind Node Group")}
         </Button>
       </DialogTrigger>
@@ -137,25 +129,18 @@ export default function BindNodeGroupsDialog({
             </div>
           ) : (
             <div className="space-y-2">
-              <Label htmlFor="node-group">
+              <Label htmlFor="node-group">{t("selectNodeGroup", "Select Node Group")}</Label>
-                {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 className="w-full" id="node-group">
+                <SelectTrigger id="node-group" className="w-full">
-                  <SelectValue
+                  <SelectValue placeholder={t("selectNodeGroupPlaceholder", "Select a node group...")} />
-                    placeholder={t(
-                      "selectNodeGroupPlaceholder",
-                      "Select a node group..."
-                    )}
-                  />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="0">{t("unbound", "Unbound")}</SelectItem>
+                  <SelectItem value="0">
+                    {t("unbound", "Unbound")}
+                  </SelectItem>
                   {nodeGroupsData?.map((nodeGroup) => (
                     <SelectItem key={nodeGroup.id} value={String(nodeGroup.id)}>
                       {nodeGroup.name}
@@ -169,19 +154,16 @@ export default function BindNodeGroupsDialog({
 
         <DialogFooter>
           <Button
-            disabled={saving}
+            variant="outline"
             onClick={() => {
               setOpen(false);
               onOpenChange?.(false);
             }}
-            variant="outline"
+            disabled={saving}
           >
             {t("cancel", "Cancel")}
           </Button>
-          <Button
+          <Button onClick={handleBind} disabled={saving || selectedNodeGroupId === undefined}>
-            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,6 +1,5 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import {
   Card,
   CardContent,
@@ -23,14 +22,11 @@ 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");
@@ -41,8 +37,7 @@ export default function CurrentGroupResults() {
 
   // User list dialog state
   const [userListOpen, setUserListOpen] = useState(false);
-  const [selectedNodeGroupName, setSelectedNodeGroupName] =
+  const [selectedNodeGroupName, setSelectedNodeGroupName] = useState<string>("");
-    useState<string>("");
   const [userList, setUserList] = useState<any[]>([]);
   const [userListLoading, setUserListLoading] = useState(false);
   const [userListTotal, setUserListTotal] = useState(0);
@@ -99,10 +94,7 @@ export default function CurrentGroupResults() {
     loadData();
   }, []);
 
-  const handleShowUserList = async (
+  const handleShowUserList = async (nodeGroupId: number, nodeGroupName: string) => {
-    nodeGroupId: number,
-    nodeGroupName: string
-  ) => {
     setSelectedNodeGroupName(nodeGroupName);
     setUserListOpen(true);
     setUserListLoading(true);
@@ -140,10 +132,10 @@ export default function CurrentGroupResults() {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("currentGroupingResult", "Current Grouping Result")}</CardTitle>
-            {t("currentGroupingResult", "Current Grouping Result")}
+          <CardDescription>
-          </CardTitle>
+            {t("loading", "Loading...")}
-          <CardDescription>{t("loading", "Loading...")}</CardDescription>
+          </CardDescription>
         </CardHeader>
       </Card>
     );
@@ -152,144 +144,110 @@ export default function CurrentGroupResults() {
   return (
     <div className="space-y-4">
       {/* Latest Result Card */}
-      {latestResult ? (
+      {!latestResult ? (
         <Card>
           <CardHeader>
-            <CardTitle>
+            <CardTitle>{t("currentGroupingResult", "Current Grouping Result")}</CardTitle>
-              {t("currentGroupingResult", "Current Grouping Result")}
+          </CardHeader>
-            </CardTitle>
+          <CardContent>
+            <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(
+              {t("latestGroupingCalculation", "Latest grouping calculation details")}
-                "latestGroupingCalculation",
-                "Latest grouping calculation details"
-              )}
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             {/* Calculation Info */}
             <div className="space-y-2">
-              <h3 className="font-medium text-sm">
+              <h3 className="text-sm font-medium">{t("calculationInfo", "Calculation Information")}</h3>
-                {t("calculationInfo", "Calculation Information")}
-              </h3>
               <div className="grid grid-cols-2 gap-4 rounded-lg bg-muted/50 p-4">
-                <div>
+              <div>
-                  <div className="text-muted-foreground text-xs">
+                <div className="text-xs text-muted-foreground">{t("groupMode", "Group Mode")}</div>
-                    {t("groupMode", "Group Mode")}
+                <div className="font-medium">
-                  </div>
+                  {(latestResult.GroupMode || latestResult.group_mode) === "average"
-                  <div className="font-medium">
+                    ? t("averageMode", "Average Mode")
-                    {(latestResult.GroupMode || latestResult.group_mode) ===
+                    : (latestResult.GroupMode || latestResult.group_mode) === "subscribe"
-                    "average"
+                    ? t("subscribeMode", "Subscribe Mode")
-                      ? t("averageMode", "Average Mode")
+                    : t("trafficMode", "Traffic Mode")}
-                      : (latestResult.GroupMode || latestResult.group_mode) ===
-                          "subscribe"
-                        ? t("subscribeMode", "Subscribe Mode")
-                        : t("trafficMode", "Traffic Mode")}
-                  </div>
-                </div>
-                <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"
-                          ? t("failed", "Failed")
-                          : t("idle", "Idle")}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-muted-foreground text-xs">
-                    {t("triggerType", "Trigger Type")}
-                  </div>
-                  <div className="font-medium">
-                    {(latestResult.TriggerType || latestResult.trigger_type) ===
-                    "manual"
-                      ? t("manualTrigger", "Manual")
-                      : (latestResult.TriggerType ||
-                            latestResult.trigger_type) === "auto"
-                        ? t("autoTrigger", "Auto")
-                        : t("scheduleTrigger", "Schedule")}
-                  </div>
-                </div>
-                <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}
-                  </div>
-                </div>
-                <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()
-                      : "-"}
-                  </div>
-                </div>
-                <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()
-                      : "-"}
-                  </div>
                 </div>
               </div>
+              <div>
+                <div className="text-xs text-muted-foreground">{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"
+                    ? t("failed", "Failed")
+                    : t("idle", "Idle")}
+                </div>
+              </div>
+              <div>
+                <div className="text-xs text-muted-foreground">{t("triggerType", "Trigger Type")}</div>
+                <div className="font-medium">
+                  {(latestResult.TriggerType || latestResult.trigger_type) === "manual"
+                    ? t("manualTrigger", "Manual")
+                    : (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="font-medium">
+                  {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="font-medium">
+                  {latestResult.StartTime || latestResult.start_time
+                    ? 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="font-medium">
+                  {latestResult.EndTime || latestResult.end_time
+                    ? new Date((latestResult.EndTime || latestResult.end_time) * 1000).toLocaleString()
+                    : "-"}
+                </div>
+              </div>
+            </div>
             </div>
 
             {/* Grouping Details */}
             <div className="space-y-2">
-              <h3 className="font-medium text-sm">
+              <h3 className="text-sm font-medium">{t("groupingDetailsStatistics", "Grouping Details Statistics")}</h3>
-                {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="font-bold text-2xl">
+                  <div className="text-2xl font-bold">
-                    {latestDetails.reduce(
+                    {latestDetails.reduce((sum: number, d: any) => sum + (d.UserCount || d.user_count || 0), 0)}
-                      (sum: number, d: any) =>
-                        sum + (d.UserCount || d.user_count || 0),
-                      0
-                    )}
                   </div>
-                  <div className="text-muted-foreground text-xs">
+                  <div className="text-xs text-muted-foreground">
                     {t("totalUsers", "Total Users")}
                   </div>
                 </div>
                 <div className="text-center">
-                  <div className="font-bold text-2xl">
+                  <div className="text-2xl font-bold">
-                    {latestDetails.reduce(
+                    {latestDetails.reduce((sum: number, d: any) => sum + (d.NodeCount || d.node_count || 0), 0)}
-                      (sum: number, d: any) =>
-                        sum + (d.NodeCount || d.node_count || 0),
-                      0
-                    )}
                   </div>
-                  <div className="text-muted-foreground text-xs">
+                  <div className="text-xs text-muted-foreground">
                     {t("totalNodes", "Total Nodes")}
                   </div>
                 </div>
                 <div className="text-center">
-                  <div className="font-bold text-2xl">
+                  <div className="text-2xl font-bold">{latestDetails.length}</div>
-                    {latestDetails.length}
+                  <div className="text-xs text-muted-foreground">
-                  </div>
-                  <div className="text-muted-foreground text-xs">
                     {t("totalNodeGroups", "Total Node Groups")}
                   </div>
                 </div>
@@ -299,7 +257,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-muted-foreground text-sm">
+                <span className="ml-2 text-sm text-muted-foreground">
                   {t("loading", "Loading...")}
                 </span>
               </div>
@@ -323,41 +281,26 @@ export default function CurrentGroupResults() {
                     </thead>
                     <tbody>
                       {latestDetails.map((detail: any, index: number) => {
-                        const nodeGroupId =
+                        const nodeGroupId = detail.NodeGroupId || detail.node_group_id;
-                          detail.NodeGroupId || detail.node_group_id;
+                        const nodeGroup = nodeGroups?.find((ng) => ng.id === nodeGroupId);
-                        const nodeGroup = nodeGroups?.find(
+                        const nodeGroupName = nodeGroup?.name || `${t("idPrefix", "#")}${nodeGroupId}`;
-                          (ng) => ng.id === nodeGroupId
+                        const userCount = detail.UserCount || detail.user_count || 0;
-                        );
-                        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">
+                                <div className="font-medium">{nodeGroupName}</div>
-                                  {nodeGroupName}
+                                <div className="text-xs text-muted-foreground">{t("id", "ID")}: {nodeGroupId}</div>
-                                </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
+                                  userCount === 0 ? 'text-muted-foreground cursor-not-allowed' : 'cursor-pointer'
-                                    ? "cursor-not-allowed text-muted-foreground"
-                                    : "cursor-pointer"
                                 }`}
+                                onClick={() => handleShowUserList(nodeGroupId, nodeGroupName)}
                                 disabled={userCount === 0}
-                                onClick={() =>
-                                  handleShowUserList(nodeGroupId, nodeGroupName)
-                                }
-                                type="button"
                               >
                                 {userCount}
                               </button>
@@ -373,30 +316,17 @@ export default function CurrentGroupResults() {
                 </div>
               </>
             ) : (
-              <div className="py-8 text-center text-muted-foreground text-sm">
+              <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>
-          </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 onOpenChange={setUserListOpen} open={userListOpen}>
+      <Dialog open={userListOpen} onOpenChange={setUserListOpen}>
-        <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[700px]">
+        <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>
               {selectedNodeGroupName} - {t("userList", "User List")}
@@ -409,7 +339,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-muted-foreground text-sm">
+                <span className="ml-2 text-sm text-muted-foreground">
                   {t("loading", "Loading...")}
                 </span>
               </div>
@@ -425,13 +355,15 @@ export default function CurrentGroupResults() {
                   {userList.map((user) => (
                     <TableRow key={user.id}>
                       <TableCell className="font-medium">{user.id}</TableCell>
-                      <TableCell>{user.email || "-"}</TableCell>
+                      <TableCell>
+                        {user.email || "-"}
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
             ) : (
-              <div className="py-8 text-center text-muted-foreground text-sm">
+              <div className="text-center py-8 text-sm text-muted-foreground">
                 {t("noUsers", "No users found")}
               </div>
             )}

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

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

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -34,27 +33,24 @@ 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] =
+  const [selectedHistory, setSelectedHistory] = useState<API.GroupHistory | null>(null);
-    useState<API.GroupHistory | null>(null);
   const [details, setDetails] = useState<any[]>([]);
-  const [nodeGroupMap, setNodeGroupMap] = useState<Map<number, string>>(
+  const [nodeGroupMap, setNodeGroupMap] = useState<Map<number, string>>(new Map());
-    new Map()
-  );
 
   // User list dialog state
   const [userListOpen, setUserListOpen] = useState(false);
-  const [selectedNodeGroupName, setSelectedNodeGroupName] =
+  const [selectedNodeGroupName, setSelectedNodeGroupName] = useState<string>("");
-    useState<string>("");
   const [userList, setUserList] = useState<any[]>([]);
   const [userListTotal, setUserListTotal] = useState(0);
 
@@ -134,10 +130,7 @@ export default function GroupHistory() {
     }
   };
 
-  const handleShowUserList = async (
+  const handleShowUserList = async (nodeGroupId: number, nodeGroupName: string) => {
-    nodeGroupId: number,
-    nodeGroupName: string
-  ) => {
     setSelectedNodeGroupName(nodeGroupName);
     setUserListOpen(true);
 
@@ -173,30 +166,23 @@ export default function GroupHistory() {
     <div className="space-y-4">
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("groupHistory", "Group Calculation History")}</CardTitle>
-            {t("groupHistory", "Group Calculation History")}
-          </CardTitle>
           <CardDescription>
-            {t(
+            {t("groupHistoryDescription", "View group recalculation history and results")}
-              "groupHistoryDescription",
-              "View group recalculation history and results"
-            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
           <ProTable<API.GroupHistory, API.GetGroupHistoryRequest>
             action={ref}
-            actions={{
+            request={async (params) => {
-              render: (row: any) => [
+              const { data } = await getGroupHistory({
-                <Button
+                page: params.page || 1,
-                  key="detail"
+                size: params.size || 10,
-                  onClick={() => handleViewDetail(row)}
+              });
-                  size="sm"
+              return {
-                  variant="outline"
+                list: data.data?.list || [],
-                >
+                total: data.data?.total || 0,
-                  {t("viewDetail", "View Detail")}
+              };
-                </Button>,
-              ],
             }}
             columns={[
               {
@@ -205,8 +191,7 @@ export default function GroupHistory() {
                 header: t("id", "ID"),
                 cell: ({ row }: { row: any }) => (
                   <span className="text-muted-foreground">
-                    {t("idPrefix", "#")}
+                    {t("idPrefix", "#")}{row.getValue("id")}
-                    {row.getValue("id")}
                   </span>
                 ),
               },
@@ -235,9 +220,7 @@ export default function GroupHistory() {
                 accessorKey: "total_users",
                 header: t("totalUsers", "Total Users"),
                 cell: ({ row }: { row: any }) => (
-                  <span className="font-semibold">
+                  <span className="font-semibold">{row.getValue("total_users")}</span>
-                    {row.getValue("total_users")}
-                  </span>
                 ),
               },
               {
@@ -248,10 +231,10 @@ export default function GroupHistory() {
                   const record = row.original;
                   return (
                     <div className="space-y-1">
-                      <div className="text-muted-foreground text-xs">
+                      <div className="text-xs text-muted-foreground">
-                        {t("successCount", "Success")}: {record.success_count}{" "}
+                        {t("successCount", "Success")}: {record.success_count}
-                        {t("separator", "/")} {t("failedCount", "Failed")}:{" "}
+                        {" "}{t("separator", "/")}{" "}
-                        {record.failed_count}
+                        {t("failedCount", "Failed")}: {record.failed_count}
                       </div>
                       {record.error_log && (
                         <Badge variant="destructive">
@@ -271,30 +254,31 @@ export default function GroupHistory() {
                 id: "created_at",
                 accessorKey: "created_at",
                 header: t("createdAt", "Created At"),
-                cell: ({ row }: { row: any }) =>
+                cell: ({ row }: { row: any }) => formatDate(row.getValue("created_at")),
-                  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 onOpenChange={setDetailOpen} open={detailOpen}>
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-        <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[700px]">
+        <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>
               {t("groupHistoryDetail", "Group Calculation Detail")}
@@ -308,7 +292,7 @@ export default function GroupHistory() {
               <>
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <div className="text-muted-foreground text-sm">
+                    <div className="text-sm text-muted-foreground">
                       {t("groupMode", "Group Mode")}
                     </div>
                     <div className="font-medium">
@@ -316,7 +300,7 @@ export default function GroupHistory() {
                     </div>
                   </div>
                   <div>
-                    <div className="text-muted-foreground text-sm">
+                    <div className="text-sm text-muted-foreground">
                       {t("triggerType", "Trigger Type")}
                     </div>
                     <div className="font-medium">
@@ -324,27 +308,24 @@ export default function GroupHistory() {
                     </div>
                   </div>
                   <div>
-                    <div className="text-muted-foreground text-sm">
+                    <div className="text-sm text-muted-foreground">
                       {t("totalUsers", "Total Users")}
                     </div>
-                    <div className="font-medium">
+                    <div className="font-medium">{selectedHistory.total_users}</div>
-                      {selectedHistory.total_users}
-                    </div>
                   </div>
                   <div>
-                    <div className="text-muted-foreground text-sm">
+                    <div className="text-sm text-muted-foreground">
                       {t("result", "Result")}
                     </div>
                     <div className="font-medium">
-                      {t("successCount", "Success")}:{" "}
+                      {t("successCount", "Success")}: {selectedHistory.success_count}
-                      {selectedHistory.success_count} {t("separator", "/")}{" "}
+                      {" "}{t("separator", "/")}{" "}
-                      {t("failedCount", "Failed")}:{" "}
+                      {t("failedCount", "Failed")}: {selectedHistory.failed_count}
-                      {selectedHistory.failed_count}
                     </div>
                   </div>
                   {selectedHistory.start_time && (
                     <div>
-                      <div className="text-muted-foreground text-sm">
+                      <div className="text-sm text-muted-foreground">
                         {t("startTime", "Start Time")}
                       </div>
                       <div className="font-medium">
@@ -354,7 +335,7 @@ export default function GroupHistory() {
                   )}
                   {selectedHistory.end_time && (
                     <div>
-                      <div className="text-muted-foreground text-sm">
+                      <div className="text-sm text-muted-foreground">
                         {t("endTime", "End Time")}
                       </div>
                       <div className="font-medium">
@@ -366,10 +347,10 @@ export default function GroupHistory() {
 
                 {selectedHistory.error_log && (
                   <div>
-                    <div className="text-muted-foreground text-sm">
+                    <div className="text-sm text-muted-foreground">
                       {t("errorMessage", "Error Message")}
                     </div>
-                    <div className="rounded-md bg-destructive/10 p-3 text-destructive text-sm">
+                    <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
                       {selectedHistory.error_log}
                     </div>
                   </div>
@@ -378,13 +359,13 @@ export default function GroupHistory() {
             )}
 
             <div>
-              <div className="mb-2 font-medium text-sm">
+              <div className="mb-2 text-sm font-medium">
                 {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-muted-foreground text-sm">
+                  <span className="ml-2 text-sm text-muted-foreground">
                     {t("loading", "Loading...")}
                   </span>
                 </div>
@@ -393,32 +374,24 @@ 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="font-bold text-2xl">
+                      <div className="text-2xl font-bold">
-                        {details.reduce(
+                        {details.reduce((sum: number, d: any) => sum + (d.UserCount || d.user_count || 0), 0)}
-                          (sum: number, d: any) =>
-                            sum + (d.UserCount || d.user_count || 0),
-                          0
-                        )}
                       </div>
-                      <div className="text-muted-foreground text-xs">
+                      <div className="text-xs text-muted-foreground">
                         {t("totalUsers", "Total Users")}
                       </div>
                     </div>
                     <div className="text-center">
-                      <div className="font-bold text-2xl">
+                      <div className="text-2xl font-bold">
-                        {details.reduce(
+                        {details.reduce((sum: number, d: any) => sum + (d.NodeCount || d.node_count || 0), 0)}
-                          (sum: number, d: any) =>
-                            sum + (d.NodeCount || d.node_count || 0),
-                          0
-                        )}
                       </div>
-                      <div className="text-muted-foreground text-xs">
+                      <div className="text-xs text-muted-foreground">
                         {t("totalNodes", "Total Nodes")}
                       </div>
                     </div>
                     <div className="text-center">
-                      <div className="font-bold text-2xl">{details.length}</div>
+                      <div className="text-2xl font-bold">{details.length}</div>
-                      <div className="text-muted-foreground text-xs">
+                      <div className="text-xs text-muted-foreground">
                         {t("totalNodeGroups", "Total Node Groups")}
                       </div>
                     </div>
@@ -442,39 +415,22 @@ export default function GroupHistory() {
                       </thead>
                       <tbody>
                         {details.map((detail: any, index: number) => {
-                          const nodeGroupId =
+                          const nodeGroupId = detail.NodeGroupId || detail.node_group_id;
-                            detail.NodeGroupId || detail.node_group_id;
+                          const nodeGroupName = nodeGroupMap.get(nodeGroupId) || `${t("idPrefix", "#")}${nodeGroupId}`;
-                          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">
+                                  <div className="font-medium">{nodeGroupName}</div>
-                                    {nodeGroupName}
+                                  <div className="text-xs text-muted-foreground">{t("id", "ID")}: {nodeGroupId}</div>
-                                  </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="cursor-pointer font-semibold hover:underline disabled:cursor-not-allowed disabled:opacity-50"
+                                  className="font-semibold hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-                                  disabled={
+                                  onClick={() => handleShowUserList(nodeGroupId, nodeGroupName)}
-                                    (detail.UserCount ||
+                                  disabled={(detail.UserCount || detail.user_count || 0) === 0}
-                                      detail.user_count ||
-                                      0) === 0
-                                  }
-                                  onClick={() =>
-                                    handleShowUserList(
-                                      nodeGroupId,
-                                      nodeGroupName
-                                    )
-                                  }
-                                  type="button"
                                 >
                                   {detail.UserCount || detail.user_count || 0}
                                 </button>
@@ -490,7 +446,7 @@ export default function GroupHistory() {
                   </div>
                 </>
               ) : (
-                <div className="py-8 text-center text-muted-foreground text-sm">
+                <div className="text-center py-8 text-sm text-muted-foreground">
                   {t("noDetails", "No details available")}
                 </div>
               )}
@@ -500,8 +456,8 @@ export default function GroupHistory() {
       </Dialog>
 
       {/* User List Dialog */}
-      <Dialog onOpenChange={setUserListOpen} open={userListOpen}>
+      <Dialog open={userListOpen} onOpenChange={setUserListOpen}>
-        <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[700px]">
+        <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>
               {selectedNodeGroupName} - {t("userList", "User List")}
@@ -523,13 +479,15 @@ export default function GroupHistory() {
                   {userList.map((user) => (
                     <TableRow key={user.id}>
                       <TableCell className="font-medium">{user.id}</TableCell>
-                      <TableCell>{user.email || "-"}</TableCell>
+                      <TableCell>
+                        {user.email || "-"}
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
             ) : (
-              <div className="py-8 text-center text-muted-foreground text-sm">
+              <div className="text-center py-8 text-sm text-muted-foreground">
                 {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 {
-  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";
+import {
+  getRecalculationStatus,
+  recalculateGroup,
+} from "@workspace/ui/services/admin/group";
 
 export default function GroupRecalculate() {
   const { t } = useTranslation("group");
@@ -54,9 +54,7 @@ export default function GroupRecalculate() {
     return () => clearInterval(interval);
   }, [status?.state]);
 
-  const handleRecalculate = async (
+  const handleRecalculate = async (mode: "average" | "subscribe" | "traffic") => {
-    mode: "average" | "subscribe" | "traffic"
-  ) => {
     setRecalculating(mode);
     try {
       await recalculateGroup({ mode });
@@ -100,9 +98,7 @@ export default function GroupRecalculate() {
     <div className="space-y-4">
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
-            {t("groupRecalculation", "Group Recalculation")}
-          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -114,7 +110,7 @@ export default function GroupRecalculate() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="font-medium text-sm">
+              <span className="text-sm font-medium">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -146,20 +142,14 @@ export default function GroupRecalculate() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-muted-foreground text-sm">
+              <div className="text-sm text-muted-foreground">
-                {t(
+                {t("recalculationCompleted", "Recalculation completed successfully")}
-                  "recalculationCompleted",
-                  "Recalculation completed successfully"
-                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-destructive text-sm">
+              <div className="text-sm text-destructive">
-                {t(
+                {t("recalculationFailed", "Recalculation failed. Please try again.")}
-                  "recalculationFailed",
-                  "Recalculation failed. Please try again."
-                )}
               </div>
             )}
           </div>
@@ -173,11 +163,9 @@ export default function GroupRecalculate() {
                   {t("averageMode", "Average Mode")}
                 </div>
                 <Button
-                  className="w-full"
-                  disabled={
-                    recalculating === "average" || status?.state === "running"
-                  }
                   onClick={() => handleRecalculate("average")}
+                  disabled={recalculating === "average" || status?.state === "running"}
+                  className="w-full"
                   variant="outline"
                 >
                   {recalculating === "average" && (
@@ -193,11 +181,9 @@ export default function GroupRecalculate() {
                   {t("subscribeMode", "Subscribe Mode")}
                 </div>
                 <Button
-                  className="w-full"
-                  disabled={
-                    recalculating === "subscribe" || status?.state === "running"
-                  }
                   onClick={() => handleRecalculate("subscribe")}
+                  disabled={recalculating === "subscribe" || status?.state === "running"}
+                  className="w-full"
                   variant="outline"
                 >
                   {recalculating === "subscribe" && (
@@ -213,11 +199,9 @@ export default function GroupRecalculate() {
                   {t("trafficMode", "Traffic Mode")}
                 </div>
                 <Button
-                  className="w-full"
-                  disabled={
-                    recalculating === "traffic" || status?.state === "running"
-                  }
                   onClick={() => handleRecalculate("traffic")}
+                  disabled={recalculating === "traffic" || status?.state === "running"}
+                  className="w-full"
                   variant="outline"
                 >
                   {recalculating === "traffic" && (

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

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

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

@@ -50,91 +50,28 @@ export default function NodeGroups() {
         <CardHeader>
           <CardTitle>{t("nodeGroups", "Node Groups")}</CardTitle>
           <CardDescription>
-            {t(
+            {t("nodeGroupsDescription", "Manage node groups for user access control")}
-              "nodeGroupsDescription",
-              "Manage node groups for user access control"
-            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
           <ProTable<API.NodeGroup, API.GetNodeGroupListRequest>
             action={ref}
-            actions={{
+            request={async (params) => {
-              render: (row: any) => [
+              const { data } = await getNodeGroupList({
-                <NodeGroupForm
+                page: params.page || 1,
-                  allNodeGroups={allNodeGroups}
+                size: params.size || 10,
-                  currentGroupId={row.id}
+              });
-                  initialValues={row}
+              return {
-                  key={`edit-${row.id}`}
+                list: data.data?.list || [],
-                  loading={loading}
+                total: data.data?.total || 0,
-                  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 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 }) => (
+                cell: ({ row }: { row: any }) => <span className="text-muted-foreground">#{row.getValue("id")}</span>,
-                  <span className="text-muted-foreground">
-                    #{row.getValue("id")}
-                  </span>
-                ),
               },
               {
                 id: "name",
@@ -158,8 +95,7 @@ export default function NodeGroups() {
                 id: "description",
                 accessorKey: "description",
                 header: t("description", "Description"),
-                cell: ({ row }: { row: any }) =>
+                cell: ({ row }: { row: any }) => row.getValue("description") || "--",
-                  row.getValue("description") || "--",
               },
               {
                 id: "for_calculation",
@@ -198,27 +134,82 @@ export default function NodeGroups() {
                 header: t("sort", "Sort"),
               },
             ]}
-            header={{
+            actions={{
-              title: t("nodeGroups", "Node Groups"),
+              render: (row: any) => [
-              toolbar: (
                 <NodeGroupForm
+                  key={`edit-${row.id}`}
+                  initialValues={row}
                   allNodeGroups={allNodeGroups}
-                  currentGroupId={undefined}
+                  currentGroupId={row.id}
-                  initialValues={undefined}
-                  key="create"
                   loading={loading}
                   onSubmit={async (values) => {
                     setLoading(true);
                     try {
-                      await createNodeGroup(
+                      await updateNodeGroup({
-                        values as API.CreateNodeGroupRequest
+                        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}
+                  loading={loading}
+                  onSubmit={async (values) => {
+                    setLoading(true);
+                    try {
+                      await createNodeGroup(values as API.CreateNodeGroupRequest);
                       toast.success(t("created", "Created successfully"));
                       // 刷新节点组列表
-                      const { data } = await getNodeGroupList({
+                      const { data } = await getNodeGroupList({ page: 1, size: 1000 });
-                        page: 1,
-                        size: 1000,
-                      });
                       setAllNodeGroups(data.data?.list || []);
                       ref.current?.refresh();
                       setLoading(false);
@@ -229,20 +220,14 @@ export default function NodeGroups() {
                     }
                   }}
                   title={t("createNodeGroup", "Create Node Group")}
-                  trigger={<Button>{t("create", "Create")}</Button>}
+                  trigger={
+                    <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,6 +1,5 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -16,15 +15,16 @@ 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,6 +51,7 @@ export default function SubscribeModeTab() {
     },
   });
 
+
   const loadStatus = async () => {
     setLoadingStatus(true);
     try {
@@ -123,14 +124,9 @@ export default function SubscribeModeTab() {
       {/* Configuration Card */}
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("subscribeModeConfig", "Subscribe Mode Configuration")}</CardTitle>
-            {t("subscribeModeConfig", "Subscribe Mode Configuration")}
-          </CardTitle>
           <CardDescription>
-            {t(
+            {t("subscribeModeDescription", "Group users by their purchased subscription plan")}
-              "subscribeModeDescription",
-              "Group users by their purchased subscription plan"
-            )}
           </CardDescription>
         </CardHeader>
       </Card>
@@ -138,9 +134,7 @@ export default function SubscribeModeTab() {
       {/* Subscribe Group Mapping Card */}
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("subscribeGroupMappingTitle", "套餐-节点组对应关系")}</CardTitle>
-            {t("subscribeGroupMappingTitle", "套餐-节点组对应关系")}
-          </CardTitle>
         </CardHeader>
         <CardContent>
           {mappingLoading ? (
@@ -153,21 +147,16 @@ export default function SubscribeModeTab() {
                 {mappingData && mappingData.length > 0 ? (
                   mappingData
                     .filter(
-                      (item: SubscribeGroupMapping) =>
+                      (item: SubscribeGroupMapping) => item.subscribe_name && item.node_group_name
-                        item.subscribe_name && item.node_group_name
                     )
                     .map((item: SubscribeGroupMapping, index: number) => (
                       <TableRow key={index}>
                         <TableCell>
-                          <span className="font-medium">
+                          <span className="font-medium">{item.subscribe_name}</span>
-                            {item.subscribe_name}
-                          </span>
                           <span className="mx-2 text-muted-foreground">
                             {t("arrow", "→")}
                           </span>
-                          <Badge variant="outline">
+                          <Badge variant="outline">{item.node_group_name}</Badge>
-                            {item.node_group_name}
-                          </Badge>
                         </TableCell>
                       </TableRow>
                     ))
@@ -187,9 +176,7 @@ export default function SubscribeModeTab() {
       {/* Recalculation Card */}
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
-            {t("groupRecalculation", "Group Recalculation")}
-          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -201,7 +188,7 @@ export default function SubscribeModeTab() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="font-medium text-sm">
+              <span className="text-sm font-medium">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -233,20 +220,14 @@ export default function SubscribeModeTab() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-muted-foreground text-sm">
+              <div className="text-sm text-muted-foreground">
-                {t(
+                {t("recalculationCompleted", "Recalculation completed successfully")}
-                  "recalculationCompleted",
-                  "Recalculation completed successfully"
-                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-destructive text-sm">
+              <div className="text-sm text-destructive">
-                {t(
+                {t("recalculationFailed", "Recalculation failed. Please try again.")}
-                  "recalculationFailed",
-                  "Recalculation failed. Please try again."
-                )}
               </div>
             )}
           </div>
@@ -254,8 +235,8 @@ export default function SubscribeModeTab() {
           {/* Recalculate Button */}
           <div className="flex justify-end">
             <Button
-              disabled={recalculating || status?.state === "running"}
               onClick={handleRecalculate}
+              disabled={recalculating || status?.state === "running"}
             >
               {recalculating && (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -10,16 +9,17 @@ 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,11 +34,7 @@ export default function TrafficModeTab() {
   } | null>(null);
 
   // Fetch node groups
-  const {
+  const { data: nodeGroupsData, isLoading: isLoadingNodeGroups, refetch: refetchNodeGroups } = useQuery({
-    data: nodeGroupsData,
-    isLoading: isLoadingNodeGroups,
-    refetch: refetchNodeGroups,
-  } = useQuery({
     queryKey: ["nodeGroups"],
     queryFn: async () => {
       const { data } = await getNodeGroupList({ page: 1, size: 1000 });
@@ -60,10 +56,7 @@ export default function TrafficModeTab() {
     }
   };
 
-  const handleTrafficUpdate = async (
+  const handleTrafficUpdate = async (nodeGroupId: number, fields: { min_traffic_gb?: number; max_traffic_gb?: number }) => {
-    nodeGroupId: number,
-    fields: { min_traffic_gb?: number; max_traffic_gb?: number }
-  ) => {
     try {
       await updateNodeGroup({
         id: nodeGroupId,
@@ -123,9 +116,7 @@ export default function TrafficModeTab() {
       {/* Node Groups Traffic Configuration Card */}
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("trafficModeConfig", "Traffic Mode Configuration")}</CardTitle>
-            {t("trafficModeConfig", "Traffic Mode Configuration")}
-          </CardTitle>
           <CardDescription>
             {t(
               "trafficModeDescription",
@@ -137,7 +128,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-muted-foreground text-sm">
+              <span className="ml-2 text-sm text-muted-foreground">
                 {t("loading", "Loading...")}
               </span>
             </div>
@@ -153,9 +144,7 @@ export default function TrafficModeTab() {
       {/* Recalculation Card */}
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle>{t("groupRecalculation", "Group Recalculation")}</CardTitle>
-            {t("groupRecalculation", "Group Recalculation")}
-          </CardTitle>
           <CardDescription>
             {t(
               "groupRecalculationDescription",
@@ -167,7 +156,7 @@ export default function TrafficModeTab() {
           {/* Current Status */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <span className="font-medium text-sm">
+              <span className="text-sm font-medium">
                 {t("currentStatus", "Current Status")}
               </span>
               {loadingStatus ? (
@@ -199,20 +188,14 @@ export default function TrafficModeTab() {
             )}
 
             {status?.state === "completed" && (
-              <div className="text-muted-foreground text-sm">
+              <div className="text-sm text-muted-foreground">
-                {t(
+                {t("recalculationCompleted", "Recalculation completed successfully")}
-                  "recalculationCompleted",
-                  "Recalculation completed successfully"
-                )}
               </div>
             )}
 
             {status?.state === "failed" && (
-              <div className="text-destructive text-sm">
+              <div className="text-sm text-destructive">
-                {t(
+                {t("recalculationFailed", "Recalculation failed. Please try again.")}
-                  "recalculationFailed",
-                  "Recalculation failed. Please try again."
-                )}
               </div>
             )}
           </div>
@@ -220,8 +203,8 @@ export default function TrafficModeTab() {
           {/* Recalculate Button */}
           <div className="flex justify-end">
             <Button
-              disabled={recalculating || status?.state === "running"}
               onClick={handleRecalculate}
+              disabled={recalculating || status?.state === "running"}
             >
               {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 { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
 import { toast } from "sonner";
 
 interface NodeGroup {
@@ -15,15 +15,12 @@ interface NodeGroup {
 
 interface TrafficRangeConfigProps {
   nodeGroups: NodeGroup[];
-  onTrafficUpdate: (
+  onTrafficUpdate: (nodeGroupId: number, fields: { min_traffic_gb?: number; max_traffic_gb?: number }) => Promise<void>;
-    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 {
@@ -31,30 +28,20 @@ interface NodeGroupTempValues {
   max_traffic_gb?: number;
 }
 
-export default function TrafficRangeConfig({
+export default function TrafficRangeConfig({ nodeGroups, onTrafficUpdate }: TrafficRangeConfigProps) {
-  nodeGroups,
-  onTrafficUpdate,
-}: TrafficRangeConfigProps) {
   const { t } = useTranslation("group");
   const [updatingNodes, setUpdatingNodes] = useState<UpdatingNode[]>([]);
   // 使用对象存储每个节点组的临时值
-  const [temporaryValues, setTemporaryValues] = useState<
+  const [temporaryValues, setTemporaryValues] = useState<Record<number, NodeGroupTempValues>>({});
-    Record<number, NodeGroupTempValues>
-  >({});
 
   // Get the display value (temporary or actual)
-  const getDisplayValue = (
+  const getDisplayValue = (nodeGroupId: number, field: 'min_traffic_gb' | 'max_traffic_gb'): number => {
-    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"
+    return field === 'min_traffic_gb' ? (nodeGroup?.min_traffic_gb ?? 0) : (nodeGroup?.max_traffic_gb ?? 0);
-      ? (nodeGroup?.min_traffic_gb ?? 0)
-      : (nodeGroup?.max_traffic_gb ?? 0);
   };
 
   // Validate traffic ranges: no overlaps
@@ -70,34 +57,22 @@ export default function TrafficRangeConfig({
 
     // Check if min >= max (both > 0)
     if (minTraffic > 0 && maxTraffic > 0 && minTraffic >= maxTraffic) {
-      return {
+      return { valid: false, error: t("minCannotExceedMax", "Minimum traffic cannot exceed maximum traffic") };
-        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:
+          min: temp?.min_traffic_gb !== undefined ? temp.min_traffic_gb : (ng.min_traffic_gb ?? 0),
-            temp?.min_traffic_gb !== undefined
+          max: temp?.max_traffic_gb !== undefined ? temp.max_traffic_gb : (ng.max_traffic_gb ?? 0),
-              ? 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) {
@@ -110,11 +85,7 @@ export default function TrafficRangeConfig({
       if (currentMax > other.min && otherMax > minTraffic) {
         return {
           valid: false,
-          error: t(
+          error: t("rangeOverlap", "Range overlaps with node group \"{{name}}\"", { name: other.name })
-            "rangeOverlap",
-            'Range overlaps with node group "{{name}}"',
-            { name: other.name }
-          ),
         };
       }
     }
@@ -123,39 +94,31 @@ export default function TrafficRangeConfig({
   };
 
   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 =
+    const currentMin = tempValues.min_traffic_gb !== undefined
-      tempValues.min_traffic_gb !== undefined
+      ? tempValues.min_traffic_gb
-        ? tempValues.min_traffic_gb
+      : (nodeGroup.min_traffic_gb ?? 0);
-        : (nodeGroup.min_traffic_gb ?? 0);
+    const currentMax = tempValues.max_traffic_gb !== undefined
-    const currentMax =
+      ? tempValues.max_traffic_gb
-      tempValues.max_traffic_gb !== undefined
+      : (nodeGroup.max_traffic_gb ?? 0);
-        ? 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(
+    const validation = validateTrafficRange(nodeGroupId, currentMin, currentMax);
-      nodeGroupId,
-      currentMin,
-      currentMax
-    );
     if (!validation.valid) {
-      toast.error(
+      toast.error(validation.error || t("validationFailed", "Validation failed"));
-        validation.error || t("validationFailed", "Validation failed")
-      );
       return;
     }
 
@@ -168,24 +131,15 @@ export default function TrafficRangeConfig({
 
     // 标记为更新中（只标记被修改的字段）
     if (hasMinChange) {
-      setUpdatingNodes((prev) => [
+      setUpdatingNodes(prev => [...prev, { nodeGroupId, field: 'min_traffic_gb' }]);
-        ...prev,
-        { nodeGroupId, field: "min_traffic_gb" },
-      ]);
     }
     if (hasMaxChange) {
-      setUpdatingNodes((prev) => [
+      setUpdatingNodes(prev => [...prev, { nodeGroupId, field: 'max_traffic_gb' }]);
-        ...prev,
-        { nodeGroupId, field: "max_traffic_gb" },
-      ]);
     }
 
     try {
       // 一次性传递两个字段
-      const fieldsToUpdate: {
+      const fieldsToUpdate: { min_traffic_gb?: number; max_traffic_gb?: number } = {};
-        min_traffic_gb?: number;
-        max_traffic_gb?: number;
-      } = {};
       if (currentMin !== originalMin) {
         fieldsToUpdate.min_traffic_gb = currentMin;
       }
@@ -198,44 +152,40 @@ export default function TrafficRangeConfig({
       }
     } finally {
       // 移除更新状态
-      setUpdatingNodes((prev) =>
+      setUpdatingNodes(prev => prev.filter(u => !(u.nodeGroupId === nodeGroupId)));
-        prev.filter((u) => !(u.nodeGroupId === nodeGroupId))
-      );
     }
   };
 
-  const isUpdating = (nodeGroupId: number) =>
+  const isUpdating = (nodeGroupId: number) => {
-    updatingNodes.some((u) => u.nodeGroupId === nodeGroupId);
+    return updatingNodes.some(u => u.nodeGroupId === nodeGroupId);
+  };
 
   return (
     <>
       <div className="space-y-2">
-        <div className="grid grid-cols-12 gap-2 font-medium text-muted-foreground text-sm">
+        <div className="grid grid-cols-12 gap-2 text-sm font-medium text-muted-foreground">
           <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
+          <div key={nodeGroup.id} className="grid grid-cols-12 gap-2 items-center">
-            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-muted-foreground text-xs">
+              <div className="text-xs text-muted-foreground">{t("id", "ID")}: {nodeGroup.id}</div>
-                {t("id", "ID")}: {nodeGroup.id}
-              </div>
             </div>
-            <div className="relative col-span-3">
+            <div className="col-span-3 relative">
               <Input
-                disabled={isUpdating(nodeGroup.id)}
+                type="number"
                 min={0}
-                onBlur={() => handleTrafficBlur(nodeGroup.id)}
+                step={1}
+                placeholder="0"
+                value={getDisplayValue(nodeGroup.id, "min_traffic_gb")}
                 onChange={(e) => {
-                  const newValue = Number.parseFloat(e.target.value) || 0;
+                  const newValue = parseFloat(e.target.value) || 0;
                   // 更新临时状态
-                  setTemporaryValues((prev) => ({
+                  setTemporaryValues(prev => ({
                     ...prev,
                     [nodeGroup.id]: {
                       ...prev[nodeGroup.id],
@@ -244,26 +194,26 @@ export default function TrafficRangeConfig({
                     },
                   }));
                 }}
-                placeholder="0"
+                onBlur={() => handleTrafficBlur(nodeGroup.id)}
-                step={1}
+                disabled={isUpdating(nodeGroup.id)}
-                type="number"
-                value={getDisplayValue(nodeGroup.id, "min_traffic_gb")}
               />
               {isUpdating(nodeGroup.id) && (
-                <div className="-translate-y-1/2 absolute top-1/2 right-2">
+                <div className="absolute right-2 top-1/2 -translate-y-1/2">
                   <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                 </div>
               )}
             </div>
-            <div className="relative col-span-3">
+            <div className="col-span-3 relative">
               <Input
-                disabled={isUpdating(nodeGroup.id)}
+                type="number"
                 min={0}
-                onBlur={() => handleTrafficBlur(nodeGroup.id)}
+                step={1}
+                placeholder="0"
+                value={getDisplayValue(nodeGroup.id, "max_traffic_gb")}
                 onChange={(e) => {
-                  const newValue = Number.parseFloat(e.target.value) || 0;
+                  const newValue = parseFloat(e.target.value) || 0;
                   // 更新临时状态
-                  setTemporaryValues((prev) => ({
+                  setTemporaryValues(prev => ({
                     ...prev,
                     [nodeGroup.id]: {
                       ...prev[nodeGroup.id],
@@ -272,13 +222,11 @@ export default function TrafficRangeConfig({
                     },
                   }));
                 }}
-                placeholder="0"
+                onBlur={() => handleTrafficBlur(nodeGroup.id)}
-                step={1}
+                disabled={isUpdating(nodeGroup.id)}
-                type="number"
-                value={getDisplayValue(nodeGroup.id, "max_traffic_gb")}
               />
               {isUpdating(nodeGroup.id) && (
-                <div className="-translate-y-1/2 absolute top-1/2 right-2">
+                <div className="absolute right-2 top-1/2 -translate-y-1/2">
                   <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                 </div>
               )}
@@ -287,7 +235,7 @@ export default function TrafficRangeConfig({
         ))}
       </div>
 
-      <div className="rounded-md bg-muted p-4 text-muted-foreground text-sm">
+      <div className="rounded-md bg-muted p-4 text-sm text-muted-foreground">
         <strong>{t("note", "Note")}:</strong>{" "}
         {t(
           "trafficRangesNote",

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

@@ -81,9 +81,7 @@ export default function ResetSubscribeLogPage() {
           page: pagination.page,
           size: pagination.size,
           date: (filter as any)?.date,
-          user_subscribe_id: (filter as any)?.user_subscribe_id
+          user_subscribe_id: (filter as any)?.user_subscribe_id ? Number((filter as any)?.user_subscribe_id) : undefined,
-            ? 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,9 +93,7 @@ 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
+          user_subscribe_id: (filter as any)?.user_subscribe_id ? Number((filter as any)?.user_subscribe_id) : undefined,
-            ? 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,10 +26,7 @@ export default function SubscribeLogPage() {
     user_subscribe_id: sp.user_subscribe_id || undefined,
   };
   return (
-    <ProTable<
+    <ProTable<API.SubscribeLog, { date?: string; user_id?: number; user_subscribe_id?: string }>
-      API.SubscribeLog,
-      { date?: string; user_id?: number; user_subscribe_id?: string }
-    >
       columns={[
         {
           accessorKey: "user",
@@ -97,9 +94,7 @@ 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
+          user_subscribe_id: (filter as any)?.user_subscribe_id ? Number((filter as any)?.user_subscribe_id) : undefined,
-            ? 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,6 +1,5 @@
 "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";
@@ -9,10 +8,6 @@ import {
   ProTable,
   type ProTableActions,
 } from "@workspace/ui/composed/pro-table/pro-table";
-import {
-  getGroupConfig,
-  getNodeGroupList,
-} from "@workspace/ui/services/admin/group";
 import {
   createNode,
   deleteNode,
@@ -21,6 +16,8 @@ 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";
@@ -55,7 +52,7 @@ export default function Nodes() {
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled;
+  const isGroupEnabled = groupConfigData?.enabled || false;
 
   // Dynamic columns based on group feature status
   const columns = useMemo(() => {
@@ -124,13 +121,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 className="text-xs" variant="secondary">
+                <Badge variant="secondary" className="text-xs">
                   {t("public", "Public")}
                 </Badge>
               </div>
@@ -154,14 +151,7 @@ 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 }>
@@ -178,10 +168,7 @@ export default function Nodes() {
                 const body: API.UpdateNodeRequest = {
                   ...row,
                   ...values,
-                  node_group_ids:
+                  node_group_ids: values.node_group_ids?.map((id: string | number) => Number(id)) || [],
-                    values.node_group_ids?.map((id: string | number) =>
-                      Number(id)
-                    ) || [],
                 } as any;
                 await updateNode(body);
                 toast.success(t("updated", "Updated"));
@@ -287,10 +274,9 @@ 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(
+                  body.node_group_ids = values.node_group_ids.map((id: string | number) => Number(id));
-                    (id: string | number) => Number(id)
-                  );
                 }
                 await createNode(body);
                 toast.success(t("created", "Created"));
@@ -304,8 +290,8 @@ export default function Nodes() {
                 return false;
               }
             }}
-            title={t("drawerCreateTitle", "Create Landing Node")}
+            title={t("drawerCreateTitle", "Create Node")}
-            trigger={t("create", "Create Landing Node")}
+            trigger={t("create", "Create")}
           />
         ),
       }}
@@ -386,9 +372,7 @@ export default function Nodes() {
           page: pagination.page,
           size: pagination.size,
           search: filter?.search || undefined,
-          node_group_id: filter?.node_group_id
+          node_group_id: filter?.node_group_id ? Number(filter.node_group_id) : undefined,
-            ? Number(filter.node_group_id)
-            : undefined,
         };
 
         const { data } = await filterNodeList(filters);

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

@@ -1,7 +1,6 @@
 "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 {
@@ -26,10 +25,8 @@ 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 {
+import { getGroupConfig, getNodeGroupList } from "@workspace/ui/services/admin/group";
-  getGroupConfig,
+import { useQuery } from "@tanstack/react-query";
-  getNodeGroupList,
-} from "@workspace/ui/services/admin/group";
 import type { TFunction } from "i18next";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -153,7 +150,7 @@ export default function NodeForm(props: {
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled;
+  const isGroupEnabled = groupConfigData?.enabled || false;
 
   useEffect(() => {
     if (initialValues) {
@@ -169,21 +166,15 @@ export default function NodeForm(props: {
 
       // Copy only the values we need from initialValues
       if (initialValues.name) resetValues.name = initialValues.name;
-      if (initialValues.server_id)
+      if (initialValues.server_id) resetValues.server_id = 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 (
+      if (initialValues.node_group_ids && Array.isArray(initialValues.node_group_ids)) {
-        initialValues.node_group_ids &&
+        resetValues.node_group_ids = initialValues.node_group_ids.map((id: string | number) => String(id));
-        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 = [];
       }
@@ -458,32 +449,23 @@ export default function NodeForm(props: {
                         <div className="grid grid-cols-2 gap-2">
                           {nodeGroupsData?.map((g) => (
                             <div
-                              className="flex items-center space-x-2"
                               key={g.id}
+                              className="flex items-center space-x-2"
                             >
                               <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(
+                                  const currentValue = Array.isArray(field.value) ? field.value : [];
-                                    field.value
-                                  )
-                                    ? field.value
-                                    : [];
                                   if (checked) {
-                                    const newValue = [
+                                    const newValue = [...currentValue, String(g.id)];
-                                      ...currentValue,
-                                      String(g.id),
-                                    ];
                                     form.setValue(field.name, newValue, {
                                       shouldValidate: true,
                                       shouldDirty: true,
                                     });
                                   } else {
-                                    const newValue = currentValue.filter(
+                                    const newValue = currentValue.filter((v: string) => v !== String(g.id));
-                                      (v: string) => v !== String(g.id)
-                                    );
                                     form.setValue(field.name, newValue, {
                                       shouldValidate: true,
                                       shouldDirty: true,
@@ -492,8 +474,8 @@ export default function NodeForm(props: {
                                 }}
                               />
                               <Label
-                                className="cursor-pointer"
                                 htmlFor={`node-group-${g.id}`}
+                                className="cursor-pointer"
                               >
                                 {g.name}
                               </Label>

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useQuery } from "@tanstack/react-query";
 import {
   Accordion,
   AccordionContent,
@@ -42,14 +41,12 @@ 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";
@@ -266,13 +263,8 @@ export default function SubscribeForm<T extends Record<string, any>>({
     }
 
     // Convert node_group_ids from number[] to string[]
-    if (
+    if (initialValues?.node_group_ids && Array.isArray(initialValues.node_group_ids)) {
-      initialValues?.node_group_ids &&
+      processedValues.node_group_ids = (initialValues.node_group_ids as any[]).map((id) => String(id));
-      Array.isArray(initialValues.node_group_ids)
-    ) {
-      processedValues.node_group_ids = (
-        initialValues.node_group_ids as any[]
-      ).map((id) => String(id));
     }
 
     form?.reset(processedValues);
@@ -298,13 +290,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
     if (bool) setOpen(false);
   }
 
-  const {
+  const { getAllAvailableTags, getNodesByTag, getNodesWithoutTags, getNodesWithoutGroups, nodes } = useNode();
-    getAllAvailableTags,
-    getNodesByTag,
-    getNodesWithoutTags,
-    getNodesWithoutGroups,
-    nodes,
-  } = useNode();
 
   const tagGroups = getAllAvailableTags();
 
@@ -328,7 +314,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled;
+  const isGroupEnabled = groupConfigData?.enabled || false;
 
   const unit_time = form.watch("unit_time");
   const node_group_id = form.watch("node_group_id");
@@ -346,11 +332,7 @@ 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 (
+    if ((!node_group_id || node_group_id === "0") && node_group_ids && node_group_ids.length > 0) {
-      (!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]);
@@ -1048,16 +1030,11 @@ export default function SubscribeForm<T extends Record<string, any>>({
                                   const nodesWithTag = getNodesByTag(tag);
 
                                   return (
-                                    <AccordionItem
+                                    <AccordionItem key={tag} value={String(tag)}>
-                                      key={tag}
-                                      value={String(tag)}
-                                    >
                                       <AccordionTrigger>
                                         <div className="flex items-center gap-2">
                                           <Checkbox
-                                            checked={value.includes(
+                                            checked={value.includes(tagId as any)}
-                                              tagId as any
-                                            )}
                                             onCheckedChange={(checked) =>
                                               checked
                                                 ? form.setValue(field.name, [
@@ -1121,10 +1098,7 @@ 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
+                              {(isGroupEnabled ? getNodesWithoutGroups() : getNodesWithoutTags()).map((item: API.Node) => {
-                                ? getNodesWithoutGroups()
-                                : getNodesWithoutTags()
-                              ).map((item: API.Node) => {
                                 const value = field.value || [];
 
                                 return (
@@ -1167,14 +1141,9 @@ export default function SubscribeForm<T extends Record<string, any>>({
                           </FormControl>
                           <FormDescription>
                             {isGroupEnabled
-                              ? t(
+                              ? t("form.nodesWithoutGroupsDescription", "Nodes without group assignment will be shown here (nodes that belong to groups are managed in the Node Groups section above)")
-                                  "form.nodesWithoutGroupsDescription",
+                              : t("form.nodesDescription", "Select nodes for this subscription")
-                                  "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>
@@ -1185,325 +1154,70 @@ 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.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
-                                              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-backup-node-group-${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
-                                                  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")})
-                                                  </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}
-                                                        >
-                                                          <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>
+                                <FormLabel>{t("form.nodeGroups", "Node Groups")}</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(
+                                      const nodesInGroup = (nodes || []).filter((node) => {
-                                        (node) => {
+                                        const nodeGroupIds = (node as any).node_group_ids || [];
-                                          const nodeGroupIds =
+                                        return nodeGroupIds.includes(g.id);
-                                            (node as any).node_group_ids || [];
+                                      });
-                                          return nodeGroupIds.includes(g.id);
-                                        }
-                                      );
 
                                       return (
-                                        <div
+                                        <div key={g.id} className="border rounded-lg p-4">
-                                          className="rounded-lg border p-4"
+                                          <div className="flex items-center space-x-2 mb-3">
-                                          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}`}
+                                              checked={field.value?.includes(String(g.id))}
                                               onCheckedChange={(checked) => {
-                                                const currentValue =
+                                                const currentValue = field.value || [];
-                                                  field.value || [];
+                                                const currentDefaultGroupId = form.getValues("node_group_id");
-                                                const currentDefaultGroupId =
-                                                  form.getValues(
-                                                    "node_group_id"
-                                                  );
 
                                                 if (checked) {
-                                                  const newValue = [
+                                                  const newValue = [...currentValue, String(g.id)];
-                                                    ...currentValue,
+                                                  form.setValue(field.name, newValue);
-                                                    String(g.id),
-                                                  ];
-                                                  form.setValue(
-                                                    field.name,
-                                                    newValue
-                                                  );
 
                                                   // If no default node group is set, set this one as default
                                                   if (!currentDefaultGroupId) {
-                                                    form.setValue(
+                                                    form.setValue("node_group_id", String(g.id));
-                                                      "node_group_id",
-                                                      String(g.id)
-                                                    );
                                                   }
                                                 } else {
                                                   form.setValue(
                                                     field.name,
-                                                    currentValue.filter(
+                                                    currentValue.filter((v: string) => v !== String(g.id))
-                                                      (v: string) =>
-                                                        v !== String(g.id)
-                                                    )
                                                   );
                                                 }
                                               }}
                                             />
                                             <Label
-                                              className="cursor-pointer font-medium"
                                               htmlFor={`subscribe-node-group-${g.id}`}
+                                              className="cursor-pointer font-medium"
                                             >
                                               {g.name}
                                               <span className="ml-2 text-muted-foreground text-sm">
-                                                ({nodesInGroup.length}{" "}
+                                                ({nodesInGroup.length} {t("form.nodes", "nodes")})
-                                                {t("form.nodes", "nodes")})
                                               </span>
                                             </Label>
                                           </div>
 
                                           {/* Show nodes in this group */}
                                           {nodesInGroup.length > 0 && (
-                                            <div className="mt-3 ml-6">
+                                            <div className="ml-6 mt-3">
-                                              <div className="mb-2 text-muted-foreground text-xs">
+                                              <div className="text-xs text-muted-foreground mb-2">
-                                                {t(
+                                                {t("form.nodesInGroup", "Nodes in this group:")}
-                                                  "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}
@@ -1534,6 +1248,169 @@ 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>
+                              )}
+                            />
+                          </>
                         )}
                       </>
                     )}
@@ -1548,111 +1425,68 @@ export default function SubscribeForm<T extends Record<string, any>>({
                       name="traffic_limit"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>
+                          <FormLabel>{t("form.trafficLimitRules", "Traffic Limit Rules")}</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(
+                                  placeholder: t("form.statType", "Statistics Type"),
-                                    "form.statType",
-                                    "Statistics Type"
-                                  ),
                                   value: "day",
                                   options: [
-                                    {
+                                    { label: t("form.statTypeHour", "Hour"), value: "hour" },
-                                      label: t("form.statTypeHour", "Hour"),
+                                    { label: t("form.statTypeDay", "Day"), value: "day" },
-                                      value: "hour",
-                                    },
-                                    {
-                                      label: t("form.statTypeDay", "Day"),
-                                      value: "day",
-                                    },
                                   ],
                                 },
                                 {
                                   name: "stat_value",
                                   type: "number",
-                                  placeholder: t(
+                                  placeholder: t("form.statValue", "Time Value"),
-                                    "form.statValue",
-                                    "Time Value"
-                                  ),
                                   min: 1,
-                                  onKeyDown: (
+                                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
-                                    e: React.KeyboardEvent<HTMLInputElement>
+                                    if (e.key === '.' || e.key === ',') {
-                                  ) => {
-                                    if (e.key === "." || e.key === ",") {
                                       e.preventDefault();
                                     }
                                   },
                                   formatOutput: (value: string | number) => {
                                     const num = Number(value);
-                                    return String(
+                                    return isNaN(num) ? 0 : Math.floor(num);
-                                      Number.isNaN(num) ? 0 : Math.floor(num)
-                                    );
                                   },
                                 },
                                 {
                                   name: "traffic_usage",
                                   type: "number",
-                                  placeholder: t(
+                                  placeholder: t("form.trafficUsage", "Traffic Usage (GB)"),
-                                    "form.trafficUsage",
-                                    "Traffic Usage (GB)"
-                                  ),
                                   min: 0,
-                                  onKeyDown: (
+                                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
-                                    e: React.KeyboardEvent<HTMLInputElement>
+                                    if (e.key === '.' || e.key === ',') {
-                                  ) => {
-                                    if (e.key === "." || e.key === ",") {
                                       e.preventDefault();
                                     }
                                   },
                                   formatOutput: (value: string | number) => {
                                     const num = Number(value);
-                                    return String(
+                                    return isNaN(num) ? 0 : Math.floor(num);
-                                      Number.isNaN(num) ? 0 : Math.floor(num)
-                                    );
                                   },
                                 },
                                 {
                                   name: "speed_limit",
                                   type: "number",
-                                  placeholder: t(
+                                  placeholder: t("form.speedLimitKb", "Speed Limit (kb)"),
-                                    "form.speedLimitKb",
-                                    "Speed Limit (kb)"
-                                  ),
                                   min: 0,
-                                  onKeyDown: (
+                                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
-                                    e: React.KeyboardEvent<HTMLInputElement>
+                                    if (e.key === '.' || e.key === ',') {
-                                  ) => {
-                                    if (e.key === "." || e.key === ",") {
                                       e.preventDefault();
                                     }
                                   },
                                   formatOutput: (value: string | number) => {
                                     const num = Number(value);
-                                    return String(
+                                    return isNaN(num) ? 0 : Math.floor(num);
-                                      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,6 +1,5 @@
 "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";
@@ -9,7 +8,6 @@ import {
   ProTable,
   type ProTableActions,
 } from "@workspace/ui/composed/pro-table/pro-table";
-import { getNodeGroupList } from "@workspace/ui/services/admin/group";
 import {
   batchDeleteSubscribe,
   createSubscribe,
@@ -18,6 +16,8 @@ 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,20 +46,15 @@ export default function SubscribeTable() {
   const { data: groupConfigData } = useQuery({
     queryKey: ["groupConfig"],
     queryFn: async () => {
-      const { data } = await (
+      const { data } = await (await import("@workspace/ui/services/admin/group")).getGroupConfig();
-        await import("@workspace/ui/services/admin/group")
-      ).getGroupConfig();
       return data.data;
     },
   });
 
-  const isGroupEnabled = groupConfigData?.enabled;
+  const isGroupEnabled = groupConfigData?.enabled || false;
 
   return (
-    <ProTable<
+    <ProTable<API.SubscribeItem, { group_id: number; query: string; node_group_id?: number }>
-      API.SubscribeItem,
-      { group_id: number; query: string; node_group_id?: number }
-    >
       action={ref}
       actions={{
         render: (row) => [
@@ -77,9 +72,7 @@ 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(
+                  updateBody.node_group_ids = vals.node_group_ids.map((id: string | number) => Number(id));
-                    (id: string | number) => Number(id)
-                  );
                 }
                 await updateSubscribe(updateBody as API.UpdateSubscribeRequest);
                 toast.success(t("updateSuccess"));
@@ -248,12 +241,10 @@ export default function SubscribeTable() {
           header: t("inventory"),
           cell: ({ row }) => {
             const inventory = row.getValue("inventory") as number;
-            return (
+            return inventory === -1 ? (
-              <Display
+              <Display type="number" unlimited value={0} />
-                type="number"
+            ) : (
-                unlimited={inventory === -1}
+              <Display type="number" unlimited value={inventory} />
-                value={inventory === -1 ? 0 : inventory}
-              />
             );
           },
         },
@@ -290,9 +281,7 @@ 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(
+                  const nodeGroup = nodeGroupsData?.find((g) => g.id === nodeGroupId);
-                    (g) => g.id === nodeGroupId
-                  );
 
                   return (
                     <div>
@@ -321,9 +310,7 @@ 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(
+                  createBody.node_group_ids = vals.node_group_ids.map((id: string | number) => Number(id));
-                    (id: string | number) => Number(id)
-                  );
                 }
                 await createSubscribe(createBody);
                 toast.success(t("createSuccess"));
@@ -402,9 +389,7 @@ export default function SubscribeTable() {
         const params = {
           ...pagination,
           ...filters,
-          node_group_id: filters?.node_group_id
+          node_group_id: filters?.node_group_id ? Number(filters.node_group_id) : undefined,
-            ? Number(filters.node_group_id)
-            : undefined,
         } as any;
 
         const { data } = await getSubscribeList(params);

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

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

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

@@ -261,11 +261,6 @@ export function FamilyDetailSheet({
                               <Badge variant="outline">
                                 ID: {member.user_id}
                               </Badge>
-                              {member.auth_type ? (
-                                <Badge className="uppercase">
-                                  {member.auth_type}
-                                </Badge>
-                              ) : null}
                               {member.device_no ? (
                                 <Badge variant="outline">
                                   <span className="font-mono">
@@ -273,16 +268,7 @@ export function FamilyDetailSheet({
                                   </span>
                                 </Badge>
                               ) : null}
-                              {member.device_type ? (
+                              <span>{member.identifier}</span>
-                                <Badge variant="secondary">
-                                  {member.device_type}
-                                </Badge>
-                              ) : null}
-                              <span>
-                                {member.auth_type === "device"
-                                  ? member.device_no || member.identifier
-                                  : member.identifier}
-                              </span>
                               <Badge>
                                 {getFamilyRoleLabel(t, member.role_name)}
                               </Badge>

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

@@ -54,19 +54,8 @@ export default function FamilyManagement({
         {
           accessorKey: "owner_identifier",
           header: t("owner", "Owner"),
-          cell: ({ row }) => (
+          cell: ({ row }) =>
-            <div className="flex items-center gap-1">
+            `${row.original.owner_identifier} (ID: ${row.original.owner_user_id})`,
-              {row.original.owner_auth_type ? (
-                <Badge className="uppercase">
-                  {row.original.owner_auth_type}
-                </Badge>
-              ) : null}
-              <span>{row.original.owner_identifier}</span>
-              <span className="text-muted-foreground text-xs">
-                (ID: {row.original.owner_user_id})
-              </span>
-            </div>
-          ),
         },
         {
           accessorKey: "status",

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

@@ -44,10 +44,6 @@ import {
   ProTable,
   type ProTableActions,
 } from "@workspace/ui/composed/pro-table/pro-table";
-import {
-  // getUserGroupList,
-  previewUserNodes,
-} from "@workspace/ui/services/admin/group";
 import {
   createUser,
   deleteUser,
@@ -55,6 +51,10 @@ 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";
@@ -89,21 +89,6 @@ export default function User() {
     ref.current?.refresh();
   }, []);
 
-  const buildSearchParams = () => {
-    const { type, value } = searchRef.current;
-    if (!value) return {};
-    switch (type) {
-      case "user_id":
-        return { user_id: Number(value) };
-      case "device":
-        return { search: value };
-      case "subscribe_id":
-        return { subscribe_id: Number(value) };
-      default:
-        return { search: value };
-    }
-  };
-
   // const { data: userGroupsData } = useQuery({
   //   queryKey: ["userGroups"],
   //   queryFn: async () => {
@@ -163,30 +148,42 @@ export default function User() {
             <DropdownMenuContent align="end">
               <InviteStatsMenuItem userId={row.id} />
               <DropdownMenuItem asChild>
-                <Link search={{ user_id: row.id }} to="/dashboard/order">
+                <Link
+                  search={{ user_id: String(row.id) }}
+                  to="/dashboard/order"
+                >
                   {t("orderList", "Order List")}
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link search={{ user_id: row.id }} to="/dashboard/log/login">
+                <Link
+                  search={{ user_id: String(row.id) }}
+                  to="/dashboard/log/login"
+                >
                   {t("loginLogs", "Login Logs")}
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link search={{ user_id: row.id }} to="/dashboard/log/balance">
+                <Link
+                  search={{ user_id: String(row.id) }}
+                  to="/dashboard/log/balance"
+                >
                   {t("balanceLogs", "Balance Logs")}
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
                 <Link
-                  search={{ user_id: row.id }}
+                  search={{ user_id: String(row.id) }}
                   to="/dashboard/log/commission"
                 >
                   {t("commissionLogs", "Commission Logs")}
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link search={{ user_id: row.id }} to="/dashboard/log/gift">
+                <Link
+                  search={{ user_id: String(row.id) }}
+                  to="/dashboard/log/gift"
+                >
                   {t("giftLogs", "Gift Logs")}
                 </Link>
               </DropdownMenuItem>
@@ -345,10 +342,39 @@ export default function User() {
       }}
       initialFilters={initialFilters}
       key={initialFilters.user_id}
-      request={async (pagination) => {
+      params={[
+        {
+          key: "subscribe_id",
+          placeholder: t("subscription", "Subscription"),
+          options: [
+            { label: t("all", "All"), value: "" },
+            ...(subscribes?.map((item) => ({
+              label: item.name!,
+              value: String(item.id!),
+            })) || []),
+          ],
+        },
+        {
+          key: "search",
+          placeholder: "Search",
+        },
+        {
+          key: "user_id",
+          placeholder: t("userId", "User ID"),
+        },
+        {
+          key: "user_subscribe_id",
+          placeholder: t("subscriptionId", "Subscription ID"),
+        },
+        {
+          key: "short_code",
+          placeholder: t("shortCode", "Short Code"),
+        },
+      ]}
+      request={async (pagination, filter) => {
         const { data } = await getUserList({
           ...pagination,
-          ...buildSearchParams(),
+          ...filter,
         });
         return {
           list: data.data?.list || [],
@@ -613,19 +639,16 @@ function PreviewNodesDialog({ userId }: { userId: number }) {
         ) : previewData ? (
           <div className="space-y-4">
             <div>
-              <span className="font-medium text-muted-foreground text-sm">
+              <span className="text-sm font-medium text-muted-foreground">
                 {t("availableNodes", "Available Nodes")}:
               </span>{" "}
-              {previewData.node_groups?.reduce(
+              {previewData.node_groups?.reduce((sum, group) => sum + (group.nodes?.length || 0), 0) || 0}
-                (sum, group) => sum + (group.nodes?.length || 0),
-                0
-              ) || 0}
             </div>
             {previewData.node_groups && previewData.node_groups.length > 0 ? (
-              <div className="max-h-[400px] space-y-4 overflow-y-auto">
+              <div className="max-h-[400px] overflow-y-auto space-y-4">
                 {previewData.node_groups.map((group) => (
                   <div key={group.id}>
-                    <h4 className="mb-2 font-semibold text-sm">
+                    <h4 className="text-sm font-semibold mb-2">
                       {group.name ||
                         (group.id === -1
                           ? t("subscriptionNodes", "Subscription Nodes")
@@ -638,22 +661,16 @@ 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">
+                            <th className="p-2 text-left font-medium">{t("name", "Name")}</th>
-                              {t("name", "Name")}
+                            <th className="p-2 text-left font-medium">{t("address", "Address")}</th>
-                            </th>
-                            <th className="p-2 text-left font-medium">
-                              {t("address", "Address")}
-                            </th>
                           </tr>
                         </thead>
                         <tbody>
                           {group.nodes.map((node) => (
-                            <tr className="border-b" key={node.id}>
+                            <tr key={node.id} className="border-b">
                               <td className="p-2">{node.id}</td>
                               <td className="p-2">{node.name}</td>
-                              <td className="p-2">
+                              <td className="p-2">{node.address}:{node.port}</td>
-                                {node.address}:{node.port}
-                              </td>
                             </tr>
                           ))}
                         </tbody>

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

@@ -12,6 +12,7 @@ import {
   getUserDetail,
   getUserSubscribeById,
 } from "@workspace/ui/services/admin/user";
+import { shortenDeviceIdentifier } from "@workspace/ui/utils/device";
 import { formatBytes } from "@workspace/ui/utils/formatting";
 import { useTranslation } from "react-i18next";
 import { Display } from "@/components/display";
@@ -102,9 +103,7 @@ export function UserSubscribeDetail({
               </span>
             </li>
             <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">
+              <span className="text-muted-foreground">{t("remainingTraffic")}</span>
-                {t("remainingTraffic")}
-              </span>
               <span>
                 {data
                   ? totalTraffic === 0
@@ -229,29 +228,21 @@ export function UserDetail({ id }: { id: number }) {
 
   if (!id) return "--";
 
+  const emailMethod = data?.auth_methods.find((m) => m.auth_type === "email");
   const firstMethod = data?.auth_methods[0];
-  const isDevice = firstMethod?.auth_type === "device";
+  const rawIdentifier =
-  const deviceNo = (data as any)?.user_devices?.[0]?.device_no;
+    emailMethod?.auth_identifier || firstMethod?.auth_identifier || "";
-  const rawIdentifier = firstMethod?.auth_identifier || "";
+  const isDevice = !emailMethod && firstMethod?.auth_type === "device";
-  const identifier = isDevice ? deviceNo || rawIdentifier : rawIdentifier;
+  const identifier = isDevice
+    ? shortenDeviceIdentifier(rawIdentifier)
+    : rawIdentifier;
 
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
         <Button asChild className="p-0" variant="link">
           <Link search={{ user_id: id }} to="/dashboard/user">
-            {data ? (
+            {identifier || t("loading", "Loading...")}
-              <>
-                {firstMethod && (
-                  <span className="mr-1 inline-flex items-center rounded border px-1 py-0.5 font-mono text-xs uppercase">
-                    {firstMethod.auth_type}
-                  </span>
-                )}
-                {identifier}
-              </>
-            ) : (
-              t("loading", "Loading...")
-            )}
           </Link>
         </Button>
       </HoverCardTrigger>

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

@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
 import { Alert, AlertDescription } from "@workspace/ui/components/alert";
 import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
@@ -42,7 +42,6 @@ export default function UserSubscription({ userId }: { userId: number }) {
   const [loading, setLoading] = useState(false);
   const ref = useRef<ProTableActions>(null);
   const [sharedInfo, setSharedInfo] = useState<SharedInfo | null>(null);
-  const navigate = useNavigate();
 
   const request = useCallback(
     async (pagination: { page: number; size: number }) => {
@@ -117,23 +116,19 @@ export default function UserSubscription({ userId }: { userId: number }) {
             <span className="flex gap-2">
               <Button asChild size="sm" variant="outline">
                 <Link
-                  search={{ user_id: sharedInfo.ownerUserId }}
+                  search={{ user_id: String(sharedInfo.ownerUserId) }}
                   to="/dashboard/family"
                 >
                   {t("viewDeviceGroup", "View Device Group")}
                 </Link>
               </Button>
-              <Button
+              <Button asChild size="sm" variant="outline">
-                onClick={() => {
+                <Link
-                  navigate({
+                  search={{ user_id: String(sharedInfo.ownerUserId) }}
-                    to: "/dashboard/user",
+                  to="/dashboard/user"
-                    search: { user_id: sharedInfo.ownerUserId },
+                >
-                  });
+                  {t("viewOwner", "View Owner")}
-                }}
+                </Link>
-                size="sm"
-                variant="outline"
-              >
-                {t("viewOwner", "View Owner")}
               </Button>
             </span>
           </AlertDescription>
@@ -285,8 +280,7 @@ 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 =
+              const remainingTraffic = totalTraffic > 0 ? totalTraffic - upload - download : 0;
-                totalTraffic > 0 ? totalTraffic - upload - download : 0;
               return (
                 <Display type="traffic" unlimited value={remainingTraffic} />
               );
@@ -451,7 +445,7 @@ function RowReadOnlyActions({
           "This action cannot be undone."
         )}
         onConfirm={async () => {
-          await deleteUserSubscribe({ user_subscribe_id: String(row.id) });
+          await deleteUserSubscribe({ user_subscribe_id: row.id });
           toast.success(t("deleteSuccess", "Deleted successfully"));
           refresh?.();
         }}

apps/admin/src/utils/common.ts

@@ -29,10 +29,13 @@ 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" && date < 10_000_000_000) {
+  if (typeof date === "number") {
-    dateValue = date * 1000;
+    if (date < 10000000000) {
+      dateValue = date * 1000;
+    }
   }
 
+
   const timeZone = localStorage.getItem("timezone") || "UTC";
   return intlFormat(dateValue, {
     year: "numeric",

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

@@ -6,21 +6,7 @@
     "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,21 +6,7 @@
     "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,10 +15,9 @@ 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,
@@ -40,7 +39,6 @@ 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,26 +52,14 @@ 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: {
+    defaultValues: initialValues,
-      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
@@ -84,7 +70,6 @@ export default function LoginForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -99,10 +84,7 @@ export default function LoginForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t(
+                    placeholder={t("login.emailPlaceholder", "Enter your email...")}
-                      "login.emailPlaceholder",
-                      "Enter your email..."
-                    )}
                     type="email"
                     {...field}
                   />
@@ -118,10 +100,7 @@ export default function LoginForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t(
+                    placeholder={t("login.passwordPlaceholder", "Enter your password...")}
-                      "login.passwordPlaceholder",
-                      "Enter your password..."
-                    )}
                     type="password"
                     {...field}
                   />
@@ -157,8 +136,8 @@ export default function LoginForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      onCaptchaIdChange={setCaptchaId}
                       ref={localCaptcha}
+                      onCaptchaIdChange={setCaptchaId}
                     />
                   </FormControl>
                   <FormMessage />
@@ -166,20 +145,6 @@ 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,11 +16,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 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,
@@ -42,7 +41,6 @@ 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) => {
@@ -80,16 +78,8 @@ export default function RegisterForm({
           : z.string().nullish(),
       captcha_code:
         captchaEnabled && isLocal
-          ? z
+          ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
-              .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) {
@@ -104,9 +94,6 @@ 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") || "",
     },
@@ -114,7 +101,6 @@ 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
@@ -125,7 +111,6 @@ export default function RegisterForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -145,10 +130,7 @@ export default function RegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      placeholder={t(
+                      placeholder={t("register.emailPlaceholder", "Enter your email...")}
-                        "register.emailPlaceholder",
-                        "Enter your email..."
-                      )}
                       type="email"
                       {...field}
                     />
@@ -164,10 +146,7 @@ export default function RegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      placeholder={t(
+                      placeholder={t("register.passwordPlaceholder", "Enter your password...")}
-                        "register.passwordPlaceholder",
-                        "Enter your password..."
-                      )}
                       type="password"
                       {...field}
                     />
@@ -184,10 +163,7 @@ export default function RegisterForm({
                   <FormControl>
                     <Input
                       disabled={loading}
-                      placeholder={t(
+                      placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
-                        "register.repeatPasswordPlaceholder",
-                        "Enter password again..."
-                      )}
                       type="password"
                       {...field}
                     />
@@ -206,10 +182,7 @@ export default function RegisterForm({
                       <div className="flex items-center gap-2">
                         <Input
                           disabled={loading}
-                          placeholder={t(
+                          placeholder={t("register.codePlaceholder", "Enter code...")}
-                            "register.codePlaceholder",
-                            "Enter code..."
-                          )}
                           type="text"
                           {...field}
                           value={field.value as string}
@@ -275,8 +248,8 @@ export default function RegisterForm({
                     <FormControl>
                       <LocalCaptcha
                         {...field}
-                        onCaptchaIdChange={setCaptchaId}
                         ref={localCaptcha}
+                        onCaptchaIdChange={setCaptchaId}
                       />
                     </FormControl>
                     <FormMessage />
@@ -284,20 +257,6 @@ 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,11 +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 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,
@@ -42,7 +41,6 @@ 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({
@@ -59,26 +57,14 @@ 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: {
+    defaultValues: initialValues,
-      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
@@ -89,7 +75,6 @@ export default function ResetForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -104,10 +89,7 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t(
+                    placeholder={t("reset.emailPlaceholder", "Enter your email...")}
-                      "reset.emailPlaceholder",
-                      "Enter your email..."
-                    )}
                     type="email"
                     {...field}
                   />
@@ -150,10 +132,7 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t(
+                    placeholder={t("reset.passwordPlaceholder", "Enter your new password...")}
-                      "reset.passwordPlaceholder",
-                      "Enter your new password..."
-                    )}
                     type="password"
                     {...field}
                   />
@@ -189,8 +168,8 @@ export default function ResetForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      onCaptchaIdChange={setCaptchaId}
                       ref={localCaptcha}
+                      onCaptchaIdChange={setCaptchaId}
                     />
                   </FormControl>
                   <FormMessage />
@@ -198,20 +177,6 @@ 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 { useEffect, useImperativeHandle, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface LocalCaptchaRef {
@@ -15,85 +15,80 @@ interface LocalCaptchaProps {
   onCaptchaIdChange?: (id: string) => void;
 }
 
-const LocalCaptcha = ({
+const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
-  value,
+  ({ value, onChange, onCaptchaIdChange }, ref) => {
-  onChange,
+    const { t } = useTranslation("auth");
-  onCaptchaIdChange,
+    const [captchaImage, setCaptchaImage] = useState("");
-  ref,
+    const [loading, setLoading] = useState(false);
-}: LocalCaptchaProps & { ref?: RefObject<LocalCaptchaRef | null> }) => {
-  const { t } = useTranslation("auth");
-  const [captchaImage, setCaptchaImage] = useState("");
-  const [loading, setLoading] = useState(false);
 
-  const fetchCaptcha = async () => {
+    const fetchCaptcha = async () => {
-    setLoading(true);
+      setLoading(true);
-    try {
+      try {
-      const res = await generateCaptcha();
+        const res = await generateCaptcha();
-      const captchaData = res.data?.data;
+        const captchaData = res.data?.data;
-      if (captchaData) {
+        if (captchaData) {
-        setCaptchaImage(captchaData.image);
+          setCaptchaImage(captchaData.image);
-        onCaptchaIdChange?.(captchaData.id);
+          onCaptchaIdChange?.(captchaData.id);
+        }
+      } catch (error) {
+        console.error("Failed to generate captcha:", error);
+      } finally {
+        setLoading(false);
       }
-    } catch (error) {
+    };
-      console.error("Failed to generate captcha:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
 
-  useEffect(() => {
+    useEffect(() => {
-    fetchCaptcha();
-  }, []);
-
-  useImperativeHandle(ref, () => ({
-    reset: () => {
-      onChange?.("");
       fetchCaptcha();
-    },
+    }, []);
-  }));
 
-  return (
+    useImperativeHandle(ref, () => ({
-    <div className="flex gap-2">
+      reset: () => {
-      <Input
+        onChange?.("");
-        className="flex-1"
+        fetchCaptcha();
-        onChange={(e) => onChange?.(e.target.value)}
+      },
-        placeholder={t("captcha.placeholder", "Enter captcha code...")}
+    }));
-        value={value || ""}
+
-      />
+    return (
-      <div className="relative h-10 w-32 flex-shrink-0">
+      <div className="flex gap-2">
-        {loading ? (
+        <Input
-          <div className="flex h-full items-center justify-center bg-muted">
+          placeholder={t("captcha.placeholder", "Enter captcha code...")}
-            <Icon className="animate-spin" icon="mdi:loading" />
+          value={value || ""}
-          </div>
+          onChange={(e) => onChange?.(e.target.value)}
-        ) : captchaImage ? (
+          className="flex-1"
-          <img
+        />
-            alt="captcha"
+        <div className="relative h-10 w-32 flex-shrink-0">
-            className="h-full w-full cursor-pointer object-contain"
+          {loading ? (
-            height={40}
+            <div className="flex h-full items-center justify-center bg-muted">
-            onClick={fetchCaptcha}
+              <Icon className="animate-spin" icon="mdi:loading" />
-            src={captchaImage}
+            </div>
-            title={t("captcha.clickToRefresh", "Click to refresh")}
+          ) : captchaImage ? (
-            width={120}
+            <img
-          />
+              src={captchaImage}
-        ) : (
+              alt="captcha"
-          <div className="flex h-full items-center justify-center bg-muted text-muted-foreground text-xs">
+              className="h-full w-full cursor-pointer object-contain"
-            {t("captcha.noImage", "No Image")}
+              onClick={fetchCaptcha}
-          </div>
+              title={t("captcha.clickToRefresh", "Click to refresh")}
-        )}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center bg-muted text-xs text-muted-foreground">
+              {t("captcha.noImage", "No Image")}
+            </div>
+          )}
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          onClick={fetchCaptcha}
+          disabled={loading}
+          title={t("captcha.refresh", "Refresh captcha")}
+        >
+          <Icon icon="mdi:refresh" />
+        </Button>
       </div>
-      <Button
+    );
-        disabled={loading}
+  }
-        onClick={fetchCaptcha}
+);
-        size="icon"
-        title={t("captcha.refresh", "Refresh captcha")}
-        type="button"
-        variant="outline"
-      >
-        <Icon icon="mdi:refresh" />
-      </Button>
-    </div>
-  );
-};
 
 LocalCaptcha.displayName = "LocalCaptcha";
 

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

@@ -16,11 +16,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 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,
@@ -40,7 +39,6 @@ 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({
@@ -56,28 +54,16 @@ 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: {
+    defaultValues: initialValues,
-      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
@@ -88,7 +74,6 @@ export default function LoginForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -119,10 +104,7 @@ export default function LoginForm({
                                   );
                                 }
                               }}
-                              placeholder={t(
+                              placeholder={t("register.areaCodePlaceholder", "Area code...")}
-                                "register.areaCodePlaceholder",
-                                "Area code..."
-                              )}
                               simple
                               value={field.value}
                             />
@@ -133,10 +115,7 @@ export default function LoginForm({
                     />
                     <Input
                       className="rounded-l-none"
-                      placeholder={t(
+                      placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
-                        "register.telephonePlaceholder",
-                        "Enter your telephone..."
-                      )}
                       type="tel"
                       {...field}
                     />
@@ -158,10 +137,7 @@ export default function LoginForm({
                       placeholder={
                         mode === "code"
                           ? t("register.codePlaceholder", "Enter code...")
-                          : t(
+                          : t("login.passwordPlaceholder", "Enter your password...")
-                              "login.passwordPlaceholder",
-                              "Enter your password..."
-                            )
                       }
                       type={mode === "code" ? "text" : "password"}
                       {...field}
@@ -226,8 +202,8 @@ export default function LoginForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      onCaptchaIdChange={setCaptchaId}
                       ref={localCaptcha}
+                      onCaptchaIdChange={setCaptchaId}
                     />
                   </FormControl>
                   <FormMessage />
@@ -235,20 +211,6 @@ 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,11 +17,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 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,
@@ -42,7 +41,6 @@ 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
@@ -59,16 +57,8 @@ export default function RegisterForm({
           : z.string().nullish(),
       captcha_code:
         captchaEnabled && isLocal
-          ? z
+          ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
-              .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) {
@@ -83,9 +73,6 @@ 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") || "",
@@ -94,7 +81,6 @@ 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
@@ -105,7 +91,6 @@ export default function RegisterForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -141,10 +126,7 @@ export default function RegisterForm({
                                     );
                                   }
                                 }}
-                                placeholder={t(
+                                placeholder={t("register.areaCodePlaceholder", "Area code...")}
-                                  "register.areaCodePlaceholder",
-                                  "Area code..."
-                                )}
                                 simple
                                 value={field.value}
                                 whitelist={enable_whitelist ? whitelist : []}
@@ -156,10 +138,7 @@ export default function RegisterForm({
                       />
                       <Input
                         className="rounded-l-none"
-                        placeholder={t(
+                        placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
-                          "register.telephonePlaceholder",
-                          "Enter your telephone..."
-                        )}
                         type="tel"
                         {...field}
                       />
@@ -176,10 +155,7 @@ export default function RegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      placeholder={t(
+                      placeholder={t("register.passwordPlaceholder", "Enter your password...")}
-                        "register.passwordPlaceholder",
-                        "Enter your password..."
-                      )}
                       type="password"
                       {...field}
                     />
@@ -196,10 +172,7 @@ export default function RegisterForm({
                   <FormControl>
                     <Input
                       disabled={loading}
-                      placeholder={t(
+                      placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
-                        "register.repeatPasswordPlaceholder",
-                        "Enter password again..."
-                      )}
                       type="password"
                       {...field}
                     />
@@ -217,10 +190,7 @@ export default function RegisterForm({
                     <div className="flex items-center gap-2">
                       <Input
                         disabled={loading}
-                        placeholder={t(
+                        placeholder={t("register.codePlaceholder", "Enter code...")}
-                          "register.codePlaceholder",
-                          "Enter code..."
-                        )}
                         type="text"
                         {...field}
                         value={field.value as string}
@@ -289,8 +259,8 @@ export default function RegisterForm({
                     <FormControl>
                       <LocalCaptcha
                         {...field}
-                        onCaptchaIdChange={setCaptchaId}
                         ref={localCaptcha}
+                        onCaptchaIdChange={setCaptchaId}
                       />
                     </FormControl>
                     <FormMessage />
@@ -298,20 +268,6 @@ 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,11 +16,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 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,
@@ -42,7 +41,6 @@ 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({
@@ -58,26 +56,14 @@ 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: {
+    defaultValues: initialValues,
-      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
@@ -88,7 +74,6 @@ export default function ResetForm({
     } catch (_error) {
       turnstile.current?.reset();
       localCaptcha.current?.reset();
-      sliderCaptcha.current?.reset();
     }
   });
 
@@ -119,10 +104,7 @@ export default function ResetForm({
                                   );
                                 }
                               }}
-                              placeholder={t(
+                              placeholder={t("register.areaCodePlaceholder", "Area code...")}
-                                "register.areaCodePlaceholder",
-                                "Area code..."
-                              )}
                               simple
                               value={field.value}
                             />
@@ -133,10 +115,7 @@ export default function ResetForm({
                     />
                     <Input
                       className="rounded-l-none"
-                      placeholder={t(
+                      placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
-                        "register.telephonePlaceholder",
-                        "Enter your telephone..."
-                      )}
                       type="tel"
                       {...field}
                     />
@@ -154,10 +133,7 @@ export default function ResetForm({
                 <FormControl>
                   <div className="flex items-center gap-2">
                     <Input
-                      placeholder={t(
+                      placeholder={t("register.codePlaceholder", "Enter code...")}
-                        "register.codePlaceholder",
-                        "Enter code..."
-                      )}
                       type="text"
                       {...field}
                       value={field.value as string}
@@ -183,10 +159,7 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t(
+                    placeholder={t("reset.passwordPlaceholder", "Enter your new password...")}
-                      "reset.passwordPlaceholder",
-                      "Enter your new password..."
-                    )}
                     type="password"
                     {...field}
                   />
@@ -222,8 +195,8 @@ export default function ResetForm({
                   <FormControl>
                     <LocalCaptcha
                       {...field}
-                      onCaptchaIdChange={setCaptchaId}
                       ref={localCaptcha}
+                      onCaptchaIdChange={setCaptchaId}
                     />
                   </FormControl>
                   <FormMessage />
@@ -231,20 +204,6 @@ 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

@@ -1,355 +0,0 @@
-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,20 +1,7 @@
 "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 {
+import { type RefObject, useEffect, useImperativeHandle } from "react";
-  type RefObject,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from "react";
 import { useTranslation } from "react-i18next";
 import Turnstile, { useTurnstile } from "react-turnstile";
 import { useGlobalStore } from "@/stores/global";
@@ -37,119 +24,47 @@ const CloudFlareTurnstile = function CloudFlareTurnstile({
   const { common } = useGlobalStore();
   const { verify } = common;
   const { resolvedTheme } = useTheme();
-  const { i18n, t } = useTranslation("auth");
+  const { i18n } = useTranslation();
   const locale = i18n.language;
   const turnstile = useTurnstile();
-  const [open, setOpen] = useState(false);
-  const [verified, setVerified] = useState(false);
 
   useImperativeHandle(
     ref,
     () => ({
-      reset: () => {
+      reset: () => turnstile.reset(),
-        setVerified(false);
-        onChange("");
-        turnstile.reset();
-      },
     }),
-    [turnstile, onChange]
+    [turnstile]
   );
 
   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 */}
+      <Turnstile
-      <button
+        fixedSize
-        className={`relative flex w-full items-center gap-3 rounded-md border px-4 py-3 text-sm transition-colors ${
+        id={id}
-          verified
+        language={locale.toLowerCase()}
-            ? "border-green-400 bg-green-50 text-green-700 dark:bg-green-950/30"
+        onExpire={() => {
-            : "border-input bg-background hover:bg-muted"
+          onChange();
-        }`}
+          turnstile.reset();
-        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}
+        onTimeout={() => {
-      >
+          onChange();
-        <DialogContent className="flex w-auto flex-col items-center gap-4 p-6">
+          turnstile.reset();
-          <DialogHeader>
+        }}
-            <DialogTitle>
+        onVerify={(token) => onChange(token)}
-              {t("captcha.turnstile.title", "Security Verification")}
+        // onError={() => {
-            </DialogTitle>
+        //   onChange();
-          </DialogHeader>
+        //   turnstile.reset();
-          <Turnstile
+        // }}
-            fixedSize
+        sitekey={verify.turnstile_site_key}
-            id={id}
+        theme={resolvedTheme as "light" | "dark"}
-            language={locale.toLowerCase()}
+      />
-            onExpire={() => {
+    )
-              onChange("");
-              turnstile.reset();
-            }}
-            onTimeout={() => {
-              onChange("");
-              turnstile.reset();
-            }}
-            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/user/src/sections/user/traffic-statistics/index.tsx

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

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

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

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

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

package.json

@@ -24,8 +24,7 @@
     "i18n:sync": "turbo i18n:sync",
     "i18n:status": "turbo i18n:status",
     "prepare": "husky && npx gitmoji -i",
-    "release": "semantic-release",
+    "release": "semantic-release"
-    "sync": "bash scripts/sync-upstream.sh"
   },
   "overrides": {
     "react": "^19.2.0",

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

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

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

@@ -70,13 +70,6 @@ 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 === "-" ||
@@ -112,7 +105,11 @@ export function EnhancedInput<T = string>({
   };
 
   const handleBlur = () => {
-    if (props.type === "number" && value && (value === "-" || value === ".")) {
+    if (
+      props.type === "number" &&
+      value !== "" &&
+      (value === "-" || value === ".")
+    ) {
       setValue("");
       setInternalValue("");
       onValueBlur?.("" as T);

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -2,42 +2,6 @@
 /* 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 }>(
@@ -51,21 +15,3 @@ 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/authMethod.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

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

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -2607,9 +2607,7 @@ declare namespace API {
   type FamilyMemberItem = {
     user_id: number;
     identifier: string;
-    auth_type: string;
     device_no: string;
-    device_type: string;
     role: number;
     role_name: string;
     status: number;
@@ -2623,7 +2621,6 @@ declare namespace API {
     family_id: number;
     owner_user_id: number;
     owner_identifier: string;
-    owner_auth_type: string;
     status: string;
     active_member_count: number;
     max_members: number;
@@ -2810,7 +2807,7 @@ declare namespace API {
     list: RedemptionRecord[];
   };
 
-  type SubscribeSimple = {
+  type Subscribe = {
     id: number;
     name: string;
     unit_price: number;
@@ -2833,7 +2830,7 @@ declare namespace API {
     id: number;
     subscribe_id: number;
     user_group_id: number;
-    subscribe?: SubscribeSimple;
+    subscribe?: Subscribe;
     user_group?: UserGroup;
     created_at: number;
     updated_at: number;

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 
@@ -176,21 +177,3 @@ 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/common.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

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

@@ -338,17 +338,6 @@ 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;
@@ -743,9 +732,6 @@ declare namespace API {
     password: string;
     code?: string;
     cf_token?: string;
-    captcha_id?: string;
-    captcha_code?: string;
-    slider_token?: string;
   };
 
   type ResetSubscribeTrafficLog = {
@@ -945,9 +931,6 @@ declare namespace API {
     telephone_area_code: string;
     password: string;
     cf_token?: string;
-    captcha_id?: string;
-    captcha_code?: string;
-    slider_token?: string;
   };
 
   type TelephoneRegisterRequest = {
@@ -958,9 +941,6 @@ declare namespace API {
     invite?: string;
     code?: string;
     cf_token?: string;
-    captcha_id?: string;
-    captcha_code?: string;
-    slider_token?: string;
   };
 
   type TelephoneResetPasswordRequest = {
@@ -970,9 +950,6 @@ declare namespace API {
     password: string;
     code?: string;
     cf_token?: string;
-    captcha_id?: string;
-    captcha_code?: string;
-    slider_token?: string;
   };
 
   type Ticket = {
@@ -1092,9 +1069,6 @@ declare namespace API {
     email: string;
     password: string;
     cf_token?: string;
-    captcha_id?: string;
-    captcha_code?: string;
-    slider_token?: string;
   };
 
   type UserRegisterRequest = {
@@ -1104,9 +1078,6 @@ declare namespace API {
     invite?: string;
     code?: string;
     cf_token?: string;
-    captcha_id?: string;
-    captcha_code?: string;
-    slider_token?: string;
   };
 
   type UserSubscribe = {

packages/ui/src/services/gateway/basicCheckServiceVersion.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

packages/ui/src/services/gateway/basicUpdateService.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error
 /* eslint-disable */
 import request from "@workspace/ui/lib/request";
 

packages/ui/src/services/user/traffic.ts

@@ -1,7 +1,7 @@
 import request from "@workspace/ui/lib/request";
 
 export interface GetUserTrafficStatsRequest {
-  user_subscribe_id: string; // 保持字符串，避免精度问题
+  user_subscribe_id: string;  // 保持字符串，避免精度问题
   days: 7 | 30;
 }
 

scripts/sync-upstream.sh

@@ -1,147 +0,0 @@
-#!/usr/bin/env bash
-# sync-upstream.sh
-# 将 upstream/main 的最新代码同步合并到本地 main 分支
-# 用法: ./scripts/sync-upstream.sh [upstream-remote] [upstream-branch]
-
-set -euo pipefail
-
-# ── 配置 ────────────────────────────────────────────────────────────────────
-UPSTREAM="${1:-upstream}"
-UPSTREAM_BRANCH="${2:-main}"
-LOCAL_BRANCH="main"
-MERGE_MSG="merge: 同步 ${UPSTREAM}/${UPSTREAM_BRANCH} 新功能到定制版本"
-
-# ── 颜色输出 ─────────────────────────────────────────────────────────────────
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-CYAN='\033[0;36m'
-NC='\033[0m'
-
-info()    { echo -e "${BLUE}[INFO]${NC}  $*"; }
-ok()      { echo -e "${GREEN}[OK]${NC}    $*"; }
-warn()    { echo -e "${YELLOW}[WARN]${NC}  $*"; }
-error()   { echo -e "${RED}[ERROR]${NC} $*"; }
-step()    { echo -e "\n${CYAN}▶ $*${NC}"; }
-
-# ── 检查：必须在 git 仓库内 ───────────────────────────────────────────────────
-if ! git rev-parse --git-dir &>/dev/null; then
-  error "当前目录不是 git 仓库"
-  exit 1
-fi
-
-# ── 检查：必须在 LOCAL_BRANCH 上 ─────────────────────────────────────────────
-CURRENT_BRANCH=$(git branch --show-current)
-if [[ "$CURRENT_BRANCH" != "$LOCAL_BRANCH" ]]; then
-  error "当前分支是 '$CURRENT_BRANCH'，请先切换到 '$LOCAL_BRANCH'"
-  error "  git checkout $LOCAL_BRANCH"
-  exit 1
-fi
-
-# ── 检查：是否有未提交的改动 ──────────────────────────────────────────────────
-step "检查工作区状态"
-DIRTY=$(git status --porcelain)
-if [[ -n "$DIRTY" ]]; then
-  warn "检测到未提交的本地修改："
-  git status --short
-  echo ""
-  echo -e "  ${YELLOW}选项：${NC}"
-  echo "  [1] 自动提交为 WIP commit，合并完成后可再整理（推荐）"
-  echo "  [2] 退出，手动处理后再运行"
-  echo ""
-  read -rp "请选择 [1/2]: " choice
-  case "$choice" in
-    1)
-      step "提交本地修改为 WIP commit"
-      git add -A
-      git commit -m "chore: WIP - 合并 upstream 前保存本地修改"
-      ok "WIP commit 已创建"
-      ;;
-    *)
-      info "已退出，请手动处理后再运行此脚本"
-      exit 0
-      ;;
-  esac
-fi
-
-# ── 拉取 upstream ─────────────────────────────────────────────────────────────
-step "拉取 ${UPSTREAM}/${UPSTREAM_BRANCH}"
-if ! git fetch "$UPSTREAM" 2>&1; then
-  error "fetch ${UPSTREAM} 失败，请检查网络或 remote 配置"
-  git remote -v
-  exit 1
-fi
-
-# ── 检查是否有新提交 ──────────────────────────────────────────────────────────
-NEW_COMMITS=$(git log HEAD.."${UPSTREAM}/${UPSTREAM_BRANCH}" --oneline)
-if [[ -z "$NEW_COMMITS" ]]; then
-  ok "已是最新，无需合并"
-  exit 0
-fi
-
-info "以下 upstream 提交将被合并："
-echo "$NEW_COMMITS" | while IFS= read -r line; do
-  echo "  + $line"
-done
-
-# ── 执行合并 ──────────────────────────────────────────────────────────────────
-step "合并 ${UPSTREAM}/${UPSTREAM_BRANCH} → ${LOCAL_BRANCH}"
-if git merge "${UPSTREAM}/${UPSTREAM_BRANCH}" --no-ff -m "$MERGE_MSG" 2>&1; then
-  ok "合并成功，无冲突"
-else
-  # 有冲突
-  CONFLICTS=$(git diff --name-only --diff-filter=U)
-  echo ""
-  error "合并产生冲突，需要手动解决以下文件："
-  echo "$CONFLICTS" | while IFS= read -r f; do
-    echo "  ✗ $f"
-  done
-  echo ""
-  echo -e "${YELLOW}解决步骤：${NC}"
-  echo "  1. 用编辑器打开冲突文件，搜索 <<<<<<< 并逐一解决"
-  echo "  2. 解决完成后运行："
-  echo "     git add <已解决的文件>"
-  echo "     git commit -m \"$MERGE_MSG\""
-  echo ""
-  echo -e "${YELLOW}常用工具：${NC}"
-  echo "  git diff                    # 查看所有冲突内容"
-  echo "  git checkout --ours <file>  # 保留我们的版本"
-  echo "  git checkout --theirs <file> # 保留 upstream 版本"
-  echo "  npx biome check --write --unsafe  # 修复可自动修复的 lint 错误"
-  echo ""
-  echo -e "${YELLOW}放弃本次合并：${NC}"
-  echo "  git merge --abort"
-  exit 1
-fi
-
-# ── 运行 lint 检查 ────────────────────────────────────────────────────────────
-step "运行 biome 检查"
-if npx biome check 2>&1 | grep -q "Found.*error"; then
-  warn "发现 lint 错误，尝试自动修复..."
-  npx biome check --write --unsafe 2>&1 | tail -3
-  # 再检查一次
-  REMAINING=$(npx biome check 2>&1 | grep "Found.*error" || true)
-  if [[ -n "$REMAINING" ]]; then
-    warn "仍有无法自动修复的 lint 错误，请手动处理："
-    npx biome check 2>&1 | grep "lint/" | grep -v "FIXABLE\|Unsafe\|i " | sort -u
-  else
-    ok "lint 错误已全部自动修复"
-    # 如果 biome 修改了文件，需要重新提交
-    if [[ -n "$(git diff --name-only)" ]]; then
-      git add -A
-      git commit -m "fix: 修复合并后的 lint 错误"
-      ok "lint 修复已提交"
-    fi
-  fi
-else
-  ok "biome 检查通过，无错误"
-fi
-
-# ── 完成 ───────────────────────────────────────────────────────────────────────
-echo ""
-ok "同步完成！最新提交记录："
-git log --oneline -5
-echo ""
-info "如需推送到远端（kxsw）："
-echo "  git push kxsw main"