migrate frontend

2026-10-13 02:26:36 +08:00 · 2026-06-18 17:26:57 +08:00
parent d7fe4ef8be
commit a9fd0bd128
53 changed files with 4765 additions and 19 deletions
@@ -0,0 +1,90 @@
+import type {ProxyRouteConfigSection, ProxyRouteItem} from '@/lib/services/openflare';
+
+export const proxyRouteConfigSections = [
+  {
+    key: 'domains' as const,
+    label: '域名设置',
+    description: '维护站点标识、域名列表和证书绑定。',
+  },
+  {
+    key: 'limits' as const,
+    label: '流量限制',
+    description: '设置连接数和限速。',
+  },
+  {
+    key: 'proxy' as const,
+    label: '反向代理',
+    description: '配置主回源和上游地址。',
+  },
+  {
+    key: 'cache' as const,
+    label: '缓存',
+    description: '配置站点缓存策略。',
+  },
+  {
+    key: 'waf' as const,
+    label: 'WAF',
+    description: '绑定 WAF 规则组，并查看当前站点生效策略。',
+  },
+  {
+    key: 'auth' as const,
+    label: '认证配置',
+    description: '配置基础鉴权访问，需要输入账号密码才能访问网站。',
+  },
+] satisfies ReadonlyArray<{
+  key: ProxyRouteConfigSection;
+  label: string;
+  description: string;
+}>;
+
+const domainPattern =
+  /^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,63}$/i;
+
+export function getProxyRouteConfigSection(
+  value: string | null | undefined,
+): ProxyRouteConfigSection {
+  return proxyRouteConfigSections.some((section) => section.key === value)
+    ? (value as ProxyRouteConfigSection)
+    : 'domains';
+}
+
+export function validateDomain(domain: string): string | null {
+  const normalized = domain.trim().toLowerCase();
+  if (!normalized) {
+    return '请输入域名';
+  }
+  if (!domainPattern.test(normalized)) {
+    return '域名格式不合法';
+  }
+  return null;
+}
+
+export function parseOriginUrl(originUrl: string) {
+  const parsed = new URL(originUrl);
+  const port = parsed.port || (parsed.protocol === 'http:' ? '80' : '443');
+  const path = parsed.pathname === '/' ? '' : parsed.pathname;
+
+  return {
+    scheme: parsed.protocol.replace(':', '') as 'http' | 'https',
+    address: parsed.hostname,
+    port,
+    uri: parsed.search ? `${path}${parsed.search}` || parsed.search : path,
+  };
+}
+
+export function getUpstreamSummary(route: ProxyRouteItem): string {
+  if (route.upstream_type === 'pages') {
+    return route.pages_project_id
+      ? `Pages 项目 #${route.pages_project_id}`
+      : 'Pages 项目未绑定';
+  }
+  if (route.upstream_type === 'tunnel') {
+    const protocol = route.tunnel_target_protocol || 'http';
+    const target = route.tunnel_target_addr || '未配置目标';
+    return `Tunnel → ${protocol}://${target}`;
+  }
+  if (route.upstream_list.length <= 1) {
+    return route.origin_url;
+  }
+  return `${route.upstream_list.length} 个上游，主上游 ${route.origin_url}`;
+}
@@ -0,0 +1,234 @@
+'use client';
+
+import {useEffect} from 'react';
+import {zodResolver} from '@hookform/resolvers/zod';
+import {useForm} from 'react-hook-form';
+import {z} from 'zod';
+
+import {Button} from '@/components/ui/button';
+import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form';
+import {Input} from '@/components/ui/input';
+import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from '@/components/ui/sheet';
+import {Switch} from '@/components/ui/switch';
+import {Textarea} from '@/components/ui/textarea';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+import {ProxyRouteService} from '@/lib/services/openflare';
+
+import {parseOriginUrl, validateDomain} from './helpers';
+
+const createProxyRouteSchema = z
+  .object({
+    site_name: z.string().trim().max(255, '站点标识不能超过 255 个字符'),
+    domain: z.string().trim().min(1, '请输入域名'),
+    origin_url: z.string().trim().min(1, '请输入上游地址'),
+    enabled: z.boolean(),
+    remark: z.string().max(255, '备注不能超过 255 个字符'),
+  })
+  .superRefine((value, context) => {
+    const domainError = validateDomain(value.domain);
+    if (domainError) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['domain'],
+        message: domainError,
+      });
+    }
+
+    try {
+      const parsed = new URL(value.origin_url);
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['origin_url'],
+          message: '上游地址必须以 http:// 或 https:// 开头',
+        });
+      }
+    } catch {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['origin_url'],
+        message: '上游地址格式不合法',
+      });
+    }
+  });
+
+type CreateProxyRouteFormValues = z.infer<typeof createProxyRouteSchema>;
+
+const defaultValues: CreateProxyRouteFormValues = {
+  site_name: '',
+  domain: '',
+  origin_url: '',
+  enabled: true,
+  remark: '',
+};
+
+interface ProxyRouteCreateSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (route: ProxyRouteItem) => void;
+}
+
+export function ProxyRouteCreateSheet({
+  open,
+  onOpenChange,
+  onCreated,
+}: ProxyRouteCreateSheetProps) {
+  const form = useForm<CreateProxyRouteFormValues>({
+    resolver: zodResolver(createProxyRouteSchema),
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (!open) {
+      form.reset(defaultValues);
+    }
+  }, [form, open]);
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const domain = values.domain.trim().toLowerCase();
+    const origin = parseOriginUrl(values.origin_url.trim());
+
+    try {
+      const route = await ProxyRouteService.create({
+        site_name: values.site_name.trim() || domain,
+        domain,
+        domains: [domain],
+        origin_id: null,
+        origin_url: values.origin_url.trim(),
+        origin_scheme: origin.scheme,
+        origin_address: origin.address,
+        origin_port: origin.port,
+        origin_uri: origin.uri,
+        origin_host: '',
+        upstreams: [],
+        enabled: values.enabled,
+        enable_https: false,
+        cert_id: null,
+        cert_ids: [],
+        domain_cert_ids: [0],
+        redirect_http: false,
+        limit_conn_per_server: 0,
+        limit_conn_per_ip: 0,
+        limit_rate: '',
+        cache_enabled: false,
+        cache_policy: 'url',
+        cache_rules: [],
+        custom_headers: [],
+        pow_enabled: false,
+        pow_config: '{}',
+        basic_auth_enabled: false,
+        remark: values.remark.trim(),
+        upstream_type: 'direct',
+      });
+
+      form.reset(defaultValues);
+      onOpenChange(false);
+      onCreated(route);
+    } catch (error) {
+      form.setError('root', {
+        message: error instanceof Error ? error.message : '创建失败，请稍后重试',
+      });
+    }
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>新建规则</SheetTitle>
+          <SheetDescription>
+            创建网站后可进入详情页继续配置 HTTPS、缓存和限流等高级选项。
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={handleSubmit} className="space-y-4 px-4 pb-4">
+            <FormField
+              control={form.control}
+              name="site_name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>站点标识</FormLabel>
+                  <FormControl>
+                    <Input placeholder="marketing-site" {...field} />
+                  </FormControl>
+                  <FormDescription>可选，留空时会自动使用域名。</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="domain"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>主域名</FormLabel>
+                  <FormControl>
+                    <Input placeholder="www.example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="origin_url"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>上游地址</FormLabel>
+                  <FormControl>
+                    <Input placeholder="https://origin.internal:443" {...field} />
+                  </FormControl>
+                  <FormDescription>主回源完整 URL，创建后可在详情页添加多上游。</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="enabled"
+              render={({ field }) => (
+                <FormItem className="flex items-center justify-between rounded-lg border p-3">
+                  <div className="space-y-0.5">
+                    <FormLabel>创建后立即启用</FormLabel>
+                    <FormDescription>关闭后站点会以草稿保存。</FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="remark"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>备注</FormLabel>
+                  <FormControl>
+                    <Textarea rows={3} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {form.formState.errors.root?.message ? (
+              <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
+            ) : null}
+
+            <SheetFooter className="px-0">
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {form.formState.isSubmitting ? '创建中...' : '创建'}
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
@@ -0,0 +1,25 @@
+'use client';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+
+interface AuthSectionProps {
+  route: ProxyRouteItem;
+}
+
+export function AuthSection({ route }: AuthSectionProps) {
+  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.basic_auth_enabled ? '已启用' : '未启用'}；PoW：{route.pow_enabled ? '已启用' : '未启用'}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,25 @@
+'use client';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+
+interface CacheSectionProps {
+  route: ProxyRouteItem;
+}
+
+export function CacheSection({ route }: CacheSectionProps) {
+  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.cache_enabled ? '已启用' : '未启用'}；策略：{route.cache_policy || 'url'}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,26 @@
+'use client';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+
+interface DomainSectionProps {
+  route: ProxyRouteItem;
+}
+
+export function DomainSection({ route }: DomainSectionProps) {
+  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.primary_domain || route.domain}
+          {route.domains.length > 1 ? `（共 ${route.domains.length} 个域名）` : ''}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,26 @@
+'use client';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+
+interface LimitsSectionProps {
+  route: ProxyRouteItem;
+}
+
+export function LimitsSection({ route }: LimitsSectionProps) {
+  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>
+  );
+}
@@ -0,0 +1,25 @@
+'use client';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+
+import {getUpstreamSummary} from '../../components/helpers';
+
+interface ProxySectionProps {
+  route: ProxyRouteItem;
+}
+
+export function ProxySection({ route }: ProxySectionProps) {
+  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">当前上游：{getUpstreamSummary(route)}</p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,48 @@
+'use client';
+
+import Link from 'next/link';
+import {ArrowLeft, Route, Save, Upload} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+
+interface RouteHeaderProps {
+  route: ProxyRouteItem;
+}
+
+export function RouteHeader({ route }: RouteHeaderProps) {
+  return (
+    <div className="space-y-4">
+      <Button variant="ghost" size="sm" className="h-8 gap-1.5 px-0 text-xs" asChild>
+        <Link href="/openflare/proxy-routes">
+          <ArrowLeft className="size-3.5" />
+          返回规则列表
+        </Link>
+      </Button>
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2">
+          <Route className="size-5 text-primary" />
+          <div className="flex flex-wrap items-center gap-2">
+            <h1 className="text-2xl font-semibold tracking-tight">{route.site_name}</h1>
+            <Badge variant={route.enabled ? 'default' : 'secondary'}>
+              {route.enabled ? '已启用' : '已停用'}
+            </Badge>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          <Button size="sm" variant="secondary" className="h-8 gap-1.5 text-xs" disabled>
+            <Save className="size-3.5" />
+            保存（待实现）
+          </Button>
+          <Button size="sm" className="h-8 gap-1.5 text-xs" disabled>
+            <Upload className="size-3.5" />
+            发布配置（待实现）
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,23 @@
+'use client';
+
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+
+interface WafSectionProps {
+  route: ProxyRouteItem;
+}
+
+export function WafSection({ route }: WafSectionProps) {
+  return (
+    <Card className="border-dashed shadow-none">
+      <CardHeader>
+        <CardTitle className="text-sm font-semibold">WAF</CardTitle>
+        <CardDescription>绑定 WAF 规则组，并查看当前站点生效策略。</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3 text-sm text-muted-foreground">
+        <p>待实现</p>
+        <p className="text-xs">站点 ID：{route.id}</p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,144 @@
+'use client';
+
+import {useCallback, useEffect, useState} from 'react';
+import {useRouter, useSearchParams} from 'next/navigation';
+import {toast} from 'sonner';
+
+import {Skeleton} from '@/components/ui/skeleton';
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
+import type {ProxyRouteConfigSection, ProxyRouteItem} from '@/lib/services/openflare';
+import {ProxyRouteService} from '@/lib/services/openflare';
+
+import {getProxyRouteConfigSection, proxyRouteConfigSections} from '../components/helpers';
+import {AuthSection} from './components/auth-section';
+import {CacheSection} from './components/cache-section';
+import {DomainSection} from './components/domain-section';
+import {LimitsSection} from './components/limits-section';
+import {ProxySection} from './components/proxy-section';
+import {RouteHeader} from './components/route-header';
+import {WafSection} from './components/waf-section';
+
+export function ProxyRouteDetailPageClient() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const routeId = Number(searchParams.get('id'));
+  const activeSection = getProxyRouteConfigSection(searchParams.get('section'));
+
+  const [route, setRoute] = useState<ProxyRouteItem | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const handleSectionChange = useCallback(
+    (section: ProxyRouteConfigSection) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('section', section);
+      router.replace(`/openflare/proxy-routes/detail?${params.toString()}`);
+    },
+    [router, searchParams],
+  );
+
+  useEffect(() => {
+    if (!Number.isFinite(routeId) || routeId <= 0) {
+      setLoading(false);
+      setRoute(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    const fetchRoute = async () => {
+      setLoading(true);
+      try {
+        const data = await ProxyRouteService.getById(routeId);
+        if (!cancelled) {
+          setRoute(data);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setRoute(null);
+          toast.error('规则详情加载失败', {
+            description: error instanceof Error ? error.message : '未知错误',
+          });
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void fetchRoute();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [routeId]);
+
+  if (!Number.isFinite(routeId) || routeId <= 0) {
+    return (
+      <div className="py-6 px-1">
+        <p className="text-sm text-muted-foreground">缺少有效的规则 ID。</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="py-6 px-1 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-full max-w-xl" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!route) {
+    return (
+      <div className="py-6 px-1">
+        <p className="text-sm text-muted-foreground">未找到对应规则，请返回列表重试。</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-6 px-1 space-y-6">
+      <RouteHeader route={route} />
+
+      <Tabs
+        value={activeSection}
+        onValueChange={(value) => handleSectionChange(value as ProxyRouteConfigSection)}
+        className="w-full"
+      >
+        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
+          {proxyRouteConfigSections.map((section) => (
+            <TabsTrigger
+              key={section.key}
+              value={section.key}
+              className="px-0 pb-2 text-xs font-semibold"
+            >
+              {section.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContent value="domains" className="focus-visible:outline-none">
+          <DomainSection route={route} />
+        </TabsContent>
+        <TabsContent value="limits" className="focus-visible:outline-none">
+          <LimitsSection route={route} />
+        </TabsContent>
+        <TabsContent value="proxy" className="focus-visible:outline-none">
+          <ProxySection route={route} />
+        </TabsContent>
+        <TabsContent value="cache" className="focus-visible:outline-none">
+          <CacheSection route={route} />
+        </TabsContent>
+        <TabsContent value="waf" className="focus-visible:outline-none">
+          <WafSection route={route} />
+        </TabsContent>
+        <TabsContent value="auth" className="focus-visible:outline-none">
+          <AuthSection route={route} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
@@ -0,0 +1,23 @@
+import {Suspense} from 'react';
+
+import {Skeleton} from '@/components/ui/skeleton';
+
+import {ProxyRouteDetailPageClient} from './page-client';
+
+function DetailPageFallback() {
+  return (
+    <div className="py-6 px-1 space-y-6">
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-10 w-full max-w-xl" />
+      <Skeleton className="h-64 w-full" />
+    </div>
+  );
+}
+
+export default function ProxyRouteDetailPage() {
+  return (
+    <Suspense fallback={<DetailPageFallback />}>
+      <ProxyRouteDetailPageClient />
+    </Suspense>
+  );
+}
@@ -0,0 +1,253 @@
+'use client';
+
+import Link from 'next/link';
+import {useRouter} from 'next/navigation';
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import {Plus, RefreshCw, Route, Trash2} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Input} from '@/components/ui/input';
+import {Skeleton} from '@/components/ui/skeleton';
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import type {ProxyRouteItem} from '@/lib/services/openflare';
+import {ProxyRouteService} from '@/lib/services/openflare';
+
+import {getUpstreamSummary} from './components/helpers';
+import {ProxyRouteCreateSheet} from './components/proxy-route-create-sheet';
+
+export function ProxyRoutesPageClient() {
+  const router = useRouter();
+  const [routes, setRoutes] = useState<ProxyRouteItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [keyword, setKeyword] = useState('');
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<ProxyRouteItem | null>(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const fetchRoutes = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await ProxyRouteService.list();
+      setRoutes(data);
+    } catch (error) {
+      toast.error('规则列表加载失败', {
+        description: error instanceof Error ? error.message : '未知错误',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchRoutes();
+  }, [fetchRoutes]);
+
+  const filteredRoutes = useMemo(() => {
+    const normalizedKeyword = keyword.trim().toLowerCase();
+    if (!normalizedKeyword) {
+      return routes;
+    }
+
+    return routes.filter((route) => {
+      const haystack = [
+        route.site_name,
+        route.primary_domain,
+        ...route.domains,
+        route.origin_url,
+        route.remark,
+      ]
+        .join(' ')
+        .toLowerCase();
+
+      return haystack.includes(normalizedKeyword);
+    });
+  }, [keyword, routes]);
+
+  const handleDelete = async () => {
+    if (!deleteTarget) {
+      return;
+    }
+
+    setDeleting(true);
+    try {
+      await ProxyRouteService.delete(deleteTarget.id);
+      toast.success('网站已删除');
+      setDeleteTarget(null);
+      await fetchRoutes();
+    } catch (error) {
+      toast.error('删除失败', {
+        description: error instanceof Error ? error.message : '未知错误',
+      });
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div className="py-6 px-1 space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2">
+          <Route className="size-5 text-primary" />
+          <h1 className="text-2xl font-semibold tracking-tight">规则配置</h1>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            size="sm"
+            variant="secondary"
+            className="h-8 gap-1.5 text-xs"
+            onClick={() => void fetchRoutes()}
+            disabled={loading}
+          >
+            <RefreshCw className={`size-3 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+          <Button
+            size="sm"
+            className="h-8 gap-1.5 text-xs"
+            onClick={() => setIsCreateOpen(true)}
+          >
+            <Plus className="size-3.5" />
+            新建规则
+          </Button>
+        </div>
+      </div>
+
+      <Card className="border-border/40 shadow-sm">
+        <CardHeader className="pb-3">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <CardTitle className="text-sm font-semibold">规则列表</CardTitle>
+            <Input
+              value={keyword}
+              onChange={(event) => setKeyword(event.target.value)}
+              placeholder="搜索站点、域名或上游..."
+              className="h-8 max-w-sm text-xs"
+            />
+          </div>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 5 }).map((_, index) => (
+                <Skeleton key={index} className="h-10 w-full" />
+              ))}
+            </div>
+          ) : filteredRoutes.length === 0 ? (
+            <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
+              <p className="text-sm font-medium">
+                {routes.length === 0 ? '暂无网站' : '没有匹配结果'}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {routes.length === 0
+                  ? '先创建一个网站，再进入配置子页面继续补齐 HTTPS、缓存和限流。'
+                  : '试试调整搜索词，或者清空筛选条件。'}
+              </p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>站点名称</TableHead>
+                  <TableHead>域名</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead>上游</TableHead>
+                  <TableHead className="text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredRoutes.map((route) => (
+                  <TableRow key={route.id}>
+                    <TableCell className="font-medium">{route.site_name}</TableCell>
+                    <TableCell className="max-w-[220px] truncate" title={route.domains.join(', ')}>
+                      {route.primary_domain || route.domain}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={route.enabled ? 'default' : 'secondary'}>
+                        {route.enabled ? '已启用' : '已停用'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="max-w-[280px] truncate" title={getUpstreamSummary(route)}>
+                      {getUpstreamSummary(route)}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button variant="outline" size="sm" className="h-7 text-xs" asChild>
+                          <Link href={`/openflare/proxy-routes/detail?id=${route.id}`}>
+                            配置
+                          </Link>
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 text-xs text-destructive hover:text-destructive"
+                          onClick={() => setDeleteTarget(route)}
+                        >
+                          <Trash2 className="size-3.5" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <ProxyRouteCreateSheet
+        open={isCreateOpen}
+        onOpenChange={setIsCreateOpen}
+        onCreated={(route) => {
+          toast.success('网站已创建');
+          void fetchRoutes();
+          router.push(`/openflare/proxy-routes/detail?id=${route.id}&section=domains`);
+        }}
+      />
+
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeleteTarget(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认删除网站</AlertDialogTitle>
+            <AlertDialogDescription>
+              {deleteTarget
+                ? `确认删除网站 ${deleteTarget.site_name} 吗？这会删除该站点下的全部域名与配置。`
+                : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>取消</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-white hover:bg-destructive/90"
+              disabled={deleting}
+              onClick={(event) => {
+                event.preventDefault();
+                void handleDelete();
+              }}
+            >
+              {deleting ? '删除中...' : '删除'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+import {ProxyRoutesPageClient} from './page-client';
+
+export default function ProxyRoutesPage() {
+  return <ProxyRoutesPageClient />;
+}