migrate frontend

2026-10-13 18:36:37 +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,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>
+  );
+}