mirror of
https://github.com/musistudio/claude-code-router.git
synced 2026-02-03 07:10:51 +08:00
add presets
This commit is contained in:
musistudio
@@ -32,6 +32,7 @@
|
||||
"react-dom": "^19.1.0",
|
||||
"react-i18next": "^15.6.1",
|
||||
"react-router-dom": "^7.7.0",
|
||||
"remixicon": "^4.7.0",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
|
||||
@@ -10,13 +10,14 @@ import { LogViewer } from "@/components/LogViewer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useConfig } from "@/components/ConfigProvider";
|
||||
import { api } from "@/lib/api";
|
||||
import { Settings, Languages, Save, RefreshCw, FileJson, CircleArrowUp, FileText } from "lucide-react";
|
||||
import { Settings, Languages, Save, RefreshCw, FileJson, CircleArrowUp, FileText, FileCog } from "lucide-react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Toast } from "@/components/ui/toast";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -270,19 +271,51 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gray-50 font-sans">
|
||||
<TooltipProvider>
|
||||
<div className="h-screen bg-gray-50 font-sans">
|
||||
<header className="flex h-16 items-center justify-between border-b bg-white px-6">
|
||||
<h1 className="text-xl font-semibold text-gray-800">{t('app.title')}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" onClick={() => setIsSettingsOpen(true)} className="transition-all-ease hover:scale-110">
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => setIsJsonEditorOpen(true)} className="transition-all-ease hover:scale-110">
|
||||
<FileJson className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => setIsLogViewerOpen(true)} className="transition-all-ease hover:scale-110">
|
||||
<FileText className="h-5 w-5" />
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" onClick={() => setIsSettingsOpen(true)} className="transition-all-ease hover:scale-110">
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('app.settings')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" onClick={() => setIsJsonEditorOpen(true)} className="transition-all-ease hover:scale-110">
|
||||
<FileJson className="h-5 w-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('app.json_editor')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" onClick={() => setIsLogViewerOpen(true)} className="transition-all-ease hover:scale-110">
|
||||
<FileText className="h-5 w-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('app.log_viewer')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" onClick={() => navigate('/presets')} className="transition-all-ease hover:scale-110">
|
||||
<FileCog className="h-5 w-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('app.presets')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="transition-all-ease hover:scale-110">
|
||||
@@ -310,25 +343,32 @@ function App() {
|
||||
</Popover>
|
||||
{/* 更新版本按钮 - 仅当更新功能可用时显示 */}
|
||||
{isUpdateFeatureAvailable && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => checkForUpdates(true)}
|
||||
disabled={isCheckingUpdate}
|
||||
className="transition-all-ease hover:scale-110 relative"
|
||||
>
|
||||
<div className="relative">
|
||||
<CircleArrowUp className="h-5 w-5" />
|
||||
{isNewVersionAvailable && !isCheckingUpdate && (
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>
|
||||
)}
|
||||
</div>
|
||||
{isCheckingUpdate && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => checkForUpdates(true)}
|
||||
disabled={isCheckingUpdate}
|
||||
className="transition-all-ease hover:scale-110 relative"
|
||||
>
|
||||
<div className="relative">
|
||||
<CircleArrowUp className="h-5 w-5" />
|
||||
{isNewVersionAvailable && !isCheckingUpdate && (
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>
|
||||
)}
|
||||
</div>
|
||||
{isCheckingUpdate && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('app.check_updates')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Button onClick={saveConfig} variant="outline" className="transition-all-ease hover:scale-[1.02] active:scale-[0.98]">
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
@@ -412,6 +452,7 @@ function App() {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
689
packages/ui/src/components/Presets.tsx
Normal file
689
packages/ui/src/components/Presets.tsx
Normal file
@@ -0,0 +1,689 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { api } from "@/lib/api";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Upload, Link, Trash2, Info, Download, CheckCircle2, AlertCircle, Loader2, ArrowLeft, Store, Search, Package } from "lucide-react";
|
||||
import { Toast } from "@/components/ui/toast";
|
||||
|
||||
interface PresetMetadata {
|
||||
id: string;
|
||||
name: string;
|
||||
version: string;
|
||||
description?: string;
|
||||
author?: string;
|
||||
homepage?: string;
|
||||
repository?: string;
|
||||
license?: string;
|
||||
keywords?: string[];
|
||||
ccrVersion?: string;
|
||||
source?: string;
|
||||
sourceType?: 'local' | 'gist' | 'registry';
|
||||
checksum?: string;
|
||||
installed: boolean;
|
||||
}
|
||||
|
||||
interface PresetDetail extends PresetMetadata {
|
||||
config?: any;
|
||||
requiredInputs?: Array<{ field: string; prompt?: string; placeholder?: string }>;
|
||||
}
|
||||
|
||||
interface MarketPreset {
|
||||
id: string;
|
||||
name: string;
|
||||
version: string;
|
||||
description?: string;
|
||||
author?: string;
|
||||
homepage?: string;
|
||||
repository?: string;
|
||||
license?: string;
|
||||
keywords?: string[];
|
||||
downloadUrl: string;
|
||||
downloads?: number;
|
||||
rating?: number;
|
||||
}
|
||||
|
||||
export function Presets() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const [presets, setPresets] = useState<PresetMetadata[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [installDialogOpen, setInstallDialogOpen] = useState(false);
|
||||
const [detailDialogOpen, setDetailDialogOpen] = useState(false);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [marketDialogOpen, setMarketDialogOpen] = useState(false);
|
||||
const [selectedPreset, setSelectedPreset] = useState<PresetDetail | null>(null);
|
||||
const [presetToDelete, setPresetToDelete] = useState<string | null>(null);
|
||||
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'warning' } | null>(null);
|
||||
const [installMethod, setInstallMethod] = useState<'file' | 'url'>('file');
|
||||
const [installUrl, setInstallUrl] = useState('');
|
||||
const [installFile, setInstallFile] = useState<File | null>(null);
|
||||
const [installName, setInstallName] = useState('');
|
||||
const [isInstalling, setIsInstalling] = useState(false);
|
||||
const [secrets, setSecrets] = useState<Record<string, string>>({});
|
||||
const [isApplying, setIsApplying] = useState(false);
|
||||
const [marketSearch, setMarketSearch] = useState('');
|
||||
const [marketPresets, setMarketPresets] = useState<MarketPreset[]>([]);
|
||||
const [marketLoading, setMarketLoading] = useState(false);
|
||||
const [installingFromMarket, setInstallingFromMarket] = useState<string | null>(null);
|
||||
|
||||
// 返回上一页
|
||||
const handleGoBack = () => {
|
||||
navigate('/dashboard');
|
||||
};
|
||||
|
||||
// 加载市场预设
|
||||
const loadMarketPresets = async () => {
|
||||
setMarketLoading(true);
|
||||
try {
|
||||
// TODO: 替换为实际的市场 API
|
||||
// const response = await api.getMarketPresets();
|
||||
// setMarketPresets(response.presets || []);
|
||||
|
||||
// 模拟数据
|
||||
const mockMarketPresets: MarketPreset[] = [
|
||||
{
|
||||
id: 'openai-compatible',
|
||||
name: 'OpenAI Compatible',
|
||||
version: '1.0.0',
|
||||
description: 'Full-featured OpenAI API compatible preset with support for GPT-4, GPT-3.5, and more.',
|
||||
author: 'CCR Community',
|
||||
homepage: 'https://github.com/example/openai-preset',
|
||||
repository: 'https://github.com/example/openai-preset',
|
||||
license: 'MIT',
|
||||
keywords: ['openai', 'gpt', 'chat'],
|
||||
downloadUrl: 'https://example.com/openai.ccrsets',
|
||||
downloads: 1234,
|
||||
rating: 4.8
|
||||
},
|
||||
{
|
||||
id: 'anthropic-optimized',
|
||||
name: 'Anthropic Optimized',
|
||||
version: '1.2.0',
|
||||
description: 'Optimized configuration for Claude and other Anthropic models with enhanced token management.',
|
||||
author: 'CCR Team',
|
||||
homepage: 'https://github.com/example/anthropic-preset',
|
||||
repository: 'https://github.com/example/anthropic-preset',
|
||||
license: 'Apache-2.0',
|
||||
keywords: ['anthropic', 'claude', 'ai'],
|
||||
downloadUrl: 'https://example.com/anthropic.ccrsets',
|
||||
downloads: 892,
|
||||
rating: 4.9
|
||||
},
|
||||
{
|
||||
id: 'multi-provider',
|
||||
name: 'Multi-Provider Router',
|
||||
version: '2.0.0',
|
||||
description: 'Intelligent routing across multiple providers based on cost, speed, and capability.',
|
||||
author: 'CCR Community',
|
||||
homepage: 'https://github.com/example/multi-provider-preset',
|
||||
repository: 'https://github.com/example/multi-provider-preset',
|
||||
license: 'MIT',
|
||||
keywords: ['router', 'multi-provider', 'optimization'],
|
||||
downloadUrl: 'https://example.com/multi-provider.ccrsets',
|
||||
downloads: 567,
|
||||
rating: 4.6
|
||||
},
|
||||
{
|
||||
id: 'development-tools',
|
||||
name: 'Development Tools',
|
||||
version: '1.1.0',
|
||||
description: 'Optimized for coding and development tasks with special focus on code generation and debugging.',
|
||||
author: 'DevTeam',
|
||||
homepage: 'https://github.com/example/dev-tools-preset',
|
||||
repository: 'https://github.com/example/dev-tools-preset',
|
||||
license: 'MIT',
|
||||
keywords: ['development', 'coding', 'programming'],
|
||||
downloadUrl: 'https://example.com/dev-tools.ccrsets',
|
||||
downloads: 445,
|
||||
rating: 4.7
|
||||
}
|
||||
];
|
||||
setMarketPresets(mockMarketPresets);
|
||||
} catch (error) {
|
||||
console.error('Failed to load market presets:', error);
|
||||
setToast({ message: t('presets.load_market_failed'), type: 'error' });
|
||||
} finally {
|
||||
setMarketLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 从市场安装预设
|
||||
const handleInstallFromMarket = async (preset: MarketPreset) => {
|
||||
try {
|
||||
setInstallingFromMarket(preset.id);
|
||||
await api.installPresetFromUrl(preset.downloadUrl);
|
||||
setToast({ message: t('presets.preset_installed'), type: 'success' });
|
||||
setMarketDialogOpen(false);
|
||||
await loadPresets();
|
||||
} catch (error: any) {
|
||||
console.error('Failed to install preset:', error);
|
||||
setToast({ message: t('presets.preset_install_failed', { error: error.message }), type: 'error' });
|
||||
} finally {
|
||||
setInstallingFromMarket(null);
|
||||
}
|
||||
};
|
||||
|
||||
// 打开市场对话框时加载预设
|
||||
useEffect(() => {
|
||||
if (marketDialogOpen && marketPresets.length === 0) {
|
||||
loadMarketPresets();
|
||||
}
|
||||
}, [marketDialogOpen]);
|
||||
|
||||
// 过滤市场预设
|
||||
const filteredMarketPresets = marketPresets.filter(preset =>
|
||||
preset.name.toLowerCase().includes(marketSearch.toLowerCase()) ||
|
||||
preset.description?.toLowerCase().includes(marketSearch.toLowerCase()) ||
|
||||
preset.author?.toLowerCase().includes(marketSearch.toLowerCase()) ||
|
||||
preset.keywords?.some(keyword => keyword.toLowerCase().includes(marketSearch.toLowerCase()))
|
||||
);
|
||||
|
||||
// 加载预设列表
|
||||
const loadPresets = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await api.getPresets();
|
||||
setPresets(response.presets || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to load presets:', error);
|
||||
setToast({ message: t('presets.load_presets_failed'), type: 'error' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadPresets();
|
||||
}, []);
|
||||
|
||||
// 查看预设详情
|
||||
const handleViewDetail = async (preset: PresetMetadata) => {
|
||||
try {
|
||||
const detail = await api.getPreset(preset.id);
|
||||
setSelectedPreset({ ...preset, ...detail });
|
||||
setDetailDialogOpen(true);
|
||||
|
||||
// 初始化 secrets
|
||||
if (detail.requiredInputs) {
|
||||
const initialSecrets: Record<string, string> = {};
|
||||
for (const input of detail.requiredInputs) {
|
||||
initialSecrets[input.field] = '';
|
||||
}
|
||||
setSecrets(initialSecrets);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load preset details:', error);
|
||||
setToast({ message: t('presets.load_preset_details_failed'), type: 'error' });
|
||||
}
|
||||
};
|
||||
|
||||
// 安装预设
|
||||
const handleInstall = async () => {
|
||||
try {
|
||||
setIsInstalling(true);
|
||||
|
||||
if (installMethod === 'url' && installUrl) {
|
||||
await api.installPresetFromUrl(installUrl, installName || undefined);
|
||||
} else if (installMethod === 'file' && installFile) {
|
||||
await api.uploadPresetFile(installFile, installName || undefined);
|
||||
} else {
|
||||
setToast({ message: t('presets.please_provide_file_or_url'), type: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
setToast({ message: t('presets.preset_installed'), type: 'success' });
|
||||
setInstallDialogOpen(false);
|
||||
setInstallUrl('');
|
||||
setInstallFile(null);
|
||||
setInstallName('');
|
||||
await loadPresets();
|
||||
} catch (error: any) {
|
||||
console.error('Failed to install preset:', error);
|
||||
setToast({ message: t('presets.preset_install_failed', { error: error.message }), type: 'error' });
|
||||
} finally {
|
||||
setIsInstalling(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 应用预设（配置敏感信息）
|
||||
const handleApplyPreset = async () => {
|
||||
try {
|
||||
setIsApplying(true);
|
||||
|
||||
// 验证所有必填项都已填写
|
||||
if (selectedPreset?.requiredInputs) {
|
||||
for (const input of selectedPreset.requiredInputs) {
|
||||
if (!secrets[input.field] || secrets[input.field].trim() === '') {
|
||||
setToast({ message: t('presets.please_fill_field', { field: input.field }), type: 'warning' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await api.applyPreset(selectedPreset!.name, secrets);
|
||||
setToast({ message: t('presets.preset_applied'), type: 'success' });
|
||||
setDetailDialogOpen(false);
|
||||
setSecrets({});
|
||||
} catch (error: any) {
|
||||
console.error('Failed to apply preset:', error);
|
||||
setToast({ message: t('presets.preset_apply_failed', { error: error.message }), type: 'error' });
|
||||
} finally {
|
||||
setIsApplying(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除预设
|
||||
const handleDelete = async () => {
|
||||
if (!presetToDelete) return;
|
||||
|
||||
try {
|
||||
await api.deletePreset(presetToDelete);
|
||||
setToast({ message: t('presets.preset_deleted'), type: 'success' });
|
||||
setDeleteDialogOpen(false);
|
||||
setPresetToDelete(null);
|
||||
await loadPresets();
|
||||
} catch (error: any) {
|
||||
console.error('Failed to delete preset:', error);
|
||||
setToast({ message: t('presets.preset_delete_failed', { error: error.message }), type: 'error' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="flex h-full flex-col rounded-lg border shadow-sm">
|
||||
<CardHeader className="flex flex-row items-center justify-between border-b p-4">
|
||||
<Button variant="ghost" size="icon" onClick={handleGoBack}>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<CardTitle className="text-lg">{t('presets.title')} <span className="text-sm font-normal text-gray-500">({presets.length})</span></CardTitle>
|
||||
<Button variant="ghost" size="icon" onClick={() => setMarketDialogOpen(true)}>
|
||||
<Store className="h-5 w-5" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-grow overflow-y-auto p-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-gray-500" />
|
||||
</div>
|
||||
) : presets.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<Download className="h-12 w-12 mb-4 opacity-50" />
|
||||
<p>{t('presets.no_presets')}</p>
|
||||
<p className="text-sm">{t('presets.no_presets_hint')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{presets.map((preset) => (
|
||||
<div
|
||||
key={preset.name}
|
||||
className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-medium">{preset.name}</h3>
|
||||
<span className="text-xs text-gray-500">v{preset.version}</span>
|
||||
</div>
|
||||
{preset.description && (
|
||||
<p className="text-sm text-gray-600 mt-1">{preset.description}</p>
|
||||
)}
|
||||
{preset.author && (
|
||||
<p className="text-xs text-gray-500 mt-1">by {preset.author}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleViewDetail(preset)}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
setPresetToDelete(preset.id);
|
||||
setDeleteDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
{/* Install Dialog */}
|
||||
<Dialog open={installDialogOpen} onOpenChange={setInstallDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('presets.install_dialog_title')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('presets.install_dialog_description')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={installMethod === 'file' ? 'default' : 'outline'}
|
||||
onClick={() => setInstallMethod('file')}
|
||||
className="flex-1"
|
||||
>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
{t('presets.upload_file')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={installMethod === 'url' ? 'default' : 'outline'}
|
||||
onClick={() => setInstallMethod('url')}
|
||||
className="flex-1"
|
||||
>
|
||||
<Link className="mr-2 h-4 w-4" />
|
||||
{t('presets.from_url')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{installMethod === 'file' ? (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="preset-file">{t('presets.preset_file')}</Label>
|
||||
<Input
|
||||
id="preset-file"
|
||||
type="file"
|
||||
accept=".ccrsets"
|
||||
onChange={(e) => setInstallFile(e.target.files?.[0] || null)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="preset-url">{t('presets.preset_url')}</Label>
|
||||
<Input
|
||||
id="preset-url"
|
||||
type="url"
|
||||
placeholder={t('presets.preset_url_placeholder')}
|
||||
value={installUrl}
|
||||
onChange={(e) => setInstallUrl(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="preset-name">{t('presets.preset_name')}</Label>
|
||||
<Input
|
||||
id="preset-name"
|
||||
placeholder={t('presets.preset_name_placeholder')}
|
||||
value={installName}
|
||||
onChange={(e) => setInstallName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setInstallDialogOpen(false)}>
|
||||
{t('presets.close')}
|
||||
</Button>
|
||||
<Button onClick={handleInstall} disabled={isInstalling}>
|
||||
{isInstalling ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{t('presets.installing')}
|
||||
</>
|
||||
) : (
|
||||
t('presets.install')
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Detail Dialog */}
|
||||
<Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
{selectedPreset?.name}
|
||||
{selectedPreset?.version && (
|
||||
<span className="text-sm font-normal text-gray-500">v{selectedPreset.version}</span>
|
||||
)}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex-1 overflow-y-auto py-4">
|
||||
{selectedPreset?.description && (
|
||||
<p className="text-gray-700 mb-4">{selectedPreset.description}</p>
|
||||
)}
|
||||
|
||||
{selectedPreset?.author && (
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
<strong>Author:</strong> {selectedPreset.author}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{selectedPreset?.homepage && (
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
<strong>Homepage:</strong> <a href={selectedPreset.homepage} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{selectedPreset.homepage}</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{selectedPreset?.repository && (
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
<strong>Repository:</strong> <a href={selectedPreset.repository} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{selectedPreset.repository}</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{selectedPreset?.keywords && selectedPreset.keywords.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<strong>Keywords:</strong>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{selectedPreset.keywords.map((keyword) => (
|
||||
<span key={keyword} className="px-2 py-1 bg-gray-100 rounded text-sm">
|
||||
{keyword}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedPreset?.requiredInputs && selectedPreset.requiredInputs.length > 0 && (
|
||||
<div className="mt-6 space-y-4">
|
||||
<h4 className="font-medium text-sm">{t('presets.required_information')}</h4>
|
||||
{selectedPreset.requiredInputs.map((input) => (
|
||||
<div key={input.field} className="space-y-2">
|
||||
<Label htmlFor={`secret-${input.field}`}>
|
||||
{input.prompt || input.field}
|
||||
</Label>
|
||||
<Input
|
||||
id={`secret-${input.field}`}
|
||||
type="password"
|
||||
placeholder={input.placeholder || t('presets.please_fill_field', { field: input.field })}
|
||||
value={secrets[input.field] || ''}
|
||||
onChange={(e) => setSecrets({ ...secrets, [input.field]: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDetailDialogOpen(false)}>
|
||||
{t('presets.close')}
|
||||
</Button>
|
||||
{selectedPreset?.requiredInputs && selectedPreset.requiredInputs.length > 0 && (
|
||||
<Button onClick={handleApplyPreset} disabled={isApplying}>
|
||||
{isApplying ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{t('presets.applying')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2 className="mr-2 h-4 w-4" />
|
||||
{t('presets.apply')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Market Presets Dialog */}
|
||||
<Dialog open={marketDialogOpen} onOpenChange={setMarketDialogOpen}>
|
||||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Store className="h-5 w-5" />
|
||||
{t('presets.market_title')}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('presets.market_description')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex items-center gap-2 py-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder={t('presets.search_placeholder')}
|
||||
value={marketSearch}
|
||||
onChange={(e) => setMarketSearch(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{marketLoading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-gray-500" />
|
||||
</div>
|
||||
) : filteredMarketPresets.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-500">
|
||||
<Package className="h-12 w-12 mb-4 opacity-50" />
|
||||
<p>{t('presets.no_presets_found')}</p>
|
||||
<p className="text-sm">{t('presets.no_presets_found_hint')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filteredMarketPresets.map((preset) => (
|
||||
<div
|
||||
key={preset.id}
|
||||
className="p-4 border rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-semibold text-lg">{preset.name}</h3>
|
||||
<span className="text-xs text-gray-500">v{preset.version}</span>
|
||||
{preset.rating && (
|
||||
<div className="flex items-center gap-1 text-xs text-yellow-600">
|
||||
<span>★</span>
|
||||
<span>{preset.rating}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{preset.description && (
|
||||
<p className="text-sm text-gray-600 mb-2">{preset.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500 mb-2">
|
||||
{preset.author && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-medium">{t('presets.by', { author: preset.author })}</span>
|
||||
{preset.repository && (
|
||||
<a
|
||||
href={preset.repository}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-gray-900 transition-colors"
|
||||
title={t('presets.github_repository')}
|
||||
>
|
||||
<i className="ri-github-fill text-base"></i>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{preset.downloads && (
|
||||
<span>{t('presets.downloads', { count: preset.downloads })}</span>
|
||||
)}
|
||||
{preset.license && (
|
||||
<span>{preset.license}</span>
|
||||
)}
|
||||
</div>
|
||||
{preset.keywords && preset.keywords.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{preset.keywords.map((keyword) => (
|
||||
<span
|
||||
key={keyword}
|
||||
className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs"
|
||||
>
|
||||
{keyword}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleInstallFromMarket(preset)}
|
||||
disabled={installingFromMarket === preset.id}
|
||||
className="shrink-0"
|
||||
>
|
||||
{installingFromMarket === preset.id ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{t('presets.installing')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{t('presets.install')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('presets.delete_dialog_title')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('presets.delete_dialog_description', { name: presetToDelete })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
||||
{t('presets.close')}
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
{t('presets.delete')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{toast && (
|
||||
<Toast
|
||||
message={toast.message}
|
||||
type={toast.type}
|
||||
onClose={() => setToast(null)}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
31
packages/ui/src/components/ui/tooltip.tsx
Normal file
31
packages/ui/src/components/ui/tooltip.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white animate-in fade-in-0 zoom-in-95",
|
||||
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
||||
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
|
||||
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
@@ -235,6 +235,73 @@ class ApiClient {
|
||||
async clearLogs(filePath: string): Promise<void> {
|
||||
return this.delete<void>(`/logs?file=${encodeURIComponent(filePath)}`);
|
||||
}
|
||||
|
||||
// ========== Preset API methods ==========
|
||||
|
||||
// Get presets list
|
||||
async getPresets(): Promise<{ presets: Array<any> }> {
|
||||
return this.get<{ presets: Array<any> }>('/presets');
|
||||
}
|
||||
|
||||
// Get preset details
|
||||
async getPreset(name: string): Promise<any> {
|
||||
return this.get<any>(`/presets/${encodeURIComponent(name)}`);
|
||||
}
|
||||
|
||||
// Install preset from URL
|
||||
async installPresetFromUrl(url: string, name?: string): Promise<any> {
|
||||
return this.post<any>('/presets/install', { url, name });
|
||||
}
|
||||
|
||||
// Upload preset file
|
||||
async uploadPresetFile(file: File, name?: string): Promise<any> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
if (name) {
|
||||
formData.append('name', name);
|
||||
}
|
||||
|
||||
const url = `${this.baseUrl}/presets/upload`;
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
'Accept': 'application/json',
|
||||
};
|
||||
|
||||
// Use temp API key if available, otherwise use regular API key
|
||||
if (this.tempApiKey) {
|
||||
headers['X-Temp-API-Key'] = this.tempApiKey;
|
||||
} else if (this.apiKey) {
|
||||
headers['X-API-Key'] = this.apiKey;
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('apiKey');
|
||||
window.dispatchEvent(new CustomEvent('unauthorized'));
|
||||
return new Promise(() => {}) as any;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to upload preset: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// Apply preset (configure sensitive fields)
|
||||
async applyPreset(name: string, secrets: Record<string, string>): Promise<any> {
|
||||
return this.post<any>(`/presets/${encodeURIComponent(name)}/apply`, { secrets });
|
||||
}
|
||||
|
||||
// Delete preset
|
||||
async deletePreset(name: string): Promise<any> {
|
||||
return this.delete<any>(`/presets/${encodeURIComponent(name)}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Create a default instance of the API client
|
||||
|
||||
@@ -25,7 +25,12 @@
|
||||
"no_updates_available": "No updates available",
|
||||
"update_check_failed": "Failed to check for updates",
|
||||
"update_successful": "Update successful",
|
||||
"update_failed": "Update failed"
|
||||
"update_failed": "Update failed",
|
||||
"json_editor": "JSON Editor",
|
||||
"log_viewer": "Log Viewer",
|
||||
"presets": "Presets",
|
||||
"language": "Language",
|
||||
"check_updates": "Check for Updates"
|
||||
},
|
||||
"login": {
|
||||
"title": "Sign in to your account",
|
||||
@@ -233,5 +238,50 @@
|
||||
"worker_init_failed": "Failed to initialize worker",
|
||||
"grouping_not_supported": "Log grouping not supported by server",
|
||||
"back": "Back"
|
||||
},
|
||||
"presets": {
|
||||
"title": "Presets",
|
||||
"market_title": "Preset Market",
|
||||
"market_description": "Browse and install presets from the community marketplace",
|
||||
"no_presets": "No presets installed",
|
||||
"no_presets_hint": "Install a preset to get started",
|
||||
"search_placeholder": "Search presets by name, description, author, or keywords...",
|
||||
"no_presets_found": "No presets found",
|
||||
"no_presets_found_hint": "Try adjusting your search terms",
|
||||
"loading": "Loading...",
|
||||
"by": "by {{author}}",
|
||||
"downloads": "{{count}} downloads",
|
||||
"github_repository": "GitHub Repository",
|
||||
"view_details": "View Details",
|
||||
"install": "Install",
|
||||
"installing": "Installing...",
|
||||
"apply": "Apply Preset",
|
||||
"applying": "Applying...",
|
||||
"close": "Close",
|
||||
"delete": "Delete",
|
||||
"install_dialog_title": "Install Preset",
|
||||
"install_dialog_description": "Install a preset from a file or URL",
|
||||
"upload_file": "Upload File",
|
||||
"from_url": "From URL",
|
||||
"preset_file": "Preset File (.ccrsets)",
|
||||
"preset_url": "Preset URL",
|
||||
"preset_url_placeholder": "https://example.com/preset.ccrsets",
|
||||
"preset_name": "Preset Name (Optional)",
|
||||
"preset_name_placeholder": "Auto-generated from file",
|
||||
"please_provide_file_or_url": "Please provide a file or URL",
|
||||
"detail_dialog_title": "Preset Details",
|
||||
"required_information": "Required Information",
|
||||
"delete_dialog_title": "Delete Preset",
|
||||
"delete_dialog_description": "Are you sure you want to delete preset \"{{name}}\"? This action cannot be undone.",
|
||||
"preset_installed": "Preset installed successfully",
|
||||
"preset_install_failed": "Failed to install preset: {{error}}",
|
||||
"preset_applied": "Preset applied successfully",
|
||||
"preset_apply_failed": "Failed to apply preset: {{error}}",
|
||||
"preset_deleted": "Preset deleted successfully",
|
||||
"preset_delete_failed": "Failed to delete preset: {{error}}",
|
||||
"load_presets_failed": "Failed to load presets",
|
||||
"load_preset_details_failed": "Failed to load preset details",
|
||||
"please_fill_field": "Please fill in {{field}}",
|
||||
"load_market_failed": "Failed to load market presets"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,7 +25,12 @@
|
||||
"no_updates_available": "当前已是最新版本",
|
||||
"update_check_failed": "检查更新失败",
|
||||
"update_successful": "更新成功",
|
||||
"update_failed": "更新失败"
|
||||
"update_failed": "更新失败",
|
||||
"json_editor": "JSON 编辑器",
|
||||
"log_viewer": "日志查看器",
|
||||
"presets": "预设",
|
||||
"language": "语言",
|
||||
"check_updates": "检查更新"
|
||||
},
|
||||
"login": {
|
||||
"title": "登录到您的账户",
|
||||
@@ -233,5 +238,50 @@
|
||||
"worker_init_failed": "Worker初始化失败",
|
||||
"grouping_not_supported": "服务器不支持日志分组",
|
||||
"back": "返回"
|
||||
},
|
||||
"presets": {
|
||||
"title": "预设",
|
||||
"market_title": "预设市场",
|
||||
"market_description": "浏览并从社区市场安装预设",
|
||||
"no_presets": "暂无已安装的预设",
|
||||
"no_presets_hint": "安装一个预设以开始使用",
|
||||
"search_placeholder": "按名称、描述、作者或关键词搜索预设...",
|
||||
"no_presets_found": "未找到预设",
|
||||
"no_presets_found_hint": "请尝试调整搜索条件",
|
||||
"loading": "加载中...",
|
||||
"by": "{{author}} 创作",
|
||||
"downloads": "{{count}} 次下载",
|
||||
"github_repository": "GitHub 仓库",
|
||||
"view_details": "查看详情",
|
||||
"install": "安装",
|
||||
"installing": "安装中...",
|
||||
"apply": "应用预设",
|
||||
"applying": "应用中...",
|
||||
"close": "关闭",
|
||||
"delete": "删除",
|
||||
"install_dialog_title": "安装预设",
|
||||
"install_dialog_description": "从文件或URL安装预设",
|
||||
"upload_file": "上传文件",
|
||||
"from_url": "从 URL",
|
||||
"preset_file": "预设文件 (.ccrsets)",
|
||||
"preset_url": "预设 URL",
|
||||
"preset_url_placeholder": "https://example.com/preset.ccrsets",
|
||||
"preset_name": "预设名称 (可选)",
|
||||
"preset_name_placeholder": "从文件自动生成",
|
||||
"please_provide_file_or_url": "请提供文件或 URL",
|
||||
"detail_dialog_title": "预设详情",
|
||||
"required_information": "必需信息",
|
||||
"delete_dialog_title": "删除预设",
|
||||
"delete_dialog_description": "您确定要删除预设 \"{{name}}\" 吗？此操作无法撤销。",
|
||||
"preset_installed": "预设安装成功",
|
||||
"preset_install_failed": "预设安装失败：{{error}}",
|
||||
"preset_applied": "预设应用成功",
|
||||
"preset_apply_failed": "预设应用失败：{{error}}",
|
||||
"preset_deleted": "预设删除成功",
|
||||
"preset_delete_failed": "预设删除失败：{{error}}",
|
||||
"load_presets_failed": "加载预设失败",
|
||||
"load_preset_details_failed": "加载预设详情失败",
|
||||
"please_fill_field": "请填写 {{field}}",
|
||||
"load_market_failed": "加载市场预设失败"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import './i18n';
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import 'remixicon/fonts/remixicon.css'
|
||||
import { RouterProvider } from 'react-router-dom';
|
||||
import { router } from './routes';
|
||||
import { ConfigProvider } from '@/components/ConfigProvider';
|
||||
|
||||
@@ -2,6 +2,7 @@ import { createMemoryRouter, Navigate } from 'react-router-dom';
|
||||
import App from './App';
|
||||
import { Login } from '@/components/Login';
|
||||
import { DebugPage } from '@/components/DebugPage';
|
||||
import { Presets } from '@/components/Presets';
|
||||
import ProtectedRoute from '@/components/ProtectedRoute';
|
||||
import PublicRoute from '@/components/PublicRoute';
|
||||
|
||||
@@ -18,6 +19,10 @@ export const router = createMemoryRouter([
|
||||
path: '/dashboard',
|
||||
element: <ProtectedRoute><App /></ProtectedRoute>,
|
||||
},
|
||||
{
|
||||
path: '/presets',
|
||||
element: <ProtectedRoute><Presets /></ProtectedRoute>,
|
||||
},
|
||||
{
|
||||
path: '/debug',
|
||||
element: <ProtectedRoute><DebugPage /></ProtectedRoute>,
|
||||
|
||||
Reference in New Issue
Block a user