[优化] go 引用调整

openflare-server/web/features/nodes/components/node-editor-modal.tsx

@@ -0,0 +1,641 @@
+'use client';
+
+import {zodResolver} from '@hookform/resolvers/zod';
+import {useEffect, useMemo} from 'react';
+import {useForm, useWatch} from 'react-hook-form';
+import {z} from 'zod';
+
+import {AppModal} from '@/components/ui/app-modal';
+import worldGeoJson from '@/features/dashboard/data/world-geo.json';
+import type {NodeItem, NodeMutationPayload} from '@/features/nodes/types';
+import {
+    PrimaryButton,
+    ResourceField,
+    ResourceInput,
+    ResourceSelect,
+    SecondaryButton,
+    ToggleField,
+} from '@/features/shared/components/resource-primitives';
+
+type GeoJsonGeometry = {
+  type: string;
+  coordinates: unknown;
+};
+
+type GeoJsonFeature = {
+  geometry?: GeoJsonGeometry;
+  properties?: {
+    name?: string;
+  };
+};
+
+type RegionOption = {
+  label: string;
+  latitude: number;
+  longitude: number;
+};
+
+const nodeEditorSchema = z
+  .object({
+    type: z.enum(['edge_node', 'tunnel_relay', 'tunnel_client']),
+    name: z
+      .string()
+      .trim()
+      .min(1, '请输入节点名')
+      .max(128, '节点名不能超过 128 个字符'),
+    ip: z.string().trim().max(64, '节点 IP 不能超过 64 个字符'),
+    ip_manual_override: z.boolean(),
+    auto_update_enabled: z.boolean(),
+    relay_bind_port: z.string().trim(),
+    relay_vhost_http_port: z.string().trim(),
+    relay_client_access_addr: z.string().trim(),
+    relay_agent_access_addr: z.string().trim(),
+    relay_client_proxy_url: z.string().trim(),
+    relay_web_server_enabled: z.boolean(),
+    geo_manual_override: z.boolean(),
+    geo_region: z.string(),
+    geo_name: z.string().trim().max(128, '位置名不能超过 128 个字符'),
+    geo_latitude: z.string().trim(),
+    geo_longitude: z.string().trim(),
+  })
+  .superRefine((values, ctx) => {
+    if (values.ip_manual_override && values.ip.trim() === '') {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['ip'],
+        message: '锁定节点 IP 时必须填写节点 IP',
+      });
+    }
+
+    if (values.type === 'tunnel_relay') {
+      const port = Number(values.relay_bind_port);
+      if (Number.isNaN(port) || port < 1 || port > 65535) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['relay_bind_port'],
+          message: '请填写正确的端口号 (1-65535)',
+        });
+      }
+      const vhostPort = Number(values.relay_vhost_http_port);
+      if (Number.isNaN(vhostPort) || vhostPort < 1 || vhostPort > 65535) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['relay_vhost_http_port'],
+          message: '请填写正确的端口号 (1-65535)',
+        });
+      }
+    }
+
+    if (!values.geo_manual_override) {
+      return;
+    }
+
+    const hasLatitude = values.geo_latitude !== '';
+    const hasLongitude = values.geo_longitude !== '';
+
+    if (hasLatitude !== hasLongitude) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['geo_latitude'],
+        message: '纬度和经度需要同时填写',
+      });
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['geo_longitude'],
+        message: '纬度和经度需要同时填写',
+      });
+      return;
+    }
+
+    if (hasLatitude) {
+      const latitude = Number(values.geo_latitude);
+      if (Number.isNaN(latitude) || latitude < -90 || latitude > 90) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['geo_latitude'],
+          message: '纬度必须在 -90 到 90 之间',
+        });
+      }
+    }
+
+    if (hasLongitude) {
+      const longitude = Number(values.geo_longitude);
+      if (Number.isNaN(longitude) || longitude < -180 || longitude > 180) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['geo_longitude'],
+          message: '经度必须在 -180 到 180 之间',
+        });
+      }
+    }
+  });
+
+type NodeEditorValues = z.infer<typeof nodeEditorSchema>;
+
+const defaultValues: NodeEditorValues = {
+  type: 'edge_node',
+  name: '',
+  ip: '',
+  ip_manual_override: false,
+  auto_update_enabled: false,
+  relay_bind_port: '7000',
+  relay_vhost_http_port: '8080',
+  relay_client_access_addr: '',
+  relay_agent_access_addr: '',
+  relay_client_proxy_url: '',
+  relay_web_server_enabled: true,
+  geo_manual_override: false,
+  geo_region: '',
+  geo_name: '',
+  geo_latitude: '',
+  geo_longitude: '',
+};
+
+function collectPoints(value: unknown, points: Array<[number, number]>) {
+  if (!Array.isArray(value)) {
+    return;
+  }
+  if (
+    value.length >= 2 &&
+    typeof value[0] === 'number' &&
+    typeof value[1] === 'number'
+  ) {
+    points.push([value[0], value[1]]);
+    return;
+  }
+  for (const item of value) {
+    collectPoints(item, points);
+  }
+}
+
+function getRegionCenter(feature: GeoJsonFeature) {
+  const points: Array<[number, number]> = [];
+  collectPoints(feature.geometry?.coordinates, points);
+  if (points.length === 0) {
+    return null;
+  }
+
+  let minLongitude = Number.POSITIVE_INFINITY;
+  let maxLongitude = Number.NEGATIVE_INFINITY;
+  let minLatitude = Number.POSITIVE_INFINITY;
+  let maxLatitude = Number.NEGATIVE_INFINITY;
+
+  for (const [longitude, latitude] of points) {
+    minLongitude = Math.min(minLongitude, longitude);
+    maxLongitude = Math.max(maxLongitude, longitude);
+    minLatitude = Math.min(minLatitude, latitude);
+    maxLatitude = Math.max(maxLatitude, latitude);
+  }
+
+  return {
+    longitude: Number(((minLongitude + maxLongitude) / 2).toFixed(4)),
+    latitude: Number(((minLatitude + maxLatitude) / 2).toFixed(4)),
+  };
+}
+
+function buildRegionOptions() {
+  const features = ((worldGeoJson as { features?: GeoJsonFeature[] })
+    .features ?? []) as GeoJsonFeature[];
+  const options = new Map<string, RegionOption>();
+
+  for (const feature of features) {
+    const label = feature.properties?.name?.trim();
+    if (!label || options.has(label)) {
+      continue;
+    }
+    const center = getRegionCenter(feature);
+    if (!center) {
+      continue;
+    }
+    options.set(label, {
+      label,
+      latitude: center.latitude,
+      longitude: center.longitude,
+    });
+  }
+
+  return Array.from(options.values()).sort((a, b) =>
+    a.label.localeCompare(b.label),
+  );
+}
+
+function buildFormValues(node?: Partial<NodeItem> | null): NodeEditorValues {
+  if (!node) {
+    return defaultValues;
+  }
+
+  return {
+    type: node.node_type ?? 'edge_node',
+    name: node.name ?? '',
+    ip: node.ip ?? '',
+    ip_manual_override: node.ip_manual_override ?? false,
+    auto_update_enabled: node.auto_update_enabled ?? false,
+    relay_bind_port: String(node.relay_bind_port ?? 7000),
+    relay_vhost_http_port: String(node.relay_vhost_http_port ?? 8080),
+    relay_client_access_addr: node.relay_client_access_addr ?? '',
+    relay_agent_access_addr: node.relay_agent_access_addr ?? '',
+    relay_client_proxy_url: node.relay_client_proxy_url ?? '',
+    relay_web_server_enabled: node.relay_web_server_enabled ?? false,
+    geo_manual_override: node.geo_manual_override ?? false,
+    geo_region: node.geo_manual_override ? (node.geo_name ?? '') : '',
+    geo_name: node.geo_name ?? '',
+    geo_latitude:
+      node.geo_latitude === undefined || node.geo_latitude === null
+        ? ''
+        : String(node.geo_latitude),
+    geo_longitude:
+      node.geo_longitude === undefined || node.geo_longitude === null
+        ? ''
+        : String(node.geo_longitude),
+  };
+}
+
+function toPayload(values: NodeEditorValues): NodeMutationPayload {
+  const basePayload = {
+    node_type: values.type,
+    name: values.name.trim(),
+    ip: values.ip.trim(),
+    ip_manual_override: values.ip_manual_override,
+    auto_update_enabled: values.auto_update_enabled,
+    relay_bind_port:
+      values.type === 'tunnel_relay'
+        ? Number(values.relay_bind_port)
+        : undefined,
+    relay_vhost_http_port:
+      values.type === 'tunnel_relay'
+        ? Number(values.relay_vhost_http_port)
+        : undefined,
+    relay_client_access_addr:
+      values.type === 'tunnel_relay'
+        ? values.relay_client_access_addr.trim()
+        : undefined,
+    relay_agent_access_addr:
+      values.type === 'tunnel_relay'
+        ? values.relay_agent_access_addr.trim()
+        : undefined,
+    relay_client_proxy_url:
+      values.type === 'tunnel_relay'
+        ? values.relay_client_proxy_url.trim()
+        : undefined,
+    relay_web_server_enabled:
+      values.type === 'tunnel_relay'
+        ? values.relay_web_server_enabled
+        : undefined,
+  };
+
+  if (!values.geo_manual_override) {
+    return {
+      ...basePayload,
+      geo_manual_override: false,
+      geo_name: '',
+      geo_latitude: null,
+      geo_longitude: null,
+    };
+  }
+
+  return {
+    ...basePayload,
+    geo_manual_override: true,
+    geo_name: values.geo_name.trim(),
+    geo_latitude:
+      values.geo_latitude.trim() === '' ? null : Number(values.geo_latitude),
+    geo_longitude:
+      values.geo_longitude.trim() === '' ? null : Number(values.geo_longitude),
+  };
+}
+
+export function NodeEditorModal({
+  isOpen,
+  node,
+  isSubmitting,
+  title,
+  description,
+  submitLabel,
+  onClose,
+  onSubmit,
+}: {
+  isOpen: boolean;
+  node?: Partial<NodeItem> | null;
+  isSubmitting: boolean;
+  title: string;
+  description: string;
+  submitLabel: string;
+  onClose: () => void;
+  onSubmit: (payload: NodeMutationPayload) => void;
+}) {
+  const form = useForm<NodeEditorValues>({
+    resolver: zodResolver(nodeEditorSchema),
+    defaultValues,
+  });
+
+  const watchedType = useWatch({
+    control: form.control,
+    name: 'type',
+  });
+  const watchedAutoUpdate = useWatch({
+    control: form.control,
+    name: 'auto_update_enabled',
+  });
+  const watchedIPManualOverride = useWatch({
+    control: form.control,
+    name: 'ip_manual_override',
+  });
+  const watchedGeoManualOverride = useWatch({
+    control: form.control,
+    name: 'geo_manual_override',
+  });
+  const regionOptions = useMemo(() => buildRegionOptions(), []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    form.reset(buildFormValues(node));
+  }, [form, isOpen, node]);
+
+  const ipField = form.register('ip');
+  const handleSubmit = form.handleSubmit((values) => {
+    onSubmit(toPayload(values));
+  });
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      description={description}
+      footer={
+        <div className="flex flex-wrap justify-end gap-3">
+          <SecondaryButton
+            type="button"
+            onClick={onClose}
+            disabled={isSubmitting}
+          >
+            取消
+          </SecondaryButton>
+          <PrimaryButton
+            type="submit"
+            form="node-editor-form"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? '保存中...' : submitLabel}
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <form id="node-editor-form" className="space-y-5" onSubmit={handleSubmit}>
+        <ResourceField
+          label="节点类型"
+          hint="边缘节点用于常规的网站代理和缓存；隧道中继节点用于内网穿透的流量中转服务器。"
+        >
+          <ResourceSelect {...form.register('type')} disabled={!!node}>
+            <option value="edge_node">边缘节点 (Edge Node)</option>
+            <option value="tunnel_relay">隧道中继节点 (Tunnel Relay)</option>
+            <option value="tunnel_client">隧道客户端 (Tunnel Client)</option>
+          </ResourceSelect>
+        </ResourceField>
+
+        <ResourceField
+          label="节点名"
+          hint="示例：shanghai-edge-1"
+          error={form.formState.errors.name?.message}
+        >
+          <ResourceInput
+            placeholder="shanghai-edge-1"
+            {...form.register('name')}
+          />
+        </ResourceField>
+
+        {watchedType === 'tunnel_relay' && (
+          <div className="border-border bg-muted/50 space-y-5 rounded-lg border p-4">
+            <h4 className="text-sm font-medium">中继配置 (Relay Config)</h4>
+            <ResourceField
+              label="中继绑定端口 (Bind Port)"
+              hint="中继服务端在此端口监听并接受 Flared 客户端连接。"
+              error={form.formState.errors.relay_bind_port?.message}
+            >
+              <ResourceInput
+                placeholder="7000"
+                {...form.register('relay_bind_port')}
+              />
+            </ResourceField>
+
+            <ResourceField
+              label="中继 Vhost HTTP 端口 (Vhost HTTP Port)"
+              hint="中继服务端在此端口监听 HTTP 虚拟主机流量，用于 Openresty 转发到中继。"
+              error={form.formState.errors.relay_vhost_http_port?.message}
+            >
+              <ResourceInput
+                placeholder="8080"
+                {...form.register('relay_vhost_http_port')}
+              />
+            </ResourceField>
+
+            <ResourceField
+              label="边缘节点接入地址 (Edge Node Access Addr)"
+              hint="用于 Edge Node 转发请求。默认与 Client Access Addr 或 IP + 绑定端口一致。"
+              error={form.formState.errors.relay_agent_access_addr?.message}
+            >
+              <ResourceInput
+                placeholder="例如: 10.0.0.1:7000"
+                {...form.register('relay_agent_access_addr')}
+              />
+            </ResourceField>
+
+            <ResourceField
+              label="客户端接入地址 (Client Access Addr)"
+              hint="如果不填默认使用节点的 IP + 绑定端口。"
+              error={form.formState.errors.relay_client_access_addr?.message}
+            >
+              <ResourceInput
+                placeholder="例如: relay.example.com:7000"
+                {...form.register('relay_client_access_addr')}
+              />
+            </ResourceField>
+
+            <ResourceField
+              label="代理地址 (Proxy URL)"
+              hint="可选，下发给客户端。当客户端连接中继需要经过 HTTP 代理时使用。"
+              error={form.formState.errors.relay_client_proxy_url?.message}
+            >
+              <ResourceInput
+                placeholder="例如: http://10.0.0.1:3128"
+                {...form.register('relay_client_proxy_url')}
+              />
+            </ResourceField>
+
+            <ToggleField
+              label="开启 FRPS WebUI"
+              description="访问端口 17500。用户 admin 密码为当前中继节点的接入 Token。"
+              checked={form.watch('relay_web_server_enabled')}
+              onChange={(checked) =>
+                form.setValue('relay_web_server_enabled', checked, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                })
+              }
+            />
+          </div>
+        )}
+
+        <ResourceField
+          label="节点 IP"
+          hint={
+            watchedIPManualOverride
+              ? '已锁定为指定值，不会被更新。'
+              : '留空或关闭锁定时，等待 Agent 自动更新。'
+          }
+          error={form.formState.errors.ip?.message}
+        >
+          <ResourceInput
+            placeholder="203.0.113.10"
+            {...ipField}
+            onChange={(event) => {
+              ipField.onChange(event);
+              const nextIP = event.target.value.trim();
+              const previousIP = (node?.ip ?? '').trim();
+              if (nextIP !== '' && nextIP !== previousIP) {
+                form.setValue('ip_manual_override', true, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                });
+              }
+            }}
+          />
+        </ResourceField>
+
+        <ToggleField
+          label="锁定节点 IP"
+          description="开启后以管理端填写的 IP 为准，Agent 后续上报不会覆盖该字段。"
+          checked={watchedIPManualOverride}
+          onChange={(checked) =>
+            form.setValue('ip_manual_override', checked, {
+              shouldDirty: true,
+              shouldValidate: true,
+            })
+          }
+        />
+
+        {watchedType === 'edge_node' && (
+          <ToggleField
+            label="启用自动更新"
+            description="开启后 Agent 心跳返回会提示节点自动执行自更新。"
+            checked={watchedAutoUpdate}
+            onChange={(checked) =>
+              form.setValue('auto_update_enabled', checked, {
+                shouldDirty: true,
+                shouldValidate: true,
+              })
+            }
+          />
+        )}
+
+        <ToggleField
+          label="手动指定地图地区"
+          description="关闭时，节点会根据当前 IP 自动解析归属地；开启后使用你手动选择的地区与坐标。"
+          checked={watchedGeoManualOverride}
+          onChange={(checked) => {
+            form.setValue('geo_manual_override', checked, {
+              shouldDirty: true,
+              shouldValidate: true,
+            });
+            if (!checked) {
+              form.setValue('geo_region', '', { shouldDirty: true });
+              form.setValue('geo_name', '', { shouldDirty: true });
+              form.setValue('geo_latitude', '', { shouldDirty: true });
+              form.setValue('geo_longitude', '', { shouldDirty: true });
+            }
+          }}
+        />
+
+        {watchedGeoManualOverride ? (
+          <ResourceField
+            label="地区选择"
+            hint="选择后会自动填充位置名与地图坐标，你也可以继续微调。"
+          >
+            <ResourceSelect
+              value={form.watch('geo_region')}
+              onChange={(event) => {
+                const regionName = event.target.value;
+                form.setValue('geo_region', regionName, {
+                  shouldDirty: true,
+                });
+                const selectedRegion = regionOptions.find(
+                  (item) => item.label === regionName,
+                );
+                if (!selectedRegion) {
+                  return;
+                }
+                form.setValue('geo_name', selectedRegion.label, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                });
+                form.setValue('geo_latitude', String(selectedRegion.latitude), {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                });
+                form.setValue(
+                  'geo_longitude',
+                  String(selectedRegion.longitude),
+                  {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  },
+                );
+              }}
+            >
+              <option value="">请选择地区</option>
+              {regionOptions.map((option) => (
+                <option key={option.label} value={option.label}>
+                  {option.label}
+                </option>
+              ))}
+            </ResourceSelect>
+          </ResourceField>
+        ) : null}
+
+        <ResourceField
+          label="地图位置名"
+          hint={
+            watchedGeoManualOverride
+              ? '可在自动填充后继续修改，例如使用更贴近业务的展示名称。'
+              : '自动解析模式下，该字段会由系统根据节点 IP 回填。'
+          }
+          error={form.formState.errors.geo_name?.message}
+        >
+          <ResourceInput
+            placeholder="Shanghai"
+            disabled={!watchedGeoManualOverride}
+            {...form.register('geo_name')}
+          />
+        </ResourceField>
+
+        <div className="grid gap-5 md:grid-cols-2">
+          <ResourceField
+            label="纬度"
+            hint="范围 -90 到 90，例如上海约为 31.2304"
+            error={form.formState.errors.geo_latitude?.message}
+          >
+            <ResourceInput
+              placeholder="31.2304"
+              disabled={!watchedGeoManualOverride}
+              {...form.register('geo_latitude')}
+            />
+          </ResourceField>
+
+          <ResourceField
+            label="经度"
+            hint="范围 -180 到 180，例如上海约为 121.4737"
+            error={form.formState.errors.geo_longitude?.message}
+          >
+            <ResourceInput
+              placeholder="121.4737"
+              disabled={!watchedGeoManualOverride}
+              {...form.register('geo_longitude')}
+            />
+          </ResourceField>
+        </div>
+      </form>
+    </AppModal>
+  );
+}

