migrate frontend

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

@@ -1,26 +1,150 @@
 'use client';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+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 }: LimitsSectionProps) {
+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 (
-    <Card className="border-dashed shadow-none">
-      <CardHeader>
-        <CardTitle className="text-sm font-semibold">流量限制</CardTitle>
-        <CardDescription>设置连接数和限速。</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-3 text-sm text-muted-foreground">
-        <p>待实现</p>
-        <p className="text-xs">
-          当前限速：{route.limit_rate || '未配置'}；单 IP 连接数：{route.limit_conn_per_ip}；单 Server
-          连接数：{route.limit_conn_per_server}
-        </p>
-      </CardContent>
-    </Card>
+    <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>
   );
 }