tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-13 18:36:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/config-versions/components/preview-sheet.tsx
+80 -45
View File
@@ -1,22 +1,29 @@
"use client"
'use client';
import {Loader2} from "lucide-react"
import { Loader2 } from 'lucide-react';
import {Badge} from "@/components/ui/badge"
import {Button} from "@/components/ui/button"
import {CodeBlock} from "@/components/ui/code-block"
import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from "@/components/ui/sheet"
import type {ConfigPreviewResult} from "@/lib/services/openflare"
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { CodeBlock } from '@/components/ui/code-block';
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet';
import type { ConfigPreviewResult } from '@/lib/services/openflare';
interface PreviewSheetProps {
open: boolean
onOpenChange: (open: boolean) => void
preview: ConfigPreviewResult | null
loading: boolean
error: string | null
publishing: boolean
canPublish: boolean
onPublish: () => void
open: boolean;
onOpenChange: (open: boolean) => void;
preview: ConfigPreviewResult | null;
loading: boolean;
error: string | null;
publishing: boolean;
canPublish: boolean;
onPublish: () => void;
}
export function PreviewSheet({
@@ -31,65 +38,86 @@ export function PreviewSheet({
}: PreviewSheetProps) {
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0">
<SheetHeader className="px-5 py-4 border-b">
<SheetContent className='sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0'>
<SheetHeader className='px-5 py-4 border-b'>
<SheetTitle>发布预览</SheetTitle>
<SheetDescription>
查看待发布配置的渲染结果与支持文件。
</SheetDescription>
</SheetHeader>
<div className="flex-1 min-h-0 overflow-y-auto px-5 py-4">
<div className='flex-1 min-h-0 overflow-y-auto px-5 py-4'>
{loading ? (
<div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
<Loader2 className="size-4 animate-spin" />
<div className='flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground'>
<Loader2 className='size-4 animate-spin' />
正在加载预览...
</div>
) : error ? (
<p className="text-sm text-destructive">{error}</p>
<p className='text-sm text-destructive'>{error}</p>
) : preview ? (
<div className="space-y-5 pb-4">
<div className="flex flex-wrap gap-2">
<Badge variant="outline" className="rounded-full text-[10px]">
<div className='space-y-5 pb-4'>
<div className='flex flex-wrap gap-2'>
<Badge variant='outline' className='rounded-full text-[10px]'>
规则 {preview.route_count} 条
</Badge>
<Badge variant="outline" className="rounded-full text-[10px]">
<Badge variant='outline' className='rounded-full text-[10px]'>
网站 {preview.website_count} 个
</Badge>
<Badge variant="outline" className="rounded-full text-[10px] font-mono">
<Badge
variant='outline'
className='rounded-full text-[10px] font-mono'
>
{preview.checksum.slice(0, 16)}...
</Badge>
</div>
<div className="space-y-2">
<p className="text-xs font-semibold">主配置</p>
<CodeBlock code={preview.main_config} language="nginx" className="my-0 text-xs" />
<div className='space-y-2'>
<p className='text-xs font-semibold'>主配置</p>
<CodeBlock
code={preview.main_config}
language='nginx'
className='my-0 text-xs'
/>
</div>
<div className="space-y-2">
<p className="text-xs font-semibold">路由配置</p>
<CodeBlock code={preview.rendered_config} language="nginx" className="my-0 text-xs" />
<div className='space-y-2'>
<p className='text-xs font-semibold'>路由配置</p>
<CodeBlock
code={preview.rendered_config}
language='nginx'
className='my-0 text-xs'
/>
</div>
{preview.support_files.length > 0 ? (
<div className="space-y-2">
<p className="text-xs font-semibold">支持文件 ({preview.support_files.length})</p>
<div className='space-y-2'>
<p className='text-xs font-semibold'>
支持文件 ({preview.support_files.length})
</p>
{preview.support_files.map((file) => (
<details
key={file.path}
className="rounded-lg border border-dashed px-3 py-2"
className='rounded-lg border border-dashed px-3 py-2'
>
<summary className="cursor-pointer text-xs font-medium">{file.path}</summary>
<CodeBlock code={file.content} language="text" className="my-2 text-xs" />
<summary className='cursor-pointer text-xs font-medium'>
{file.path}
</summary>
<CodeBlock
code={file.content}
language='text'
className='my-2 text-xs'
/>
</details>
))}
</div>
) : (
<p className="text-xs text-muted-foreground">当前发布不需要额外支持文件。</p>
<p className='text-xs text-muted-foreground'>
当前发布不需要额外支持文件。
</p>
)}
{!canPublish ? (
<p className="text-xs text-muted-foreground">
<p className='text-xs text-muted-foreground'>
当前规则与已激活版本一致，无法重复发布。
</p>
) : null}
@@ -97,22 +125,29 @@ export function PreviewSheet({
) : null}
</div>
<SheetFooter className="px-5 py-4 border-t">
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={publishing}>
<SheetFooter className='px-5 py-4 border-t'>
<Button
variant='outline'
onClick={() => onOpenChange(false)}
disabled={publishing}
>
关闭
</Button>
<Button onClick={onPublish} disabled={!canPublish || publishing || loading}>
<Button
onClick={onPublish}
disabled={!canPublish || publishing || loading}
>
{publishing ? (
<>
<Loader2 className="size-4 animate-spin mr-1" />
<Loader2 className='size-4 animate-spin mr-1' />
发布中...
</>
) : (
"确认发布"
'确认发布'
)}
</Button>
</SheetFooter>
</SheetContent>
</Sheet>
)
);
}