openflare-server/web/features/nodes/components/node-shared.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import React from 'react';
+import type {NodeObservability} from '@/features/nodes/types';
+
+export type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+export type HealthEventFilter = 'all' | 'active' | 'resolved';
+
+export type NodeDetailTab = 'dashboard' | 'info';
+
+export function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+export async function copyToClipboard(value: string) {
+  await navigator.clipboard.writeText(value);
+}
+
+export function formatUsageRatio(used?: number | null, total?: number | null) {
+  if (!used || !total || total <= 0) {
+    return null;
+  }
+  return Math.max(0, Math.min(100, (used / total) * 100));
+}
+
+export function formatUptime(seconds?: number | null) {
+  if (!seconds || seconds <= 0) {
+    return '—';
+  }
+
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+
+  if (days > 0) {
+    return `${days} 天 ${hours} 小时`;
+  }
+  if (hours > 0) {
+    return `${hours} 小时 ${minutes} 分钟`;
+  }
+  return `${minutes} 分钟`;
+}
+
+export function formatTrendHour(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '—';
+  }
+  return `${date.getHours().toString().padStart(2, '0')}:00`;
+}
+
+export function parseTrafficMap(value?: string | null) {
+  if (!value) {
+    return {} as Record<string, number>;
+  }
+  try {
+    const parsed = JSON.parse(value) as Record<string, number>;
+    return Object.entries(parsed).reduce<Record<string, number>>(
+      (result, [key, count]) => {
+        if (typeof count === 'number' && Number.isFinite(count)) {
+          result[key] = count;
+        }
+        return result;
+      },
+      {},
+    );
+  } catch {
+    return {} as Record<string, number>;
+  }
+}
+
+export function aggregateTrafficBreakdown(
+  reports: NodeObservability['traffic_reports'],
+  field: 'status_codes_json' | 'top_domains_json',
+) {
+  const summary = new Map<string, number>();
+  for (const report of reports) {
+    const parsed = parseTrafficMap(report[field]);
+    for (const [key, value] of Object.entries(parsed)) {
+      summary.set(key, (summary.get(key) ?? 0) + value);
+    }
+  }
+  return Array.from(summary.entries())
+    .sort((left, right) => {
+      if (right[1] === left[1]) {
+        return left[0].localeCompare(right[0]);
+      }
+      return right[1] - left[1];
+    })
+    .slice(0, 6)
+    .map(([label, value]) => ({ label, value }));
+}
+
+export function getHealthEventVariant(
+  event: NodeObservability['health_events'][number],
+): 'success' | 'warning' | 'danger' | 'info' {
+  if (event.status === 'resolved') {
+    return 'success';
+  }
+  if (event.severity === 'critical') {
+    return 'danger';
+  }
+  if (event.severity === 'warning') {
+    return 'warning';
+  }
+  return 'info';
+}
+
+export function getHealthEventLabel(
+  event: NodeObservability['health_events'][number],
+) {
+  return event.event_type.replaceAll('_', ' ');
+}
+
+export function MetricBar({
+  label,
+  value,
+  progress,
+  hint,
+}: {
+  label: string;
+  value: string;
+  progress?: number | null;
+  hint?: string;
+}) {
+  return (
+    <div className="space-y-2 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+            {label}
+          </p>
+          {hint ? (
+            <p className="mt-1 text-xs text-[var(--foreground-muted)]">
+              {hint}
+            </p>
+          ) : null}
+        </div>
+        <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+          {value}
+        </p>
+      </div>
+      <div className="h-2 overflow-hidden rounded-full bg-[var(--surface-muted)]">
+        <div
+          className="h-full rounded-full bg-[var(--status-info-foreground)] transition-[width]"
+          style={{ width: `${progress ?? 0}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function SummaryStat({
+  label,
+  value,
+  hint,
+}: {
+  label: string;
+  value: string;
+  hint: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+      <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+        {label}
+      </p>
+      <p className="mt-3 text-2xl font-semibold text-[var(--foreground-primary)]">
+        {value}
+      </p>
+      <p className="mt-2 text-sm text-[var(--foreground-secondary)]">{hint}</p>
+    </div>
+  );
+}

openflare-server/web/features/nodes/components/nodes-page.tsx

@@ -0,0 +1,475 @@
+'use client';
+
+import Link from 'next/link';
+import {useSearchParams} from 'next/navigation';
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import {useMemo, useState} from 'react';
+
+import {EmptyState} from '@/components/feedback/empty-state';
+import {ErrorState} from '@/components/feedback/error-state';
+import {InlineMessage} from '@/components/feedback/inline-message';
+import {LoadingState} from '@/components/feedback/loading-state';
+import {PageHeader} from '@/components/layout/page-header';
+import {AppCard} from '@/components/ui/app-card';
+import {StatusBadge} from '@/components/ui/status-badge';
+import {getConfigVersions} from '@/features/config-versions/api/config-versions';
+import {createNode, deleteNode, getNodes, updateNode,} from '@/features/nodes/api/nodes';
+import {NodeEditorModal} from '@/features/nodes/components/node-editor-modal';
+import type {NodeItem, NodeMutationPayload} from '@/features/nodes/types';
+import {DangerButton, SecondaryButton,} from '@/features/shared/components/resource-primitives';
+import {formatDateTime, formatRelativeTime} from '@/lib/utils/date';
+import {
+    getApplyLabel,
+    getApplyVariant,
+    getNodeStatusLabel,
+    getNodeStatusVariant,
+    getOpenrestyStatusLabel,
+    getOpenrestyStatusVariant,
+    getRelayStatusLabel,
+    getRelayStatusVariant,
+    isMeaningfulTime,
+    isNodeAbnormal,
+    isWSConnectedLastSeen,
+} from '@/features/nodes/utils';
+
+const nodesQueryKey = ['nodes'];
+const supportedNodeFilters = [
+  'all',
+  'edge',
+  'relay',
+  'tunnel',
+  'abnormal',
+] as const;
+
+type NodeFilter = (typeof supportedNodeFilters)[number];
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+export function NodesPage() {
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [editingNode, setEditingNode] = useState<NodeItem | null>(null);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+
+  const nodesQuery = useQuery({
+    queryKey: nodesQueryKey,
+    queryFn: getNodes,
+    refetchInterval: 5000,
+  });
+
+  const configVersionsQuery = useQuery({
+    queryKey: ['config-versions'],
+    queryFn: getConfigVersions,
+    refetchInterval: 5000,
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: async (payload: NodeMutationPayload) => {
+      return editingNode
+        ? updateNode(editingNode.id, payload)
+        : createNode(payload);
+    },
+    onSuccess: async () => {
+      setFeedback({
+        tone: 'success',
+        message: editingNode ? '节点已更新。' : '节点已创建。',
+      });
+      setEditingNode(null);
+      setIsEditorOpen(false);
+      await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteNode,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '节点已删除。' });
+      setEditingNode(null);
+      await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const nodes = useMemo(() => nodesQuery.data ?? [], [nodesQuery.data]);
+  const activeVersion = useMemo(
+    () =>
+      (configVersionsQuery.data ?? []).find((item) => item.is_active)
+        ?.version ?? '',
+    [configVersionsQuery.data],
+  );
+  const nodeFilter = useMemo<NodeFilter>(() => {
+    const current = searchParams.get('filter')?.trim().toLowerCase() ?? '';
+    if (supportedNodeFilters.includes(current as NodeFilter)) {
+      return current as NodeFilter;
+    }
+
+    const legacyRisk = searchParams.get('risk')?.trim().toLowerCase() ?? '';
+    if (
+      legacyRisk === 'offline' ||
+      legacyRisk === 'unhealthy' ||
+      legacyRisk === 'lagging'
+    ) {
+      return 'abnormal';
+    }
+
+    return 'all';
+  }, [searchParams]);
+  const filteredNodes = useMemo(() => {
+    switch (nodeFilter) {
+      case 'all':
+        return nodes;
+      case 'relay':
+        return nodes.filter((node) => node.node_type === 'tunnel_relay');
+      case 'tunnel':
+        return nodes.filter((node) => node.node_type === 'tunnel_client');
+      case 'abnormal':
+        return nodes.filter((node) => isNodeAbnormal(node, activeVersion));
+      case 'edge':
+      default:
+        return nodes.filter((node) => node.node_type === 'edge_node');
+    }
+  }, [activeVersion, nodeFilter, nodes]);
+
+  const filterDescription = useMemo(() => {
+    switch (nodeFilter) {
+      case 'all':
+        return '当前展示全部节点。';
+      case 'relay':
+        return '当前仅展示 Relay 节点。';
+      case 'tunnel':
+        return '当前仅展示 Tunnel 节点。';
+      case 'abnormal':
+        return activeVersion
+          ? `当前仅展示异常节点（离线、运行异常或未追平激活版本 ${activeVersion}）。`
+          : '当前仅展示异常节点（离线或运行异常）。';
+      case 'edge':
+      default:
+        return '当前仅展示 Edge 节点。';
+    }
+  }, [activeVersion, nodeFilter]);
+
+  const handleReset = () => {
+    setFeedback(null);
+    setEditingNode(null);
+    setIsEditorOpen(false);
+  };
+
+  const handleCreate = () => {
+    setFeedback(null);
+    setEditingNode(null);
+    setIsEditorOpen(true);
+  };
+
+  const handleEdit = (node: NodeItem) => {
+    setFeedback(null);
+    setEditingNode(node);
+    setIsEditorOpen(true);
+  };
+
+  const handleDelete = (nodeId: number, nodeName: string) => {
+    if (
+      !window.confirm(
+        `确认删除节点“${nodeName}”吗？删除后该节点需要重新创建并重新接入。`,
+      )
+    ) {
+      return;
+    }
+
+    setFeedback(null);
+    deleteMutation.mutate(nodeId);
+  };
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="节点管理"
+          description="显示节点相关信息。"
+          action={
+            <>
+              <SecondaryButton type="button" onClick={handleCreate}>
+                新增节点
+              </SecondaryButton>
+              <Link
+                href="/apply-log"
+                className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+              >
+                应用记录
+              </Link>
+            </>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage
+            tone={feedback.tone}
+            message={feedback.message}
+            onClear={() => setFeedback(null)}
+          />
+        ) : null}
+
+        <AppCard
+          title="节点列表"
+          description={filterDescription}
+          action={
+            <SecondaryButton
+              type="button"
+              onClick={() =>
+                void queryClient.invalidateQueries({ queryKey: nodesQueryKey })
+              }
+            >
+              立即刷新
+            </SecondaryButton>
+          }
+        >
+          {nodesQuery.isLoading ? (
+            <LoadingState />
+          ) : nodesQuery.isError ? (
+            <ErrorState
+              title="节点列表加载失败"
+              description={getErrorMessage(nodesQuery.error)}
+            />
+          ) : filteredNodes.length === 0 ? (
+            <EmptyState
+              title={nodes.length === 0 ? '暂无节点' : '当前筛选无结果'}
+              description={
+                nodes.length === 0
+                  ? '请先创建一个节点，然后进入详情页查看专属部署命令。'
+                  : '可以返回总览继续排查，或切换到其他筛选查看完整列表。'
+              }
+            />
+          ) : (
+            <div className="space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <Link
+                  href="/node"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    nodeFilter === 'all'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  全部节点
+                </Link>
+                <Link
+                  href="/node?filter=edge"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    nodeFilter === 'edge'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  Edge
+                </Link>
+                <Link
+                  href="/node?filter=relay"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    nodeFilter === 'relay'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  Relay
+                </Link>
+                <Link
+                  href="/node?filter=tunnel"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    nodeFilter === 'tunnel'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  Tunnel
+                </Link>
+                <Link
+                  href="/node?filter=abnormal"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    nodeFilter === 'abnormal'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  异常
+                </Link>
+              </div>
+
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                  <thead>
+                    <tr className="text-[var(--foreground-secondary)]">
+                      <th className="px-3 py-3 font-medium">节点</th>
+                      <th className="px-3 py-3 font-medium">状态</th>
+                      <th className="px-3 py-3 font-medium">Version</th>
+                      <th className="px-3 py-3 font-medium">运行健康</th>
+                      <th className="px-3 py-3 font-medium">当前版本</th>
+                      <th className="px-3 py-3 font-medium">最近应用</th>
+                      <th className="px-3 py-3 font-medium">最近心跳</th>
+                      <th className="px-3 py-3 font-medium">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[var(--border-default)]">
+                    {filteredNodes.map((node) => (
+                      <tr key={node.id} className="align-top">
+                        <td className="px-3 py-4">
+                          <div className="space-y-1">
+                            <div className="flex items-center gap-2">
+                              <p className="font-medium text-[var(--foreground-primary)]">
+                                {node.name}
+                              </p>
+                              {node.node_type === 'tunnel_relay' ? (
+                                <span className="rounded-full border border-blue-500/20 bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+                                  Relay
+                                </span>
+                              ) : node.node_type === 'tunnel_client' ? (
+                                <span className="rounded-full border border-purple-500/20 bg-purple-50 px-2 py-0.5 text-xs text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
+                                  Client
+                                </span>
+                              ) : (
+                                <span className="rounded-full border border-gray-500/20 bg-gray-50 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800/50 dark:text-gray-300">
+                                  Edge
+                                </span>
+                              )}
+                            </div>
+                            <p className="text-xs text-[var(--foreground-secondary)]">
+                              IP：{node.ip || 'null'}
+                              {node.ip_manual_override ? '（已锁定）' : ''}
+                            </p>
+                            <p className="text-xs text-[var(--foreground-secondary)]">
+                              位置：{node.geo_name || '未配置地图点位'}
+                            </p>
+                          </div>
+                        </td>
+                        <td className="px-3 py-4">
+                          <StatusBadge
+                            label={getNodeStatusLabel(node.status)}
+                            variant={getNodeStatusVariant(node.status)}
+                          />
+                        </td>
+                        <td className="px-3 py-4 text-sm text-[var(--foreground-secondary)]">
+                          {node.version || 'unknown'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="space-y-2">
+                            {node.node_type === 'tunnel_relay' ? (
+                              <StatusBadge
+                                label={getRelayStatusLabel(node.relay_status)}
+                                variant={getRelayStatusVariant(
+                                  node.relay_status,
+                                )}
+                              />
+                            ) : node.node_type === 'tunnel_client' ? (
+                              <StatusBadge
+                                label={
+                                  node.status === 'online' ? '运行中' : '未知'
+                                }
+                                variant={
+                                  node.status === 'online'
+                                    ? 'success'
+                                    : 'warning'
+                                }
+                              />
+                            ) : (
+                              <StatusBadge
+                                label={getOpenrestyStatusLabel(
+                                  node.openresty_status,
+                                )}
+                                variant={getOpenrestyStatusVariant(
+                                  node.openresty_status,
+                                )}
+                              />
+                            )}
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {node.current_version ||
+                            (node.node_type === 'tunnel_relay'
+                              ? '实时配置'
+                              : '未应用')}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="space-y-2">
+                            {node.node_type === 'tunnel_relay' ? (
+                              <span className="text-sm text-[var(--foreground-secondary)]">
+                                —
+                              </span>
+                            ) : (
+                              <StatusBadge
+                                label={getApplyLabel(node.latest_apply_result)}
+                                variant={getApplyVariant(
+                                  node.latest_apply_result,
+                                )}
+                              />
+                            )}
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {isWSConnectedLastSeen(node.last_seen_at)
+                            ? 'WS 已连接'
+                            : isMeaningfulTime(node.last_seen_at)
+                              ? `${formatRelativeTime(
+                                  node.last_seen_at,
+                                )} · ${formatDateTime(node.last_seen_at)}`
+                              : '暂无'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="flex flex-wrap gap-2">
+                            <Link
+                              href={`/node/detail?id=${node.id}`}
+                              className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+                            >
+                              详情
+                            </Link>
+                            <SecondaryButton
+                              type="button"
+                              onClick={() => handleEdit(node)}
+                              className="px-3 py-2 text-xs"
+                            >
+                              编辑
+                            </SecondaryButton>
+                            <DangerButton
+                              type="button"
+                              onClick={() => handleDelete(node.id, node.name)}
+                              disabled={deleteMutation.isPending}
+                              className="px-3 py-2 text-xs"
+                            >
+                              删除
+                            </DangerButton>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </AppCard>
+      </div>
+      <NodeEditorModal
+        isOpen={isEditorOpen}
+        node={editingNode}
+        isSubmitting={saveMutation.isPending}
+        title={editingNode ? '编辑节点' : '新增节点'}
+        onClose={handleReset}
+        description="预创建节点后可在详情页查看专属 Token、部署命令与更新控制。"
+        submitLabel={editingNode ? '保存修改' : '新增节点'}
+        onSubmit={(payload) => {
+          setFeedback(null);
+          saveMutation.mutate(payload);
+        }}
+      />
+    </>
+  );
+}