OpenFlare/frontend/app/(main)/proxy-routes/detail/components/limits-section.tsx

'use client';

import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import type { ProxyRouteItem } from '@/lib/services/openflare';

import {
  normalizeLimitRate,
  validateLimitRate,
} from '../../components/helpers';
import { proxyRouteFormIds } from '../helpers';
import { useRouteSectionSave } from '../hooks/use-route-section-save';
import { SectionShell } from './section-shell';

const rateLimitSchema = z
  .object({
    limit_conn_per_server: z.string(),
    limit_conn_per_ip: z.string(),
    limit_rate: z.string(),
  })
  .superRefine((value, context) => {
    for (const field of [
      'limit_conn_per_server',
      'limit_conn_per_ip',
    ] as const) {
      const rawValue = value[field].trim();
      if (!rawValue) {
        continue;
      }
      if (!/^\d+$/.test(rawValue)) {
        context.addIssue({
          code: z.ZodIssueCode.custom,
          path: [field],
          message: '请输入大于等于 0 的整数',
        });
      }
    }

    const limitRateError = validateLimitRate(value.limit_rate);
    if (limitRateError) {
      context.addIssue({
        code: z.ZodIssueCode.custom,
        path: ['limit_rate'],
        message: limitRateError,
      });
    }
  });

type RateLimitValues = z.infer<typeof rateLimitSchema>;

interface LimitsSectionProps {
  route: ProxyRouteItem;
  onRouteUpdate: (route: ProxyRouteItem) => void;
  onSavingChange?: (saving: boolean) => void;
}

export function LimitsSection({
  route,
  onRouteUpdate,
  onSavingChange,
}: LimitsSectionProps) {
  const { saving, save } = useRouteSectionSave(
    route,
    onRouteUpdate,
    onSavingChange,
  );

  const form = useForm<RateLimitValues>({
    resolver: zodResolver(rateLimitSchema),
    defaultValues: {
      limit_conn_per_server: route.limit_conn_per_server
        ? String(route.limit_conn_per_server)
        : '',
      limit_conn_per_ip: route.limit_conn_per_ip
        ? String(route.limit_conn_per_ip)
        : '',
      limit_rate: route.limit_rate || '',
    },
  });

  useEffect(() => {
    form.reset({
      limit_conn_per_server: route.limit_conn_per_server
        ? String(route.limit_conn_per_server)
        : '',
      limit_conn_per_ip: route.limit_conn_per_ip
        ? String(route.limit_conn_per_ip)
        : '',
      limit_rate: route.limit_rate || '',
    });
  }, [form, route]);

  return (
    <SectionShell
      title='流量限制'
      description='站点限流，空值或 0 表示关闭。'
      formId={proxyRouteFormIds.limits}
      saving={saving}
    >
      <Form {...form}>
        <form
          id={proxyRouteFormIds.limits}
          className='grid gap-5 md:grid-cols-2'
          onSubmit={form.handleSubmit(async (values) => {
            await save(
              {
                limit_conn_per_server: Number(
                  values.limit_conn_per_server.trim() || '0',
                ),
                limit_conn_per_ip: Number(
                  values.limit_conn_per_ip.trim() || '0',
                ),
                limit_rate: normalizeLimitRate(values.limit_rate),
              },
              '流量限制已保存',
            );
          })}
        >
          <FormField
            control={form.control}
            name='limit_conn_per_server'
            render={({ field }) => (
              <FormItem>
                <FormLabel>并发限制</FormLabel>
                <FormControl>
                  <Input placeholder='120' {...field} />
                </FormControl>
                <FormDescription>限制当前站点最大并发连接数。</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name='limit_conn_per_ip'
            render={({ field }) => (
              <FormItem>
                <FormLabel>单 IP 限制</FormLabel>
                <FormControl>
                  <Input placeholder='12' {...field} />
                </FormControl>
                <FormDescription>限制单个 IP 的最大并发数。</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name='limit_rate'
            render={({ field }) => (
              <FormItem className='md:col-span-2'>
                <FormLabel>限速</FormLabel>
                <FormControl>
                  <Input placeholder='512k/1m' {...field} />
                </FormControl>
                <FormDescription>
                  限制单请求带宽，例如 512k 或 1m。
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    </SectionShell>
  );
}