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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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