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

- 分流规则 + 用户流量统计
- 验证码功能
- 节点分组管理 UI
- 重构用户分组组件

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

@@ -16,7 +16,9 @@ import {
   toggleNodeStatus,
   updateNode,
 } from "@workspace/ui/services/admin/server";
-import { useRef, useState } from "react";
+import { getGroupConfig, getNodeGroupList } from "@workspace/ui/services/admin/group";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useNode } from "@/stores/node";
@@ -32,13 +34,132 @@ export default function Nodes() {
   const { getServerName, getServerAddress, getProtocolPort } = useServer();
   const { fetchNodes, fetchTags } = useNode();
 
+  // Fetch node groups for display
+  const { data: nodeGroupsData } = useQuery({
+    queryKey: ["nodeGroups"],
+    queryFn: async () => {
+      const { data } = await getNodeGroupList({ page: 1, size: 1000 });
+      return data.data?.list || [];
+    },
+  });
+
+  // Fetch group config to check if group feature is enabled
+  const { data: groupConfigData } = useQuery({
+    queryKey: ["groupConfig"],
+    queryFn: async () => {
+      const { data } = await getGroupConfig();
+      return data.data;
+    },
+  });
+
+  const isGroupEnabled = groupConfigData?.enabled || false;
+
+  // Dynamic columns based on group feature status
+  const columns = useMemo(() => {
+    const baseColumns = [
+      {
+        id: "enabled",
+        header: t("enabled", "Enabled"),
+        cell: ({ row }: { row: any }) => (
+          <Switch
+            checked={row.original.enabled}
+            onCheckedChange={async (v) => {
+              await toggleNodeStatus({ id: row.original.id, enable: v });
+              toast.success(
+                v ? t("enabled_on", "Enabled") : t("enabled_off", "Disabled")
+              );
+              ref.current?.refresh();
+              fetchNodes();
+              fetchTags();
+            }}
+          />
+        ),
+      },
+      {
+        id: "name",
+        accessorKey: "name",
+        header: t("name", "Name"),
+      },
+      {
+        id: "address_port",
+        header: `${t("address", "Address")}:${t("port", "Port")}`,
+        cell: ({ row }: { row: any }) =>
+          `${row.original.address || "—"}:${row.original.port || "—"}`,
+      },
+      {
+        id: "server_id",
+        header: t("server", "Server"),
+        cell: ({ row }: { row: any }) =>
+          `${getServerName(row.original.server_id)}:${getServerAddress(row.original.server_id)}`,
+      },
+      {
+        id: "protocol",
+        header: ` ${t("protocol", "Protocol")}:${t("port", "Port")}`,
+        cell: ({ row }: { row: any }) =>
+          `${row.original.protocol}:${getProtocolPort(row.original.server_id, row.original.protocol)}`,
+      },
+      {
+        id: "tags",
+        header: t("tags", "Tags"),
+        cell: ({ row }: { row: any }) => (
+          <div className="flex flex-wrap gap-1">
+            {(row.original.tags || []).length === 0
+              ? "—"
+              : row.original.tags.map((tg: string) => (
+                  <Badge key={tg} variant="outline">
+                    {tg}
+                  </Badge>
+                ))}
+          </div>
+        ),
+      },
+    ];
+
+    // Add Node Groups column when group feature is enabled
+    if (isGroupEnabled) {
+      baseColumns.push({
+        id: "node_group_ids",
+        header: t("nodeGroups", "Node Groups"),
+        cell: ({ row }: { row: any }) => {
+          const groupIds = row.original.node_group_ids as number[] || [];
+
+          // Public node indicator (when node_group_ids is empty)
+          if (groupIds.length === 0) {
+            return (
+              <div className="flex items-center gap-2">
+                <Badge variant="secondary" className="text-xs">
+                  {t("public", "Public")}
+                </Badge>
+              </div>
+            );
+          }
+
+          return (
+            <div className="flex flex-wrap gap-1">
+              {groupIds.map((groupId) => {
+                const group = nodeGroupsData?.find((g) => g.id === groupId);
+                return (
+                  <Badge key={groupId} variant="outline">
+                    {group?.name || String(groupId)}
+                  </Badge>
+                );
+              })}
+            </div>
+          );
+        },
+      });
+    }
+
+    return baseColumns;
+  }, [isGroupEnabled, nodeGroupsData, t, getServerName, getServerAddress, getProtocolPort]);
+
   return (
-    <ProTable<API.Node, { search: string }>
+    <ProTable<API.Node, { search: string; node_group_id?: number }>
       action={ref}
       actions={{
         render: (row) => [
           <NodeForm
-            initialValues={row}
+            initialValues={row as any}
             key="edit"
             loading={loading}
             onSubmit={async (values) => {
@@ -47,6 +168,7 @@ export default function Nodes() {
                 const body: API.UpdateNodeRequest = {
                   ...row,
                   ...values,
+                  node_group_ids: values.node_group_ids?.map((id: string | number) => Number(id)) || [],
                 } as any;
                 await updateNode(body);
                 toast.success(t("updated", "Updated"));
@@ -135,62 +257,7 @@ export default function Nodes() {
           ];
         },
       }}
-      columns={[
-        {
-          id: "enabled",
-          header: t("enabled", "Enabled"),
-          cell: ({ row }) => (
-            <Switch
-              checked={row.original.enabled}
-              onCheckedChange={async (v) => {
-                await toggleNodeStatus({ id: row.original.id, enable: v });
-                toast.success(
-                  v ? t("enabled_on", "Enabled") : t("enabled_off", "Disabled")
-                );
-                ref.current?.refresh();
-                fetchNodes();
-                fetchTags();
-              }}
-            />
-          ),
-        },
-        { accessorKey: "name", header: t("name", "Name") },
-
-        {
-          id: "address_port",
-          header: `${t("address", "Address")}:${t("port", "Port")}`,
-          cell: ({ row }) =>
-            `${row.original.address || "—"}:${row.original.port || "—"}`,
-        },
-
-        {
-          id: "server_id",
-          header: t("server", "Server"),
-          cell: ({ row }) =>
-            `${getServerName(row.original.server_id)}:${getServerAddress(row.original.server_id)}`,
-        },
-        {
-          id: "protocol",
-          header: ` ${t("protocol", "Protocol")}:${t("port", "Port")}`,
-          cell: ({ row }) =>
-            `${row.original.protocol}:${getProtocolPort(row.original.server_id, row.original.protocol)}`,
-        },
-        {
-          accessorKey: "tags",
-          header: t("tags", "Tags"),
-          cell: ({ row }) => (
-            <div className="flex flex-wrap gap-1">
-              {(row.original.tags || []).length === 0
-                ? "—"
-                : row.original.tags.map((tg) => (
-                    <Badge key={tg} variant="outline">
-                      {tg}
-                    </Badge>
-                  ))}
-            </div>
-          ),
-        },
-      ]}
+      columns={columns}
       header={{
         title: t("pageTitle", "Nodes"),
         toolbar: (
@@ -199,15 +266,18 @@ export default function Nodes() {
             onSubmit={async (values) => {
               setLoading(true);
               try {
-                const body: API.CreateNodeRequest = {
+                const body: any = {
                   name: values.name,
                   server_id: Number(values.server_id!),
                   protocol: values.protocol,
                   address: values.address,
                   port: Number(values.port!),
                   tags: values.tags || [],
-                  enabled: false,
                 };
+                // Add node_group_ids if it exists
+                if (values.node_group_ids) {
+                  body.node_group_ids = values.node_group_ids.map((id: string | number) => Number(id));
+                }
                 await createNode(body);
                 toast.success(t("created", "Created"));
                 ref.current?.refresh();
@@ -277,13 +347,35 @@ export default function Nodes() {
 
         return updatedItems;
       }}
-      params={[{ key: "search" }]}
+      params={[
+        {
+          key: "search",
+        },
+        ...(isGroupEnabled
+          ? [
+              {
+                key: "node_group_id",
+                placeholder: t("nodeGroups", "Node Groups"),
+                options: [
+                  { label: t("all", "All"), value: "" },
+                  ...(nodeGroupsData?.map((item) => ({
+                    label: item.name,
+                    value: String(item.id),
+                  })) || []),
+                ],
+              },
+            ]
+          : []),
+      ]}
       request={async (pagination, filter) => {
-        const { data } = await filterNodeList({
+        const filters = {
           page: pagination.page,
           size: pagination.size,
           search: filter?.search || undefined,
-        });
+          node_group_id: filter?.node_group_id ? Number(filter.node_group_id) : undefined,
+        };
+
+        const { data } = await filterNodeList(filters);
         const rawList = (data?.data?.list || []) as API.Node[];
         // Backend should ideally return nodes already sorted, but we also sort on the
         // frontend to keep the UI stable (and avoid "random" order after refresh).

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

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@workspace/ui/components/button";
+import { Checkbox } from "@workspace/ui/components/checkbox";
 import {
   Form,
   FormControl,
@@ -11,6 +12,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@workspace/ui/components/form";
+import { Label } from "@workspace/ui/components/label";
 import { ScrollArea } from "@workspace/ui/components/scroll-area";
 import {
   Sheet,
@@ -23,6 +25,8 @@ import {
 import { Combobox } from "@workspace/ui/composed/combobox";
 import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
 import TagInput from "@workspace/ui/composed/tag-input";
+import { getGroupConfig, getNodeGroupList } from "@workspace/ui/services/admin/group";
+import { useQuery } from "@tanstack/react-query";
 import type { TFunction } from "i18next";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -54,7 +58,7 @@ const buildSchema = (t: TFunction) =>
     server_id: z
       .number({ message: t("errors.serverRequired", "Please select a server") })
       .int()
-      .gt(0, t("errors.serverRequired", "Please select a server"))
+      .positive(t("errors.serverRequired", "Please select a server"))
       .optional(),
     protocol: z
       .string()
@@ -71,6 +75,7 @@ const buildSchema = (t: TFunction) =>
       .min(1, t("errors.portRange", "Port must be between 1 and 65535"))
       .max(65_535, t("errors.portRange", "Port must be between 1 and 65535")),
     tags: z.array(z.string()),
+    node_group_ids: z.optional(z.array(z.string()).default([])),
   });
 
 export type NodeFormValues = z.infer<ReturnType<typeof buildSchema>>;
@@ -112,8 +117,10 @@ export default function NodeForm(props: {
       address: "",
       port: 0,
       tags: [],
+      node_group_ids: [],
       ...initialValues,
     },
+    mode: "onSubmit", // Only validate on form submission
   });
 
   const serverId = form.watch("server_id");
@@ -125,17 +132,54 @@ export default function NodeForm(props: {
 
   const availableProtocols = getAvailableProtocols(serverId);
 
+  // Fetch node groups
+  const { data: nodeGroupsData } = useQuery({
+    queryKey: ["nodeGroups"],
+    queryFn: async () => {
+      const { data } = await getNodeGroupList({ page: 1, size: 1000 });
+      return data.data?.list || [];
+    },
+  });
+
+  // Fetch group config to check if group feature is enabled
+  const { data: groupConfigData } = useQuery({
+    queryKey: ["groupConfig"],
+    queryFn: async () => {
+      const { data } = await getGroupConfig();
+      return data.data;
+    },
+  });
+
+  const isGroupEnabled = groupConfigData?.enabled || false;
+
   useEffect(() => {
     if (initialValues) {
-      form.reset({
+      const resetValues: NodeFormValues = {
         name: "",
         server_id: undefined,
         protocol: "",
         address: "",
         port: 0,
         tags: [],
-        ...initialValues,
-      });
+        node_group_ids: [],
+      };
+
+      // Copy only the values we need from initialValues
+      if (initialValues.name) resetValues.name = initialValues.name;
+      if (initialValues.server_id) resetValues.server_id = initialValues.server_id;
+      if (initialValues.protocol) resetValues.protocol = initialValues.protocol;
+      if (initialValues.address) resetValues.address = initialValues.address;
+      if (initialValues.port) resetValues.port = initialValues.port;
+      if (initialValues.tags) resetValues.tags = initialValues.tags;
+
+      // Convert node_group_ids from number[] to string[], ensure it's always an array
+      if (initialValues.node_group_ids && Array.isArray(initialValues.node_group_ids)) {
+        resetValues.node_group_ids = initialValues.node_group_ids.map((id: string | number) => String(id));
+      } else {
+        resetValues.node_group_ids = [];
+      }
+
+      form.reset(resetValues);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialValues]);
@@ -360,6 +404,7 @@ export default function NodeForm(props: {
                   </FormItem>
                 )}
               />
+              {/* Tags field - always shown */}
               <FormField
                 control={form.control}
                 name="tags"
@@ -378,15 +423,77 @@ export default function NodeForm(props: {
                       />
                     </FormControl>
                     <FormDescription>
-                      {t(
-                        "tags_description",
-                        "Permission grouping tag (incl. plan binding and delivery policies)."
-                      )}
+                      {isGroupEnabled
+                        ? t(
+                            "tags_groupMode_description",
+                            "Optional tags for display and filtering (node group will be used as tag if empty)."
+                          )
+                        : t(
+                            "tags_description",
+                            "Permission grouping tag (incl. plan binding and delivery policies)."
+                          )}
                     </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
               />
+              {/* Show Node Group field only when group feature is enabled */}
+              {isGroupEnabled && (
+                <FormField
+                  control={form.control}
+                  name="node_group_ids"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("nodeGroup", "Node Group")}</FormLabel>
+                      <FormControl>
+                        <div className="grid grid-cols-2 gap-2">
+                          {nodeGroupsData?.map((g) => (
+                            <div
+                              key={g.id}
+                              className="flex items-center space-x-2"
+                            >
+                              <Checkbox
+                                id={`node-group-${g.id}`}
+                                checked={field.value?.includes(String(g.id)) || false}
+                                onCheckedChange={(checked) => {
+                                  // Ensure field.value is always an array
+                                  const currentValue = Array.isArray(field.value) ? field.value : [];
+                                  if (checked) {
+                                    const newValue = [...currentValue, String(g.id)];
+                                    form.setValue(field.name, newValue, {
+                                      shouldValidate: true,
+                                      shouldDirty: true,
+                                    });
+                                  } else {
+                                    const newValue = currentValue.filter((v: string) => v !== String(g.id));
+                                    form.setValue(field.name, newValue, {
+                                      shouldValidate: true,
+                                      shouldDirty: true,
+                                    });
+                                  }
+                                }}
+                              />
+                              <Label
+                                htmlFor={`node-group-${g.id}`}
+                                className="cursor-pointer"
+                              >
+                                {g.name}
+                              </Label>
+                            </div>
+                          ))}
+                        </div>
+                      </FormControl>
+                      <FormDescription>
+                        {t(
+                          "nodeGroup_description",
+                          "Assign this node to multiple groups for user access control."
+                        )}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
             </form>
           </Form>
         </ScrollArea>