mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-13 18:36:37 +08:00
feat(frontend): 控制台 next-intl 中英双语
接入无 URL 前缀的 zh-CN/en,顶栏与外观设置可切换语言;选择写入 cookie 后刷新生效。
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import { useEffect } from 'react';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
||||
@@ -19,11 +20,13 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
const cleanupSchema = z.object({
|
||||
keepCount: z.number().int().min(3, '最少保留 3 个历史快照'),
|
||||
});
|
||||
function buildCleanupSchema(t: (key: string) => string) {
|
||||
return z.object({
|
||||
keepCount: z.number().int().min(3, t('keepMin')),
|
||||
});
|
||||
}
|
||||
|
||||
type CleanupFormValues = z.infer<typeof cleanupSchema>;
|
||||
type CleanupFormValues = z.infer<ReturnType<typeof buildCleanupSchema>>;
|
||||
|
||||
interface CleanupDialogProps {
|
||||
open: boolean;
|
||||
@@ -38,8 +41,10 @@ export function CleanupDialog({
|
||||
onConfirm,
|
||||
loading,
|
||||
}: CleanupDialogProps) {
|
||||
const t = useTranslations('configVersions');
|
||||
const tc = useTranslations('common');
|
||||
const form = useForm<CleanupFormValues>({
|
||||
resolver: zodResolver(cleanupSchema),
|
||||
resolver: zodResolver(buildCleanupSchema(t)),
|
||||
defaultValues: { keepCount: 10 },
|
||||
});
|
||||
|
||||
@@ -57,14 +62,12 @@ export function CleanupDialog({
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>清理历史快照</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
删除旧的历史快照配置,系统将始终保护当前已激活的版本不被删除。
|
||||
</AlertDialogDescription>
|
||||
<AlertDialogTitle>{t('cleanupTitle')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{t('cleanupDesc')}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='keepCount'>保留最近快照个数</Label>
|
||||
<Label htmlFor='keepCount'>{t('keepCount')}</Label>
|
||||
<Input
|
||||
id='keepCount'
|
||||
type='number'
|
||||
@@ -73,7 +76,7 @@ export function CleanupDialog({
|
||||
{...form.register('keepCount', { valueAsNumber: true })}
|
||||
/>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
默认为 10 个,最少需保留 3 个。
|
||||
{t('keepHint')}
|
||||
</p>
|
||||
{form.formState.errors.keepCount ? (
|
||||
<p className='text-xs text-destructive'>
|
||||
@@ -83,7 +86,7 @@ export function CleanupDialog({
|
||||
</div>
|
||||
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
|
||||
<AlertDialogCancel disabled={loading}>{tc('cancel')}</AlertDialogCancel>
|
||||
<Button
|
||||
variant='destructive'
|
||||
onClick={() => void handleConfirm()}
|
||||
@@ -92,10 +95,10 @@ export function CleanupDialog({
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className='size-4 animate-spin mr-1' />
|
||||
清理中...
|
||||
{t('cleaning')}
|
||||
</>
|
||||
) : (
|
||||
'确认清理'
|
||||
t('confirmCleanup')
|
||||
)}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
@@ -29,12 +30,13 @@ interface DiffDialogProps {
|
||||
}
|
||||
|
||||
function DiffChipList({ title, items }: { title: string; items: string[] }) {
|
||||
const t = useTranslations('configVersions');
|
||||
return (
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center justify-between gap-2'>
|
||||
<p className='text-xs font-semibold'>{title}</p>
|
||||
<Badge variant='outline' className='text-[10px] rounded-full'>
|
||||
{items.length} 项
|
||||
{t('itemCount', { count: items.length })}
|
||||
</Badge>
|
||||
</div>
|
||||
{items.length > 0 ? (
|
||||
@@ -50,16 +52,12 @@ function DiffChipList({ title, items }: { title: string; items: string[] }) {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className='text-xs text-muted-foreground'>无变更</p>
|
||||
<p className='text-xs text-muted-foreground'>{t('noChange')}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderOptionValue(value: string) {
|
||||
return value === '' ? '空' : value;
|
||||
}
|
||||
|
||||
export function DiffDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
@@ -67,20 +65,19 @@ export function DiffDialog({
|
||||
loading,
|
||||
error,
|
||||
}: DiffDialogProps) {
|
||||
const t = useTranslations('configVersions');
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className='sm:max-w-3xl max-h-[85vh] overflow-y-auto'>
|
||||
<DialogHeader>
|
||||
<DialogTitle>配置差异</DialogTitle>
|
||||
<DialogDescription>
|
||||
对比当前待发布配置与已激活版本之间的差异。
|
||||
</DialogDescription>
|
||||
<DialogTitle>{t('diffTitle')}</DialogTitle>
|
||||
<DialogDescription>{t('diffDesc')}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
<div className='flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground'>
|
||||
<Loader2 className='size-4 animate-spin' />
|
||||
正在加载差异数据...
|
||||
{t('loadingDiff')}
|
||||
</div>
|
||||
) : error ? (
|
||||
<p className='text-sm text-destructive'>{error}</p>
|
||||
@@ -89,15 +86,15 @@ export function DiffDialog({
|
||||
<div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-4'>
|
||||
<div className='rounded-lg border border-dashed p-3'>
|
||||
<p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
|
||||
激活版本
|
||||
{t('activeVersion')}
|
||||
</p>
|
||||
<p className='mt-1 text-sm font-medium'>
|
||||
{diff.active_version || '无'}
|
||||
{diff.active_version || t('none')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='rounded-lg border border-dashed p-3'>
|
||||
<p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
|
||||
新增域名
|
||||
{t('addedDomains')}
|
||||
</p>
|
||||
<p className='mt-1 text-lg font-semibold text-emerald-600'>
|
||||
{diff.added_domains.length}
|
||||
@@ -105,7 +102,7 @@ export function DiffDialog({
|
||||
</div>
|
||||
<div className='rounded-lg border border-dashed p-3'>
|
||||
<p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
|
||||
删除域名
|
||||
{t('removedDomains')}
|
||||
</p>
|
||||
<p className='mt-1 text-lg font-semibold text-amber-600'>
|
||||
{diff.removed_domains.length}
|
||||
@@ -113,7 +110,7 @@ export function DiffDialog({
|
||||
</div>
|
||||
<div className='rounded-lg border border-dashed p-3'>
|
||||
<p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
|
||||
修改域名
|
||||
{t('modifiedDomains')}
|
||||
</p>
|
||||
<p className='mt-1 text-lg font-semibold text-blue-600'>
|
||||
{diff.modified_domains.length}
|
||||
@@ -122,25 +119,38 @@ export function DiffDialog({
|
||||
</div>
|
||||
|
||||
<div className='grid gap-4 md:grid-cols-3'>
|
||||
<DiffChipList title='新增域名' items={diff.added_domains} />
|
||||
<DiffChipList title='删除域名' items={diff.removed_domains} />
|
||||
<DiffChipList title='修改域名' items={diff.modified_domains} />
|
||||
<DiffChipList
|
||||
title={t('addedDomains')}
|
||||
items={diff.added_domains}
|
||||
/>
|
||||
<DiffChipList
|
||||
title={t('removedDomains')}
|
||||
items={diff.removed_domains}
|
||||
/>
|
||||
<DiffChipList
|
||||
title={t('modifiedDomains')}
|
||||
items={diff.modified_domains}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
<Badge
|
||||
variant={diff.main_config_changed ? 'destructive' : 'outline'}
|
||||
>
|
||||
主配置 {diff.main_config_changed ? '已变化' : '无变化'}
|
||||
{diff.main_config_changed
|
||||
? t('mainChanged')
|
||||
: t('mainUnchanged')}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={diff.waf_config_changed ? 'destructive' : 'outline'}
|
||||
>
|
||||
WAF {diff.waf_config_changed ? '已变化' : '无变化'}
|
||||
{diff.waf_config_changed ? t('wafChanged') : t('wafUnchanged')}
|
||||
</Badge>
|
||||
<Badge variant='outline'>
|
||||
网站数 {diff.active_website_count} →{' '}
|
||||
{diff.current_website_count}
|
||||
{t('websiteDelta', {
|
||||
from: diff.active_website_count,
|
||||
to: diff.current_website_count,
|
||||
})}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
@@ -150,13 +160,13 @@ export function DiffDialog({
|
||||
<TableHeader className='bg-muted/40'>
|
||||
<TableRow className='border-dashed hover:bg-transparent'>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
参数
|
||||
{t('optionKey')}
|
||||
</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
激活值
|
||||
{t('activeValue')}
|
||||
</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
待发布值
|
||||
{t('pendingValue')}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -167,10 +177,14 @@ export function DiffDialog({
|
||||
{item.key}
|
||||
</TableCell>
|
||||
<TableCell className='text-xs font-mono text-muted-foreground'>
|
||||
{renderOptionValue(item.previous_value)}
|
||||
{item.previous_value === ''
|
||||
? t('emptyValue')
|
||||
: item.previous_value}
|
||||
</TableCell>
|
||||
<TableCell className='text-xs font-mono text-muted-foreground'>
|
||||
{renderOptionValue(item.current_value)}
|
||||
{item.current_value === ''
|
||||
? t('emptyValue')
|
||||
: item.current_value}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
@@ -179,7 +193,7 @@ export function DiffDialog({
|
||||
</div>
|
||||
) : (
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
当前无 OpenResty 参数变化。
|
||||
{t('noOptionChanges')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -36,21 +37,20 @@ export function PreviewSheet({
|
||||
canPublish,
|
||||
onPublish,
|
||||
}: PreviewSheetProps) {
|
||||
const t = useTranslations('configVersions');
|
||||
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'>
|
||||
<SheetTitle>发布预览</SheetTitle>
|
||||
<SheetDescription>
|
||||
查看待发布配置的渲染结果与支持文件。
|
||||
</SheetDescription>
|
||||
<SheetTitle>{t('previewTitle')}</SheetTitle>
|
||||
<SheetDescription>{t('previewDesc')}</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<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' />
|
||||
正在加载预览...
|
||||
{t('loadingPreview')}
|
||||
</div>
|
||||
) : error ? (
|
||||
<p className='text-sm text-destructive'>{error}</p>
|
||||
@@ -58,10 +58,10 @@ export function PreviewSheet({
|
||||
<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} 条
|
||||
{t('routeCount', { count: preview.route_count })}
|
||||
</Badge>
|
||||
<Badge variant='outline' className='rounded-full text-[10px]'>
|
||||
网站 {preview.website_count} 个
|
||||
{t('websiteCount', { count: preview.website_count })}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant='outline'
|
||||
@@ -72,7 +72,7 @@ export function PreviewSheet({
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<p className='text-xs font-semibold'>主配置</p>
|
||||
<p className='text-xs font-semibold'>{t('mainConfig')}</p>
|
||||
<CodeBlock
|
||||
code={preview.main_config}
|
||||
language='nginx'
|
||||
@@ -81,7 +81,7 @@ export function PreviewSheet({
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<p className='text-xs font-semibold'>路由配置</p>
|
||||
<p className='text-xs font-semibold'>{t('routeConfig')}</p>
|
||||
<CodeBlock
|
||||
code={preview.rendered_config}
|
||||
language='nginx'
|
||||
@@ -92,7 +92,9 @@ export function PreviewSheet({
|
||||
{preview.support_files.length > 0 ? (
|
||||
<div className='space-y-2'>
|
||||
<p className='text-xs font-semibold'>
|
||||
支持文件 ({preview.support_files.length})
|
||||
{t('supportFiles', {
|
||||
count: preview.support_files.length,
|
||||
})}
|
||||
</p>
|
||||
{preview.support_files.map((file) => (
|
||||
<details
|
||||
@@ -112,13 +114,13 @@ export function PreviewSheet({
|
||||
</div>
|
||||
) : (
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
当前发布不需要额外支持文件。
|
||||
{t('noSupportFiles')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!canPublish ? (
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
当前规则与已激活版本一致,无法重复发布。
|
||||
{t('noChanges')}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
@@ -131,7 +133,7 @@ export function PreviewSheet({
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={publishing}
|
||||
>
|
||||
关闭
|
||||
{t('close')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onPublish}
|
||||
@@ -140,10 +142,10 @@ export function PreviewSheet({
|
||||
{publishing ? (
|
||||
<>
|
||||
<Loader2 className='size-4 animate-spin mr-1' />
|
||||
发布中...
|
||||
{t('publishing')}
|
||||
</>
|
||||
) : (
|
||||
'确认发布'
|
||||
t('confirmPublish')
|
||||
)}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -33,6 +34,7 @@ export function VersionSnapshotSheet({
|
||||
open,
|
||||
onOpenChange,
|
||||
}: VersionSnapshotSheetProps) {
|
||||
const t = useTranslations('configVersions');
|
||||
const [detail, setDetail] = useState<ConfigVersionDetail | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -51,8 +53,9 @@ export function VersionSnapshotSheet({
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!cancelled) {
|
||||
toast.error('加载版本快照失败', {
|
||||
description: err instanceof Error ? err.message : '未知错误',
|
||||
toast.error(t('snapshotLoadFailed'), {
|
||||
description:
|
||||
err instanceof Error ? err.message : t('unknownError'),
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -63,32 +66,36 @@ export function VersionSnapshotSheet({
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [open, version]);
|
||||
}, [open, version, t]);
|
||||
|
||||
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'>
|
||||
<SheetTitle>
|
||||
{version ? `版本 ${version.version}` : '版本快照'}
|
||||
{version
|
||||
? t('snapshotVersion', { version: version.version })
|
||||
: t('snapshotTitle')}
|
||||
</SheetTitle>
|
||||
<SheetDescription>查看历史配置版本的完整快照内容。</SheetDescription>
|
||||
<SheetDescription>{t('snapshotDesc')}</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<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' />
|
||||
正在加载快照...
|
||||
{t('loadingSnapshot')}
|
||||
</div>
|
||||
) : detail ? (
|
||||
<div className='space-y-5 pb-4'>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{detail.is_active ? (
|
||||
<Badge className='rounded-full text-[10px]'>当前激活</Badge>
|
||||
<Badge className='rounded-full text-[10px]'>
|
||||
{t('active')}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant='outline' className='rounded-full text-[10px]'>
|
||||
历史版本
|
||||
{t('history')}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge
|
||||
@@ -101,11 +108,13 @@ export function VersionSnapshotSheet({
|
||||
|
||||
<div className='grid gap-3 sm:grid-cols-2 text-xs'>
|
||||
<div>
|
||||
<p className='text-muted-foreground'>创建人</p>
|
||||
<p className='font-medium'>{detail.created_by || '系统'}</p>
|
||||
<p className='text-muted-foreground'>{t('createdBy')}</p>
|
||||
<p className='font-medium'>
|
||||
{detail.created_by || t('system')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className='text-muted-foreground'>创建时间</p>
|
||||
<p className='text-muted-foreground'>{t('createdAt')}</p>
|
||||
<p className='font-medium'>
|
||||
{formatDateTime(detail.created_at)}
|
||||
</p>
|
||||
@@ -113,7 +122,7 @@ export function VersionSnapshotSheet({
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<p className='text-xs font-semibold'>主配置</p>
|
||||
<p className='text-xs font-semibold'>{t('mainConfig')}</p>
|
||||
<CodeBlock
|
||||
code={detail.main_config}
|
||||
language='nginx'
|
||||
@@ -122,7 +131,7 @@ export function VersionSnapshotSheet({
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<p className='text-xs font-semibold'>路由配置</p>
|
||||
<p className='text-xs font-semibold'>{t('routeConfig')}</p>
|
||||
<CodeBlock
|
||||
code={detail.rendered_config}
|
||||
language='nginx'
|
||||
@@ -135,7 +144,7 @@ export function VersionSnapshotSheet({
|
||||
|
||||
<SheetFooter className='px-5 py-4 border-t'>
|
||||
<Button variant='outline' onClick={() => onOpenChange(false)}>
|
||||
关闭
|
||||
{t('close')}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
} from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { EmptyStateWithBorder } from '@/components/layout/empty';
|
||||
@@ -68,6 +69,8 @@ function hasConfigDiff(diff: ConfigDiffResult) {
|
||||
}
|
||||
|
||||
export default function ConfigVersionsPage() {
|
||||
const t = useTranslations('configVersions');
|
||||
const tc = useTranslations('common');
|
||||
const [versions, setVersions] = useState<ConfigVersionSummary[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -121,11 +124,11 @@ export default function ConfigVersionsPage() {
|
||||
const data = await ConfigVersionService.list();
|
||||
setVersions(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败');
|
||||
setError(err instanceof Error ? err.message : t('loadFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [t]);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchVersions();
|
||||
@@ -145,7 +148,7 @@ export default function ConfigVersionsPage() {
|
||||
setPreview(previewData);
|
||||
setDiff(diffData);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : '加载预览失败';
|
||||
const message = err instanceof Error ? err.message : t('previewLoadFailed');
|
||||
setPreviewError(message);
|
||||
setDiffError(message);
|
||||
} finally {
|
||||
@@ -170,7 +173,7 @@ export default function ConfigVersionsPage() {
|
||||
const diffData = await ConfigVersionService.diff();
|
||||
setDiff(diffData);
|
||||
} catch (err) {
|
||||
setDiffError(err instanceof Error ? err.message : '加载差异失败');
|
||||
setDiffError(err instanceof Error ? err.message : t('diffLoadFailed'));
|
||||
} finally {
|
||||
setDiffLoading(false);
|
||||
}
|
||||
@@ -181,7 +184,9 @@ export default function ConfigVersionsPage() {
|
||||
setPublishing(true);
|
||||
try {
|
||||
const version = await ConfigVersionService.publish(force);
|
||||
toast.success('发布成功', { description: `版本 ${version.version}` });
|
||||
toast.success(t('publishSuccess'), {
|
||||
description: t('publishSuccessDesc', { version: version.version }),
|
||||
});
|
||||
setPreviewOpen(false);
|
||||
setPublishConfirmOpen(false);
|
||||
setForcePublishConfirmOpen(false);
|
||||
@@ -189,8 +194,8 @@ export default function ConfigVersionsPage() {
|
||||
setDiff(null);
|
||||
await fetchVersions();
|
||||
} catch (err) {
|
||||
toast.error('发布失败', {
|
||||
description: err instanceof Error ? err.message : '未知错误',
|
||||
toast.error(t('publishFailed'), {
|
||||
description: err instanceof Error ? err.message : t('unknownError'),
|
||||
});
|
||||
} finally {
|
||||
setPublishing(false);
|
||||
@@ -203,12 +208,14 @@ export default function ConfigVersionsPage() {
|
||||
setActivating(true);
|
||||
try {
|
||||
const version = await ConfigVersionService.activate(activateTarget.id);
|
||||
toast.success('激活成功', { description: `版本 ${version.version}` });
|
||||
toast.success(t('activateSuccess'), {
|
||||
description: t('activateSuccessDesc', { version: version.version }),
|
||||
});
|
||||
setActivateTarget(null);
|
||||
await fetchVersions();
|
||||
} catch (err) {
|
||||
toast.error('激活失败', {
|
||||
description: err instanceof Error ? err.message : '未知错误',
|
||||
toast.error(t('activateFailed'), {
|
||||
description: err instanceof Error ? err.message : t('unknownError'),
|
||||
});
|
||||
} finally {
|
||||
setActivating(false);
|
||||
@@ -221,14 +228,14 @@ export default function ConfigVersionsPage() {
|
||||
const result = await ConfigVersionService.cleanup({
|
||||
keep_count: keepCount,
|
||||
});
|
||||
toast.success('清理完成', {
|
||||
description: `已删除 ${result.deleted_count} 个历史快照`,
|
||||
toast.success(t('cleanupDone'), {
|
||||
description: t('cleanupDoneDesc', { count: result.deleted_count }),
|
||||
});
|
||||
setCleanupOpen(false);
|
||||
await fetchVersions();
|
||||
} catch (err) {
|
||||
toast.error('清理失败', {
|
||||
description: err instanceof Error ? err.message : '未知错误',
|
||||
toast.error(t('cleanupFailed'), {
|
||||
description: err instanceof Error ? err.message : t('unknownError'),
|
||||
});
|
||||
} finally {
|
||||
setCleaning(false);
|
||||
@@ -241,10 +248,10 @@ export default function ConfigVersionsPage() {
|
||||
<div className='flex items-center gap-2'>
|
||||
<History className='size-5 text-primary' />
|
||||
<div>
|
||||
<h1 className='text-2xl font-semibold tracking-tight'>配置版本</h1>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
查看历史快照、预览待发布配置差异,并在需要时重新激活旧版本。
|
||||
</p>
|
||||
<h1 className='text-2xl font-semibold tracking-tight'>
|
||||
{t('title')}
|
||||
</h1>
|
||||
<p className='text-sm text-muted-foreground'>{t('description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -258,7 +265,7 @@ export default function ConfigVersionsPage() {
|
||||
<RefreshCw
|
||||
className={`size-3.5 mr-1 ${loading ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
刷新
|
||||
{t('refresh')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
@@ -266,7 +273,7 @@ export default function ConfigVersionsPage() {
|
||||
onClick={() => setCleanupOpen(true)}
|
||||
>
|
||||
<Trash2 className='size-3.5 mr-1' />
|
||||
清理旧版本
|
||||
{t('cleanupOld')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
@@ -274,18 +281,18 @@ export default function ConfigVersionsPage() {
|
||||
onClick={() => void handleOpenDiff()}
|
||||
>
|
||||
<GitCompare className='size-3.5 mr-1' />
|
||||
查看差异
|
||||
{t('viewDiff')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={() => setForcePublishConfirmOpen(true)}
|
||||
>
|
||||
强制发布
|
||||
{t('forcePublish')}
|
||||
</Button>
|
||||
<Button size='sm' onClick={() => void handleOpenPreview()}>
|
||||
<Eye className='size-3.5 mr-1' />
|
||||
预览并发布
|
||||
{t('previewPublish')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -299,24 +306,30 @@ export default function ConfigVersionsPage() {
|
||||
<LoadingStateWithBorder />
|
||||
) : sortedVersions.length === 0 ? (
|
||||
<EmptyStateWithBorder
|
||||
title='暂无历史版本'
|
||||
description='当前还没有可查看的发布记录,请先触发一次配置发布。'
|
||||
title={t('emptyTitle')}
|
||||
description={t('emptyDesc')}
|
||||
/>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader className='bg-muted/40'>
|
||||
<TableRow className='border-dashed hover:bg-transparent'>
|
||||
<TableHead className='text-xs font-semibold'>版本号</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>状态</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>创建人</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
Checksum
|
||||
{t('colVersion')}
|
||||
</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
创建时间
|
||||
{t('colStatus')}
|
||||
</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
{t('colAuthor')}
|
||||
</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
{t('colChecksum')}
|
||||
</TableHead>
|
||||
<TableHead className='text-xs font-semibold'>
|
||||
{t('colCreatedAt')}
|
||||
</TableHead>
|
||||
<TableHead className='text-xs font-semibold text-right'>
|
||||
操作
|
||||
{t('colActions')}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -336,19 +349,19 @@ export default function ConfigVersionsPage() {
|
||||
className='text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2'
|
||||
>
|
||||
<span className='size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0' />
|
||||
当前激活
|
||||
{t('active')}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant='outline'
|
||||
className='text-[10px] rounded-full py-0 px-2'
|
||||
>
|
||||
历史版本
|
||||
{t('history')}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className='text-xs text-muted-foreground'>
|
||||
{version.created_by || '系统'}
|
||||
{version.created_by || t('system')}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className='text-xs font-mono text-muted-foreground'
|
||||
@@ -371,7 +384,7 @@ export default function ConfigVersionsPage() {
|
||||
}}
|
||||
>
|
||||
<Eye className='size-3 mr-1' />
|
||||
快照
|
||||
{t('snapshot')}
|
||||
</Button>
|
||||
{!version.is_active ? (
|
||||
<Button
|
||||
@@ -381,7 +394,7 @@ export default function ConfigVersionsPage() {
|
||||
onClick={() => setActivateTarget(version)}
|
||||
>
|
||||
<Play className='size-3 mr-1' />
|
||||
激活
|
||||
{t('activate')}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
@@ -431,13 +444,15 @@ export default function ConfigVersionsPage() {
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认发布配置</AlertDialogTitle>
|
||||
<AlertDialogTitle>{t('confirmPublishTitle')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
将把当前待发布配置生成新版本并设为激活版本,节点将随后拉取更新。
|
||||
{t('confirmPublishDesc')}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={publishing}>取消</AlertDialogCancel>
|
||||
<AlertDialogCancel disabled={publishing}>
|
||||
{tc('cancel')}
|
||||
</AlertDialogCancel>
|
||||
<Button
|
||||
onClick={() => void handlePublish(false)}
|
||||
disabled={publishing}
|
||||
@@ -445,7 +460,7 @@ export default function ConfigVersionsPage() {
|
||||
{publishing ? (
|
||||
<Loader2 className='size-4 animate-spin' />
|
||||
) : (
|
||||
'确认发布'
|
||||
t('confirmPublish')
|
||||
)}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
@@ -458,13 +473,15 @@ export default function ConfigVersionsPage() {
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认强制发布</AlertDialogTitle>
|
||||
<AlertDialogTitle>{t('confirmForceTitle')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
将忽略配置变化检查并立即生成一个新版本,请确认你确实需要重新发布。
|
||||
{t('confirmForceDesc')}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={publishing}>取消</AlertDialogCancel>
|
||||
<AlertDialogCancel disabled={publishing}>
|
||||
{tc('cancel')}
|
||||
</AlertDialogCancel>
|
||||
<Button
|
||||
variant='destructive'
|
||||
onClick={() => void handlePublish(true)}
|
||||
@@ -473,7 +490,7 @@ export default function ConfigVersionsPage() {
|
||||
{publishing ? (
|
||||
<Loader2 className='size-4 animate-spin' />
|
||||
) : (
|
||||
'强制发布'
|
||||
t('forcePublish')
|
||||
)}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
@@ -488,20 +505,22 @@ export default function ConfigVersionsPage() {
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认激活版本</AlertDialogTitle>
|
||||
<AlertDialogTitle>{t('confirmActivateTitle')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{activateTarget
|
||||
? `确认将版本 ${activateTarget.version} 设为当前激活版本吗?`
|
||||
? t('confirmActivateDesc', { version: activateTarget.version })
|
||||
: ''}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={activating}>取消</AlertDialogCancel>
|
||||
<AlertDialogCancel disabled={activating}>
|
||||
{tc('cancel')}
|
||||
</AlertDialogCancel>
|
||||
<Button onClick={() => void handleActivate()} disabled={activating}>
|
||||
{activating ? (
|
||||
<Loader2 className='size-4 animate-spin' />
|
||||
) : (
|
||||
'确认激活'
|
||||
t('confirmActivate')
|
||||
)}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user