mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 00:35:32 +08:00
feat(frontend): update DeepLinkImportDialog for multi-resource imports
Refactor the main deeplink import dialog to handle all resource types with proper confirmation UI and post-import actions. Key changes: - Add resource-specific confirmation components (Prompt/MCP/Skill) - Implement typed result handling with discriminated unions - Add MCP result type guard for backward compatibility - Implement resource-specific cache invalidation strategies - Add custom event dispatching for non-React-Query resources Import flow improvements: - Provider: Invalidate provider queries, show success toast - Prompt: Dispatch "prompt-imported" event, trigger manual refresh - MCP: Aggressive cache invalidation with refetchQueries, handle partial success (show warning if some imports failed) - Skill: Force refetch skills query with refetchType: "all" Error handling: - Graceful fallback for legacy backend responses (no type field) - MCP-specific result detection via type guard - Detailed error messages in toasts UI improvements: - Dynamic dialog title based on resource type - Resource-specific confirmation content rendering - Better visual feedback during import process
This commit is contained in:
YoVinchen
@@ -13,6 +13,10 @@ import { Button } from "@/components/ui/button";
|
||||
import { toast } from "sonner";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { PromptConfirmation } from "./deeplink/PromptConfirmation";
|
||||
import { McpConfirmation } from "./deeplink/McpConfirmation";
|
||||
import { SkillConfirmation } from "./deeplink/SkillConfirmation";
|
||||
import { ProviderIcon } from "./ProviderIcon";
|
||||
|
||||
interface DeeplinkError {
|
||||
url: string;
|
||||
@@ -26,6 +30,24 @@ export function DeepLinkImportDialog() {
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
// 容错判断：MCP 导入结果可能缺少 type 字段
|
||||
const isMcpImportResult = (
|
||||
value: unknown,
|
||||
): value is {
|
||||
importedCount: number;
|
||||
importedIds: string[];
|
||||
failed: Array<{ id: string; error: string }>;
|
||||
type?: "mcp";
|
||||
} => {
|
||||
if (!value || typeof value !== "object") return false;
|
||||
const v = value as Record<string, unknown>;
|
||||
return (
|
||||
typeof v.importedCount === "number" &&
|
||||
Array.isArray(v.importedIds) &&
|
||||
Array.isArray(v.failed)
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Listen for deep link import events
|
||||
const unlistenImport = listen<DeepLinkImportRequest>(
|
||||
@@ -78,22 +100,89 @@ export function DeepLinkImportDialog() {
|
||||
setIsImporting(true);
|
||||
|
||||
try {
|
||||
await deeplinkApi.importFromDeeplink(request);
|
||||
const result = await deeplinkApi.importFromDeeplink(request);
|
||||
const refreshMcp = async (summary: {
|
||||
importedCount: number;
|
||||
importedIds: string[];
|
||||
failed: Array<{ id: string; error: string }>;
|
||||
}) => {
|
||||
// 强制刷新 MCP 相关缓存，确保管理页重新从数据库加载
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["mcp", "all"],
|
||||
refetchType: "all",
|
||||
});
|
||||
await queryClient.refetchQueries({
|
||||
queryKey: ["mcp", "all"],
|
||||
type: "all",
|
||||
});
|
||||
|
||||
// Invalidate provider queries to refresh the list
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["providers", request.app],
|
||||
});
|
||||
if (summary.failed.length > 0) {
|
||||
toast.warning(`部分导入成功`, {
|
||||
description: `成功: ${summary.importedCount}, 失败: ${summary.failed.length}`,
|
||||
});
|
||||
} else {
|
||||
toast.success("MCP Servers 导入成功", {
|
||||
description: `成功导入 ${summary.importedCount} 个服务器`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
toast.success(t("deeplink.importSuccess"), {
|
||||
description: t("deeplink.importSuccessDescription", {
|
||||
name: request.name,
|
||||
}),
|
||||
});
|
||||
// Handle different result types
|
||||
if ("type" in result) {
|
||||
if (result.type === "provider") {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["providers", request.app],
|
||||
});
|
||||
toast.success(t("deeplink.importSuccess"), {
|
||||
description: t("deeplink.importSuccessDescription", {
|
||||
name: request.name,
|
||||
}),
|
||||
});
|
||||
} else if (result.type === "prompt") {
|
||||
// Prompts don't use React Query, trigger a custom event for refresh
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("prompt-imported", {
|
||||
detail: { app: request.app },
|
||||
}),
|
||||
);
|
||||
toast.success("提示词导入成功", {
|
||||
description: `已导入提示词: ${request.name}`,
|
||||
});
|
||||
} else if (result.type === "mcp") {
|
||||
await refreshMcp(result);
|
||||
} else if (result.type === "skill") {
|
||||
// Refresh Skills with aggressive strategy
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["skills"],
|
||||
refetchType: "all",
|
||||
});
|
||||
await queryClient.refetchQueries({
|
||||
queryKey: ["skills"],
|
||||
type: "all",
|
||||
});
|
||||
toast.success("Skill 仓库添加成功", {
|
||||
description: `已添加仓库: ${request.repo}`,
|
||||
});
|
||||
}
|
||||
} else if (isMcpImportResult(result)) {
|
||||
// 兜底处理：旧版本后端可能未返回 type 字段
|
||||
await refreshMcp(result);
|
||||
} else {
|
||||
// Legacy return type (string ID) - assume provider
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["providers", request.app],
|
||||
});
|
||||
toast.success(t("deeplink.importSuccess"), {
|
||||
description: t("deeplink.importSuccessDescription", {
|
||||
name: request.name,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
// Close dialog after all refreshes complete
|
||||
setIsOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to import provider from deep link:", error);
|
||||
console.error("Failed to import from deep link:", error);
|
||||
toast.error(t("deeplink.importError"), {
|
||||
description: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
@@ -189,6 +278,34 @@ export function DeepLinkImportDialog() {
|
||||
return value;
|
||||
};
|
||||
|
||||
const getTitle = () => {
|
||||
if (!request) return t("deeplink.confirmImport");
|
||||
switch (request.resource) {
|
||||
case "prompt":
|
||||
return "导入提示词";
|
||||
case "mcp":
|
||||
return "导入 MCP Servers";
|
||||
case "skill":
|
||||
return "添加 Skill 仓库";
|
||||
default:
|
||||
return t("deeplink.confirmImport");
|
||||
}
|
||||
};
|
||||
|
||||
const getDescription = () => {
|
||||
if (!request) return t("deeplink.confirmImportDescription");
|
||||
switch (request.resource) {
|
||||
case "prompt":
|
||||
return "请确认是否导入此系统提示词";
|
||||
case "mcp":
|
||||
return "请确认是否导入这些 MCP Servers";
|
||||
case "skill":
|
||||
return "请确认是否添加此 Skill 仓库";
|
||||
default:
|
||||
return t("deeplink.confirmImportDescription");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen && !!request} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-[500px]" zIndex="top">
|
||||
@@ -196,200 +313,197 @@ export function DeepLinkImportDialog() {
|
||||
<>
|
||||
{/* 标题显式左对齐，避免默认居中样式影响 */}
|
||||
<DialogHeader className="text-left sm:text-left">
|
||||
<DialogTitle>{t("deeplink.confirmImport")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("deeplink.confirmImportDescription")}
|
||||
</DialogDescription>
|
||||
<DialogTitle>{getTitle()}</DialogTitle>
|
||||
<DialogDescription>{getDescription()}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 主体内容整体右移，略大于标题内边距，让内容看起来不贴边 */}
|
||||
<div className="space-y-4 px-8 py-4 max-h-[60vh] overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:block [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700">
|
||||
{/* App Type */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.app")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-medium capitalize">
|
||||
{request.app}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Provider Name */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.providerName")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-medium">
|
||||
{request.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Homepage */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.homepage")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
|
||||
{request.homepage}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Endpoint */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.endpoint")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm break-all">
|
||||
{request.endpoint}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Key (masked) */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.apiKey")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono text-muted-foreground">
|
||||
{maskedApiKey}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Fields - 根据应用类型显示不同的模型字段 */}
|
||||
{request.app === "claude" ? (
|
||||
<>
|
||||
{/* Claude 四种模型字段 */}
|
||||
{request.haikuModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.haikuModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.haikuModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.sonnetModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.sonnetModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.sonnetModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.opusModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.opusModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.opusModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.model && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.multiModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.model}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Codex 和 Gemini 使用通用 model 字段 */}
|
||||
{request.model && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.model")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.model}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
{request.resource === "prompt" && (
|
||||
<PromptConfirmation request={request} />
|
||||
)}
|
||||
{request.resource === "mcp" && (
|
||||
<McpConfirmation request={request} />
|
||||
)}
|
||||
{request.resource === "skill" && (
|
||||
<SkillConfirmation request={request} />
|
||||
)}
|
||||
|
||||
{/* Notes (if present) */}
|
||||
{request.notes && (
|
||||
<div className="grid grid-cols-3 items-start gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.notes")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground">
|
||||
{request.notes}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Legacy Provider View */}
|
||||
{(request.resource === "provider" || !request.resource) && (
|
||||
<>
|
||||
{/* Provider Icon - enlarge and center near the top */}
|
||||
{request.icon && (
|
||||
<div className="flex justify-center pt-2 pb-1">
|
||||
<ProviderIcon
|
||||
icon={request.icon}
|
||||
name={request.name || request.icon}
|
||||
size={64}
|
||||
className="drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Config File Details (v3.8+) */}
|
||||
{hasConfigFile && (
|
||||
<div className="space-y-3 pt-2 border-t border-border-default">
|
||||
{/* App Type */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.configSource")}
|
||||
{t("deeplink.app")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
|
||||
{configSource === "base64"
|
||||
? t("deeplink.configEmbedded")
|
||||
: t("deeplink.configRemote")}
|
||||
</span>
|
||||
{request.configFormat && (
|
||||
<span className="ml-2 text-xs text-muted-foreground uppercase">
|
||||
{request.configFormat}
|
||||
</span>
|
||||
)}
|
||||
<div className="col-span-2 text-sm font-medium capitalize">
|
||||
{request.app}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parsed Config Details */}
|
||||
{parsedConfig && (
|
||||
<div className="rounded-lg bg-muted/50 p-3 space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{t("deeplink.configDetails")}
|
||||
</div>
|
||||
{/* Provider Name */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.providerName")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-medium">
|
||||
{request.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Claude config */}
|
||||
{parsedConfig.type === "claude" && parsedConfig.env && (
|
||||
<div className="space-y-1.5">
|
||||
{Object.entries(parsedConfig.env).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
</span>
|
||||
<span className="font-mono truncate">
|
||||
{maskValue(key, String(value))}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
{/* Homepage */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.homepage")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
|
||||
{request.homepage}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Endpoint */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.endpoint")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm break-all">
|
||||
{request.endpoint}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Key (masked) */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.apiKey")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono text-muted-foreground">
|
||||
{maskedApiKey}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Fields - 根据应用类型显示不同的模型字段 */}
|
||||
{request.app === "claude" ? (
|
||||
<>
|
||||
{/* Claude 四种模型字段 */}
|
||||
{request.haikuModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.haikuModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.haikuModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.sonnetModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.sonnetModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.sonnetModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.opusModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.opusModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.opusModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.model && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.multiModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.model}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Codex 和 Gemini 使用通用 model 字段 */}
|
||||
{request.model && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.model")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.model}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Codex config */}
|
||||
{parsedConfig.type === "codex" && (
|
||||
<div className="space-y-2">
|
||||
{parsedConfig.auth &&
|
||||
Object.keys(parsedConfig.auth).length > 0 && (
|
||||
{/* Notes (if present) */}
|
||||
{request.notes && (
|
||||
<div className="grid grid-cols-3 items-start gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.notes")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground">
|
||||
{request.notes}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Config File Details (v3.8+) */}
|
||||
{hasConfigFile && (
|
||||
<div className="space-y-3 pt-2 border-t border-border-default">
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.configSource")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
|
||||
{configSource === "base64"
|
||||
? t("deeplink.configEmbedded")
|
||||
: t("deeplink.configRemote")}
|
||||
</span>
|
||||
{request.configFormat && (
|
||||
<span className="ml-2 text-xs text-muted-foreground uppercase">
|
||||
{request.configFormat}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parsed Config Details */}
|
||||
{parsedConfig && (
|
||||
<div className="rounded-lg bg-muted/50 p-3 space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{t("deeplink.configDetails")}
|
||||
</div>
|
||||
|
||||
{/* Claude config */}
|
||||
{parsedConfig.type === "claude" &&
|
||||
parsedConfig.env && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Auth:
|
||||
</div>
|
||||
{Object.entries(parsedConfig.auth).map(
|
||||
{Object.entries(parsedConfig.env).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs pl-2"
|
||||
className="grid grid-cols-2 gap-2 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
@@ -402,61 +516,92 @@ export function DeepLinkImportDialog() {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{parsedConfig.tomlConfig && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
TOML Config:
|
||||
</div>
|
||||
<pre className="text-xs font-mono bg-background p-2 rounded overflow-x-auto max-h-24 whitespace-pre-wrap">
|
||||
{parsedConfig.tomlConfig.substring(0, 300)}
|
||||
{parsedConfig.tomlConfig.length > 300 && "..."}
|
||||
</pre>
|
||||
|
||||
{/* Codex config */}
|
||||
{parsedConfig.type === "codex" && (
|
||||
<div className="space-y-2">
|
||||
{parsedConfig.auth &&
|
||||
Object.keys(parsedConfig.auth).length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Auth:
|
||||
</div>
|
||||
{Object.entries(parsedConfig.auth).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs pl-2"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
</span>
|
||||
<span className="font-mono truncate">
|
||||
{maskValue(key, String(value))}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{parsedConfig.tomlConfig && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
TOML Config:
|
||||
</div>
|
||||
<pre className="text-xs font-mono bg-background p-2 rounded overflow-x-auto max-h-24 whitespace-pre-wrap">
|
||||
{parsedConfig.tomlConfig.substring(0, 300)}
|
||||
{parsedConfig.tomlConfig.length > 300 &&
|
||||
"..."}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gemini config */}
|
||||
{parsedConfig.type === "gemini" && parsedConfig.env && (
|
||||
<div className="space-y-1.5">
|
||||
{Object.entries(parsedConfig.env).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
</span>
|
||||
<span className="font-mono truncate">
|
||||
{maskValue(key, String(value))}
|
||||
</span>
|
||||
{/* Gemini config */}
|
||||
{parsedConfig.type === "gemini" &&
|
||||
parsedConfig.env && (
|
||||
<div className="space-y-1.5">
|
||||
{Object.entries(parsedConfig.env).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
</span>
|
||||
<span className="font-mono truncate">
|
||||
{maskValue(key, String(value))}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Config URL (if remote) */}
|
||||
{request.configUrl && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.configUrl")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono text-muted-foreground break-all">
|
||||
{request.configUrl}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Config URL (if remote) */}
|
||||
{request.configUrl && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.configUrl")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono text-muted-foreground break-all">
|
||||
{request.configUrl}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Warning */}
|
||||
<div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
|
||||
{t("deeplink.warning")}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Warning */}
|
||||
<div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
|
||||
{t("deeplink.warning")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user