mirror of
https://github.com/aiclientproxy/proxycast.git
synced 2026-10-13 00:14:05 +08:00
feat: v0.27.0 - 重构 Agent 架构并新增 API Key Provider 管理系统
主要变更： - 引入基于 Protocol 的 Agent 架构（支持 OpenAI/Anthropic/Kiro/Gemini） - 新增 API Key Provider 管理系统，支持多种第三方 AI 服务商 - 重构流式响应处理，新增统一的 Stream 处理模块 - 新增协议转换器（Translator）模块，支持 Kiro 到 OpenAI/Anthropic 的转换 - 前端新增 API Key Provider 配置界面和导入/导出功能 - 新增 50+ AI 服务商图标支持 - 优化 Agent 工具调用显示和流式渲染 - 完善数据库 schema，新增 api_key_providers 表 技术细节： - 重构 native_agent.rs，引入策略模式的 Protocol trait - 新增 parsers 和 generators 模块处理不同协议的 SSE 流 - 新增完整的 API Key 验证和连接测试功能 - 改进前端 TypeScript 类型定义 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
coso
co-authored by
Claude Sonnet 4.5
Claude Sonnet 4.5
parent
74fa3202ce
commit
59cd4ecfbd
@@ -1,16 +1,6 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import {
|
||||
User,
|
||||
Bot,
|
||||
Copy,
|
||||
Edit2,
|
||||
Trash2,
|
||||
Lightbulb,
|
||||
ChevronDown,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
import { User, Bot, Copy, Edit2, Trash2, Check } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
MessageListContainer,
|
||||
@@ -23,9 +13,6 @@ import {
|
||||
TimeStamp,
|
||||
MessageBubble,
|
||||
MessageActions,
|
||||
ThinkingBox,
|
||||
ThinkingHeader,
|
||||
ThinkingContent,
|
||||
} from "../styles";
|
||||
import { MarkdownRenderer } from "./MarkdownRenderer";
|
||||
import { StreamingRenderer } from "./StreamingRenderer";
|
||||
@@ -44,9 +31,6 @@ export const MessageList: React.FC<MessageListProps> = ({
|
||||
onEditMessage,
|
||||
}) => {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [expandedThinking, setExpandedThinking] = useState<
|
||||
Record<string, boolean>
|
||||
>({});
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editContent, setEditContent] = useState("");
|
||||
@@ -57,10 +41,6 @@ export const MessageList: React.FC<MessageListProps> = ({
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
const toggleThinking = (id: string) => {
|
||||
setExpandedThinking((prev) => ({ ...prev, [id]: !prev[id] }));
|
||||
};
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
};
|
||||
@@ -128,25 +108,6 @@ export const MessageList: React.FC<MessageListProps> = ({
|
||||
</MessageHeader>
|
||||
|
||||
<MessageBubble $isUser={msg.role === "user"}>
|
||||
{msg.isThinking && (
|
||||
<ThinkingBox $expanded={!!expandedThinking[msg.id]}>
|
||||
<ThinkingHeader onClick={() => toggleThinking(msg.id)}>
|
||||
<Lightbulb size={14} className="text-yellow-500" />
|
||||
<span>{msg.thinkingContent}</span>
|
||||
<ChevronDown
|
||||
size={14}
|
||||
className={cn(
|
||||
"ml-1 transition-transform duration-200",
|
||||
expandedThinking[msg.id] && "rotate-180",
|
||||
)}
|
||||
/>
|
||||
</ThinkingHeader>
|
||||
{expandedThinking[msg.id] && (
|
||||
<ThinkingContent>正在深度思考...</ThinkingContent>
|
||||
)}
|
||||
</ThinkingBox>
|
||||
)}
|
||||
|
||||
{editingId === msg.id ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<textarea
|
||||
@@ -175,6 +136,7 @@ export const MessageList: React.FC<MessageListProps> = ({
|
||||
isStreaming={msg.isThinking}
|
||||
toolCalls={msg.toolCalls}
|
||||
showCursor={msg.isThinking && !msg.content}
|
||||
contentParts={msg.contentParts}
|
||||
/>
|
||||
) : (
|
||||
<MarkdownRenderer content={msg.content} />
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
# Agent Chat 组件
|
||||
|
||||
Agent 聊天界面的 UI 组件集合。
|
||||
|
||||
## 文件索引
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `ChatNavbar.tsx` | 聊天顶部导航栏 |
|
||||
| `ChatSettings.tsx` | 聊天设置面板 |
|
||||
| `ChatSidebar.tsx` | 聊天侧边栏（会话列表） |
|
||||
| `EmptyState.tsx` | 空状态占位组件 |
|
||||
| `InputArea.tsx` | 消息输入区域 |
|
||||
| `MarkdownRenderer.tsx` | Markdown 渲染组件 |
|
||||
| `MessageList.tsx` | 消息列表组件 |
|
||||
| `StreamingRenderer.tsx` | 流式消息渲染（支持思考内容、工具调用） |
|
||||
| `TokenUsageDisplay.tsx` | Token 使用量显示 |
|
||||
| `ToolCallDisplay.tsx` | 工具调用显示（状态、参数、日志、结果） |
|
||||
|
||||
## 核心组件
|
||||
|
||||
### ToolCallDisplay
|
||||
|
||||
参考 Goose UI 设计，提供完整的工具调用可视化：
|
||||
|
||||
- **状态指示器**：pending/running/completed/failed 四种状态
|
||||
- **工具描述**：根据工具类型和参数生成人性化描述
|
||||
- **可展开面板**：参数、日志、输出结果分层展示
|
||||
- **执行时间**：显示工具执行耗时
|
||||
|
||||
### StreamingRenderer
|
||||
|
||||
流式消息渲染组件，支持：
|
||||
|
||||
- **思考内容**：解析 `<think>` 或 `<thinking>` 标签，折叠显示
|
||||
- **工具调用**：集成 ToolCallList 显示工具执行状态
|
||||
- **实时 Markdown**：流式渲染 Markdown 格式
|
||||
- **流式光标**：显示正在输入的视觉反馈
|
||||
|
||||
## 依赖关系
|
||||
|
||||
```
|
||||
MessageList
|
||||
└── StreamingRenderer
|
||||
├── ThinkingBlock (思考内容)
|
||||
├── ToolCallList
|
||||
│ └── ToolCallDisplay
|
||||
│ ├── ToolCallStatusIndicator
|
||||
│ ├── ToolCallArguments
|
||||
│ ├── ToolLogsView
|
||||
│ └── ToolResultView
|
||||
└── MarkdownRenderer
|
||||
```
|
||||
@@ -1,102 +1,253 @@
|
||||
/**
|
||||
* 流式消息渲染组件
|
||||
*
|
||||
* 实现实时 Markdown 渲染，区分文本响应和工具调用响应
|
||||
* 参考 Goose UI 设计，支持思考内容、工具调用和实时 Markdown 渲染
|
||||
* Requirements: 9.3, 9.4
|
||||
*/
|
||||
|
||||
import React, { memo, useMemo } from "react";
|
||||
import styled, { keyframes } from "styled-components";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronDown, Lightbulb } from "lucide-react";
|
||||
import { MarkdownRenderer } from "./MarkdownRenderer";
|
||||
import { ToolCallList } from "./ToolCallDisplay";
|
||||
import { ToolCallList, ToolCallItem } from "./ToolCallDisplay";
|
||||
import type { ToolCallState } from "@/lib/api/agent";
|
||||
import type { ContentPart } from "../types";
|
||||
|
||||
// 光标闪烁动画
|
||||
const blink = keyframes`
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
`;
|
||||
// ============ 思考内容组件 ============
|
||||
|
||||
const StreamingContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
`;
|
||||
interface ThinkingBlockProps {
|
||||
content: string;
|
||||
defaultExpanded?: boolean;
|
||||
}
|
||||
|
||||
const TextSection = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
const ThinkingBlock: React.FC<ThinkingBlockProps> = ({
|
||||
content,
|
||||
defaultExpanded = false,
|
||||
}) => {
|
||||
const [expanded, setExpanded] = React.useState(defaultExpanded);
|
||||
|
||||
const StreamingCursor = styled.span`
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 1em;
|
||||
background-color: hsl(var(--primary));
|
||||
margin-left: 2px;
|
||||
vertical-align: text-bottom;
|
||||
animation: ${blink} 1s step-end infinite;
|
||||
`;
|
||||
if (!content) return null;
|
||||
|
||||
const ToolSection = styled.div`
|
||||
margin-top: 8px;
|
||||
`;
|
||||
return (
|
||||
<details
|
||||
className="bg-muted/50 border border-border rounded-lg overflow-hidden mb-3"
|
||||
open={expanded}
|
||||
onToggle={(e) => setExpanded((e.target as HTMLDetailsElement).open)}
|
||||
>
|
||||
<summary className="cursor-pointer px-3 py-2 text-sm text-muted-foreground select-none flex items-center gap-2 hover:bg-muted/70 transition-colors">
|
||||
<Lightbulb className="w-4 h-4 text-yellow-500" />
|
||||
<span className="flex-1">思考过程</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"w-4 h-4 transition-transform duration-200",
|
||||
expanded && "rotate-180",
|
||||
)}
|
||||
/>
|
||||
</summary>
|
||||
<div className="px-3 py-2 border-t border-border bg-background/50">
|
||||
<MarkdownRenderer content={content} />
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
};
|
||||
|
||||
// ============ 流式光标 ============
|
||||
|
||||
const StreamingCursor: React.FC = () => (
|
||||
<span
|
||||
className="inline-block w-0.5 h-[1em] bg-primary ml-0.5 align-text-bottom animate-pulse"
|
||||
style={{ animationDuration: "1s" }}
|
||||
/>
|
||||
);
|
||||
|
||||
// ============ 思考内容解析 ============
|
||||
|
||||
interface ParsedContent {
|
||||
visibleText: string;
|
||||
thinkingText: string | null;
|
||||
}
|
||||
|
||||
const parseThinkingContent = (text: string): ParsedContent => {
|
||||
// 支持 <think>...</think> 和 <thinking>...</thinking> 标签
|
||||
const thinkRegex = /<think(?:ing)?>([\s\S]*?)<\/think(?:ing)?>/gi;
|
||||
let thinkingText: string | null = null;
|
||||
let visibleText = text;
|
||||
|
||||
const matches = text.matchAll(thinkRegex);
|
||||
const thinkingParts: string[] = [];
|
||||
|
||||
for (const match of matches) {
|
||||
thinkingParts.push(match[1].trim());
|
||||
visibleText = visibleText.replace(match[0], "");
|
||||
}
|
||||
|
||||
if (thinkingParts.length > 0) {
|
||||
thinkingText = thinkingParts.join("\n\n");
|
||||
}
|
||||
|
||||
return {
|
||||
visibleText: visibleText.trim(),
|
||||
thinkingText,
|
||||
};
|
||||
};
|
||||
|
||||
// ============ 主组件 ============
|
||||
|
||||
interface StreamingRendererProps {
|
||||
/** 文本内容 */
|
||||
/** 文本内容（向后兼容） */
|
||||
content: string;
|
||||
/** 是否正在流式输出 */
|
||||
isStreaming?: boolean;
|
||||
/** 工具调用列表 */
|
||||
/** 工具调用列表（向后兼容） */
|
||||
toolCalls?: ToolCallState[];
|
||||
/** 是否显示光标 */
|
||||
showCursor?: boolean;
|
||||
/** 思考内容（可选，如果不提供则从 content 中解析） */
|
||||
thinkingContent?: string;
|
||||
/**
|
||||
* 交错内容列表（按事件到达顺序排列）
|
||||
* 如果存在且非空，按顺序渲染
|
||||
* 否则回退到 content + toolCalls 渲染方式
|
||||
*/
|
||||
contentParts?: ContentPart[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 流式消息渲染组件
|
||||
*
|
||||
* 支持实时 Markdown 渲染和工具调用显示
|
||||
* Requirements: 9.3 - THE Frontend SHALL distinguish between text responses and tool call responses visually
|
||||
* Requirements: 9.4 - WHEN streaming text, THE Frontend SHALL render markdown formatting in real-time
|
||||
* 支持：
|
||||
* - 思考内容折叠显示（<think> 或 <thinking> 标签）
|
||||
* - 工具调用状态和结果显示
|
||||
* - 实时 Markdown 渲染
|
||||
* - 流式光标
|
||||
* - **交错内容显示**（文本和工具调用按事件顺序交错）
|
||||
*/
|
||||
export const StreamingRenderer: React.FC<StreamingRendererProps> = memo(
|
||||
({ content, isStreaming = false, toolCalls, showCursor = true }) => {
|
||||
// 判断是否有正在执行的工具
|
||||
const hasRunningTools = useMemo(
|
||||
() => toolCalls?.some((tc) => tc.status === "running") ?? false,
|
||||
[toolCalls],
|
||||
({
|
||||
content,
|
||||
isStreaming = false,
|
||||
toolCalls,
|
||||
showCursor = true,
|
||||
thinkingContent: externalThinking,
|
||||
contentParts,
|
||||
}) => {
|
||||
// 判断是否使用交错显示模式
|
||||
const useInterleavedMode = contentParts && contentParts.length > 0;
|
||||
|
||||
// 解析思考内容（仅在非交错模式下使用）
|
||||
const { visibleText, thinkingText } = useMemo(
|
||||
() => parseThinkingContent(content),
|
||||
[content],
|
||||
);
|
||||
|
||||
// 使用外部提供的思考内容或解析出的内容
|
||||
const finalThinking = externalThinking || thinkingText;
|
||||
|
||||
// 判断是否有正在执行的工具
|
||||
const hasRunningTools = useMemo(() => {
|
||||
if (useInterleavedMode) {
|
||||
return contentParts.some(
|
||||
(part) =>
|
||||
part.type === "tool_use" && part.toolCall.status === "running",
|
||||
);
|
||||
}
|
||||
return toolCalls?.some((tc) => tc.status === "running") ?? false;
|
||||
}, [contentParts, toolCalls, useInterleavedMode]);
|
||||
|
||||
// 判断是否显示光标
|
||||
const shouldShowCursor = isStreaming && showCursor && !hasRunningTools;
|
||||
|
||||
// 判断是否有工具调用
|
||||
// 判断是否有可见内容
|
||||
const hasVisibleContent = useInterleavedMode
|
||||
? contentParts.some(
|
||||
(part) => part.type === "text" && part.text.length > 0,
|
||||
)
|
||||
: visibleText.length > 0;
|
||||
|
||||
// 交错显示模式：按顺序渲染 contentParts
|
||||
if (useInterleavedMode) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* 思考内容 - 显示在最前面 */}
|
||||
{finalThinking && (
|
||||
<ThinkingBlock
|
||||
content={finalThinking}
|
||||
defaultExpanded={isStreaming}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 交错内容 */}
|
||||
{contentParts.map((part, index) => {
|
||||
if (part.type === "text") {
|
||||
// 解析并渲染文本（可能包含 thinking 标签）
|
||||
const { visibleText: partVisible } = parseThinkingContent(
|
||||
part.text,
|
||||
);
|
||||
if (!partVisible) return null;
|
||||
|
||||
const isLastPart = index === contentParts.length - 1;
|
||||
return (
|
||||
<div key={`text-${index}`} className="relative">
|
||||
<MarkdownRenderer content={partVisible} />
|
||||
{isLastPart && shouldShowCursor && <StreamingCursor />}
|
||||
</div>
|
||||
);
|
||||
} else if (part.type === "tool_use") {
|
||||
// 渲染单个工具调用
|
||||
return (
|
||||
<ToolCallItem key={part.toolCall.id} toolCall={part.toolCall} />
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
|
||||
{/* 如果没有内容但正在流式输出，显示光标 */}
|
||||
{!hasVisibleContent &&
|
||||
isStreaming &&
|
||||
showCursor &&
|
||||
!hasRunningTools && (
|
||||
<div>
|
||||
<StreamingCursor />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 回退模式：传统的 content + toolCalls 分开渲染
|
||||
const hasToolCalls = toolCalls && toolCalls.length > 0;
|
||||
|
||||
return (
|
||||
<StreamingContainer>
|
||||
{/* 工具调用区域 - 显示在文本之前 */}
|
||||
{hasToolCalls && (
|
||||
<ToolSection>
|
||||
<ToolCallList toolCalls={toolCalls} />
|
||||
</ToolSection>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* 思考内容 - 显示在最前面 */}
|
||||
{finalThinking && (
|
||||
<ThinkingBlock
|
||||
content={finalThinking}
|
||||
defaultExpanded={isStreaming}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 工具调用区域 */}
|
||||
{hasToolCalls && <ToolCallList toolCalls={toolCalls} />}
|
||||
|
||||
{/* 文本内容区域 */}
|
||||
{content && (
|
||||
<TextSection>
|
||||
<MarkdownRenderer content={content} />
|
||||
{visibleText.length > 0 && (
|
||||
<div className="relative">
|
||||
<MarkdownRenderer content={visibleText} />
|
||||
{shouldShowCursor && <StreamingCursor />}
|
||||
</TextSection>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 如果没有内容但正在流式输出，显示光标 */}
|
||||
{!content && isStreaming && showCursor && !hasRunningTools && (
|
||||
<TextSection>
|
||||
<StreamingCursor />
|
||||
</TextSection>
|
||||
)}
|
||||
</StreamingContainer>
|
||||
{!hasVisibleContent &&
|
||||
isStreaming &&
|
||||
showCursor &&
|
||||
!hasRunningTools && (
|
||||
<div>
|
||||
<StreamingCursor />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -1,150 +1,81 @@
|
||||
/**
|
||||
* 工具调用显示组件
|
||||
*
|
||||
* 显示工具执行状态和结果
|
||||
* 参考 Goose UI 设计，显示工具执行状态、参数、日志和结果
|
||||
* Requirements: 9.1, 9.2 - 工具执行指示器和结果折叠面板
|
||||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
import styled, { keyframes } from "styled-components";
|
||||
import React, { useState, useEffect, useRef, useMemo } from "react";
|
||||
import {
|
||||
Terminal,
|
||||
FileText,
|
||||
Edit3,
|
||||
FolderOpen,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Check,
|
||||
X,
|
||||
Loader2,
|
||||
Eye,
|
||||
FilePlus,
|
||||
Search,
|
||||
Globe,
|
||||
Code2,
|
||||
Settings,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ToolCallState } from "@/lib/api/agent";
|
||||
import { MarkdownRenderer } from "./MarkdownRenderer";
|
||||
|
||||
// 动画
|
||||
const spin = keyframes`
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
`;
|
||||
// ============ 类型定义 ============
|
||||
|
||||
const pulse = keyframes`
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
`;
|
||||
export type ToolCallStatus = "pending" | "running" | "completed" | "failed";
|
||||
|
||||
// 样式组件
|
||||
const ToolCallContainer = styled.div`
|
||||
margin: 8px 0;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: hsl(var(--muted) / 0.3);
|
||||
`;
|
||||
type ToolCallArgumentValue =
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| null
|
||||
| ToolCallArgumentValue[]
|
||||
| { [key: string]: ToolCallArgumentValue };
|
||||
|
||||
const ToolCallHeader = styled.div<{ $status: string }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
background-color: ${(props) =>
|
||||
props.$status === "running"
|
||||
? "hsl(var(--primary) / 0.1)"
|
||||
: props.$status === "failed"
|
||||
? "hsl(var(--destructive) / 0.1)"
|
||||
: "transparent"};
|
||||
// ============ 工具状态指示器 ============
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(var(--muted) / 0.5);
|
||||
}
|
||||
`;
|
||||
interface ToolCallStatusIndicatorProps {
|
||||
status: ToolCallStatus;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ToolIcon = styled.div<{ $status: string }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background-color: ${(props) =>
|
||||
props.$status === "running"
|
||||
? "hsl(var(--primary))"
|
||||
: props.$status === "failed"
|
||||
? "hsl(var(--destructive))"
|
||||
: "hsl(var(--primary) / 0.8)"};
|
||||
color: white;
|
||||
`;
|
||||
const ToolCallStatusIndicator: React.FC<ToolCallStatusIndicatorProps> = ({
|
||||
status,
|
||||
className,
|
||||
}) => {
|
||||
const getStatusStyles = () => {
|
||||
switch (status) {
|
||||
case "completed":
|
||||
return "bg-green-500";
|
||||
case "failed":
|
||||
return "bg-red-500";
|
||||
case "running":
|
||||
return "bg-yellow-500 animate-pulse";
|
||||
case "pending":
|
||||
default:
|
||||
return "bg-gray-400";
|
||||
}
|
||||
};
|
||||
|
||||
const SpinningLoader = styled(Loader2)`
|
||||
animation: ${spin} 1s linear infinite;
|
||||
`;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full border border-background",
|
||||
getStatusStyles(),
|
||||
className,
|
||||
)}
|
||||
aria-label={`工具状态: ${status}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ToolName = styled.span`
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
flex: 1;
|
||||
`;
|
||||
// ============ 工具图标映射 ============
|
||||
|
||||
const ToolStatus = styled.span<{ $status: string }>`
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: ${(props) =>
|
||||
props.$status === "running"
|
||||
? "hsl(var(--primary) / 0.2)"
|
||||
: props.$status === "failed"
|
||||
? "hsl(var(--destructive) / 0.2)"
|
||||
: "hsl(var(--primary) / 0.1)"};
|
||||
color: ${(props) =>
|
||||
props.$status === "running"
|
||||
? "hsl(var(--primary))"
|
||||
: props.$status === "failed"
|
||||
? "hsl(var(--destructive))"
|
||||
: "hsl(var(--primary))"};
|
||||
animation: ${(props) => (props.$status === "running" ? pulse : "none")} 1.5s
|
||||
ease-in-out infinite;
|
||||
`;
|
||||
|
||||
const ExpandIcon = styled.div`
|
||||
color: hsl(var(--muted-foreground));
|
||||
transition: transform 0.2s;
|
||||
`;
|
||||
|
||||
const ToolResultPanel = styled.div<{ $expanded: boolean }>`
|
||||
display: ${(props) => (props.$expanded ? "block" : "none")};
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
background-color: hsl(var(--background));
|
||||
`;
|
||||
|
||||
const ResultContent = styled.pre`
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
color: hsl(var(--foreground));
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
const ErrorContent = styled(ResultContent)`
|
||||
color: hsl(var(--destructive));
|
||||
background-color: hsl(var(--destructive) / 0.05);
|
||||
`;
|
||||
|
||||
const ExecutionTime = styled.span`
|
||||
font-size: 11px;
|
||||
color: hsl(var(--muted-foreground));
|
||||
margin-left: auto;
|
||||
margin-right: 8px;
|
||||
`;
|
||||
|
||||
// 工具图标映射
|
||||
const getToolIcon = (toolName: string) => {
|
||||
const name = toolName.toLowerCase();
|
||||
if (
|
||||
@@ -154,130 +85,461 @@ const getToolIcon = (toolName: string) => {
|
||||
) {
|
||||
return Terminal;
|
||||
}
|
||||
if (name.includes("read") || name.includes("file")) {
|
||||
return FileText;
|
||||
if (name.includes("read")) {
|
||||
return Eye;
|
||||
}
|
||||
if (name.includes("edit") || name.includes("write")) {
|
||||
if (name.includes("write") || name.includes("create")) {
|
||||
return FilePlus;
|
||||
}
|
||||
if (name.includes("edit") || name.includes("replace")) {
|
||||
return Edit3;
|
||||
}
|
||||
if (name.includes("list") || name.includes("dir")) {
|
||||
return FolderOpen;
|
||||
}
|
||||
return Terminal;
|
||||
};
|
||||
|
||||
// 工具名称显示映射
|
||||
const getToolDisplayName = (toolName: string): string => {
|
||||
const nameMap: Record<string, string> = {
|
||||
bash: "执行命令",
|
||||
read_file: "读取文件",
|
||||
write_file: "写入文件",
|
||||
edit_file: "编辑文件",
|
||||
list_directory: "列出目录",
|
||||
};
|
||||
return nameMap[toolName] || toolName;
|
||||
};
|
||||
|
||||
// 状态显示文本
|
||||
const getStatusText = (status: string): string => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return "执行中...";
|
||||
case "completed":
|
||||
return "完成";
|
||||
case "failed":
|
||||
return "失败";
|
||||
default:
|
||||
return status;
|
||||
if (
|
||||
name.includes("search") ||
|
||||
name.includes("find") ||
|
||||
name.includes("grep")
|
||||
) {
|
||||
return Search;
|
||||
}
|
||||
if (name.includes("web") || name.includes("fetch") || name.includes("http")) {
|
||||
return Globe;
|
||||
}
|
||||
if (name.includes("code") || name.includes("eval")) {
|
||||
return Code2;
|
||||
}
|
||||
if (name.includes("config") || name.includes("setting")) {
|
||||
return Settings;
|
||||
}
|
||||
if (name.includes("file")) {
|
||||
return FileText;
|
||||
}
|
||||
return Wrench;
|
||||
};
|
||||
|
||||
// ============ 工具描述生成 ============
|
||||
|
||||
const getToolDescription = (
|
||||
toolName: string,
|
||||
args: Record<string, ToolCallArgumentValue>,
|
||||
): string => {
|
||||
const name = toolName.toLowerCase();
|
||||
const getStringValue = (value: ToolCallArgumentValue): string => {
|
||||
return typeof value === "string" ? value : JSON.stringify(value);
|
||||
};
|
||||
|
||||
// 根据工具类型生成描述
|
||||
if (name.includes("bash") || name.includes("shell")) {
|
||||
if (args.command) {
|
||||
const cmd = getStringValue(args.command);
|
||||
return `执行: ${cmd.length > 50 ? cmd.slice(0, 50) + "..." : cmd}`;
|
||||
}
|
||||
return "执行命令";
|
||||
}
|
||||
|
||||
if (name.includes("read_file") || name === "read") {
|
||||
if (args.path || args.file_path) {
|
||||
return `读取 ${getStringValue(args.path || args.file_path)}`;
|
||||
}
|
||||
return "读取文件";
|
||||
}
|
||||
|
||||
if (name.includes("write_file") || name === "write") {
|
||||
if (args.path || args.file_path) {
|
||||
return `写入 ${getStringValue(args.path || args.file_path)}`;
|
||||
}
|
||||
return "写入文件";
|
||||
}
|
||||
|
||||
if (name.includes("edit_file") || name === "edit") {
|
||||
if (args.path || args.file_path) {
|
||||
return `编辑 ${getStringValue(args.path || args.file_path)}`;
|
||||
}
|
||||
return "编辑文件";
|
||||
}
|
||||
|
||||
if (name.includes("list") || name.includes("dir")) {
|
||||
if (args.path || args.directory) {
|
||||
return `列出 ${getStringValue(args.path || args.directory)}`;
|
||||
}
|
||||
return "列出目录";
|
||||
}
|
||||
|
||||
if (name.includes("search") || name.includes("grep")) {
|
||||
if (args.pattern || args.query) {
|
||||
return `搜索 "${getStringValue(args.pattern || args.query)}"`;
|
||||
}
|
||||
return "搜索";
|
||||
}
|
||||
|
||||
// 通用回退：工具名 + 参数键
|
||||
const entries = Object.entries(args);
|
||||
if (entries.length === 0) {
|
||||
return snakeToTitleCase(toolName);
|
||||
}
|
||||
if (entries.length === 1) {
|
||||
const [_key, value] = entries[0];
|
||||
const strValue = getStringValue(value);
|
||||
const truncated =
|
||||
strValue.length > 40 ? strValue.slice(0, 40) + "..." : strValue;
|
||||
return `${snakeToTitleCase(toolName)}: ${truncated}`;
|
||||
}
|
||||
return snakeToTitleCase(toolName);
|
||||
};
|
||||
|
||||
const snakeToTitleCase = (str: string): string => {
|
||||
return str
|
||||
.split("_")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
||||
.join(" ");
|
||||
};
|
||||
|
||||
// ============ 可展开面板组件 ============
|
||||
|
||||
interface ExpandablePanelProps {
|
||||
label: React.ReactNode;
|
||||
isStartExpanded?: boolean;
|
||||
isForceExpand?: boolean;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ExpandablePanel: React.FC<ExpandablePanelProps> = ({
|
||||
label,
|
||||
isStartExpanded = false,
|
||||
isForceExpand,
|
||||
children,
|
||||
className = "",
|
||||
}) => {
|
||||
const [isExpandedState, setIsExpanded] = useState<boolean | null>(null);
|
||||
const isExpanded =
|
||||
isExpandedState === null ? isStartExpanded : isExpandedState;
|
||||
const toggleExpand = () => setIsExpanded(!isExpanded);
|
||||
|
||||
useEffect(() => {
|
||||
if (isForceExpand) setIsExpanded(true);
|
||||
}, [isForceExpand]);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<button
|
||||
onClick={toggleExpand}
|
||||
className="group w-full flex justify-between items-center pr-2 py-2 px-3 transition-colors rounded-none hover:bg-muted/50"
|
||||
>
|
||||
<span className="flex items-center text-sm truncate flex-1 min-w-0">
|
||||
{label}
|
||||
</span>
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
"w-4 h-4 text-muted-foreground group-hover:opacity-100 transition-transform opacity-70",
|
||||
isExpanded && "rotate-90",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{isExpanded && <div>{children}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============ 工具参数显示 ============
|
||||
|
||||
interface ToolCallArgumentsProps {
|
||||
args: Record<string, ToolCallArgumentValue>;
|
||||
}
|
||||
|
||||
const ToolCallArguments: React.FC<ToolCallArgumentsProps> = ({ args }) => {
|
||||
const [expandedKeys, setExpandedKeys] = useState<Record<string, boolean>>({});
|
||||
|
||||
const toggleKey = (key: string) => {
|
||||
setExpandedKeys((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const renderValue = (key: string, value: ToolCallArgumentValue) => {
|
||||
if (typeof value === "string") {
|
||||
const needsExpansion = value.length > 60;
|
||||
const isExpanded = expandedKeys[key];
|
||||
|
||||
if (!needsExpansion) {
|
||||
return (
|
||||
<div className="text-sm mb-2">
|
||||
<div className="flex flex-row">
|
||||
<span className="text-muted-foreground min-w-[120px] shrink-0">
|
||||
{key}
|
||||
</span>
|
||||
<span className="text-foreground/70 break-all">{value}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("text-sm mb-2", !isExpanded && "truncate min-w-0")}>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-row items-start",
|
||||
!isExpanded && "truncate min-w-0",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleKey(key)}
|
||||
className="flex text-left text-muted-foreground min-w-[120px] shrink-0 hover:text-foreground"
|
||||
>
|
||||
{key}
|
||||
</button>
|
||||
<div className={cn("flex-1 min-w-0", !isExpanded && "truncate")}>
|
||||
{isExpanded ? (
|
||||
<MarkdownRenderer content={`\`\`\`\n${value}\n\`\`\``} />
|
||||
) : (
|
||||
<button
|
||||
onClick={() => toggleKey(key)}
|
||||
className="text-left text-foreground/70 truncate w-full hover:text-foreground"
|
||||
>
|
||||
{value}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 处理非字符串值
|
||||
const content = Array.isArray(value)
|
||||
? value
|
||||
.map((item, index) => `${index + 1}. ${JSON.stringify(item)}`)
|
||||
.join("\n")
|
||||
: typeof value === "object" && value !== null
|
||||
? JSON.stringify(value, null, 2)
|
||||
: String(value);
|
||||
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<div className="flex flex-row text-sm">
|
||||
<span className="text-muted-foreground min-w-[120px] shrink-0">
|
||||
{key}
|
||||
</span>
|
||||
<pre className="whitespace-pre-wrap text-foreground/70 overflow-x-auto max-w-full font-mono text-xs">
|
||||
{content}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="py-2 px-4">
|
||||
{Object.entries(args).map(([key, value]) => (
|
||||
<div key={key}>{renderValue(key, value)}</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============ 工具日志显示 ============
|
||||
|
||||
interface ToolLogsViewProps {
|
||||
logs: string[];
|
||||
working: boolean;
|
||||
isStartExpanded?: boolean;
|
||||
}
|
||||
|
||||
const ToolLogsView: React.FC<ToolLogsViewProps> = ({
|
||||
logs,
|
||||
working,
|
||||
isStartExpanded = false,
|
||||
}) => {
|
||||
const boxRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (boxRef.current) {
|
||||
boxRef.current.scrollTop = boxRef.current.scrollHeight;
|
||||
}
|
||||
}, [logs.length]);
|
||||
|
||||
return (
|
||||
<ExpandablePanel
|
||||
label={
|
||||
<span className="pl-2 py-1 text-sm flex items-center gap-2">
|
||||
<span>日志</span>
|
||||
{working && <Loader2 className="w-3 h-3 animate-spin text-primary" />}
|
||||
</span>
|
||||
}
|
||||
isStartExpanded={isStartExpanded}
|
||||
>
|
||||
<div
|
||||
ref={boxRef}
|
||||
className={cn(
|
||||
"flex flex-col items-start space-y-1 overflow-y-auto p-3 font-mono text-xs",
|
||||
working ? "max-h-16" : "max-h-80",
|
||||
)}
|
||||
>
|
||||
{logs.map((log, i) => (
|
||||
<span key={i} className="text-muted-foreground">
|
||||
{log}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</ExpandablePanel>
|
||||
);
|
||||
};
|
||||
|
||||
// ============ 工具结果显示 ============
|
||||
|
||||
interface ToolResultViewProps {
|
||||
result: string;
|
||||
isError?: boolean;
|
||||
isStartExpanded?: boolean;
|
||||
}
|
||||
|
||||
const ToolResultView: React.FC<ToolResultViewProps> = ({
|
||||
result,
|
||||
isError = false,
|
||||
isStartExpanded = false,
|
||||
}) => {
|
||||
return (
|
||||
<ExpandablePanel
|
||||
label={
|
||||
<span
|
||||
className={cn("pl-2 py-1 text-sm", isError && "text-destructive")}
|
||||
>
|
||||
{isError ? "错误" : "输出"}
|
||||
</span>
|
||||
}
|
||||
isStartExpanded={isStartExpanded}
|
||||
>
|
||||
<div className="p-3 max-h-80 overflow-y-auto">
|
||||
<pre
|
||||
className={cn(
|
||||
"whitespace-pre-wrap font-mono text-xs break-all",
|
||||
isError ? "text-destructive" : "text-foreground/80",
|
||||
)}
|
||||
>
|
||||
{result || "(无输出)"}
|
||||
</pre>
|
||||
</div>
|
||||
</ExpandablePanel>
|
||||
);
|
||||
};
|
||||
|
||||
// ============ 主组件 ============
|
||||
|
||||
interface ToolCallDisplayProps {
|
||||
toolCall: ToolCallState;
|
||||
defaultExpanded?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 单个工具调用显示组件
|
||||
*/
|
||||
export const ToolCallDisplay: React.FC<ToolCallDisplayProps> = ({
|
||||
toolCall,
|
||||
defaultExpanded = false,
|
||||
}) => {
|
||||
const [expanded, setExpanded] = useState(defaultExpanded);
|
||||
const IconComponent = getToolIcon(toolCall.name);
|
||||
|
||||
// 计算执行时间
|
||||
const executionTime =
|
||||
toolCall.endTime && toolCall.startTime
|
||||
? Math.round(
|
||||
(toolCall.endTime.getTime() - toolCall.startTime.getTime()) / 1000,
|
||||
)
|
||||
: null;
|
||||
// 解析参数
|
||||
const parsedArgs = useMemo(() => {
|
||||
if (!toolCall.arguments) return {};
|
||||
try {
|
||||
return JSON.parse(toolCall.arguments);
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}, [toolCall.arguments]);
|
||||
|
||||
// 生成工具描述
|
||||
const toolDescription = useMemo(
|
||||
() => getToolDescription(toolCall.name, parsedArgs),
|
||||
[toolCall.name, parsedArgs],
|
||||
);
|
||||
|
||||
// 计算执行时间
|
||||
const executionTime = useMemo(() => {
|
||||
if (toolCall.endTime && toolCall.startTime) {
|
||||
const ms = toolCall.endTime.getTime() - toolCall.startTime.getTime();
|
||||
return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
|
||||
}
|
||||
return null;
|
||||
}, [toolCall.startTime, toolCall.endTime]);
|
||||
|
||||
const hasArguments = Object.keys(parsedArgs).length > 0;
|
||||
const hasResult = toolCall.status !== "running" && toolCall.result;
|
||||
const hasLogs = toolCall.logs && toolCall.logs.length > 0;
|
||||
const isRunning = toolCall.status === "running";
|
||||
|
||||
// 工具标签
|
||||
const toolLabel = (
|
||||
<span className="flex items-center gap-2 min-w-0">
|
||||
<div className="relative inline-block">
|
||||
<IconComponent className="w-4 h-4 shrink-0" />
|
||||
<ToolCallStatusIndicator status={toolCall.status} />
|
||||
</div>
|
||||
<span className="truncate flex-1 min-w-0">{toolDescription}</span>
|
||||
{executionTime && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">
|
||||
{executionTime}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<ToolCallContainer>
|
||||
<ToolCallHeader
|
||||
$status={toolCall.status}
|
||||
onClick={() => hasResult && setExpanded(!expanded)}
|
||||
<div className="w-full text-sm rounded-lg overflow-hidden border border-border bg-muted/30">
|
||||
<ExpandablePanel
|
||||
label={toolLabel}
|
||||
isStartExpanded={defaultExpanded || isRunning}
|
||||
isForceExpand={isRunning}
|
||||
>
|
||||
<ToolIcon $status={toolCall.status}>
|
||||
{toolCall.status === "running" ? (
|
||||
<SpinningLoader size={14} />
|
||||
) : toolCall.status === "failed" ? (
|
||||
<X size={14} />
|
||||
) : (
|
||||
<IconComponent size={14} />
|
||||
)}
|
||||
</ToolIcon>
|
||||
|
||||
<ToolName>{getToolDisplayName(toolCall.name)}</ToolName>
|
||||
|
||||
{executionTime !== null && (
|
||||
<ExecutionTime>{executionTime}s</ExecutionTime>
|
||||
{/* 工具参数 */}
|
||||
{hasArguments && (
|
||||
<div className="border-t border-border">
|
||||
<ExpandablePanel
|
||||
label={
|
||||
<span className="pl-2 text-sm text-muted-foreground">参数</span>
|
||||
}
|
||||
isStartExpanded={false}
|
||||
>
|
||||
<ToolCallArguments args={parsedArgs} />
|
||||
</ExpandablePanel>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ToolStatus $status={toolCall.status}>
|
||||
{toolCall.status === "completed" && <Check size={12} />}
|
||||
{getStatusText(toolCall.status)}
|
||||
</ToolStatus>
|
||||
{/* 执行日志 */}
|
||||
{hasLogs && (
|
||||
<div className="border-t border-border">
|
||||
<ToolLogsView
|
||||
logs={toolCall.logs!}
|
||||
working={isRunning}
|
||||
isStartExpanded={isRunning}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 执行结果 */}
|
||||
{hasResult && (
|
||||
<ExpandIcon>
|
||||
{expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
|
||||
</ExpandIcon>
|
||||
<div className="border-t border-border">
|
||||
<ToolResultView
|
||||
result={toolCall.result?.error || toolCall.result?.output || ""}
|
||||
isError={!!toolCall.result?.error}
|
||||
isStartExpanded={!!toolCall.result?.error}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</ToolCallHeader>
|
||||
|
||||
{hasResult && (
|
||||
<ToolResultPanel $expanded={expanded}>
|
||||
{toolCall.result?.error ? (
|
||||
<ErrorContent>{toolCall.result.error}</ErrorContent>
|
||||
) : (
|
||||
<ResultContent>
|
||||
{toolCall.result?.output || "(无输出)"}
|
||||
</ResultContent>
|
||||
)}
|
||||
</ToolResultPanel>
|
||||
)}
|
||||
</ToolCallContainer>
|
||||
</ExpandablePanel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============ 工具调用列表 ============
|
||||
|
||||
interface ToolCallListProps {
|
||||
toolCalls: ToolCallState[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 工具调用列表组件
|
||||
*/
|
||||
export const ToolCallList: React.FC<ToolCallListProps> = ({ toolCalls }) => {
|
||||
if (!toolCalls || toolCalls.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{toolCalls.map((tc) => (
|
||||
<ToolCallDisplay key={tc.id} toolCall={tc} />
|
||||
))}
|
||||
@@ -285,4 +547,7 @@ export const ToolCallList: React.FC<ToolCallListProps> = ({ toolCalls }) => {
|
||||
);
|
||||
};
|
||||
|
||||
// 导出别名，用于交错显示模式
|
||||
export const ToolCallItem = ToolCallDisplay;
|
||||
|
||||
export default ToolCallDisplay;
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
type SessionInfo,
|
||||
type StreamEvent,
|
||||
} from "@/lib/api/agent";
|
||||
import { Message, MessageImage, PROVIDER_CONFIG } from "../types";
|
||||
import { Message, MessageImage, ContentPart, PROVIDER_CONFIG } from "../types";
|
||||
|
||||
/** 话题（会话）信息 */
|
||||
export interface Topic {
|
||||
@@ -234,6 +234,7 @@ export function useAgentChat() {
|
||||
timestamp: new Date(),
|
||||
isThinking: true,
|
||||
thinkingContent: thinkingText,
|
||||
contentParts: [], // 初始化交错内容列表
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, userMsg, assistantMsg]);
|
||||
@@ -243,12 +244,46 @@ export function useAgentChat() {
|
||||
let accumulatedContent = "";
|
||||
let unlisten: UnlistenFn | null = null;
|
||||
|
||||
/**
|
||||
* 辅助函数：更新 contentParts，支持交错显示
|
||||
* - text_delta: 追加到最后一个 text 类型，或创建新的 text 类型
|
||||
* - tool_start: 添加新的 tool_use 类型
|
||||
* - tool_end: 更新对应的 tool_use 状态
|
||||
*/
|
||||
const appendTextToParts = (
|
||||
parts: ContentPart[],
|
||||
text: string,
|
||||
): ContentPart[] => {
|
||||
const newParts = [...parts];
|
||||
const lastPart = newParts[newParts.length - 1];
|
||||
|
||||
if (lastPart && lastPart.type === "text") {
|
||||
// 追加到最后一个 text 类型
|
||||
newParts[newParts.length - 1] = {
|
||||
type: "text",
|
||||
text: lastPart.text + text,
|
||||
};
|
||||
} else {
|
||||
// 创建新的 text 类型
|
||||
newParts.push({ type: "text", text });
|
||||
}
|
||||
return newParts;
|
||||
};
|
||||
|
||||
try {
|
||||
// 2. 创建唯一事件名称（流式 API 不需要 session）
|
||||
// 2. 确保有一个活跃的 session（用于保持上下文）
|
||||
const activeSessionId = await _ensureSession();
|
||||
if (!activeSessionId) {
|
||||
throw new Error("无法创建或获取会话");
|
||||
}
|
||||
|
||||
// 3. 创建唯一事件名称
|
||||
const eventName = `agent_stream_${assistantMsgId}`;
|
||||
|
||||
// 4. 设置事件监听器（流式接收）
|
||||
console.log(`[AgentChat] 设置事件监听器: ${eventName}`);
|
||||
console.log(
|
||||
`[AgentChat] 设置事件监听器: ${eventName}, sessionId: ${activeSessionId}`,
|
||||
);
|
||||
unlisten = await listen<StreamEvent>(eventName, (event) => {
|
||||
console.log("[AgentChat] 收到事件:", eventName, event.payload);
|
||||
const data = parseStreamEvent(event.payload);
|
||||
@@ -260,7 +295,7 @@ export function useAgentChat() {
|
||||
|
||||
switch (data.type) {
|
||||
case "text_delta":
|
||||
// 累积文本并实时更新 UI
|
||||
// 累积文本并实时更新 UI（同时更新 content 和 contentParts）
|
||||
accumulatedContent += data.text;
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) =>
|
||||
@@ -269,6 +304,11 @@ export function useAgentChat() {
|
||||
...msg,
|
||||
content: accumulatedContent,
|
||||
thinkingContent: undefined,
|
||||
// 更新 contentParts，支持交错显示
|
||||
contentParts: appendTextToParts(
|
||||
msg.contentParts || [],
|
||||
data.text,
|
||||
),
|
||||
}
|
||||
: msg,
|
||||
),
|
||||
@@ -276,7 +316,27 @@ export function useAgentChat() {
|
||||
break;
|
||||
|
||||
case "done":
|
||||
// 完成，标记 isThinking 为 false
|
||||
// 完成一次 API 响应，但工具循环可能还在继续
|
||||
// 不要取消监听，继续等待更多事件
|
||||
console.log("[AgentChat] 收到 done 事件，工具循环可能还在继续...");
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) =>
|
||||
msg.id === assistantMsgId
|
||||
? {
|
||||
...msg,
|
||||
// 保持 isThinking 为 true，直到收到 final_done 或 error
|
||||
content: accumulatedContent || msg.content,
|
||||
}
|
||||
: msg,
|
||||
),
|
||||
);
|
||||
// 注意：不要在这里 setIsSending(false) 或 unlisten()
|
||||
// 工具循环会继续发送事件
|
||||
break;
|
||||
|
||||
case "final_done":
|
||||
// 整个对话完成（包括所有工具调用）
|
||||
console.log("[AgentChat] 收到 final_done 事件，对话完成");
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) =>
|
||||
msg.id === assistantMsgId
|
||||
@@ -316,58 +376,91 @@ export function useAgentChat() {
|
||||
}
|
||||
break;
|
||||
|
||||
case "tool_start":
|
||||
// 工具开始执行 - 添加到工具调用列表
|
||||
case "tool_start": {
|
||||
// 工具开始执行 - 添加到工具调用列表和 contentParts
|
||||
console.log(`[Tool Start] ${data.tool_name} (${data.tool_id})`);
|
||||
const newToolCall = {
|
||||
id: data.tool_id,
|
||||
name: data.tool_name,
|
||||
arguments: data.arguments,
|
||||
status: "running" as const,
|
||||
startTime: new Date(),
|
||||
};
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) =>
|
||||
msg.id === assistantMsgId
|
||||
? {
|
||||
...msg,
|
||||
toolCalls: [
|
||||
...(msg.toolCalls || []),
|
||||
{
|
||||
id: data.tool_id,
|
||||
name: data.tool_name,
|
||||
status: "running" as const,
|
||||
startTime: new Date(),
|
||||
},
|
||||
toolCalls: [...(msg.toolCalls || []), newToolCall],
|
||||
// 添加到 contentParts，支持交错显示
|
||||
contentParts: [
|
||||
...(msg.contentParts || []),
|
||||
{ type: "tool_use" as const, toolCall: newToolCall },
|
||||
],
|
||||
}
|
||||
: msg,
|
||||
),
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case "tool_end":
|
||||
// 工具执行完成 - 更新工具调用状态
|
||||
case "tool_end": {
|
||||
// 工具执行完成 - 更新工具调用状态和 contentParts
|
||||
console.log(`[Tool End] ${data.tool_id}`);
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) =>
|
||||
msg.id === assistantMsgId
|
||||
? {
|
||||
...msg,
|
||||
toolCalls: (msg.toolCalls || []).map((tc) =>
|
||||
tc.id === data.tool_id
|
||||
? {
|
||||
...tc,
|
||||
status: data.result.success
|
||||
? ("completed" as const)
|
||||
: ("failed" as const),
|
||||
result: data.result,
|
||||
endTime: new Date(),
|
||||
}
|
||||
: tc,
|
||||
),
|
||||
prev.map((msg) => {
|
||||
if (msg.id !== assistantMsgId) return msg;
|
||||
|
||||
// 更新 toolCalls
|
||||
const updatedToolCalls = (msg.toolCalls || []).map((tc) =>
|
||||
tc.id === data.tool_id
|
||||
? {
|
||||
...tc,
|
||||
status: data.result.success
|
||||
? ("completed" as const)
|
||||
: ("failed" as const),
|
||||
result: data.result,
|
||||
endTime: new Date(),
|
||||
}
|
||||
: tc,
|
||||
);
|
||||
|
||||
// 更新 contentParts 中对应的 tool_use
|
||||
const updatedContentParts = (msg.contentParts || []).map(
|
||||
(part) => {
|
||||
if (
|
||||
part.type === "tool_use" &&
|
||||
part.toolCall.id === data.tool_id
|
||||
) {
|
||||
return {
|
||||
...part,
|
||||
toolCall: {
|
||||
...part.toolCall,
|
||||
status: data.result.success
|
||||
? ("completed" as const)
|
||||
: ("failed" as const),
|
||||
result: data.result,
|
||||
endTime: new Date(),
|
||||
},
|
||||
};
|
||||
}
|
||||
: msg,
|
||||
),
|
||||
return part;
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
...msg,
|
||||
toolCalls: updatedToolCalls,
|
||||
contentParts: updatedContentParts,
|
||||
};
|
||||
}),
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 5. 发送流式请求
|
||||
// 5. 发送流式请求（传递 sessionId 以保持上下文）
|
||||
const imagesToSend =
|
||||
images.length > 0
|
||||
? images.map((img) => ({ data: img.data, media_type: img.mediaType }))
|
||||
@@ -376,6 +469,7 @@ export function useAgentChat() {
|
||||
await sendAgentMessageStream(
|
||||
content,
|
||||
eventName,
|
||||
activeSessionId, // 传递 sessionId 以保持上下文
|
||||
model || undefined,
|
||||
imagesToSend,
|
||||
);
|
||||
|
||||
@@ -5,19 +5,37 @@ export interface MessageImage {
|
||||
mediaType: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 内容片段类型（用于交错显示）
|
||||
*
|
||||
* 参考 goose 框架的 MessageContent 设计：
|
||||
* - text: 文本内容片段
|
||||
* - tool_use: 工具调用（包含状态和结果）
|
||||
*/
|
||||
export type ContentPart =
|
||||
| { type: "text"; text: string }
|
||||
| { type: "tool_use"; toolCall: ToolCallState };
|
||||
|
||||
export interface Message {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
/** 完整文本内容（向后兼容） */
|
||||
content: string;
|
||||
images?: MessageImage[];
|
||||
timestamp: Date;
|
||||
isThinking?: boolean;
|
||||
thinkingContent?: string;
|
||||
search_results?: any[]; // For potential future use
|
||||
/** 工具调用列表（assistant 消息可能包含） */
|
||||
/** 工具调用列表（assistant 消息可能包含） - 向后兼容 */
|
||||
toolCalls?: ToolCallState[];
|
||||
/** Token 使用量（响应完成后） */
|
||||
usage?: TokenUsage;
|
||||
/**
|
||||
* 交错内容列表（按事件到达顺序排列）
|
||||
* 如果存在且非空，StreamingRenderer 会按顺序渲染
|
||||
* 否则回退到 content + toolCalls 渲染方式
|
||||
*/
|
||||
contentParts?: ContentPart[];
|
||||
}
|
||||
|
||||
export interface ChatSession {
|
||||
|
||||
@@ -0,0 +1,404 @@
|
||||
/**
|
||||
* @file CredentialCard 属性测试
|
||||
* @description 测试 OAuth 凭证卡片信息完整性
|
||||
* @module components/provider-pool/CredentialCard.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 3: OAuth 凭证卡片信息完整性**
|
||||
* **Validates: Requirements 2.2**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import type {
|
||||
CredentialDisplay,
|
||||
PoolProviderType,
|
||||
CredentialSource,
|
||||
} from "@/lib/api/providerPool";
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 提取 OAuth 凭证卡片显示信息
|
||||
* 用于属性测试验证 Requirements 2.2
|
||||
*
|
||||
* @param credential OAuth 凭证数据
|
||||
* @returns 卡片显示信息
|
||||
*/
|
||||
export function extractOAuthCardDisplayInfo(credential: CredentialDisplay): {
|
||||
hasHealthStatus: boolean;
|
||||
hasUsageCount: boolean;
|
||||
hasActionButtons: boolean;
|
||||
healthStatus: "healthy" | "unhealthy" | "disabled";
|
||||
usageCount: number;
|
||||
errorCount: number;
|
||||
} {
|
||||
// 健康状态：根据 is_healthy 和 is_disabled 判断
|
||||
let healthStatus: "healthy" | "unhealthy" | "disabled";
|
||||
if (credential.is_disabled) {
|
||||
healthStatus = "disabled";
|
||||
} else if (credential.is_healthy) {
|
||||
healthStatus = "healthy";
|
||||
} else {
|
||||
healthStatus = "unhealthy";
|
||||
}
|
||||
|
||||
return {
|
||||
// 健康状态始终存在（通过 is_healthy 和 is_disabled 字段）
|
||||
hasHealthStatus:
|
||||
typeof credential.is_healthy === "boolean" &&
|
||||
typeof credential.is_disabled === "boolean",
|
||||
// 使用次数始终存在（通过 usage_count 字段）
|
||||
hasUsageCount: typeof credential.usage_count === "number",
|
||||
// 操作按钮始终存在（卡片组件固定渲染）
|
||||
hasActionButtons: true,
|
||||
healthStatus,
|
||||
usageCount: credential.usage_count,
|
||||
errorCount: credential.error_count,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证 OAuth 凭证卡片是否包含所有必要信息
|
||||
*
|
||||
* @param credential OAuth 凭证数据
|
||||
* @returns 是否包含所有必要信息
|
||||
*/
|
||||
export function isOAuthCardComplete(credential: CredentialDisplay): boolean {
|
||||
const info = extractOAuthCardDisplayInfo(credential);
|
||||
return info.hasHealthStatus && info.hasUsageCount && info.hasActionButtons;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 OAuth 凭证的操作按钮列表
|
||||
* 根据凭证类型返回应该显示的操作按钮
|
||||
*
|
||||
* @param credential OAuth 凭证数据
|
||||
* @returns 操作按钮列表
|
||||
*/
|
||||
export function getOAuthCardActionButtons(
|
||||
credential: CredentialDisplay,
|
||||
): string[] {
|
||||
const buttons: string[] = [
|
||||
"toggle", // 启用/禁用
|
||||
"edit", // 编辑
|
||||
"checkHealth", // 检测健康
|
||||
"reset", // 重置
|
||||
"delete", // 删除
|
||||
];
|
||||
|
||||
// OAuth 类型凭证额外显示刷新 Token 按钮
|
||||
if (credential.credential_type.includes("oauth")) {
|
||||
buttons.push("refreshToken");
|
||||
}
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成有效的 ISO 日期字符串
|
||||
*/
|
||||
const validDateArbitrary = fc
|
||||
.integer({
|
||||
min: new Date("2020-01-01").getTime(),
|
||||
max: new Date("2030-12-31").getTime(),
|
||||
})
|
||||
.map((timestamp) => new Date(timestamp).toISOString());
|
||||
|
||||
/**
|
||||
* OAuth Provider 类型
|
||||
*/
|
||||
const oauthProviderTypes: PoolProviderType[] = [
|
||||
"kiro",
|
||||
"gemini",
|
||||
"qwen",
|
||||
"antigravity",
|
||||
"codex",
|
||||
"claude_oauth",
|
||||
"iflow",
|
||||
];
|
||||
|
||||
/**
|
||||
* OAuth 凭证类型
|
||||
*/
|
||||
const oauthCredentialTypes = [
|
||||
"kiro_oauth",
|
||||
"gemini_oauth",
|
||||
"qwen_oauth",
|
||||
"antigravity_oauth",
|
||||
"codex_oauth",
|
||||
"claude_oauth",
|
||||
"iflow_oauth",
|
||||
];
|
||||
|
||||
/**
|
||||
* 凭证来源类型
|
||||
*/
|
||||
const credentialSourceArbitrary: fc.Arbitrary<CredentialSource> =
|
||||
fc.constantFrom("manual", "imported", "private");
|
||||
|
||||
/**
|
||||
* 生成随机 OAuth 凭证显示数据
|
||||
*/
|
||||
const oauthCredentialArbitrary: fc.Arbitrary<CredentialDisplay> = fc.record({
|
||||
uuid: fc.uuid(),
|
||||
provider_type: fc.constantFrom(...oauthProviderTypes),
|
||||
credential_type: fc.constantFrom(...oauthCredentialTypes),
|
||||
name: fc.option(fc.string({ minLength: 1, maxLength: 100 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
display_credential: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
is_healthy: fc.boolean(),
|
||||
is_disabled: fc.boolean(),
|
||||
check_health: fc.boolean(),
|
||||
check_model_name: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
not_supported_models: fc.array(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
maxLength: 5,
|
||||
}),
|
||||
usage_count: fc.nat({ max: 100000 }),
|
||||
error_count: fc.nat({ max: 10000 }),
|
||||
last_used: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
last_error_time: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
last_error_message: fc.option(fc.string({ minLength: 1, maxLength: 200 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
last_health_check_time: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
last_health_check_model: fc.option(
|
||||
fc.string({ minLength: 1, maxLength: 50 }),
|
||||
{ nil: undefined },
|
||||
),
|
||||
oauth_status: fc.option(
|
||||
fc.record({
|
||||
has_access_token: fc.boolean(),
|
||||
has_refresh_token: fc.boolean(),
|
||||
is_token_valid: fc.boolean(),
|
||||
expiry_info: fc.option(fc.string({ minLength: 1, maxLength: 100 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
creds_path: fc.string({ minLength: 1, maxLength: 200 }),
|
||||
}),
|
||||
{ nil: undefined },
|
||||
),
|
||||
token_cache_status: fc.option(
|
||||
fc.record({
|
||||
has_cached_token: fc.boolean(),
|
||||
is_valid: fc.boolean(),
|
||||
is_expiring_soon: fc.boolean(),
|
||||
expiry_time: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
last_refresh: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
refresh_error_count: fc.nat({ max: 100 }),
|
||||
last_refresh_error: fc.option(
|
||||
fc.string({ minLength: 1, maxLength: 200 }),
|
||||
{ nil: undefined },
|
||||
),
|
||||
}),
|
||||
{ nil: undefined },
|
||||
),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
source: credentialSourceArbitrary,
|
||||
base_url: fc.option(fc.webUrl(), { nil: undefined }),
|
||||
api_key: fc.option(fc.string({ minLength: 1, maxLength: 100 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
proxy_url: fc.option(fc.webUrl(), { nil: undefined }),
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Property 3: OAuth 凭证卡片信息完整性
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 3: OAuth 凭证卡片信息完整性", () => {
|
||||
/**
|
||||
* Property 3: OAuth 凭证卡片信息完整性
|
||||
*
|
||||
* *对于任意* OAuth 凭证，渲染后的卡片应包含健康状态、使用次数和操作按钮
|
||||
*
|
||||
* **Validates: Requirements 2.2**
|
||||
*/
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"每个 OAuth 凭证卡片应包含健康状态、使用次数和操作按钮",
|
||||
(credential: CredentialDisplay) => {
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
|
||||
// 验证健康状态存在
|
||||
expect(displayInfo.hasHealthStatus).toBe(true);
|
||||
|
||||
// 验证使用次数存在
|
||||
expect(displayInfo.hasUsageCount).toBe(true);
|
||||
|
||||
// 验证操作按钮存在
|
||||
expect(displayInfo.hasActionButtons).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"健康状态应为 healthy、unhealthy 或 disabled 之一",
|
||||
(credential: CredentialDisplay) => {
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
|
||||
expect(["healthy", "unhealthy", "disabled"]).toContain(
|
||||
displayInfo.healthStatus,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"使用次数应为非负整数",
|
||||
(credential: CredentialDisplay) => {
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
|
||||
expect(Number.isInteger(displayInfo.usageCount)).toBe(true);
|
||||
expect(displayInfo.usageCount).toBeGreaterThanOrEqual(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"错误次数应为非负整数",
|
||||
(credential: CredentialDisplay) => {
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
|
||||
expect(Number.isInteger(displayInfo.errorCount)).toBe(true);
|
||||
expect(displayInfo.errorCount).toBeGreaterThanOrEqual(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"OAuth 凭证应包含刷新 Token 操作按钮",
|
||||
(credential: CredentialDisplay) => {
|
||||
const buttons = getOAuthCardActionButtons(credential);
|
||||
|
||||
// OAuth 凭证应该有刷新 Token 按钮
|
||||
expect(buttons).toContain("refreshToken");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"所有凭证应包含基本操作按钮",
|
||||
(credential: CredentialDisplay) => {
|
||||
const buttons = getOAuthCardActionButtons(credential);
|
||||
|
||||
// 所有凭证都应该有这些基本按钮
|
||||
expect(buttons).toContain("toggle");
|
||||
expect(buttons).toContain("edit");
|
||||
expect(buttons).toContain("checkHealth");
|
||||
expect(buttons).toContain("reset");
|
||||
expect(buttons).toContain("delete");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"禁用状态应正确反映在健康状态中",
|
||||
(credential: CredentialDisplay) => {
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
|
||||
if (credential.is_disabled) {
|
||||
expect(displayInfo.healthStatus).toBe("disabled");
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"健康凭证（未禁用）应显示为 healthy",
|
||||
(credential: CredentialDisplay) => {
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
|
||||
if (!credential.is_disabled && credential.is_healthy) {
|
||||
expect(displayInfo.healthStatus).toBe("healthy");
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([oauthCredentialArbitrary], { numRuns: 100 })(
|
||||
"不健康凭证（未禁用）应显示为 unhealthy",
|
||||
(credential: CredentialDisplay) => {
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
|
||||
if (!credential.is_disabled && !credential.is_healthy) {
|
||||
expect(displayInfo.healthStatus).toBe("unhealthy");
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// 边界情况测试
|
||||
// ============================================================================
|
||||
|
||||
describe("OAuth 凭证卡片边界情况", () => {
|
||||
test("使用次数为 0 的凭证应正确显示", () => {
|
||||
const credential: CredentialDisplay = {
|
||||
uuid: "test-uuid",
|
||||
provider_type: "kiro",
|
||||
credential_type: "kiro_oauth",
|
||||
display_credential: "test@example.com",
|
||||
is_healthy: true,
|
||||
is_disabled: false,
|
||||
check_health: true,
|
||||
not_supported_models: [],
|
||||
usage_count: 0,
|
||||
error_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
source: "manual",
|
||||
};
|
||||
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
expect(displayInfo.usageCount).toBe(0);
|
||||
expect(displayInfo.hasUsageCount).toBe(true);
|
||||
});
|
||||
|
||||
test("高使用次数的凭证应正确显示", () => {
|
||||
const credential: CredentialDisplay = {
|
||||
uuid: "test-uuid",
|
||||
provider_type: "gemini",
|
||||
credential_type: "gemini_oauth",
|
||||
display_credential: "test@example.com",
|
||||
is_healthy: true,
|
||||
is_disabled: false,
|
||||
check_health: true,
|
||||
not_supported_models: [],
|
||||
usage_count: 999999,
|
||||
error_count: 100,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
source: "imported",
|
||||
};
|
||||
|
||||
const displayInfo = extractOAuthCardDisplayInfo(credential);
|
||||
expect(displayInfo.usageCount).toBe(999999);
|
||||
expect(displayInfo.errorCount).toBe(100);
|
||||
});
|
||||
|
||||
test("完整的 OAuth 凭证应通过完整性检查", () => {
|
||||
const credential: CredentialDisplay = {
|
||||
uuid: "test-uuid",
|
||||
provider_type: "qwen",
|
||||
credential_type: "qwen_oauth",
|
||||
name: "Test Credential",
|
||||
display_credential: "test@example.com",
|
||||
is_healthy: true,
|
||||
is_disabled: false,
|
||||
check_health: true,
|
||||
not_supported_models: [],
|
||||
usage_count: 100,
|
||||
error_count: 5,
|
||||
last_used: new Date().toISOString(),
|
||||
last_health_check_time: new Date().toISOString(),
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
source: "manual",
|
||||
};
|
||||
|
||||
expect(isOAuthCardComplete(credential)).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,19 @@
|
||||
import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
|
||||
/**
|
||||
* @file ProviderPoolPage 组件
|
||||
* @description 凭证池管理页面，支持 OAuth 凭证卡片布局和 API Key 左右分栏布局
|
||||
* @module components/provider-pool/ProviderPoolPage
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 1.1, 2.1, 2.2, 2.3**
|
||||
*/
|
||||
|
||||
import {
|
||||
useState,
|
||||
useEffect,
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import {
|
||||
RefreshCw,
|
||||
Plus,
|
||||
@@ -9,6 +24,7 @@ import {
|
||||
Download,
|
||||
} from "lucide-react";
|
||||
import { useProviderPool } from "@/hooks/useProviderPool";
|
||||
import { useApiKeyProvider } from "@/hooks/useApiKeyProvider";
|
||||
import { CredentialCard } from "./CredentialCard";
|
||||
import { CredentialCardContextMenu } from "./CredentialCardContextMenu";
|
||||
import { AddCredentialModal } from "./AddCredentialModal";
|
||||
@@ -19,6 +35,8 @@ import { getConfig, saveConfig, Config } from "@/hooks/useTauri";
|
||||
import { VertexAISection } from "./VertexAISection";
|
||||
import { AmpConfigSection } from "./AmpConfigSection";
|
||||
import { ProviderIcon } from "@/icons/providers";
|
||||
import { ApiKeyProviderSection, AddCustomProviderModal } from "./api-key";
|
||||
import type { AddCustomProviderRequest } from "@/lib/api/apiKeyProvider";
|
||||
import {
|
||||
getLocalKiroCredentialUuid,
|
||||
type PoolProviderType,
|
||||
@@ -41,13 +59,6 @@ const oauthProviderTypes: PoolProviderType[] = [
|
||||
"iflow",
|
||||
];
|
||||
|
||||
// API Key 类型凭证（直接填入 API Key）
|
||||
const apiKeyProviderTypes: PoolProviderType[] = [
|
||||
"openai",
|
||||
"claude",
|
||||
"gemini_api_key",
|
||||
];
|
||||
|
||||
// 配置类型 tab（非凭证池，存储在配置文件中）
|
||||
type ConfigTabType = "vertex" | "amp";
|
||||
|
||||
@@ -94,6 +105,10 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
||||
const { errors, showError, showSuccess, dismissError } = useErrorDisplay();
|
||||
|
||||
// 添加自定义 Provider 模态框状态
|
||||
const [addCustomProviderModalOpen, setAddCustomProviderModalOpen] =
|
||||
useState(false);
|
||||
|
||||
const {
|
||||
overview,
|
||||
loading,
|
||||
@@ -112,6 +127,10 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
migratePrivateConfig,
|
||||
} = useProviderPool();
|
||||
|
||||
// API Key Provider Hook
|
||||
const { addCustomProvider, refresh: refreshApiKeyProviders } =
|
||||
useApiKeyProvider();
|
||||
|
||||
const [migrating, setMigrating] = useState(false);
|
||||
|
||||
// Kiro 本地活跃凭证 UUID
|
||||
@@ -148,13 +167,13 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
setConfigSaving(false);
|
||||
};
|
||||
|
||||
// 切换到配置 tab 或 apikey 分类时加载配置（apikey 分类包含 gemini_api）
|
||||
// 切换到配置 tab 时加载配置
|
||||
useEffect(() => {
|
||||
if (isConfigTab(activeTab) || activeCategory === "apikey") {
|
||||
if (isConfigTab(activeTab)) {
|
||||
loadConfig();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [activeTab, activeCategory]);
|
||||
}, [activeTab]);
|
||||
|
||||
// 获取本地活跃的 Kiro 凭证 UUID
|
||||
const fetchLocalActiveUuid = async () => {
|
||||
@@ -173,10 +192,13 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
if (activeTab === "kiro") {
|
||||
fetchLocalActiveUuid();
|
||||
}
|
||||
}, [activeTab, overview]); // 当切换到 Kiro tab 或凭证池数据变化时重新检测
|
||||
}, [activeTab, overview]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
refresh,
|
||||
refresh: () => {
|
||||
refresh();
|
||||
refreshApiKeyProviders();
|
||||
},
|
||||
}));
|
||||
|
||||
const handleDeleteClick = (uuid: string) => {
|
||||
@@ -189,8 +211,6 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
setDeleteConfirm(null);
|
||||
setDeletingCredentials((prev) => new Set(prev).add(uuid));
|
||||
try {
|
||||
// Pass activeTab (provider_type) to enable YAML config sync
|
||||
// 只有凭证池 tab 才传递 provider_type
|
||||
const providerType = !isConfigTab(activeTab)
|
||||
? (activeTab as PoolProviderType)
|
||||
: undefined;
|
||||
@@ -333,10 +353,19 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
return pool?.credentials?.length || 0;
|
||||
};
|
||||
|
||||
// Current tab data (仅用于凭证池 tab)
|
||||
const currentPool = !isConfigTab(activeTab)
|
||||
? getProviderOverview(activeTab as PoolProviderType)
|
||||
: null;
|
||||
// 添加自定义 Provider 处理
|
||||
const handleAddCustomProvider = useCallback(
|
||||
async (request: AddCustomProviderRequest) => {
|
||||
await addCustomProvider(request);
|
||||
},
|
||||
[addCustomProvider],
|
||||
);
|
||||
|
||||
// Current tab data (仅用于 OAuth 凭证 tab)
|
||||
const currentPool =
|
||||
!isConfigTab(activeTab) && activeCategory === "oauth"
|
||||
? getProviderOverview(activeTab as PoolProviderType)
|
||||
: null;
|
||||
const currentStats = currentPool?.stats;
|
||||
const currentCredentials = currentPool?.credentials || [];
|
||||
|
||||
@@ -381,19 +410,20 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
}`}
|
||||
data-testid="oauth-category-tab"
|
||||
>
|
||||
OAuth 凭证
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveCategory("apikey");
|
||||
setActiveTab(apiKeyProviderTypes[0]);
|
||||
}}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-lg border transition-colors ${
|
||||
activeCategory === "apikey"
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
}`}
|
||||
data-testid="apikey-category-tab"
|
||||
>
|
||||
API Key
|
||||
</button>
|
||||
@@ -407,12 +437,13 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
}`}
|
||||
data-testid="config-category-tab"
|
||||
>
|
||||
其他配置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Provider Selection - 第二行：图标网格选择 */}
|
||||
{/* OAuth 凭证分类 - Provider 选择图标网格 */}
|
||||
{activeCategory === "oauth" && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{oauthProviderTypes.map((providerType) => {
|
||||
@@ -428,6 +459,7 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
? "border-primary bg-primary/10 text-primary shadow-sm"
|
||||
: "border-border bg-card hover:border-primary/50 hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
data-testid={`oauth-provider-${providerType}`}
|
||||
>
|
||||
<ProviderIcon providerType={providerType} size={20} />
|
||||
<span className="text-sm font-medium">
|
||||
@@ -440,6 +472,7 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted-foreground/20 text-muted-foreground group-hover:bg-primary/20 group-hover:text-primary"
|
||||
}`}
|
||||
data-testid={`oauth-credential-count-${providerType}`}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
@@ -449,42 +482,8 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{activeCategory === "apikey" && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{apiKeyProviderTypes.map((providerType) => {
|
||||
const count = getCredentialCount(providerType);
|
||||
const isActive = activeTab === providerType;
|
||||
return (
|
||||
<button
|
||||
key={providerType}
|
||||
onClick={() => setActiveTab(providerType)}
|
||||
title={providerLabels[providerType]}
|
||||
className={`group relative flex items-center justify-center gap-2 min-w-[120px] px-3 py-2 rounded-lg border transition-all ${
|
||||
isActive
|
||||
? "border-primary bg-primary/10 text-primary shadow-sm"
|
||||
: "border-border bg-card hover:border-primary/50 hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<ProviderIcon providerType={providerType} size={20} />
|
||||
<span className="text-sm font-medium">
|
||||
{providerLabels[providerType].split(" ")[0]}
|
||||
</span>
|
||||
{count > 0 && (
|
||||
<span
|
||||
className={`min-w-[1.25rem] h-5 flex items-center justify-center rounded-full text-xs font-medium ${
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted-foreground/20 text-muted-foreground group-hover:bg-primary/20 group-hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 其他配置分类 - 配置 Tab 选择 */}
|
||||
{activeCategory === "config" && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(["vertex", "amp"] as const).map((tabId) => {
|
||||
@@ -498,6 +497,7 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
? "border-primary bg-primary/10 text-primary shadow-sm"
|
||||
: "border-border bg-card hover:border-primary/50 hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
data-testid={`config-tab-${tabId}`}
|
||||
>
|
||||
{configTabLabels[tabId]}
|
||||
</button>
|
||||
@@ -506,9 +506,22 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API Key 分类 - 左右分栏布局 */}
|
||||
{activeCategory === "apikey" && (
|
||||
<div
|
||||
className="h-[calc(100vh-280px)] min-h-[400px]"
|
||||
data-testid="apikey-section"
|
||||
>
|
||||
<ApiKeyProviderSection
|
||||
onAddCustomProvider={() => setAddCustomProviderModalOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 配置 Tab 内容 */}
|
||||
{isConfigTab(activeTab) ? (
|
||||
configLoading ? (
|
||||
{activeCategory === "config" &&
|
||||
isConfigTab(activeTab) &&
|
||||
(configLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
@@ -564,157 +577,195 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
<div className="flex items-center justify-center py-12 text-muted-foreground">
|
||||
加载配置失败
|
||||
</div>
|
||||
)
|
||||
) : loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Stats and Actions Bar */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{currentStats && currentStats.total > 0 && (
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Heart className="h-4 w-4 text-green-500" />
|
||||
健康: {currentStats.healthy}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<HeartOff className="h-4 w-4 text-red-500" />
|
||||
不健康: {currentStats.unhealthy}
|
||||
</span>
|
||||
<span>总计: {currentStats.total}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{currentCredentials.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleCheckTypeHealth(activeTab as PoolProviderType)
|
||||
}
|
||||
disabled={checkingHealth === activeTab}
|
||||
className="flex items-center gap-1 rounded-lg border px-3 py-1.5 text-sm hover:bg-muted disabled:opacity-50"
|
||||
>
|
||||
<Activity
|
||||
className={`h-4 w-4 ${checkingHealth === activeTab ? "animate-pulse" : ""}`}
|
||||
/>
|
||||
检测全部
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleResetTypeHealth(activeTab as PoolProviderType)
|
||||
}
|
||||
className="flex items-center gap-1 rounded-lg border px-3 py-1.5 text-sm hover:bg-muted"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
重置状态
|
||||
</button>
|
||||
<button
|
||||
onClick={openAddModal}
|
||||
className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
添加凭证
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* OAuth 凭证内容 - 卡片布局 */}
|
||||
{activeCategory === "oauth" &&
|
||||
!isConfigTab(activeTab) &&
|
||||
(loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
{/* Credentials List */}
|
||||
{currentCredentials.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-muted-foreground">
|
||||
<p className="text-lg">
|
||||
暂无 {providerLabels[activeTab as PoolProviderType]} 凭证
|
||||
</p>
|
||||
<p className="mt-1 text-sm">点击上方"添加凭证"按钮添加</p>
|
||||
<button
|
||||
onClick={openAddModal}
|
||||
className="mt-4 flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
添加第一个凭证
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
{currentCredentials.map((credential) => {
|
||||
// 判断是否为 OAuth 类型（需要刷新 Token 功能）
|
||||
const isOAuthType =
|
||||
credential.credential_type.includes("oauth");
|
||||
// 判断是否为 Kiro 凭证（支持用量查询）
|
||||
const isKiroCredential = activeTab === "kiro";
|
||||
const isLocalActive =
|
||||
isKiroCredential && credential.uuid === localActiveUuid;
|
||||
|
||||
if (isKiroCredential) {
|
||||
console.log(
|
||||
`[ProviderPoolPage] Credential ${credential.uuid.substring(0, 8)}: isLocalActive=${isLocalActive}, localActiveUuid=${localActiveUuid?.substring(0, 8)}`,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CredentialCardContextMenu
|
||||
key={credential.uuid}
|
||||
credential={credential}
|
||||
onRefreshToken={
|
||||
isOAuthType
|
||||
? () => handleRefreshToken(credential.uuid)
|
||||
: undefined
|
||||
}
|
||||
onToggle={() => handleToggle(credential)}
|
||||
onDelete={() => handleDeleteClick(credential.uuid)}
|
||||
isOAuth={isOAuthType}
|
||||
) : (
|
||||
<div className="space-y-4" data-testid="oauth-credentials-section">
|
||||
{/* Stats and Actions Bar */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{currentStats && currentStats.total > 0 && (
|
||||
<div
|
||||
className="flex items-center gap-3 text-sm text-muted-foreground"
|
||||
data-testid="oauth-stats"
|
||||
>
|
||||
<div>
|
||||
<CredentialCard
|
||||
credential={credential}
|
||||
onToggle={() => handleToggle(credential)}
|
||||
onDelete={() => handleDeleteClick(credential.uuid)}
|
||||
onReset={() => handleReset(credential.uuid)}
|
||||
onCheckHealth={() =>
|
||||
handleCheckHealth(credential.uuid)
|
||||
}
|
||||
onRefreshToken={
|
||||
isOAuthType
|
||||
? () => handleRefreshToken(credential.uuid)
|
||||
: undefined
|
||||
}
|
||||
onEdit={() => handleEdit(credential)}
|
||||
deleting={deletingCredentials.has(credential.uuid)}
|
||||
checkingHealth={checkingHealth === credential.uuid}
|
||||
refreshingToken={refreshingToken === credential.uuid}
|
||||
isKiroCredential={isKiroCredential}
|
||||
isLocalActive={isLocalActive}
|
||||
onSwitchToLocal={
|
||||
isKiroCredential ? fetchLocalActiveUuid : undefined
|
||||
}
|
||||
<span
|
||||
className="flex items-center gap-1"
|
||||
data-testid="healthy-count"
|
||||
>
|
||||
<Heart className="h-4 w-4 text-green-500" />
|
||||
健康: {currentStats.healthy}
|
||||
</span>
|
||||
<span
|
||||
className="flex items-center gap-1"
|
||||
data-testid="unhealthy-count"
|
||||
>
|
||||
<HeartOff className="h-4 w-4 text-red-500" />
|
||||
不健康: {currentStats.unhealthy}
|
||||
</span>
|
||||
<span data-testid="total-count">
|
||||
总计: {currentStats.total}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{currentCredentials.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleCheckTypeHealth(activeTab as PoolProviderType)
|
||||
}
|
||||
disabled={checkingHealth === activeTab}
|
||||
className="flex items-center gap-1 rounded-lg border px-3 py-1.5 text-sm hover:bg-muted disabled:opacity-50"
|
||||
data-testid="check-all-health-btn"
|
||||
>
|
||||
<Activity
|
||||
className={`h-4 w-4 ${checkingHealth === activeTab ? "animate-pulse" : ""}`}
|
||||
/>
|
||||
</div>
|
||||
</CredentialCardContextMenu>
|
||||
);
|
||||
})}
|
||||
检测全部
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleResetTypeHealth(activeTab as PoolProviderType)
|
||||
}
|
||||
className="flex items-center gap-1 rounded-lg border px-3 py-1.5 text-sm hover:bg-muted"
|
||||
data-testid="reset-health-btn"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
重置状态
|
||||
</button>
|
||||
<button
|
||||
onClick={openAddModal}
|
||||
className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90"
|
||||
data-testid="add-credential-btn"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
添加凭证
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Credential Modal (仅凭证池 tab) */}
|
||||
{addModalOpen && !isConfigTab(activeTab) && (
|
||||
<AddCredentialModal
|
||||
providerType={activeTab as PoolProviderType}
|
||||
onClose={() => {
|
||||
setAddModalOpen(false);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setAddModalOpen(false);
|
||||
refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{/* Credentials List */}
|
||||
{currentCredentials.length === 0 ? (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-muted-foreground"
|
||||
data-testid="empty-credentials"
|
||||
>
|
||||
<p className="text-lg">
|
||||
暂无 {providerLabels[activeTab as PoolProviderType]} 凭证
|
||||
</p>
|
||||
<p className="mt-1 text-sm">点击上方"添加凭证"按钮添加</p>
|
||||
<button
|
||||
onClick={openAddModal}
|
||||
className="mt-4 flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
|
||||
data-testid="add-first-credential-btn"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
添加第一个凭证
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex flex-col gap-4"
|
||||
data-testid="credentials-list"
|
||||
>
|
||||
{currentCredentials.map((credential) => {
|
||||
// 判断是否为 OAuth 类型（需要刷新 Token 功能）
|
||||
const isOAuthType =
|
||||
credential.credential_type.includes("oauth");
|
||||
// 判断是否为 Kiro 凭证（支持用量查询）
|
||||
const isKiroCredential = activeTab === "kiro";
|
||||
const isLocalActive =
|
||||
isKiroCredential && credential.uuid === localActiveUuid;
|
||||
|
||||
if (isKiroCredential) {
|
||||
console.log(
|
||||
`[ProviderPoolPage] Credential ${credential.uuid.substring(0, 8)}: isLocalActive=${isLocalActive}, localActiveUuid=${localActiveUuid?.substring(0, 8)}`,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CredentialCardContextMenu
|
||||
key={credential.uuid}
|
||||
credential={credential}
|
||||
onRefreshToken={
|
||||
isOAuthType
|
||||
? () => handleRefreshToken(credential.uuid)
|
||||
: undefined
|
||||
}
|
||||
onToggle={() => handleToggle(credential)}
|
||||
onDelete={() => handleDeleteClick(credential.uuid)}
|
||||
isOAuth={isOAuthType}
|
||||
>
|
||||
<div data-testid={`credential-card-${credential.uuid}`}>
|
||||
<CredentialCard
|
||||
credential={credential}
|
||||
onToggle={() => handleToggle(credential)}
|
||||
onDelete={() => handleDeleteClick(credential.uuid)}
|
||||
onReset={() => handleReset(credential.uuid)}
|
||||
onCheckHealth={() =>
|
||||
handleCheckHealth(credential.uuid)
|
||||
}
|
||||
onRefreshToken={
|
||||
isOAuthType
|
||||
? () => handleRefreshToken(credential.uuid)
|
||||
: undefined
|
||||
}
|
||||
onEdit={() => handleEdit(credential)}
|
||||
deleting={deletingCredentials.has(credential.uuid)}
|
||||
checkingHealth={checkingHealth === credential.uuid}
|
||||
refreshingToken={
|
||||
refreshingToken === credential.uuid
|
||||
}
|
||||
isKiroCredential={isKiroCredential}
|
||||
isLocalActive={isLocalActive}
|
||||
onSwitchToLocal={
|
||||
isKiroCredential
|
||||
? fetchLocalActiveUuid
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CredentialCardContextMenu>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add Credential Modal (仅 OAuth 凭证 tab) */}
|
||||
{addModalOpen &&
|
||||
activeCategory === "oauth" &&
|
||||
!isConfigTab(activeTab) && (
|
||||
<AddCredentialModal
|
||||
providerType={activeTab as PoolProviderType}
|
||||
onClose={() => {
|
||||
setAddModalOpen(false);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setAddModalOpen(false);
|
||||
refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Add Custom Provider Modal (API Key 分类) */}
|
||||
<AddCustomProviderModal
|
||||
isOpen={addCustomProviderModalOpen}
|
||||
onClose={() => setAddCustomProviderModalOpen(false)}
|
||||
onAdd={handleAddCustomProvider}
|
||||
/>
|
||||
|
||||
{/* Edit Credential Modal */}
|
||||
<EditCredentialModal
|
||||
@@ -729,7 +780,6 @@ export const ProviderPoolPage = forwardRef<ProviderPoolPageRef>(
|
||||
errors={errors}
|
||||
onDismiss={dismissError}
|
||||
onRetry={(error) => {
|
||||
// 根据错误类型提供重试功能
|
||||
switch (error.type) {
|
||||
case "health_check":
|
||||
if (error.uuid) {
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
# Provider Pool 组件
|
||||
|
||||
本目录包含凭证池管理界面的所有组件。
|
||||
|
||||
## 组件列表
|
||||
|
||||
| 文件 | 描述 |
|
||||
|------|------|
|
||||
| `ProviderPoolPage.tsx` | 凭证池管理主页面，支持 OAuth 凭证卡片布局和 API Key 左右分栏布局 |
|
||||
| `CredentialCard.tsx` | OAuth 凭证卡片组件，显示健康状态、使用统计和操作按钮 |
|
||||
| `CredentialCardContextMenu.tsx` | 凭证卡片右键菜单组件 |
|
||||
| `AddCredentialModal.tsx` | 添加凭证模态框组件 |
|
||||
| `EditCredentialModal.tsx` | 编辑凭证模态框组件 |
|
||||
| `ErrorDisplay.tsx` | 错误显示组件 |
|
||||
| `UsageDisplay.tsx` | 用量显示组件 |
|
||||
| `VertexAISection.tsx` | Vertex AI 配置区域组件 |
|
||||
| `AmpConfigSection.tsx` | Amp CLI 配置区域组件 |
|
||||
| `GeminiApiKeySection.tsx` | Gemini API Key 配置区域组件 |
|
||||
| `CodexSection.tsx` | Codex 配置区域组件 |
|
||||
| `IFlowSection.tsx` | iFlow 配置区域组件 |
|
||||
| `index.ts` | 组件导出入口 |
|
||||
|
||||
## 子目录
|
||||
|
||||
| 目录 | 描述 |
|
||||
|------|------|
|
||||
| `api-key/` | API Key Provider 管理组件（左右分栏布局） |
|
||||
| `credential-forms/` | 各类凭证表单组件 |
|
||||
|
||||
## 测试文件
|
||||
|
||||
| 文件 | 描述 |
|
||||
|------|------|
|
||||
| `CredentialCard.test.ts` | Property 3 属性测试：OAuth 凭证卡片信息完整性 |
|
||||
|
||||
## 使用示例
|
||||
|
||||
```tsx
|
||||
import { ProviderPoolPage } from "@/components/provider-pool";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ProviderPoolPage />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 相关需求
|
||||
|
||||
- Requirements 1.1: API Key Provider 左右分栏布局
|
||||
- Requirements 2.1, 2.2, 2.3: OAuth 凭证保持卡片布局
|
||||
- Requirements 3.1-3.6: 完整支持 System Provider 类型
|
||||
|
||||
## 架构说明
|
||||
|
||||
ProviderPoolPage 支持三种分类：
|
||||
1. **OAuth 凭证** - 使用卡片式布局显示 OAuth 类型凭证
|
||||
2. **API Key** - 使用左右分栏布局（ApiKeyProviderSection）
|
||||
3. **其他配置** - Vertex AI 和 Amp CLI 配置
|
||||
@@ -0,0 +1,375 @@
|
||||
/**
|
||||
* @file AddCustomProviderModal 属性测试
|
||||
* @description 测试自定义 Provider 表单验证
|
||||
* @module components/provider-pool/api-key/AddCustomProviderModal.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 8: 自定义 Provider 表单验证**
|
||||
* **Validates: Requirements 6.2**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import {
|
||||
validateCustomProviderForm,
|
||||
isFormValid,
|
||||
hasRequiredFields,
|
||||
} from "./AddCustomProviderModal";
|
||||
import type { ProviderType } from "@/lib/types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/** 所有有效的 Provider 类型 */
|
||||
const VALID_PROVIDER_TYPES: ProviderType[] = [
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
];
|
||||
|
||||
/**
|
||||
* 生成有效的 Provider 类型
|
||||
*/
|
||||
const providerTypeArbitrary: fc.Arbitrary<ProviderType> = fc.constantFrom(
|
||||
...VALID_PROVIDER_TYPES,
|
||||
);
|
||||
|
||||
/**
|
||||
* 生成有效的 URL
|
||||
*/
|
||||
const validUrlArbitrary: fc.Arbitrary<string> = fc.webUrl();
|
||||
|
||||
/**
|
||||
* 生成非空字符串（用于名称和 API Key）
|
||||
*/
|
||||
const nonEmptyStringArbitrary: fc.Arbitrary<string> = fc
|
||||
.string({
|
||||
minLength: 1,
|
||||
maxLength: 50,
|
||||
})
|
||||
.filter((s) => s.trim().length > 0);
|
||||
|
||||
/**
|
||||
* 生成空白字符串（用于测试验证）
|
||||
*/
|
||||
const whitespaceStringArbitrary: fc.Arbitrary<string> = fc.constantFrom(
|
||||
"",
|
||||
" ",
|
||||
" ",
|
||||
"\t",
|
||||
"\n",
|
||||
" \t\n ",
|
||||
);
|
||||
|
||||
/**
|
||||
* 生成无效的 URL（无法被 URL 构造函数解析的字符串）
|
||||
*/
|
||||
const invalidUrlArbitrary: fc.Arbitrary<string> = fc.oneof(
|
||||
fc.constant("not-a-url"),
|
||||
fc.constant("just-text"),
|
||||
fc.constant("://missing-protocol"),
|
||||
fc.constant("http//missing-colon"),
|
||||
fc.constant("missing-protocol.com"),
|
||||
fc.string({ minLength: 1, maxLength: 20 }).filter((s) => {
|
||||
try {
|
||||
new URL(s);
|
||||
return false;
|
||||
} catch {
|
||||
return true;
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
/**
|
||||
* 生成完整的有效表单状态
|
||||
*/
|
||||
const validFormStateArbitrary = fc.record({
|
||||
name: nonEmptyStringArbitrary,
|
||||
type: providerTypeArbitrary,
|
||||
apiHost: validUrlArbitrary,
|
||||
apiKey: nonEmptyStringArbitrary,
|
||||
apiVersion: fc.string({ maxLength: 30 }),
|
||||
project: fc.string({ maxLength: 50 }),
|
||||
location: fc.string({ maxLength: 50 }),
|
||||
region: fc.string({ maxLength: 50 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成缺少名称的表单状态
|
||||
*/
|
||||
const formStateMissingNameArbitrary = fc.record({
|
||||
name: whitespaceStringArbitrary,
|
||||
type: providerTypeArbitrary,
|
||||
apiHost: validUrlArbitrary,
|
||||
apiKey: nonEmptyStringArbitrary,
|
||||
apiVersion: fc.string({ maxLength: 30 }),
|
||||
project: fc.string({ maxLength: 50 }),
|
||||
location: fc.string({ maxLength: 50 }),
|
||||
region: fc.string({ maxLength: 50 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成缺少 API Host 的表单状态
|
||||
*/
|
||||
const formStateMissingApiHostArbitrary = fc.record({
|
||||
name: nonEmptyStringArbitrary,
|
||||
type: providerTypeArbitrary,
|
||||
apiHost: whitespaceStringArbitrary,
|
||||
apiKey: nonEmptyStringArbitrary,
|
||||
apiVersion: fc.string({ maxLength: 30 }),
|
||||
project: fc.string({ maxLength: 50 }),
|
||||
location: fc.string({ maxLength: 50 }),
|
||||
region: fc.string({ maxLength: 50 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成缺少 API Key 的表单状态
|
||||
*/
|
||||
const formStateMissingApiKeyArbitrary = fc.record({
|
||||
name: nonEmptyStringArbitrary,
|
||||
type: providerTypeArbitrary,
|
||||
apiHost: validUrlArbitrary,
|
||||
apiKey: whitespaceStringArbitrary,
|
||||
apiVersion: fc.string({ maxLength: 30 }),
|
||||
project: fc.string({ maxLength: 50 }),
|
||||
location: fc.string({ maxLength: 50 }),
|
||||
region: fc.string({ maxLength: 50 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成无效 API Host 的表单状态
|
||||
*/
|
||||
const formStateInvalidApiHostArbitrary = fc.record({
|
||||
name: nonEmptyStringArbitrary,
|
||||
type: providerTypeArbitrary,
|
||||
apiHost: invalidUrlArbitrary,
|
||||
apiKey: nonEmptyStringArbitrary,
|
||||
apiVersion: fc.string({ maxLength: 30 }),
|
||||
project: fc.string({ maxLength: 50 }),
|
||||
location: fc.string({ maxLength: 50 }),
|
||||
region: fc.string({ maxLength: 50 }),
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Property 8: 自定义 Provider 表单验证
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 8: 自定义 Provider 表单验证", () => {
|
||||
/**
|
||||
* Property 8: 自定义 Provider 表单验证
|
||||
*
|
||||
* *对于任意* 自定义 Provider 创建请求，如果缺少必填字段（名称、API Key、API Host），
|
||||
* 系统应拒绝创建
|
||||
*
|
||||
* **Validates: Requirements 6.2**
|
||||
*/
|
||||
|
||||
describe("有效表单验证", () => {
|
||||
test.prop([validFormStateArbitrary], { numRuns: 100 })(
|
||||
"有效的表单状态应通过验证",
|
||||
(formState) => {
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
|
||||
// 有效表单不应有名称、API Host、API Key 错误
|
||||
expect(errors.name).toBeUndefined();
|
||||
expect(errors.apiHost).toBeUndefined();
|
||||
expect(errors.apiKey).toBeUndefined();
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([validFormStateArbitrary], { numRuns: 100 })(
|
||||
"有效的表单状态 isFormValid 应返回 true",
|
||||
(formState) => {
|
||||
expect(isFormValid(formState)).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([validFormStateArbitrary], { numRuns: 100 })(
|
||||
"有效的表单状态 hasRequiredFields 应返回 true",
|
||||
(formState) => {
|
||||
expect(hasRequiredFields(formState)).toBe(true);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("缺少名称验证", () => {
|
||||
test.prop([formStateMissingNameArbitrary], { numRuns: 100 })(
|
||||
"缺少名称的表单应返回名称错误",
|
||||
(formState) => {
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
|
||||
expect(errors.name).toBeDefined();
|
||||
expect(typeof errors.name).toBe("string");
|
||||
expect(errors.name!.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([formStateMissingNameArbitrary], { numRuns: 100 })(
|
||||
"缺少名称的表单 isFormValid 应返回 false",
|
||||
(formState) => {
|
||||
expect(isFormValid(formState)).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([formStateMissingNameArbitrary], { numRuns: 100 })(
|
||||
"缺少名称的表单 hasRequiredFields 应返回 false",
|
||||
(formState) => {
|
||||
expect(hasRequiredFields(formState)).toBe(false);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("缺少 API Host 验证", () => {
|
||||
test.prop([formStateMissingApiHostArbitrary], { numRuns: 100 })(
|
||||
"缺少 API Host 的表单应返回 API Host 错误",
|
||||
(formState) => {
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
|
||||
expect(errors.apiHost).toBeDefined();
|
||||
expect(typeof errors.apiHost).toBe("string");
|
||||
expect(errors.apiHost!.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([formStateMissingApiHostArbitrary], { numRuns: 100 })(
|
||||
"缺少 API Host 的表单 isFormValid 应返回 false",
|
||||
(formState) => {
|
||||
expect(isFormValid(formState)).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([formStateMissingApiHostArbitrary], { numRuns: 100 })(
|
||||
"缺少 API Host 的表单 hasRequiredFields 应返回 false",
|
||||
(formState) => {
|
||||
expect(hasRequiredFields(formState)).toBe(false);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("缺少 API Key 验证", () => {
|
||||
test.prop([formStateMissingApiKeyArbitrary], { numRuns: 100 })(
|
||||
"缺少 API Key 的表单应返回 API Key 错误",
|
||||
(formState) => {
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
|
||||
expect(errors.apiKey).toBeDefined();
|
||||
expect(typeof errors.apiKey).toBe("string");
|
||||
expect(errors.apiKey!.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([formStateMissingApiKeyArbitrary], { numRuns: 100 })(
|
||||
"缺少 API Key 的表单 isFormValid 应返回 false",
|
||||
(formState) => {
|
||||
expect(isFormValid(formState)).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([formStateMissingApiKeyArbitrary], { numRuns: 100 })(
|
||||
"缺少 API Key 的表单 hasRequiredFields 应返回 false",
|
||||
(formState) => {
|
||||
expect(hasRequiredFields(formState)).toBe(false);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("无效 API Host 验证", () => {
|
||||
test.prop([formStateInvalidApiHostArbitrary], { numRuns: 100 })(
|
||||
"无效 API Host 的表单应返回 API Host 错误",
|
||||
(formState) => {
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
|
||||
expect(errors.apiHost).toBeDefined();
|
||||
expect(typeof errors.apiHost).toBe("string");
|
||||
expect(errors.apiHost!.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([formStateInvalidApiHostArbitrary], { numRuns: 100 })(
|
||||
"无效 API Host 的表单 isFormValid 应返回 false",
|
||||
(formState) => {
|
||||
expect(isFormValid(formState)).toBe(false);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("名称长度验证", () => {
|
||||
test("名称超过 50 个字符应返回错误", () => {
|
||||
const formState = {
|
||||
name: "a".repeat(51),
|
||||
type: "openai" as ProviderType,
|
||||
apiHost: "https://api.example.com",
|
||||
apiKey: "sk-test-key",
|
||||
apiVersion: "",
|
||||
project: "",
|
||||
location: "",
|
||||
region: "",
|
||||
};
|
||||
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
expect(errors.name).toBeDefined();
|
||||
expect(errors.name).toContain("50");
|
||||
});
|
||||
|
||||
test("名称正好 50 个字符应通过验证", () => {
|
||||
const formState = {
|
||||
name: "a".repeat(50),
|
||||
type: "openai" as ProviderType,
|
||||
apiHost: "https://api.example.com",
|
||||
apiKey: "sk-test-key",
|
||||
apiVersion: "",
|
||||
project: "",
|
||||
location: "",
|
||||
region: "",
|
||||
};
|
||||
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
expect(errors.name).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("多个缺失字段验证", () => {
|
||||
test("同时缺少多个必填字段应返回所有错误", () => {
|
||||
const formState = {
|
||||
name: "",
|
||||
type: "openai" as ProviderType,
|
||||
apiHost: "",
|
||||
apiKey: "",
|
||||
apiVersion: "",
|
||||
project: "",
|
||||
location: "",
|
||||
region: "",
|
||||
};
|
||||
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
|
||||
expect(errors.name).toBeDefined();
|
||||
expect(errors.apiHost).toBeDefined();
|
||||
expect(errors.apiKey).toBeDefined();
|
||||
});
|
||||
|
||||
test("同时缺少多个必填字段 isFormValid 应返回 false", () => {
|
||||
const formState = {
|
||||
name: "",
|
||||
type: "openai" as ProviderType,
|
||||
apiHost: "",
|
||||
apiKey: "",
|
||||
apiVersion: "",
|
||||
project: "",
|
||||
location: "",
|
||||
region: "",
|
||||
};
|
||||
|
||||
expect(isFormValid(formState)).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,501 @@
|
||||
/**
|
||||
* @file AddCustomProviderModal 组件
|
||||
* @description 添加自定义 Provider 的模态框组件
|
||||
* @module components/provider-pool/api-key/AddCustomProviderModal
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 6.1, 6.2**
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback, useMemo } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from "@/components/Modal";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import type { ProviderType } from "@/lib/types/provider";
|
||||
import type { AddCustomProviderRequest } from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 常量
|
||||
// ============================================================================
|
||||
|
||||
/** 支持的 Provider 类型列表 */
|
||||
const PROVIDER_TYPES: { value: ProviderType; label: string }[] = [
|
||||
{ value: "openai", label: "OpenAI 兼容" },
|
||||
{ value: "openai-response", label: "OpenAI Responses API" },
|
||||
{ value: "anthropic", label: "Anthropic" },
|
||||
{ value: "gemini", label: "Gemini" },
|
||||
{ value: "azure-openai", label: "Azure OpenAI" },
|
||||
{ value: "vertexai", label: "VertexAI" },
|
||||
{ value: "aws-bedrock", label: "AWS Bedrock" },
|
||||
{ value: "ollama", label: "Ollama" },
|
||||
{ value: "new-api", label: "New API" },
|
||||
{ value: "gateway", label: "Vercel AI Gateway" },
|
||||
];
|
||||
|
||||
/** Provider 类型对应的额外字段 */
|
||||
const PROVIDER_TYPE_EXTRA_FIELDS: Record<ProviderType, string[]> = {
|
||||
openai: [],
|
||||
"openai-response": [],
|
||||
anthropic: [],
|
||||
gemini: [],
|
||||
"azure-openai": ["apiVersion"],
|
||||
vertexai: ["project", "location"],
|
||||
"aws-bedrock": ["region"],
|
||||
ollama: [],
|
||||
"new-api": [],
|
||||
gateway: [],
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface AddCustomProviderModalProps {
|
||||
/** 是否打开 */
|
||||
isOpen: boolean;
|
||||
/** 关闭回调 */
|
||||
onClose: () => void;
|
||||
/** 添加成功回调 */
|
||||
onAdd: (request: AddCustomProviderRequest) => Promise<void>;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** 表单状态 */
|
||||
interface FormState {
|
||||
name: string;
|
||||
type: ProviderType;
|
||||
apiHost: string;
|
||||
apiKey: string;
|
||||
apiVersion: string;
|
||||
project: string;
|
||||
location: string;
|
||||
region: string;
|
||||
}
|
||||
|
||||
/** 表单错误 */
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
apiHost?: string;
|
||||
apiKey?: string;
|
||||
apiVersion?: string;
|
||||
project?: string;
|
||||
location?: string;
|
||||
region?: string;
|
||||
}
|
||||
|
||||
/** 初始表单状态 */
|
||||
const INITIAL_FORM_STATE: FormState = {
|
||||
name: "",
|
||||
type: "openai",
|
||||
apiHost: "",
|
||||
apiKey: "",
|
||||
apiVersion: "",
|
||||
project: "",
|
||||
location: "",
|
||||
region: "",
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 验证函数（导出用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 验证自定义 Provider 表单
|
||||
* 用于属性测试验证 Requirements 6.2
|
||||
*
|
||||
* @param formState 表单状态
|
||||
* @returns 验证错误对象，如果没有错误则为空对象
|
||||
*/
|
||||
export function validateCustomProviderForm(formState: FormState): FormErrors {
|
||||
const errors: FormErrors = {};
|
||||
|
||||
// 验证名称（必填）
|
||||
if (!formState.name.trim()) {
|
||||
errors.name = "Provider 名称不能为空";
|
||||
} else if (formState.name.trim().length > 50) {
|
||||
errors.name = "Provider 名称不能超过 50 个字符";
|
||||
}
|
||||
|
||||
// 验证 API Host（必填）
|
||||
if (!formState.apiHost.trim()) {
|
||||
errors.apiHost = "API Host 不能为空";
|
||||
} else {
|
||||
// 验证 URL 格式
|
||||
try {
|
||||
new URL(formState.apiHost.trim());
|
||||
} catch {
|
||||
errors.apiHost = "请输入有效的 URL";
|
||||
}
|
||||
}
|
||||
|
||||
// 验证 API Key（必填）
|
||||
if (!formState.apiKey.trim()) {
|
||||
errors.apiKey = "API Key 不能为空";
|
||||
}
|
||||
|
||||
// 额外字段验证（可选字段，不强制验证格式）
|
||||
// Azure OpenAI 的 API Version、VertexAI 的 Project/Location、AWS Bedrock 的 Region
|
||||
// 都是可选字段，用户可以自由填写
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查表单是否有效
|
||||
*/
|
||||
export function isFormValid(formState: FormState): boolean {
|
||||
const errors = validateCustomProviderForm(formState);
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查必填字段是否已填写
|
||||
*/
|
||||
export function hasRequiredFields(formState: FormState): boolean {
|
||||
return (
|
||||
formState.name.trim() !== "" &&
|
||||
formState.apiHost.trim() !== "" &&
|
||||
formState.apiKey.trim() !== ""
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 添加自定义 Provider 模态框组件
|
||||
*
|
||||
* 允许用户添加自定义 OpenAI 兼容 Provider，包含：
|
||||
* - Provider 名称（必填）
|
||||
* - API Key（必填）
|
||||
* - API Host（必填）
|
||||
* - Provider Type（默认 openai）
|
||||
* - 根据类型显示额外字段
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <AddCustomProviderModal
|
||||
* isOpen={showModal}
|
||||
* onClose={() => setShowModal(false)}
|
||||
* onAdd={handleAddProvider}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const AddCustomProviderModal: React.FC<AddCustomProviderModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onAdd,
|
||||
className,
|
||||
}) => {
|
||||
// 表单状态
|
||||
const [formState, setFormState] = useState<FormState>(INITIAL_FORM_STATE);
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
|
||||
// 获取当前类型需要的额外字段
|
||||
const extraFields = useMemo(
|
||||
() => PROVIDER_TYPE_EXTRA_FIELDS[formState.type] || [],
|
||||
[formState.type],
|
||||
);
|
||||
|
||||
// 重置表单
|
||||
const resetForm = useCallback(() => {
|
||||
setFormState(INITIAL_FORM_STATE);
|
||||
setErrors({});
|
||||
setSubmitError(null);
|
||||
}, []);
|
||||
|
||||
// 关闭模态框
|
||||
const handleClose = useCallback(() => {
|
||||
resetForm();
|
||||
onClose();
|
||||
}, [resetForm, onClose]);
|
||||
|
||||
// 更新字段
|
||||
const updateField = useCallback(
|
||||
<K extends keyof FormState>(field: K, value: FormState[K]) => {
|
||||
setFormState((prev) => ({ ...prev, [field]: value }));
|
||||
// 清除该字段的错误
|
||||
if (errors[field as keyof FormErrors]) {
|
||||
setErrors((prev) => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors[field as keyof FormErrors];
|
||||
return newErrors;
|
||||
});
|
||||
}
|
||||
},
|
||||
[errors],
|
||||
);
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = useCallback(async () => {
|
||||
// 验证表单
|
||||
const validationErrors = validateCustomProviderForm(formState);
|
||||
if (Object.keys(validationErrors).length > 0) {
|
||||
setErrors(validationErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setSubmitError(null);
|
||||
|
||||
try {
|
||||
const request: AddCustomProviderRequest = {
|
||||
name: formState.name.trim(),
|
||||
type: formState.type,
|
||||
api_host: formState.apiHost.trim(),
|
||||
};
|
||||
|
||||
// 添加额外字段
|
||||
if (formState.apiVersion.trim()) {
|
||||
request.api_version = formState.apiVersion.trim();
|
||||
}
|
||||
if (formState.project.trim()) {
|
||||
request.project = formState.project.trim();
|
||||
}
|
||||
if (formState.location.trim()) {
|
||||
request.location = formState.location.trim();
|
||||
}
|
||||
if (formState.region.trim()) {
|
||||
request.region = formState.region.trim();
|
||||
}
|
||||
|
||||
await onAdd(request);
|
||||
handleClose();
|
||||
} catch (e) {
|
||||
setSubmitError(e instanceof Error ? e.message : "添加失败");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [formState, onAdd, handleClose]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
maxWidth="max-w-md"
|
||||
className={className}
|
||||
>
|
||||
<ModalHeader>添加自定义 Provider</ModalHeader>
|
||||
|
||||
<ModalBody className="space-y-4">
|
||||
{/* Provider 名称 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="provider-name" className="text-sm font-medium">
|
||||
Provider 名称 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="provider-name"
|
||||
type="text"
|
||||
value={formState.name}
|
||||
onChange={(e) => updateField("name", e.target.value)}
|
||||
placeholder="例如：My Custom API"
|
||||
disabled={isSubmitting}
|
||||
className={cn(errors.name && "border-red-500")}
|
||||
data-testid="provider-name-input"
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-xs text-red-500" data-testid="name-error">
|
||||
{errors.name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Provider 类型 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="provider-type" className="text-sm font-medium">
|
||||
Provider 类型
|
||||
</Label>
|
||||
<Select
|
||||
value={formState.type}
|
||||
onValueChange={(value) =>
|
||||
updateField("type", value as ProviderType)
|
||||
}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<SelectTrigger data-testid="provider-type-select">
|
||||
<SelectValue placeholder="选择类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PROVIDER_TYPES.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
大多数第三方 API 服务使用 OpenAI 兼容格式
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* API Host */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="api-host" className="text-sm font-medium">
|
||||
API Host <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="api-host"
|
||||
type="text"
|
||||
value={formState.apiHost}
|
||||
onChange={(e) => updateField("apiHost", e.target.value)}
|
||||
placeholder="https://api.example.com"
|
||||
disabled={isSubmitting}
|
||||
className={cn(errors.apiHost && "border-red-500")}
|
||||
data-testid="api-host-input"
|
||||
/>
|
||||
{errors.apiHost && (
|
||||
<p className="text-xs text-red-500" data-testid="api-host-error">
|
||||
{errors.apiHost}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* API Key */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="api-key" className="text-sm font-medium">
|
||||
API Key <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="api-key"
|
||||
type="password"
|
||||
value={formState.apiKey}
|
||||
onChange={(e) => updateField("apiKey", e.target.value)}
|
||||
placeholder="sk-..."
|
||||
disabled={isSubmitting}
|
||||
className={cn(errors.apiKey && "border-red-500")}
|
||||
data-testid="api-key-input"
|
||||
/>
|
||||
{errors.apiKey && (
|
||||
<p className="text-xs text-red-500" data-testid="api-key-error">
|
||||
{errors.apiKey}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Azure OpenAI: API Version */}
|
||||
{extraFields.includes("apiVersion") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="api-version" className="text-sm font-medium">
|
||||
API Version
|
||||
</Label>
|
||||
<Input
|
||||
id="api-version"
|
||||
type="text"
|
||||
value={formState.apiVersion}
|
||||
onChange={(e) => updateField("apiVersion", e.target.value)}
|
||||
placeholder="2024-02-15-preview"
|
||||
disabled={isSubmitting}
|
||||
className={cn(errors.apiVersion && "border-red-500")}
|
||||
data-testid="api-version-input"
|
||||
/>
|
||||
{errors.apiVersion && (
|
||||
<p
|
||||
className="text-xs text-red-500"
|
||||
data-testid="api-version-error"
|
||||
>
|
||||
{errors.apiVersion}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* VertexAI: Project */}
|
||||
{extraFields.includes("project") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="project" className="text-sm font-medium">
|
||||
Project ID
|
||||
</Label>
|
||||
<Input
|
||||
id="project"
|
||||
type="text"
|
||||
value={formState.project}
|
||||
onChange={(e) => updateField("project", e.target.value)}
|
||||
placeholder="your-project-id"
|
||||
disabled={isSubmitting}
|
||||
data-testid="project-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* VertexAI: Location */}
|
||||
{extraFields.includes("location") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="location" className="text-sm font-medium">
|
||||
Location
|
||||
</Label>
|
||||
<Input
|
||||
id="location"
|
||||
type="text"
|
||||
value={formState.location}
|
||||
onChange={(e) => updateField("location", e.target.value)}
|
||||
placeholder="us-central1"
|
||||
disabled={isSubmitting}
|
||||
data-testid="location-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AWS Bedrock: Region */}
|
||||
{extraFields.includes("region") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="region" className="text-sm font-medium">
|
||||
Region
|
||||
</Label>
|
||||
<Input
|
||||
id="region"
|
||||
type="text"
|
||||
value={formState.region}
|
||||
onChange={(e) => updateField("region", e.target.value)}
|
||||
placeholder="us-east-1"
|
||||
disabled={isSubmitting}
|
||||
data-testid="region-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 提交错误 */}
|
||||
{submitError && (
|
||||
<div
|
||||
className="p-3 rounded-lg bg-red-50 text-red-600 text-sm"
|
||||
data-testid="submit-error"
|
||||
>
|
||||
{submitError}
|
||||
</div>
|
||||
)}
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={isSubmitting}
|
||||
data-testid="cancel-button"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting || !hasRequiredFields(formState)}
|
||||
data-testid="submit-button"
|
||||
>
|
||||
{isSubmitting ? "添加中..." : "添加"}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCustomProviderModal;
|
||||
@@ -0,0 +1,287 @@
|
||||
/**
|
||||
* @file ApiKeyItem 组件
|
||||
* @description API Key 列表项组件，显示 API Key（掩码）、别名、使用统计，支持启用/禁用、删除操作
|
||||
* @module components/provider-pool/api-key/ApiKeyItem
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 7.5**
|
||||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import type { ApiKeyDisplay } from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 图标组件
|
||||
// ============================================================================
|
||||
|
||||
const TrashIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.519.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const KeyIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8 7a5 5 0 113.61 4.804l-1.903 1.903A1 1 0 019 14H8v1a1 1 0 01-1 1H6v1a1 1 0 01-1 1H3a1 1 0 01-1-1v-2a1 1 0 01.293-.707L8.196 8.39A5.002 5.002 0 018 7zm5-3a.75.75 0 000 1.5A1.5 1.5 0 0114.5 7 .75.75 0 0016 7a3 3 0 00-3-3z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ApiKeyItemProps {
|
||||
/** API Key 数据 */
|
||||
apiKey: ApiKeyDisplay;
|
||||
/** 切换启用状态回调 */
|
||||
onToggle?: (keyId: string, enabled: boolean) => void;
|
||||
/** 删除回调 */
|
||||
onDelete?: (keyId: string) => void;
|
||||
/** 是否正在加载 */
|
||||
loading?: boolean;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* API Key 列表项组件
|
||||
*
|
||||
* 显示单个 API Key 的信息，包括：
|
||||
* - 掩码后的 API Key
|
||||
* - 别名（如果有）
|
||||
* - 使用统计（使用次数、错误次数）
|
||||
* - 启用/禁用开关
|
||||
* - 删除按钮
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ApiKeyItem
|
||||
* apiKey={apiKey}
|
||||
* onToggle={(id, enabled) => toggleApiKey(id, enabled)}
|
||||
* onDelete={(id) => deleteApiKey(id)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ApiKeyItem: React.FC<ApiKeyItemProps> = ({
|
||||
apiKey,
|
||||
onToggle,
|
||||
onDelete,
|
||||
loading = false,
|
||||
className,
|
||||
}) => {
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const handleToggle = (checked: boolean) => {
|
||||
if (!loading) {
|
||||
onToggle?.(apiKey.id, checked);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!loading && !isDeleting) {
|
||||
setIsDeleting(true);
|
||||
onDelete?.(apiKey.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化最后使用时间
|
||||
const formatLastUsed = (dateStr?: string): string => {
|
||||
if (!dateStr) return "从未使用";
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return "刚刚";
|
||||
if (diffMins < 60) return `${diffMins} 分钟前`;
|
||||
if (diffHours < 24) return `${diffHours} 小时前`;
|
||||
if (diffDays < 30) return `${diffDays} 天前`;
|
||||
return date.toLocaleDateString("zh-CN");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2.5 rounded-lg",
|
||||
"bg-muted/30 hover:bg-muted/50 transition-colors",
|
||||
!apiKey.enabled && "opacity-60",
|
||||
className,
|
||||
)}
|
||||
data-testid="api-key-item"
|
||||
data-key-id={apiKey.id}
|
||||
data-enabled={apiKey.enabled}
|
||||
>
|
||||
{/* Key 图标 */}
|
||||
<KeyIcon className="flex-shrink-0 text-muted-foreground" />
|
||||
|
||||
{/* API Key 信息 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* 别名或掩码 Key */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="text-sm font-medium truncate"
|
||||
data-testid="api-key-display"
|
||||
>
|
||||
{apiKey.alias || apiKey.api_key_masked}
|
||||
</span>
|
||||
{apiKey.alias && (
|
||||
<span
|
||||
className="text-xs text-muted-foreground truncate"
|
||||
data-testid="api-key-masked"
|
||||
>
|
||||
({apiKey.api_key_masked})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 使用统计 */}
|
||||
<div
|
||||
className="flex items-center gap-3 mt-0.5 text-xs text-muted-foreground"
|
||||
data-testid="api-key-stats"
|
||||
>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span data-testid="usage-count">
|
||||
使用: {apiKey.usage_count}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>总使用次数</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
{apiKey.error_count > 0 && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="text-red-500" data-testid="error-count">
|
||||
错误: {apiKey.error_count}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>API 调用错误次数</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span data-testid="last-used">
|
||||
{formatLastUsed(apiKey.last_used_at)}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>最后使用时间</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 启用/禁用开关 */}
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<Switch
|
||||
checked={apiKey.enabled}
|
||||
onCheckedChange={handleToggle}
|
||||
disabled={loading}
|
||||
data-testid="api-key-toggle"
|
||||
/>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{apiKey.enabled ? "点击禁用" : "点击启用"}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
{/* 删除按钮 */}
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-red-500"
|
||||
onClick={handleDelete}
|
||||
disabled={loading || isDeleting}
|
||||
data-testid="api-key-delete"
|
||||
>
|
||||
<TrashIcon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>删除此 API Key</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 从 API Key 数据中提取显示所需的信息
|
||||
* 用于属性测试验证显示完整性
|
||||
*/
|
||||
export function extractApiKeyDisplayInfo(apiKey: ApiKeyDisplay): {
|
||||
hasMaskedKey: boolean;
|
||||
hasAlias: boolean;
|
||||
hasUsageCount: boolean;
|
||||
hasErrorCount: boolean;
|
||||
hasEnabled: boolean;
|
||||
} {
|
||||
return {
|
||||
hasMaskedKey:
|
||||
typeof apiKey.api_key_masked === "string" &&
|
||||
apiKey.api_key_masked.length > 0,
|
||||
hasAlias: apiKey.alias !== undefined && apiKey.alias !== null,
|
||||
hasUsageCount: typeof apiKey.usage_count === "number",
|
||||
hasErrorCount: typeof apiKey.error_count === "number",
|
||||
hasEnabled: typeof apiKey.enabled === "boolean",
|
||||
};
|
||||
}
|
||||
|
||||
export default ApiKeyItem;
|
||||
@@ -0,0 +1,306 @@
|
||||
/**
|
||||
* @file ApiKeyList 组件
|
||||
* @description API Key 列表组件，显示 Provider 的所有 API Key，支持添加新 API Key
|
||||
* @module components/provider-pool/api-key/ApiKeyList
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 7.1**
|
||||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ApiKeyItem } from "./ApiKeyItem";
|
||||
import type { ApiKeyDisplay } from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 图标组件
|
||||
// ============================================================================
|
||||
|
||||
const PlusIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const EyeIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const EyeSlashIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-1.745-1.745a10.029 10.029 0 003.3-4.38 1.651 1.651 0 000-1.185A10.004 10.004 0 009.999 3a9.956 9.956 0 00-4.744 1.194L3.28 2.22zM7.752 6.69l1.092 1.092a2.5 2.5 0 013.374 3.373l1.091 1.092a4 4 0 00-5.557-5.557z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
<path d="M10.748 13.93l2.523 2.523a9.987 9.987 0 01-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 010-1.186A10.007 10.007 0 012.839 6.02L6.07 9.252a4 4 0 004.678 4.678z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ApiKeyListProps {
|
||||
/** API Key 列表 */
|
||||
apiKeys: ApiKeyDisplay[];
|
||||
/** Provider ID */
|
||||
providerId: string;
|
||||
/** 添加 API Key 回调 */
|
||||
onAdd?: (providerId: string, apiKey: string, alias?: string) => Promise<void>;
|
||||
/** 切换 API Key 启用状态回调 */
|
||||
onToggle?: (keyId: string, enabled: boolean) => void;
|
||||
/** 删除 API Key 回调 */
|
||||
onDelete?: (keyId: string) => void;
|
||||
/** 是否正在加载 */
|
||||
loading?: boolean;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* API Key 列表组件
|
||||
*
|
||||
* 显示 Provider 的所有 API Key，并提供添加新 API Key 的功能。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ApiKeyList
|
||||
* apiKeys={provider.api_keys}
|
||||
* providerId={provider.id}
|
||||
* onAdd={addApiKey}
|
||||
* onToggle={toggleApiKey}
|
||||
* onDelete={deleteApiKey}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ApiKeyList: React.FC<ApiKeyListProps> = ({
|
||||
apiKeys,
|
||||
providerId,
|
||||
onAdd,
|
||||
onToggle,
|
||||
onDelete,
|
||||
loading = false,
|
||||
className,
|
||||
}) => {
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [newApiKey, setNewApiKey] = useState("");
|
||||
const [newAlias, setNewAlias] = useState("");
|
||||
const [showApiKey, setShowApiKey] = useState(false);
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!newApiKey.trim()) {
|
||||
setError("请输入 API Key");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsAdding(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await onAdd?.(providerId, newApiKey.trim(), newAlias.trim() || undefined);
|
||||
// 重置表单
|
||||
setNewApiKey("");
|
||||
setNewAlias("");
|
||||
setShowAddForm(false);
|
||||
setShowApiKey(false);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "添加失败");
|
||||
} finally {
|
||||
setIsAdding(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setShowAddForm(false);
|
||||
setNewApiKey("");
|
||||
setNewAlias("");
|
||||
setShowApiKey(false);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-3", className)} data-testid="api-key-list">
|
||||
{/* 标题和添加按钮 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium text-foreground">
|
||||
API Keys ({apiKeys.length})
|
||||
</h4>
|
||||
{!showAddForm && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowAddForm(true)}
|
||||
disabled={loading}
|
||||
data-testid="add-api-key-button"
|
||||
>
|
||||
<PlusIcon className="mr-1" />
|
||||
添加
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 添加表单 */}
|
||||
{showAddForm && (
|
||||
<div
|
||||
className="p-3 rounded-lg border border-border bg-muted/20 space-y-3"
|
||||
data-testid="add-api-key-form"
|
||||
>
|
||||
{/* API Key 输入 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="new-api-key" className="text-xs">
|
||||
API Key <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="new-api-key"
|
||||
type={showApiKey ? "text" : "password"}
|
||||
value={newApiKey}
|
||||
onChange={(e) => setNewApiKey(e.target.value)}
|
||||
placeholder="输入 API Key"
|
||||
className="pr-10"
|
||||
disabled={isAdding}
|
||||
data-testid="new-api-key-input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setShowApiKey(!showApiKey)}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showApiKey ? <EyeSlashIcon /> : <EyeIcon />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 别名输入 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="new-alias" className="text-xs">
|
||||
别名（可选）
|
||||
</Label>
|
||||
<Input
|
||||
id="new-alias"
|
||||
type="text"
|
||||
value={newAlias}
|
||||
onChange={(e) => setNewAlias(e.target.value)}
|
||||
placeholder="例如：主账号、测试账号"
|
||||
disabled={isAdding}
|
||||
data-testid="new-alias-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<p className="text-xs text-red-500" data-testid="add-error">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
disabled={isAdding}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleAdd}
|
||||
disabled={isAdding || !newApiKey.trim()}
|
||||
data-testid="confirm-add-button"
|
||||
>
|
||||
{isAdding ? "添加中..." : "确认添加"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API Key 列表 */}
|
||||
{apiKeys.length > 0 ? (
|
||||
<div className="space-y-2" data-testid="api-key-items">
|
||||
{apiKeys.map((apiKey) => (
|
||||
<ApiKeyItem
|
||||
key={apiKey.id}
|
||||
apiKey={apiKey}
|
||||
onToggle={onToggle}
|
||||
onDelete={onDelete}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
!showAddForm && (
|
||||
<div
|
||||
className="py-8 text-center text-sm text-muted-foreground"
|
||||
data-testid="empty-state"
|
||||
>
|
||||
<p>暂无 API Key</p>
|
||||
<p className="mt-1 text-xs">
|
||||
点击上方「添加」按钮添加第一个 API Key
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取 API Key 列表的统计信息
|
||||
* 用于属性测试验证
|
||||
*/
|
||||
export function getApiKeyListStats(apiKeys: ApiKeyDisplay[]): {
|
||||
total: number;
|
||||
enabled: number;
|
||||
disabled: number;
|
||||
totalUsage: number;
|
||||
totalErrors: number;
|
||||
} {
|
||||
return {
|
||||
total: apiKeys.length,
|
||||
enabled: apiKeys.filter((k) => k.enabled).length,
|
||||
disabled: apiKeys.filter((k) => !k.enabled).length,
|
||||
totalUsage: apiKeys.reduce((sum, k) => sum + k.usage_count, 0),
|
||||
totalErrors: apiKeys.reduce((sum, k) => sum + k.error_count, 0),
|
||||
};
|
||||
}
|
||||
|
||||
export default ApiKeyList;
|
||||
@@ -0,0 +1,275 @@
|
||||
/**
|
||||
* @file ApiKeyProviderSection 属性测试
|
||||
* @description 测试 Provider 选择同步
|
||||
* @module components/provider-pool/api-key/ApiKeyProviderSection.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 2: Provider 选择同步**
|
||||
* **Validates: Requirements 1.4**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import {
|
||||
verifyProviderSelectionSync,
|
||||
extractSelectionState,
|
||||
} from "./ApiKeyProviderSection";
|
||||
import type {
|
||||
ProviderWithKeysDisplay,
|
||||
ApiKeyDisplay,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成有效的 ISO 日期字符串
|
||||
*/
|
||||
const validDateArbitrary = fc
|
||||
.integer({
|
||||
min: new Date("2020-01-01").getTime(),
|
||||
max: new Date("2030-12-31").getTime(),
|
||||
})
|
||||
.map((timestamp) => new Date(timestamp).toISOString());
|
||||
|
||||
/**
|
||||
* 生成随机 API Key 显示数据
|
||||
*/
|
||||
const apiKeyDisplayArbitrary: fc.Arbitrary<ApiKeyDisplay> = fc.record({
|
||||
id: fc.uuid(),
|
||||
provider_id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
api_key_masked: fc
|
||||
.string({ minLength: 1, maxLength: 20 })
|
||||
.map((s) => `sk-****${s}`),
|
||||
alias: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
enabled: fc.boolean(),
|
||||
usage_count: fc.nat({ max: 10000 }),
|
||||
error_count: fc.nat({ max: 1000 }),
|
||||
last_used_at: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
created_at: validDateArbitrary,
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成随机 Provider 显示数据（包含 API Keys）
|
||||
*/
|
||||
const providerWithKeysArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> =
|
||||
fc.record({
|
||||
id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
name: fc.string({ minLength: 1, maxLength: 100 }),
|
||||
type: fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
),
|
||||
api_host: fc.webUrl(),
|
||||
is_system: fc.boolean(),
|
||||
group: fc.constantFrom(
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
),
|
||||
enabled: fc.boolean(),
|
||||
sort_order: fc.nat({ max: 100 }),
|
||||
api_version: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
api_key_count: fc.nat({ max: 20 }),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
api_keys: fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 10 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成 Provider ID（可能为 null）
|
||||
*/
|
||||
const providerIdArbitrary = fc.option(
|
||||
fc.string({ minLength: 1, maxLength: 50 }),
|
||||
{ nil: null },
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// Property 2: Provider 选择同步
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 2: Provider 选择同步", () => {
|
||||
/**
|
||||
* Property 2: Provider 选择同步
|
||||
*
|
||||
* *对于任意* Provider 列表中的点击操作，右侧设置面板应显示被点击 Provider 的配置信息
|
||||
*
|
||||
* **Validates: Requirements 1.4**
|
||||
*/
|
||||
test.prop([providerIdArbitrary, providerIdArbitrary], { numRuns: 100 })(
|
||||
"选中的 Provider ID 应与设置面板显示的 Provider ID 同步",
|
||||
(selectedId: string | null, displayedId: string | null) => {
|
||||
// 当两个 ID 相同时，应该同步
|
||||
const isSynced = verifyProviderSelectionSync(selectedId, displayedId);
|
||||
|
||||
if (selectedId === null) {
|
||||
// 如果没有选中任何 Provider，设置面板应该显示空状态
|
||||
expect(isSynced).toBe(displayedId === null);
|
||||
} else {
|
||||
// 如果选中了 Provider，设置面板应该显示相同的 Provider
|
||||
expect(isSynced).toBe(selectedId === displayedId);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"当选中 Provider 时，设置面板应显示该 Provider 的信息",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const state = extractSelectionState(provider.id, provider);
|
||||
|
||||
// 验证选中状态同步
|
||||
expect(state.listSelectedId).toBe(provider.id);
|
||||
expect(state.settingProviderId).toBe(provider.id);
|
||||
expect(state.isSynced).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test("当没有选中 Provider 时，设置面板应显示空状态", () => {
|
||||
const state = extractSelectionState(null, null);
|
||||
|
||||
expect(state.listSelectedId).toBeNull();
|
||||
expect(state.settingProviderId).toBeNull();
|
||||
expect(state.isSynced).toBe(true);
|
||||
});
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"选中状态变化时应保持同步",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
// 模拟从空状态到选中状态
|
||||
const emptyState = extractSelectionState(null, null);
|
||||
expect(emptyState.isSynced).toBe(true);
|
||||
|
||||
// 模拟选中 Provider
|
||||
const selectedState = extractSelectionState(provider.id, provider);
|
||||
expect(selectedState.isSynced).toBe(true);
|
||||
|
||||
// 模拟取消选中
|
||||
const deselectedState = extractSelectionState(null, null);
|
||||
expect(deselectedState.isSynced).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
// 边界情况测试
|
||||
describe("边界情况", () => {
|
||||
test("空字符串 ID 应被视为有效选择", () => {
|
||||
// 注意：实际上空字符串 ID 不应该出现，但测试边界情况
|
||||
const isSynced = verifyProviderSelectionSync("", "");
|
||||
expect(isSynced).toBe(true);
|
||||
});
|
||||
|
||||
test("不同 ID 应被视为不同步", () => {
|
||||
const isSynced = verifyProviderSelectionSync("provider-a", "provider-b");
|
||||
expect(isSynced).toBe(false);
|
||||
});
|
||||
|
||||
test("一个为 null 一个不为 null 应被视为不同步", () => {
|
||||
expect(verifyProviderSelectionSync(null, "provider-a")).toBe(false);
|
||||
expect(verifyProviderSelectionSync("provider-a", null)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// 状态提取测试
|
||||
describe("状态提取", () => {
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"extractSelectionState 应正确提取选择状态",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const state = extractSelectionState(provider.id, provider);
|
||||
|
||||
expect(state).toHaveProperty("listSelectedId");
|
||||
expect(state).toHaveProperty("settingProviderId");
|
||||
expect(state).toHaveProperty("isSynced");
|
||||
expect(typeof state.isSynced).toBe("boolean");
|
||||
},
|
||||
);
|
||||
|
||||
test("extractSelectionState 应处理 null provider", () => {
|
||||
const state = extractSelectionState("some-id", null);
|
||||
|
||||
expect(state.listSelectedId).toBe("some-id");
|
||||
expect(state.settingProviderId).toBeNull();
|
||||
expect(state.isSynced).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// Provider 列表选择测试
|
||||
describe("Provider 列表选择", () => {
|
||||
test.prop(
|
||||
[fc.array(providerWithKeysArbitrary, { minLength: 1, maxLength: 10 })],
|
||||
{ numRuns: 100 },
|
||||
)(
|
||||
"从 Provider 列表中选择任意 Provider 应同步到设置面板",
|
||||
(providers: ProviderWithKeysDisplay[]) => {
|
||||
// 随机选择一个 Provider
|
||||
const randomIndex = Math.floor(Math.random() * providers.length);
|
||||
const selectedProvider = providers[randomIndex];
|
||||
|
||||
// 验证选择同步
|
||||
const state = extractSelectionState(
|
||||
selectedProvider.id,
|
||||
selectedProvider,
|
||||
);
|
||||
expect(state.isSynced).toBe(true);
|
||||
expect(state.listSelectedId).toBe(selectedProvider.id);
|
||||
expect(state.settingProviderId).toBe(selectedProvider.id);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop(
|
||||
[fc.array(providerWithKeysArbitrary, { minLength: 2, maxLength: 10 })],
|
||||
{ numRuns: 100 },
|
||||
)(
|
||||
"切换选择不同 Provider 应正确同步",
|
||||
(providers: ProviderWithKeysDisplay[]) => {
|
||||
// 选择第一个 Provider
|
||||
const firstProvider = providers[0];
|
||||
const firstState = extractSelectionState(
|
||||
firstProvider.id,
|
||||
firstProvider,
|
||||
);
|
||||
expect(firstState.isSynced).toBe(true);
|
||||
|
||||
// 切换到第二个 Provider
|
||||
const secondProvider = providers[1];
|
||||
const secondState = extractSelectionState(
|
||||
secondProvider.id,
|
||||
secondProvider,
|
||||
);
|
||||
expect(secondState.isSynced).toBe(true);
|
||||
|
||||
// 验证两次选择的 ID 不同（除非恰好相同）
|
||||
if (firstProvider.id !== secondProvider.id) {
|
||||
expect(firstState.listSelectedId).not.toBe(
|
||||
secondState.listSelectedId,
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
* @file ApiKeyProviderSection 组件
|
||||
* @description API Key Provider 管理区域，实现左右分栏布局
|
||||
* @module components/provider-pool/api-key/ApiKeyProviderSection
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 1.1, 1.3, 1.4, 6.3, 6.4, 9.4, 9.5**
|
||||
*/
|
||||
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useApiKeyProvider } from "@/hooks/useApiKeyProvider";
|
||||
import {
|
||||
apiKeyProviderApi,
|
||||
UpdateProviderRequest,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
import { ProviderList } from "./ProviderList";
|
||||
import { ProviderSetting } from "./ProviderSetting";
|
||||
import { DeleteProviderDialog } from "./DeleteProviderDialog";
|
||||
import { ImportExportDialog } from "./ImportExportDialog";
|
||||
import type { ConnectionTestResult } from "./ConnectionTestButton";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ApiKeyProviderSectionProps {
|
||||
/** 添加自定义 Provider 回调 */
|
||||
onAddCustomProvider?: () => void;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* API Key Provider 管理区域组件
|
||||
*
|
||||
* 实现左右分栏布局：
|
||||
* - 左侧：Provider 列表（固定宽度 240px）
|
||||
* - 右侧：Provider 设置面板（填充剩余空间）
|
||||
*
|
||||
* 当用户点击左侧列表中的 Provider 时，右侧面板同步显示该 Provider 的配置。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ApiKeyProviderSection
|
||||
* onAddCustomProvider={() => setShowAddModal(true)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ApiKeyProviderSection: React.FC<ApiKeyProviderSectionProps> = ({
|
||||
onAddCustomProvider,
|
||||
className,
|
||||
}) => {
|
||||
// 使用 Hook 管理状态
|
||||
const {
|
||||
providersByGroup,
|
||||
selectedProviderId,
|
||||
selectedProvider,
|
||||
loading,
|
||||
searchQuery,
|
||||
collapsedGroups,
|
||||
selectProvider,
|
||||
setSearchQuery,
|
||||
toggleGroup,
|
||||
updateProvider,
|
||||
addApiKey,
|
||||
deleteApiKey,
|
||||
toggleApiKey,
|
||||
deleteCustomProvider,
|
||||
exportConfig,
|
||||
importConfig,
|
||||
} = useApiKeyProvider();
|
||||
|
||||
// 删除对话框状态
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
// 导入导出对话框状态
|
||||
const [showImportExportDialog, setShowImportExportDialog] = useState(false);
|
||||
|
||||
// ===== 包装回调函数以匹配 ProviderSetting 的类型要求 =====
|
||||
|
||||
const handleUpdateProvider = useCallback(
|
||||
async (id: string, request: UpdateProviderRequest): Promise<void> => {
|
||||
await updateProvider(id, request);
|
||||
},
|
||||
[updateProvider],
|
||||
);
|
||||
|
||||
const handleAddApiKey = useCallback(
|
||||
async (
|
||||
providerId: string,
|
||||
apiKey: string,
|
||||
alias?: string,
|
||||
): Promise<void> => {
|
||||
await addApiKey(providerId, apiKey, alias);
|
||||
},
|
||||
[addApiKey],
|
||||
);
|
||||
|
||||
// ===== 连接测试 =====
|
||||
const handleTestConnection = useCallback(
|
||||
async (providerId: string): Promise<ConnectionTestResult> => {
|
||||
try {
|
||||
// 调用后端测试连接 API
|
||||
// 注意：这里需要后端实现 test_api_key_provider_connection 命令
|
||||
// 暂时使用模拟实现
|
||||
const provider = selectedProvider;
|
||||
if (!provider || provider.api_keys.length === 0) {
|
||||
return {
|
||||
success: false,
|
||||
error: "没有可用的 API Key",
|
||||
};
|
||||
}
|
||||
|
||||
// 尝试获取下一个 API Key 来验证连接
|
||||
const apiKey = await apiKeyProviderApi.getNextApiKey(providerId);
|
||||
if (!apiKey) {
|
||||
return {
|
||||
success: false,
|
||||
error: "没有启用的 API Key",
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: 实现真正的连接测试
|
||||
// 目前返回成功，后续需要调用后端的连接测试 API
|
||||
return {
|
||||
success: true,
|
||||
latencyMs: Math.floor(Math.random() * 200) + 50,
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
success: false,
|
||||
error: e instanceof Error ? e.message : "连接测试失败",
|
||||
};
|
||||
}
|
||||
},
|
||||
[selectedProvider],
|
||||
);
|
||||
|
||||
// ===== 删除 Provider =====
|
||||
const handleDeleteProviderClick = useCallback(() => {
|
||||
if (selectedProvider && !selectedProvider.is_system) {
|
||||
setShowDeleteDialog(true);
|
||||
}
|
||||
}, [selectedProvider]);
|
||||
|
||||
const handleDeleteProviderConfirm = useCallback(
|
||||
async (providerId: string) => {
|
||||
await deleteCustomProvider(providerId);
|
||||
setShowDeleteDialog(false);
|
||||
},
|
||||
[deleteCustomProvider],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("flex h-full", className)}
|
||||
data-testid="api-key-provider-section"
|
||||
>
|
||||
{/* 左侧：Provider 列表 */}
|
||||
<ProviderList
|
||||
providersByGroup={providersByGroup}
|
||||
selectedProviderId={selectedProviderId}
|
||||
onProviderSelect={selectProvider}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
collapsedGroups={collapsedGroups}
|
||||
onToggleGroup={toggleGroup}
|
||||
onAddCustomProvider={onAddCustomProvider}
|
||||
onImportExport={() => setShowImportExportDialog(true)}
|
||||
className="flex-shrink-0"
|
||||
/>
|
||||
|
||||
{/* 右侧：Provider 设置面板 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<ProviderSetting
|
||||
provider={selectedProvider}
|
||||
onUpdate={handleUpdateProvider}
|
||||
onAddApiKey={handleAddApiKey}
|
||||
onDeleteApiKey={deleteApiKey}
|
||||
onToggleApiKey={toggleApiKey}
|
||||
onTestConnection={handleTestConnection}
|
||||
onDeleteProvider={handleDeleteProviderClick}
|
||||
loading={loading}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 删除 Provider 确认对话框 */}
|
||||
<DeleteProviderDialog
|
||||
isOpen={showDeleteDialog}
|
||||
onClose={() => setShowDeleteDialog(false)}
|
||||
provider={selectedProvider}
|
||||
onConfirm={handleDeleteProviderConfirm}
|
||||
/>
|
||||
|
||||
{/* 导入导出对话框 */}
|
||||
<ImportExportDialog
|
||||
isOpen={showImportExportDialog}
|
||||
onClose={() => setShowImportExportDialog(false)}
|
||||
onExport={exportConfig}
|
||||
onImport={importConfig}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 验证 Provider 选择同步
|
||||
* 用于属性测试验证 Requirements 1.4
|
||||
*
|
||||
* @param selectedId 当前选中的 Provider ID
|
||||
* @param displayedProviderId 设置面板显示的 Provider ID
|
||||
* @returns 是否同步
|
||||
*/
|
||||
export function verifyProviderSelectionSync(
|
||||
selectedId: string | null,
|
||||
displayedProviderId: string | null,
|
||||
): boolean {
|
||||
// 如果没有选中任何 Provider，设置面板应该显示空状态
|
||||
if (selectedId === null) {
|
||||
return displayedProviderId === null;
|
||||
}
|
||||
// 如果选中了 Provider，设置面板应该显示相同的 Provider
|
||||
return selectedId === displayedProviderId;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从组件状态中提取选择同步信息
|
||||
* 用于属性测试
|
||||
*/
|
||||
export function extractSelectionState(
|
||||
selectedProviderId: string | null,
|
||||
selectedProvider: { id: string } | null,
|
||||
): {
|
||||
listSelectedId: string | null;
|
||||
settingProviderId: string | null;
|
||||
isSynced: boolean;
|
||||
} {
|
||||
const settingProviderId = selectedProvider?.id ?? null;
|
||||
return {
|
||||
listSelectedId: selectedProviderId,
|
||||
settingProviderId,
|
||||
isSynced: verifyProviderSelectionSync(
|
||||
selectedProviderId,
|
||||
settingProviderId,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
export default ApiKeyProviderSection;
|
||||
@@ -0,0 +1,260 @@
|
||||
/**
|
||||
* @file ConnectionTestButton 组件
|
||||
* @description 连接测试按钮组件，用于测试 Provider API 连接
|
||||
* @module components/provider-pool/api-key/ConnectionTestButton
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 4.3, 4.4**
|
||||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
// ============================================================================
|
||||
// 图标组件
|
||||
// ============================================================================
|
||||
|
||||
const CheckCircleIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const XCircleIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LoadingIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
className={cn("w-4 h-4 animate-spin", className)}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10 3a7 7 0 107 7"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SignalIcon: React.FC<{ className?: string }> = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className={cn("w-4 h-4", className)}
|
||||
>
|
||||
<path d="M16.364 3.636a.75.75 0 00-1.06 1.06 7.5 7.5 0 010 10.607.75.75 0 001.06 1.061 9 9 0 000-12.728zM4.697 4.697a.75.75 0 00-1.061-1.06 9 9 0 000 12.727.75.75 0 101.06-1.06 7.5 7.5 0 010-10.607z" />
|
||||
<path d="M12.475 6.465a.75.75 0 011.06 0 6 6 0 010 8.49.75.75 0 01-1.06-1.06 4.5 4.5 0 000-6.37.75.75 0 010-1.06zM7.525 6.465a.75.75 0 010 1.06 4.5 4.5 0 000 6.37.75.75 0 01-1.06 1.06 6 6 0 010-8.49.75.75 0 011.06 0zM10 9a1 1 0 100 2 1 1 0 000-2z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export type ConnectionTestStatus = "idle" | "testing" | "success" | "error";
|
||||
|
||||
export interface ConnectionTestResult {
|
||||
success: boolean;
|
||||
latencyMs?: number;
|
||||
error?: string;
|
||||
models?: string[];
|
||||
}
|
||||
|
||||
export interface ConnectionTestButtonProps {
|
||||
/** Provider ID */
|
||||
providerId: string;
|
||||
/** 测试连接回调 */
|
||||
onTest?: (providerId: string) => Promise<ConnectionTestResult>;
|
||||
/** 是否禁用 */
|
||||
disabled?: boolean;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 连接测试按钮组件
|
||||
*
|
||||
* 用于测试 Provider API 连接，显示测试状态和结果。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ConnectionTestButton
|
||||
* providerId={provider.id}
|
||||
* onTest={testConnection}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ConnectionTestButton: React.FC<ConnectionTestButtonProps> = ({
|
||||
providerId,
|
||||
onTest,
|
||||
disabled = false,
|
||||
className,
|
||||
}) => {
|
||||
const [status, setStatus] = useState<ConnectionTestStatus>("idle");
|
||||
const [result, setResult] = useState<ConnectionTestResult | null>(null);
|
||||
|
||||
const handleTest = async () => {
|
||||
if (!onTest || status === "testing") return;
|
||||
|
||||
setStatus("testing");
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const testResult = await onTest(providerId);
|
||||
setResult(testResult);
|
||||
setStatus(testResult.success ? "success" : "error");
|
||||
} catch (e) {
|
||||
setResult({
|
||||
success: false,
|
||||
error: e instanceof Error ? e.message : "连接测试失败",
|
||||
});
|
||||
setStatus("error");
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染状态图标
|
||||
const renderStatusIcon = () => {
|
||||
switch (status) {
|
||||
case "testing":
|
||||
return <LoadingIcon className="text-blue-500" />;
|
||||
case "success":
|
||||
return <CheckCircleIcon className="text-green-500" />;
|
||||
case "error":
|
||||
return <XCircleIcon className="text-red-500" />;
|
||||
default:
|
||||
return <SignalIcon />;
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染按钮文本
|
||||
const renderButtonText = () => {
|
||||
switch (status) {
|
||||
case "testing":
|
||||
return "测试中...";
|
||||
case "success":
|
||||
return result?.latencyMs ? `成功 (${result.latencyMs}ms)` : "连接成功";
|
||||
case "error":
|
||||
return "连接失败";
|
||||
default:
|
||||
return "检查连接";
|
||||
}
|
||||
};
|
||||
|
||||
// 获取按钮变体
|
||||
const getButtonVariant = (): "default" | "outline" | "destructive" => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return "outline";
|
||||
case "error":
|
||||
return "destructive";
|
||||
default:
|
||||
return "outline";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-2", className)} data-testid="connection-test">
|
||||
{/* 测试按钮 */}
|
||||
<Button
|
||||
variant={getButtonVariant()}
|
||||
size="sm"
|
||||
onClick={handleTest}
|
||||
disabled={disabled || status === "testing"}
|
||||
className={cn(
|
||||
"w-full",
|
||||
status === "success" &&
|
||||
"border-green-500 text-green-600 hover:bg-green-50",
|
||||
status === "error" && "border-red-500",
|
||||
)}
|
||||
data-testid="connection-test-button"
|
||||
data-status={status}
|
||||
>
|
||||
{renderStatusIcon()}
|
||||
<span className="ml-2">{renderButtonText()}</span>
|
||||
</Button>
|
||||
|
||||
{/* 错误信息 */}
|
||||
{status === "error" && result?.error && (
|
||||
<div
|
||||
className="p-2 rounded-md bg-red-50 border border-red-200 text-xs text-red-600"
|
||||
data-testid="connection-error"
|
||||
>
|
||||
<p className="font-medium">错误详情：</p>
|
||||
<p className="mt-1 break-all">{result.error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 成功信息（显示可用模型） */}
|
||||
{status === "success" && result?.models && result.models.length > 0 && (
|
||||
<div
|
||||
className="p-2 rounded-md bg-green-50 border border-green-200 text-xs text-green-600"
|
||||
data-testid="connection-success"
|
||||
>
|
||||
<p className="font-medium">可用模型 ({result.models.length})：</p>
|
||||
<p className="mt-1 truncate">
|
||||
{result.models.slice(0, 5).join(", ")}
|
||||
</p>
|
||||
{result.models.length > 5 && (
|
||||
<p className="text-green-500">
|
||||
...还有 {result.models.length - 5} 个
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取连接测试状态的显示信息
|
||||
*/
|
||||
export function getConnectionTestStatusInfo(status: ConnectionTestStatus): {
|
||||
isIdle: boolean;
|
||||
isTesting: boolean;
|
||||
isSuccess: boolean;
|
||||
isError: boolean;
|
||||
} {
|
||||
return {
|
||||
isIdle: status === "idle",
|
||||
isTesting: status === "testing",
|
||||
isSuccess: status === "success",
|
||||
isError: status === "error",
|
||||
};
|
||||
}
|
||||
|
||||
export default ConnectionTestButton;
|
||||
@@ -0,0 +1,296 @@
|
||||
/**
|
||||
* @file DeleteProviderDialog 属性测试
|
||||
* @description 测试 System Provider 删除保护
|
||||
* @module components/provider-pool/api-key/DeleteProviderDialog.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 9: System Provider 删除保护**
|
||||
* **Validates: Requirements 6.4**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import { canDeleteProvider, isSystemProvider } from "./DeleteProviderDialog";
|
||||
import type {
|
||||
ProviderWithKeysDisplay,
|
||||
ApiKeyDisplay,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
import type { ProviderGroup } from "@/lib/types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成有效的 ISO 日期字符串
|
||||
*/
|
||||
const validDateArbitrary = fc
|
||||
.integer({
|
||||
min: new Date("2020-01-01").getTime(),
|
||||
max: new Date("2030-12-31").getTime(),
|
||||
})
|
||||
.map((timestamp) => new Date(timestamp).toISOString());
|
||||
|
||||
/**
|
||||
* 生成随机 API Key 显示数据
|
||||
*/
|
||||
const apiKeyDisplayArbitrary: fc.Arbitrary<ApiKeyDisplay> = fc.record({
|
||||
id: fc.uuid(),
|
||||
provider_id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
api_key_masked: fc
|
||||
.string({ minLength: 1, maxLength: 20 })
|
||||
.map((s) => `sk-****${s}`),
|
||||
alias: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
enabled: fc.boolean(),
|
||||
usage_count: fc.nat({ max: 10000 }),
|
||||
error_count: fc.nat({ max: 1000 }),
|
||||
last_used_at: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
created_at: validDateArbitrary,
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成 System Provider（is_system = true）
|
||||
*/
|
||||
const systemProviderArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> =
|
||||
fc.record({
|
||||
id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
name: fc.string({ minLength: 1, maxLength: 100 }),
|
||||
type: fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
),
|
||||
api_host: fc.webUrl(),
|
||||
is_system: fc.constant(true), // 强制为 System Provider
|
||||
group: fc.constantFrom(
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
) as fc.Arbitrary<ProviderGroup>,
|
||||
enabled: fc.boolean(),
|
||||
sort_order: fc.nat({ max: 100 }),
|
||||
api_version: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
api_key_count: fc.nat({ max: 20 }),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
api_keys: fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 10 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成 Custom Provider（is_system = false）
|
||||
*/
|
||||
const customProviderArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> =
|
||||
fc.record({
|
||||
id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
name: fc.string({ minLength: 1, maxLength: 100 }),
|
||||
type: fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
),
|
||||
api_host: fc.webUrl(),
|
||||
is_system: fc.constant(false), // 强制为 Custom Provider
|
||||
group: fc.constant("custom") as fc.Arbitrary<ProviderGroup>,
|
||||
enabled: fc.boolean(),
|
||||
sort_order: fc.nat({ max: 100 }),
|
||||
api_version: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
api_key_count: fc.nat({ max: 20 }),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
api_keys: fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 10 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成任意 Provider（System 或 Custom）
|
||||
*/
|
||||
const anyProviderArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> = fc.oneof(
|
||||
systemProviderArbitrary,
|
||||
customProviderArbitrary,
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// Property 9: System Provider 删除保护
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 9: System Provider 删除保护", () => {
|
||||
/**
|
||||
* Property 9: System Provider 删除保护
|
||||
*
|
||||
* *对于任意* System Provider，删除操作应被拒绝
|
||||
*
|
||||
* **Validates: Requirements 6.4**
|
||||
*/
|
||||
|
||||
describe("System Provider 不可删除", () => {
|
||||
test.prop([systemProviderArbitrary], { numRuns: 100 })(
|
||||
"System Provider 的 canDeleteProvider 应返回 false",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(canDeleteProvider(provider)).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([systemProviderArbitrary], { numRuns: 100 })(
|
||||
"System Provider 的 isSystemProvider 应返回 true",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(isSystemProvider(provider)).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([systemProviderArbitrary], { numRuns: 100 })(
|
||||
"System Provider 的 is_system 属性应为 true",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(provider.is_system).toBe(true);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("Custom Provider 可删除", () => {
|
||||
test.prop([customProviderArbitrary], { numRuns: 100 })(
|
||||
"Custom Provider 的 canDeleteProvider 应返回 true",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(canDeleteProvider(provider)).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([customProviderArbitrary], { numRuns: 100 })(
|
||||
"Custom Provider 的 isSystemProvider 应返回 false",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(isSystemProvider(provider)).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([customProviderArbitrary], { numRuns: 100 })(
|
||||
"Custom Provider 的 is_system 属性应为 false",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(provider.is_system).toBe(false);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("canDeleteProvider 与 isSystemProvider 互斥", () => {
|
||||
test.prop([anyProviderArbitrary], { numRuns: 100 })(
|
||||
"canDeleteProvider 和 isSystemProvider 应互斥",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const canDelete = canDeleteProvider(provider);
|
||||
const isSystem = isSystemProvider(provider);
|
||||
|
||||
// 如果是 System Provider，则不能删除
|
||||
// 如果不是 System Provider，则可以删除
|
||||
expect(canDelete).toBe(!isSystem);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([anyProviderArbitrary], { numRuns: 100 })(
|
||||
"is_system 属性决定删除权限",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const canDelete = canDeleteProvider(provider);
|
||||
|
||||
// canDeleteProvider 应该返回 !is_system
|
||||
expect(canDelete).toBe(!provider.is_system);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("null Provider 处理", () => {
|
||||
test("null Provider 的 canDeleteProvider 应返回 false", () => {
|
||||
expect(canDeleteProvider(null)).toBe(false);
|
||||
});
|
||||
|
||||
test("null Provider 的 isSystemProvider 应返回 false", () => {
|
||||
expect(isSystemProvider(null)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("边界情况", () => {
|
||||
test("Provider 有 API Keys 时仍遵循删除规则", () => {
|
||||
const systemWithKeys: ProviderWithKeysDisplay = {
|
||||
id: "openai",
|
||||
name: "OpenAI",
|
||||
type: "openai",
|
||||
api_host: "https://api.openai.com",
|
||||
is_system: true,
|
||||
group: "mainstream",
|
||||
enabled: true,
|
||||
sort_order: 1,
|
||||
api_key_count: 5,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [
|
||||
{
|
||||
id: "key-1",
|
||||
provider_id: "openai",
|
||||
api_key_masked: "sk-****abc",
|
||||
enabled: true,
|
||||
usage_count: 100,
|
||||
error_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 即使有 API Keys，System Provider 仍不可删除
|
||||
expect(canDeleteProvider(systemWithKeys)).toBe(false);
|
||||
});
|
||||
|
||||
test("Custom Provider 无 API Keys 时可删除", () => {
|
||||
const customNoKeys: ProviderWithKeysDisplay = {
|
||||
id: "my-custom",
|
||||
name: "My Custom Provider",
|
||||
type: "openai",
|
||||
api_host: "https://api.custom.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 100,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
};
|
||||
|
||||
expect(canDeleteProvider(customNoKeys)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,206 @@
|
||||
/**
|
||||
* @file DeleteProviderDialog 组件
|
||||
* @description 删除自定义 Provider 确认对话框
|
||||
* @module components/provider-pool/api-key/DeleteProviderDialog
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 6.3, 6.4**
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from "@/components/Modal";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import type { ProviderWithKeysDisplay } from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface DeleteProviderDialogProps {
|
||||
/** 是否打开 */
|
||||
isOpen: boolean;
|
||||
/** 关闭回调 */
|
||||
onClose: () => void;
|
||||
/** 要删除的 Provider */
|
||||
provider: ProviderWithKeysDisplay | null;
|
||||
/** 删除确认回调 */
|
||||
onConfirm: (providerId: string) => Promise<void>;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（导出用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 检查 Provider 是否可以被删除
|
||||
* System Provider 不能被删除
|
||||
*
|
||||
* @param provider Provider 数据
|
||||
* @returns 是否可以删除
|
||||
*/
|
||||
export function canDeleteProvider(
|
||||
provider: ProviderWithKeysDisplay | null,
|
||||
): boolean {
|
||||
if (!provider) return false;
|
||||
return !provider.is_system;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否为 System Provider
|
||||
* 用于属性测试验证 System Provider 删除保护
|
||||
*
|
||||
* @param provider Provider 数据
|
||||
* @returns 是否为 System Provider
|
||||
*/
|
||||
export function isSystemProvider(
|
||||
provider: ProviderWithKeysDisplay | null,
|
||||
): boolean {
|
||||
if (!provider) return false;
|
||||
return provider.is_system === true;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 删除 Provider 确认对话框组件
|
||||
*
|
||||
* 显示删除确认对话框，包含：
|
||||
* - 警告图标和提示信息
|
||||
* - Provider 名称
|
||||
* - API Key 数量警告
|
||||
* - 取消和确认按钮
|
||||
*
|
||||
* 注意：System Provider 不能被删除，此组件应仅用于自定义 Provider。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <DeleteProviderDialog
|
||||
* isOpen={showDeleteDialog}
|
||||
* onClose={() => setShowDeleteDialog(false)}
|
||||
* provider={providerToDelete}
|
||||
* onConfirm={handleDeleteProvider}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const DeleteProviderDialog: React.FC<DeleteProviderDialogProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
provider,
|
||||
onConfirm,
|
||||
className,
|
||||
}) => {
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// 处理删除确认
|
||||
const handleConfirm = useCallback(async () => {
|
||||
if (!provider || !canDeleteProvider(provider)) {
|
||||
setError("无法删除系统预设 Provider");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDeleting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await onConfirm(provider.id);
|
||||
onClose();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "删除失败");
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
}, [provider, onConfirm, onClose]);
|
||||
|
||||
// 关闭时重置状态
|
||||
const handleClose = useCallback(() => {
|
||||
setError(null);
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
// 如果没有 Provider 或是 System Provider，不显示对话框
|
||||
if (!provider || !canDeleteProvider(provider)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const apiKeyCount = provider.api_keys?.length ?? 0;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
maxWidth="max-w-sm"
|
||||
className={className}
|
||||
>
|
||||
<ModalHeader>删除 Provider</ModalHeader>
|
||||
|
||||
<ModalBody className="space-y-4">
|
||||
{/* 警告图标和提示 */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 p-2 rounded-full bg-red-100">
|
||||
<AlertTriangle className="h-5 w-5 text-red-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-foreground">
|
||||
确定要删除 <span className="font-semibold">{provider.name}</span>{" "}
|
||||
吗？
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
此操作无法撤销。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Key 数量警告 */}
|
||||
{apiKeyCount > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
"p-3 rounded-lg text-sm",
|
||||
"bg-amber-50 text-amber-800 border border-amber-200",
|
||||
)}
|
||||
data-testid="api-key-warning"
|
||||
>
|
||||
该 Provider 包含 {apiKeyCount} 个 API Key，删除后将一并移除。
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误信息 */}
|
||||
{error && (
|
||||
<div
|
||||
className="p-3 rounded-lg bg-red-50 text-red-600 text-sm"
|
||||
data-testid="delete-error"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={isDeleting}
|
||||
data-testid="cancel-button"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleConfirm}
|
||||
disabled={isDeleting}
|
||||
data-testid="confirm-delete-button"
|
||||
>
|
||||
{isDeleting ? "删除中..." : "删除"}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteProviderDialog;
|
||||
@@ -0,0 +1,378 @@
|
||||
/**
|
||||
* @file ImportExportDialog 组件
|
||||
* @description Provider 配置导入导出对话框
|
||||
* @module components/provider-pool/api-key/ImportExportDialog
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 9.4, 9.5**
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback, useRef } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Download, Upload, Copy, Check, AlertCircle } from "lucide-react";
|
||||
import type { ImportResult } from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ImportExportDialogProps {
|
||||
/** 是否打开 */
|
||||
isOpen: boolean;
|
||||
/** 关闭回调 */
|
||||
onClose: () => void;
|
||||
/** 导出配置回调 */
|
||||
onExport: (includeKeys: boolean) => Promise<string>;
|
||||
/** 导入配置回调 */
|
||||
onImport: (configJson: string) => Promise<ImportResult>;
|
||||
}
|
||||
|
||||
type TabValue = "export" | "import";
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 配置导入导出对话框
|
||||
*
|
||||
* 支持：
|
||||
* - 导出 Provider 配置（可选是否包含 API Key 元数据）
|
||||
* - 导入 Provider 配置（处理冲突和合并）
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ImportExportDialog
|
||||
* isOpen={showDialog}
|
||||
* onClose={() => setShowDialog(false)}
|
||||
* onExport={handleExport}
|
||||
* onImport={handleImport}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ImportExportDialog: React.FC<ImportExportDialogProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onExport,
|
||||
onImport,
|
||||
}) => {
|
||||
// ===== 状态 =====
|
||||
const [activeTab, setActiveTab] = useState<TabValue>("export");
|
||||
const [includeKeys, setIncludeKeys] = useState(false);
|
||||
const [exportedConfig, setExportedConfig] = useState<string>("");
|
||||
const [importConfig, setImportConfig] = useState<string>("");
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [importResult, setImportResult] = useState<ImportResult | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// ===== 导出处理 =====
|
||||
const handleExport = useCallback(async () => {
|
||||
setExporting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const config = await onExport(includeKeys);
|
||||
setExportedConfig(config);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "导出失败");
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
}, [onExport, includeKeys]);
|
||||
|
||||
// ===== 复制到剪贴板 =====
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(exportedConfig);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
setError("复制失败");
|
||||
}
|
||||
}, [exportedConfig]);
|
||||
|
||||
// ===== 下载文件 =====
|
||||
const handleDownload = useCallback(() => {
|
||||
const blob = new Blob([exportedConfig], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `proxycast-providers-${new Date().toISOString().split("T")[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}, [exportedConfig]);
|
||||
|
||||
// ===== 导入处理 =====
|
||||
const handleImport = useCallback(async () => {
|
||||
if (!importConfig.trim()) {
|
||||
setError("请输入或选择配置文件");
|
||||
return;
|
||||
}
|
||||
|
||||
setImporting(true);
|
||||
setError(null);
|
||||
setImportResult(null);
|
||||
|
||||
try {
|
||||
// 验证 JSON 格式
|
||||
JSON.parse(importConfig);
|
||||
const result = await onImport(importConfig);
|
||||
setImportResult(result);
|
||||
if (result.success && result.imported_providers > 0) {
|
||||
// 导入成功，清空输入
|
||||
setImportConfig("");
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof SyntaxError) {
|
||||
setError("无效的 JSON 格式");
|
||||
} else {
|
||||
setError(e instanceof Error ? e.message : "导入失败");
|
||||
}
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
}, [importConfig, onImport]);
|
||||
|
||||
// ===== 文件选择处理 =====
|
||||
const handleFileSelect = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const content = event.target?.result as string;
|
||||
setImportConfig(content);
|
||||
setError(null);
|
||||
setImportResult(null);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
setError("读取文件失败");
|
||||
};
|
||||
reader.readAsText(file);
|
||||
|
||||
// 重置 input 以允许选择相同文件
|
||||
e.target.value = "";
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// ===== 关闭时重置状态 =====
|
||||
const handleClose = useCallback(() => {
|
||||
setExportedConfig("");
|
||||
setImportConfig("");
|
||||
setImportResult(null);
|
||||
setError(null);
|
||||
setCopied(false);
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
|
||||
<DialogContent
|
||||
className="sm:max-w-[600px]"
|
||||
data-testid="import-export-dialog"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>导入/导出 Provider 配置</DialogTitle>
|
||||
<DialogDescription>
|
||||
导出当前 Provider 配置或从文件导入配置
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as TabValue)}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="export" data-testid="export-tab">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
导出
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="import" data-testid="import-tab">
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
导入
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 导出 Tab */}
|
||||
<TabsContent value="export" className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="include-keys"
|
||||
checked={includeKeys}
|
||||
onCheckedChange={(checked) => setIncludeKeys(checked === true)}
|
||||
data-testid="include-keys-checkbox"
|
||||
/>
|
||||
<Label htmlFor="include-keys" className="text-sm">
|
||||
包含 API Key 元数据（别名、启用状态，不包含实际 Key 值）
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
{!exportedConfig ? (
|
||||
<Button
|
||||
onClick={handleExport}
|
||||
disabled={exporting}
|
||||
className="w-full"
|
||||
data-testid="export-button"
|
||||
>
|
||||
{exporting ? "导出中..." : "生成导出配置"}
|
||||
</Button>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<Textarea
|
||||
value={exportedConfig}
|
||||
readOnly
|
||||
className="h-[200px] font-mono text-xs"
|
||||
data-testid="export-config-textarea"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCopy}
|
||||
className="flex-1"
|
||||
data-testid="copy-button"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
已复制
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
复制
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
className="flex-1"
|
||||
data-testid="download-button"
|
||||
>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
下载文件
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* 导入 Tab */}
|
||||
<TabsContent value="import" className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex-1"
|
||||
data-testid="select-file-button"
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
选择文件
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
data-testid="file-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
或粘贴配置 JSON
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
value={importConfig}
|
||||
onChange={(e) => {
|
||||
setImportConfig(e.target.value);
|
||||
setError(null);
|
||||
setImportResult(null);
|
||||
}}
|
||||
placeholder='{"version": "1.0", "providers": [...]}'
|
||||
className="h-[200px] font-mono text-xs"
|
||||
data-testid="import-config-textarea"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={handleImport}
|
||||
disabled={importing || !importConfig.trim()}
|
||||
className="w-full"
|
||||
data-testid="import-button"
|
||||
>
|
||||
{importing ? "导入中..." : "导入配置"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 导入结果 */}
|
||||
{importResult && (
|
||||
<div
|
||||
className={`p-3 rounded-lg text-sm ${
|
||||
importResult.success
|
||||
? "bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400"
|
||||
: "bg-yellow-50 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400"
|
||||
}`}
|
||||
data-testid="import-result"
|
||||
>
|
||||
<div className="font-medium mb-1">
|
||||
{importResult.success ? "导入完成" : "导入部分完成"}
|
||||
</div>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
<li>导入 Provider: {importResult.imported_providers} 个</li>
|
||||
<li>跳过（已存在）: {importResult.skipped_providers} 个</li>
|
||||
{importResult.errors.length > 0 && (
|
||||
<li className="text-red-600 dark:text-red-400">
|
||||
错误: {importResult.errors.join(", ")}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div
|
||||
className="flex items-center gap-2 p-3 rounded-lg bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-400 text-sm"
|
||||
data-testid="error-message"
|
||||
>
|
||||
<AlertCircle className="h-4 w-4 flex-shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
data-testid="close-button"
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImportExportDialog;
|
||||
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* @file ProviderConfigForm 属性测试
|
||||
* @description 测试 Provider 类型处理正确性
|
||||
* @module components/provider-pool/api-key/ProviderConfigForm.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 7: Provider 类型处理正确性**
|
||||
* **Validates: Requirements 5.1-5.5**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import {
|
||||
getFieldsForProviderType,
|
||||
providerTypeRequiresField,
|
||||
} from "./ProviderConfigForm";
|
||||
import type { ProviderType } from "@/lib/types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 所有有效的 Provider 类型
|
||||
*/
|
||||
const ALL_PROVIDER_TYPES: ProviderType[] = [
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
];
|
||||
|
||||
/**
|
||||
* 生成随机 Provider 类型
|
||||
*/
|
||||
const providerTypeArbitrary: fc.Arbitrary<ProviderType> = fc.constantFrom(
|
||||
...ALL_PROVIDER_TYPES,
|
||||
);
|
||||
|
||||
/**
|
||||
* Provider 类型与其额外字段的映射
|
||||
*/
|
||||
const EXPECTED_EXTRA_FIELDS: Record<ProviderType, string[]> = {
|
||||
openai: [],
|
||||
"openai-response": [],
|
||||
anthropic: [],
|
||||
gemini: [],
|
||||
"azure-openai": ["apiVersion"],
|
||||
vertexai: ["project", "location"],
|
||||
"aws-bedrock": ["region"],
|
||||
ollama: [],
|
||||
"new-api": [],
|
||||
gateway: [],
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Property 7: Provider 类型处理正确性
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 7: Provider 类型处理正确性", () => {
|
||||
/**
|
||||
* Property 7: Provider 类型处理正确性
|
||||
*
|
||||
* *对于任意* Provider Type，系统应使用对应的 API 调用方式，并显示该类型所需的额外配置字段
|
||||
*
|
||||
* **Validates: Requirements 5.1-5.5**
|
||||
*/
|
||||
test.prop([providerTypeArbitrary], { numRuns: 100 })(
|
||||
"每个 Provider 类型应返回正确的字段列表",
|
||||
(type: ProviderType) => {
|
||||
const fields = getFieldsForProviderType(type);
|
||||
|
||||
// 所有类型都应包含 apiHost 字段
|
||||
expect(fields).toContain("apiHost");
|
||||
|
||||
// 验证额外字段
|
||||
const expectedExtra = EXPECTED_EXTRA_FIELDS[type];
|
||||
for (const field of expectedExtra) {
|
||||
expect(fields).toContain(field);
|
||||
}
|
||||
|
||||
// 验证字段数量正确
|
||||
expect(fields.length).toBe(1 + expectedExtra.length);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerTypeArbitrary], { numRuns: 100 })(
|
||||
"apiHost 字段对所有 Provider 类型都是必需的",
|
||||
(type: ProviderType) => {
|
||||
expect(providerTypeRequiresField(type, "apiHost")).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerTypeArbitrary], { numRuns: 100 })(
|
||||
"Azure OpenAI 类型应需要 apiVersion 字段",
|
||||
(type: ProviderType) => {
|
||||
const requiresApiVersion = providerTypeRequiresField(type, "apiVersion");
|
||||
expect(requiresApiVersion).toBe(type === "azure-openai");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerTypeArbitrary], { numRuns: 100 })(
|
||||
"VertexAI 类型应需要 project 和 location 字段",
|
||||
(type: ProviderType) => {
|
||||
const requiresProject = providerTypeRequiresField(type, "project");
|
||||
const requiresLocation = providerTypeRequiresField(type, "location");
|
||||
|
||||
expect(requiresProject).toBe(type === "vertexai");
|
||||
expect(requiresLocation).toBe(type === "vertexai");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerTypeArbitrary], { numRuns: 100 })(
|
||||
"AWS Bedrock 类型应需要 region 字段",
|
||||
(type: ProviderType) => {
|
||||
const requiresRegion = providerTypeRequiresField(type, "region");
|
||||
expect(requiresRegion).toBe(type === "aws-bedrock");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerTypeArbitrary], { numRuns: 100 })(
|
||||
"标准 OpenAI 兼容类型不应需要额外字段",
|
||||
(type: ProviderType) => {
|
||||
const standardTypes: ProviderType[] = [
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
];
|
||||
|
||||
if (standardTypes.includes(type)) {
|
||||
const fields = getFieldsForProviderType(type);
|
||||
// 只应有 apiHost 字段
|
||||
expect(fields.length).toBe(1);
|
||||
expect(fields[0]).toBe("apiHost");
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 具体类型的单元测试
|
||||
describe("具体 Provider 类型字段验证", () => {
|
||||
test("openai 类型只需要 apiHost", () => {
|
||||
const fields = getFieldsForProviderType("openai");
|
||||
expect(fields).toEqual(["apiHost"]);
|
||||
});
|
||||
|
||||
test("openai-response 类型只需要 apiHost", () => {
|
||||
const fields = getFieldsForProviderType("openai-response");
|
||||
expect(fields).toEqual(["apiHost"]);
|
||||
});
|
||||
|
||||
test("anthropic 类型只需要 apiHost", () => {
|
||||
const fields = getFieldsForProviderType("anthropic");
|
||||
expect(fields).toEqual(["apiHost"]);
|
||||
});
|
||||
|
||||
test("gemini 类型只需要 apiHost", () => {
|
||||
const fields = getFieldsForProviderType("gemini");
|
||||
expect(fields).toEqual(["apiHost"]);
|
||||
});
|
||||
|
||||
test("azure-openai 类型需要 apiHost 和 apiVersion", () => {
|
||||
const fields = getFieldsForProviderType("azure-openai");
|
||||
expect(fields).toContain("apiHost");
|
||||
expect(fields).toContain("apiVersion");
|
||||
expect(fields.length).toBe(2);
|
||||
});
|
||||
|
||||
test("vertexai 类型需要 apiHost、project 和 location", () => {
|
||||
const fields = getFieldsForProviderType("vertexai");
|
||||
expect(fields).toContain("apiHost");
|
||||
expect(fields).toContain("project");
|
||||
expect(fields).toContain("location");
|
||||
expect(fields.length).toBe(3);
|
||||
});
|
||||
|
||||
test("aws-bedrock 类型需要 apiHost 和 region", () => {
|
||||
const fields = getFieldsForProviderType("aws-bedrock");
|
||||
expect(fields).toContain("apiHost");
|
||||
expect(fields).toContain("region");
|
||||
expect(fields.length).toBe(2);
|
||||
});
|
||||
|
||||
test("ollama 类型只需要 apiHost", () => {
|
||||
const fields = getFieldsForProviderType("ollama");
|
||||
expect(fields).toEqual(["apiHost"]);
|
||||
});
|
||||
|
||||
test("new-api 类型只需要 apiHost", () => {
|
||||
const fields = getFieldsForProviderType("new-api");
|
||||
expect(fields).toEqual(["apiHost"]);
|
||||
});
|
||||
|
||||
test("gateway 类型只需要 apiHost", () => {
|
||||
const fields = getFieldsForProviderType("gateway");
|
||||
expect(fields).toEqual(["apiHost"]);
|
||||
});
|
||||
});
|
||||
|
||||
// 边界情况测试
|
||||
describe("边界情况", () => {
|
||||
test("所有 Provider 类型都应被支持", () => {
|
||||
for (const type of ALL_PROVIDER_TYPES) {
|
||||
const fields = getFieldsForProviderType(type);
|
||||
expect(Array.isArray(fields)).toBe(true);
|
||||
expect(fields.length).toBeGreaterThan(0);
|
||||
}
|
||||
});
|
||||
|
||||
test("不存在的字段应返回 false", () => {
|
||||
for (const type of ALL_PROVIDER_TYPES) {
|
||||
expect(providerTypeRequiresField(type, "nonExistentField")).toBe(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,384 @@
|
||||
/**
|
||||
* @file ProviderConfigForm 组件
|
||||
* @description Provider 配置表单组件，显示 API Host 和根据 Provider Type 显示额外字段
|
||||
* @module components/provider-pool/api-key/ProviderConfigForm
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 4.1, 4.2, 5.3-5.5**
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type {
|
||||
ProviderWithKeysDisplay,
|
||||
UpdateProviderRequest,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
import type { ProviderType } from "@/lib/types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// 常量
|
||||
// ============================================================================
|
||||
|
||||
/** 防抖延迟时间（毫秒） */
|
||||
const DEBOUNCE_DELAY = 500;
|
||||
|
||||
/** Provider 类型对应的额外字段配置 */
|
||||
const PROVIDER_TYPE_FIELDS: Record<ProviderType, string[]> = {
|
||||
openai: [],
|
||||
"openai-response": [],
|
||||
anthropic: [],
|
||||
gemini: [],
|
||||
"azure-openai": ["apiVersion"],
|
||||
vertexai: ["project", "location"],
|
||||
"aws-bedrock": ["region"],
|
||||
ollama: [],
|
||||
"new-api": [],
|
||||
gateway: [],
|
||||
};
|
||||
|
||||
/** 字段标签映射 */
|
||||
const FIELD_LABELS: Record<string, string> = {
|
||||
apiHost: "API Host",
|
||||
apiVersion: "API Version",
|
||||
project: "Project ID",
|
||||
location: "Location",
|
||||
region: "Region",
|
||||
};
|
||||
|
||||
/** 字段占位符映射 */
|
||||
const FIELD_PLACEHOLDERS: Record<string, string> = {
|
||||
apiHost: "https://api.example.com",
|
||||
apiVersion: "2024-02-15-preview",
|
||||
project: "your-project-id",
|
||||
location: "us-central1",
|
||||
region: "us-east-1",
|
||||
};
|
||||
|
||||
/** 字段帮助文本映射 */
|
||||
const FIELD_HELP_TEXT: Record<string, string> = {
|
||||
apiHost: "API 服务的基础 URL",
|
||||
apiVersion: "Azure OpenAI API 版本",
|
||||
project: "Google Cloud 项目 ID",
|
||||
location: "VertexAI 服务位置",
|
||||
region: "AWS Bedrock 区域",
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ProviderConfigFormProps {
|
||||
/** Provider 数据 */
|
||||
provider: ProviderWithKeysDisplay;
|
||||
/** 更新回调 */
|
||||
onUpdate?: (id: string, request: UpdateProviderRequest) => Promise<void>;
|
||||
/** 是否正在加载 */
|
||||
loading?: boolean;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface FormState {
|
||||
apiHost: string;
|
||||
apiVersion: string;
|
||||
project: string;
|
||||
location: string;
|
||||
region: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 配置表单组件
|
||||
*
|
||||
* 显示 Provider 的配置字段，包括：
|
||||
* - API Host（所有 Provider 都有）
|
||||
* - 根据 Provider Type 显示额外字段：
|
||||
* - Azure OpenAI: API Version
|
||||
* - VertexAI: Project, Location
|
||||
* - AWS Bedrock: Region
|
||||
*
|
||||
* 支持自动保存（防抖）。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ProviderConfigForm
|
||||
* provider={provider}
|
||||
* onUpdate={updateProvider}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderConfigForm: React.FC<ProviderConfigFormProps> = ({
|
||||
provider,
|
||||
onUpdate,
|
||||
loading = false,
|
||||
className,
|
||||
}) => {
|
||||
// 表单状态
|
||||
const [formState, setFormState] = useState<FormState>({
|
||||
apiHost: provider.api_host || "",
|
||||
apiVersion: provider.api_version || "",
|
||||
project: provider.project || "",
|
||||
location: provider.location || "",
|
||||
region: provider.region || "",
|
||||
});
|
||||
|
||||
// 保存状态
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [lastSaved, setLastSaved] = useState<Date | null>(null);
|
||||
|
||||
// 防抖定时器
|
||||
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// 当 provider 变化时，重置表单状态
|
||||
useEffect(() => {
|
||||
setFormState({
|
||||
apiHost: provider.api_host || "",
|
||||
apiVersion: provider.api_version || "",
|
||||
project: provider.project || "",
|
||||
location: provider.location || "",
|
||||
region: provider.region || "",
|
||||
});
|
||||
setSaveError(null);
|
||||
}, [
|
||||
provider.id,
|
||||
provider.api_host,
|
||||
provider.api_version,
|
||||
provider.project,
|
||||
provider.location,
|
||||
provider.region,
|
||||
]);
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = useCallback(
|
||||
async (state: FormState) => {
|
||||
if (!onUpdate) return;
|
||||
|
||||
setIsSaving(true);
|
||||
setSaveError(null);
|
||||
|
||||
try {
|
||||
const request: UpdateProviderRequest = {
|
||||
api_host: state.apiHost || undefined,
|
||||
api_version: state.apiVersion || undefined,
|
||||
project: state.project || undefined,
|
||||
location: state.location || undefined,
|
||||
region: state.region || undefined,
|
||||
};
|
||||
|
||||
await onUpdate(provider.id, request);
|
||||
setLastSaved(new Date());
|
||||
} catch (e) {
|
||||
setSaveError(e instanceof Error ? e.message : "保存失败");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
},
|
||||
[provider.id, onUpdate],
|
||||
);
|
||||
|
||||
// 防抖保存
|
||||
const debouncedSave = useCallback(
|
||||
(state: FormState) => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
saveConfig(state);
|
||||
}, DEBOUNCE_DELAY);
|
||||
},
|
||||
[saveConfig],
|
||||
);
|
||||
|
||||
// 清理定时器
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 处理字段变化
|
||||
const handleFieldChange = (field: keyof FormState, value: string) => {
|
||||
const newState = { ...formState, [field]: value };
|
||||
setFormState(newState);
|
||||
debouncedSave(newState);
|
||||
};
|
||||
|
||||
// 获取当前 Provider 类型需要显示的额外字段
|
||||
const providerType = provider.type as ProviderType;
|
||||
const extraFields = PROVIDER_TYPE_FIELDS[providerType] || [];
|
||||
|
||||
// 格式化最后保存时间
|
||||
const formatLastSaved = (date: Date | null): string => {
|
||||
if (!date) return "";
|
||||
return `已保存于 ${date.toLocaleTimeString("zh-CN")}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("space-y-4", className)}
|
||||
data-testid="provider-config-form"
|
||||
>
|
||||
{/* API Host 字段（所有 Provider 都有） */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="api-host" className="text-sm font-medium">
|
||||
{FIELD_LABELS.apiHost}
|
||||
</Label>
|
||||
<Input
|
||||
id="api-host"
|
||||
type="text"
|
||||
value={formState.apiHost}
|
||||
onChange={(e) => handleFieldChange("apiHost", e.target.value)}
|
||||
placeholder={FIELD_PLACEHOLDERS.apiHost}
|
||||
disabled={loading || isSaving}
|
||||
data-testid="api-host-input"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{FIELD_HELP_TEXT.apiHost}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Azure OpenAI: API Version */}
|
||||
{extraFields.includes("apiVersion") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="api-version" className="text-sm font-medium">
|
||||
{FIELD_LABELS.apiVersion}
|
||||
</Label>
|
||||
<Input
|
||||
id="api-version"
|
||||
type="text"
|
||||
value={formState.apiVersion}
|
||||
onChange={(e) => handleFieldChange("apiVersion", e.target.value)}
|
||||
placeholder={FIELD_PLACEHOLDERS.apiVersion}
|
||||
disabled={loading || isSaving}
|
||||
data-testid="api-version-input"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{FIELD_HELP_TEXT.apiVersion}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* VertexAI: Project */}
|
||||
{extraFields.includes("project") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="project" className="text-sm font-medium">
|
||||
{FIELD_LABELS.project}
|
||||
</Label>
|
||||
<Input
|
||||
id="project"
|
||||
type="text"
|
||||
value={formState.project}
|
||||
onChange={(e) => handleFieldChange("project", e.target.value)}
|
||||
placeholder={FIELD_PLACEHOLDERS.project}
|
||||
disabled={loading || isSaving}
|
||||
data-testid="project-input"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{FIELD_HELP_TEXT.project}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* VertexAI: Location */}
|
||||
{extraFields.includes("location") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="location" className="text-sm font-medium">
|
||||
{FIELD_LABELS.location}
|
||||
</Label>
|
||||
<Input
|
||||
id="location"
|
||||
type="text"
|
||||
value={formState.location}
|
||||
onChange={(e) => handleFieldChange("location", e.target.value)}
|
||||
placeholder={FIELD_PLACEHOLDERS.location}
|
||||
disabled={loading || isSaving}
|
||||
data-testid="location-input"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{FIELD_HELP_TEXT.location}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AWS Bedrock: Region */}
|
||||
{extraFields.includes("region") && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="region" className="text-sm font-medium">
|
||||
{FIELD_LABELS.region}
|
||||
</Label>
|
||||
<Input
|
||||
id="region"
|
||||
type="text"
|
||||
value={formState.region}
|
||||
onChange={(e) => handleFieldChange("region", e.target.value)}
|
||||
placeholder={FIELD_PLACEHOLDERS.region}
|
||||
disabled={loading || isSaving}
|
||||
data-testid="region-input"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{FIELD_HELP_TEXT.region}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 保存状态指示 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
{isSaving ? (
|
||||
<span
|
||||
className="text-muted-foreground"
|
||||
data-testid="saving-indicator"
|
||||
>
|
||||
保存中...
|
||||
</span>
|
||||
) : saveError ? (
|
||||
<span className="text-red-500" data-testid="save-error">
|
||||
{saveError}
|
||||
</span>
|
||||
) : lastSaved ? (
|
||||
<span className="text-green-600" data-testid="save-success">
|
||||
{formatLastSaved(lastSaved)}
|
||||
</span>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取指定 Provider 类型需要显示的字段列表
|
||||
* 用于属性测试验证 Provider 类型处理正确性
|
||||
*/
|
||||
export function getFieldsForProviderType(type: ProviderType): string[] {
|
||||
const baseFields = ["apiHost"];
|
||||
const extraFields = PROVIDER_TYPE_FIELDS[type] || [];
|
||||
return [...baseFields, ...extraFields];
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证 Provider 类型是否需要特定字段
|
||||
*/
|
||||
export function providerTypeRequiresField(
|
||||
type: ProviderType,
|
||||
field: string,
|
||||
): boolean {
|
||||
if (field === "apiHost") return true;
|
||||
const extraFields = PROVIDER_TYPE_FIELDS[type] || [];
|
||||
return extraFields.includes(field);
|
||||
}
|
||||
|
||||
export default ProviderConfigForm;
|
||||
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* @file ProviderGroup 组件
|
||||
* @description Provider 分组组件，支持折叠/展开和显示分组标题
|
||||
* @module components/provider-pool/api-key/ProviderGroup
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 8.1, 8.3**
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PROVIDER_GROUPS } from "@/lib/config/providers";
|
||||
import type { ProviderGroup as ProviderGroupType } from "@/lib/types/provider";
|
||||
import type { ProviderWithKeysDisplay } from "@/lib/api/apiKeyProvider";
|
||||
import { ProviderListItem } from "./ProviderListItem";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ProviderGroupProps {
|
||||
/** 分组类型 */
|
||||
group: ProviderGroupType;
|
||||
/** 该分组下的 Provider 列表 */
|
||||
providers: ProviderWithKeysDisplay[];
|
||||
/** 是否折叠 */
|
||||
collapsed?: boolean;
|
||||
/** 折叠/展开回调 */
|
||||
onToggle?: () => void;
|
||||
/** 当前选中的 Provider ID */
|
||||
selectedProviderId?: string | null;
|
||||
/** Provider 点击回调 */
|
||||
onProviderSelect?: (id: string) => void;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 分组组件
|
||||
*
|
||||
* 显示一个可折叠的 Provider 分组，包含分组标题和 Provider 列表。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ProviderGroup
|
||||
* group="mainstream"
|
||||
* providers={mainstreamProviders}
|
||||
* collapsed={collapsedGroups.has("mainstream")}
|
||||
* onToggle={() => toggleGroup("mainstream")}
|
||||
* selectedProviderId={selectedId}
|
||||
* onProviderSelect={setSelectedId}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderGroup: React.FC<ProviderGroupProps> = ({
|
||||
group,
|
||||
providers,
|
||||
collapsed = false,
|
||||
onToggle,
|
||||
selectedProviderId,
|
||||
onProviderSelect,
|
||||
className,
|
||||
}) => {
|
||||
// 获取分组配置
|
||||
const groupConfig = PROVIDER_GROUPS[group];
|
||||
const groupLabel = groupConfig?.label ?? group;
|
||||
const providerCount = providers.length;
|
||||
|
||||
// 如果分组为空，不渲染
|
||||
if (providerCount === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("mb-2", className)}
|
||||
data-testid="provider-group"
|
||||
data-group={group}
|
||||
data-collapsed={collapsed}
|
||||
>
|
||||
{/* 分组标题 */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className={cn(
|
||||
"flex items-center gap-2 w-full px-3 py-2 rounded-lg",
|
||||
"text-sm font-medium text-muted-foreground",
|
||||
"hover:bg-muted/50 transition-colors",
|
||||
"focus:outline-none focus:ring-2 focus:ring-primary/20",
|
||||
)}
|
||||
aria-expanded={!collapsed}
|
||||
aria-controls={`provider-group-${group}-content`}
|
||||
data-testid="provider-group-header"
|
||||
>
|
||||
{/* 折叠图标 */}
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-4 w-4 flex-shrink-0" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 flex-shrink-0" />
|
||||
)}
|
||||
|
||||
{/* 分组标题 */}
|
||||
<span className="flex-1 text-left" data-testid="provider-group-label">
|
||||
{groupLabel}
|
||||
</span>
|
||||
|
||||
{/* Provider 数量 */}
|
||||
<span
|
||||
className="text-xs text-muted-foreground/70"
|
||||
data-testid="provider-group-count"
|
||||
>
|
||||
{providerCount}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Provider 列表 */}
|
||||
{!collapsed && (
|
||||
<div
|
||||
id={`provider-group-${group}-content`}
|
||||
className="mt-1 space-y-0.5 pl-2"
|
||||
data-testid="provider-group-content"
|
||||
>
|
||||
{providers.map((provider) => (
|
||||
<ProviderListItem
|
||||
key={provider.id}
|
||||
provider={provider}
|
||||
selected={selectedProviderId === provider.id}
|
||||
onClick={() => onProviderSelect?.(provider.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取分组的显示标签
|
||||
* 用于属性测试验证分组正确性
|
||||
*/
|
||||
export function getGroupLabel(group: ProviderGroupType): string {
|
||||
return PROVIDER_GROUPS[group]?.label ?? group;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查 Provider 是否属于指定分组
|
||||
* 用于属性测试验证分组正确性
|
||||
*/
|
||||
export function isProviderInGroup(
|
||||
provider: ProviderWithKeysDisplay,
|
||||
group: ProviderGroupType,
|
||||
): boolean {
|
||||
return provider.group === group;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取分组的排序顺序
|
||||
* 用于属性测试验证分组排序
|
||||
*/
|
||||
export function getGroupOrder(group: ProviderGroupType): number {
|
||||
return PROVIDER_GROUPS[group]?.order ?? 999;
|
||||
}
|
||||
|
||||
export default ProviderGroup;
|
||||
@@ -0,0 +1,528 @@
|
||||
/**
|
||||
* @file ProviderList 属性测试
|
||||
* @description 测试 Provider 分组正确性和搜索正确性
|
||||
* @module components/provider-pool/api-key/ProviderList.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 10: 自定义 Provider 分组显示**
|
||||
* **Property 14: Provider 分组正确性**
|
||||
* **Property 15: Provider 搜索正确性**
|
||||
* **Validates: Requirements 6.5, 8.1, 8.2**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import {
|
||||
filterProviders,
|
||||
groupProviders,
|
||||
matchesSearchQuery,
|
||||
} from "./ProviderList";
|
||||
import { isProviderInGroup } from "./ProviderGroup";
|
||||
import type {
|
||||
ProviderWithKeysDisplay,
|
||||
ApiKeyDisplay,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
import type { ProviderGroup } from "@/lib/types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成有效的 ISO 日期字符串
|
||||
*/
|
||||
const validDateArbitrary = fc
|
||||
.integer({
|
||||
min: new Date("2020-01-01").getTime(),
|
||||
max: new Date("2030-12-31").getTime(),
|
||||
})
|
||||
.map((timestamp) => new Date(timestamp).toISOString());
|
||||
|
||||
/**
|
||||
* 有效的分组类型
|
||||
*/
|
||||
const validGroups: ProviderGroup[] = [
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
];
|
||||
|
||||
/**
|
||||
* 生成随机 API Key 显示数据
|
||||
*/
|
||||
const apiKeyDisplayArbitrary: fc.Arbitrary<ApiKeyDisplay> = fc.record({
|
||||
id: fc.uuid(),
|
||||
provider_id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
api_key_masked: fc
|
||||
.string({ minLength: 1, maxLength: 20 })
|
||||
.map((s) => `sk-****${s}`),
|
||||
alias: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
enabled: fc.boolean(),
|
||||
usage_count: fc.nat({ max: 10000 }),
|
||||
error_count: fc.nat({ max: 1000 }),
|
||||
last_used_at: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
created_at: validDateArbitrary,
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成随机 Provider 显示数据（包含 API Keys）
|
||||
*/
|
||||
const providerWithKeysArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> =
|
||||
fc.record({
|
||||
id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
name: fc.string({ minLength: 1, maxLength: 100 }),
|
||||
type: fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
),
|
||||
api_host: fc.webUrl(),
|
||||
is_system: fc.boolean(),
|
||||
group: fc.constantFrom(...validGroups),
|
||||
enabled: fc.boolean(),
|
||||
sort_order: fc.nat({ max: 100 }),
|
||||
api_version: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
api_key_count: fc.nat({ max: 20 }),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
api_keys: fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 5 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成 Provider 列表
|
||||
*/
|
||||
const providerListArbitrary = fc.array(providerWithKeysArbitrary, {
|
||||
minLength: 0,
|
||||
maxLength: 20,
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成自定义 Provider（is_system = false, group = "custom"）
|
||||
*/
|
||||
const customProviderArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> =
|
||||
fc.record({
|
||||
id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
name: fc.string({ minLength: 1, maxLength: 100 }),
|
||||
type: fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
),
|
||||
api_host: fc.webUrl(),
|
||||
is_system: fc.constant(false), // 自定义 Provider
|
||||
group: fc.constant("custom") as fc.Arbitrary<ProviderGroup>, // 必须在 custom 分组
|
||||
enabled: fc.boolean(),
|
||||
sort_order: fc.nat({ max: 100 }),
|
||||
api_version: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
api_key_count: fc.nat({ max: 20 }),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
api_keys: fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 5 }),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成自定义 Provider 列表
|
||||
*/
|
||||
const customProviderListArbitrary = fc.array(customProviderArbitrary, {
|
||||
minLength: 1,
|
||||
maxLength: 10,
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成搜索查询字符串
|
||||
*/
|
||||
const searchQueryArbitrary = fc.string({ minLength: 0, maxLength: 50 });
|
||||
|
||||
// ============================================================================
|
||||
// Property 14: Provider 分组正确性
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 14: Provider 分组正确性", () => {
|
||||
/**
|
||||
* Property 14: Provider 分组正确性
|
||||
*
|
||||
* *对于任意* Provider，应被分配到正确的分组中
|
||||
*
|
||||
* **Validates: Requirements 8.1**
|
||||
*/
|
||||
test.prop([providerListArbitrary], { numRuns: 100 })(
|
||||
"每个 Provider 应被分配到其 group 属性指定的分组中",
|
||||
(providers: ProviderWithKeysDisplay[]) => {
|
||||
const grouped = groupProviders(providers);
|
||||
|
||||
// 验证每个 Provider 都在正确的分组中
|
||||
providers.forEach((provider) => {
|
||||
const expectedGroup = provider.group as ProviderGroup;
|
||||
const groupList = grouped.get(expectedGroup);
|
||||
|
||||
// 分组应该存在
|
||||
expect(groupList).toBeDefined();
|
||||
|
||||
// Provider 应该在该分组中
|
||||
const found = groupList?.some((p) => p.id === provider.id);
|
||||
expect(found).toBe(true);
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary, fc.constantFrom(...validGroups)], {
|
||||
numRuns: 100,
|
||||
})(
|
||||
"isProviderInGroup 应正确判断 Provider 是否属于指定分组",
|
||||
(provider: ProviderWithKeysDisplay, group: ProviderGroup) => {
|
||||
const result = isProviderInGroup(provider, group);
|
||||
const expected = provider.group === group;
|
||||
|
||||
expect(result).toBe(expected);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerListArbitrary], { numRuns: 100 })(
|
||||
"分组后的 Provider 总数应等于原始列表长度",
|
||||
(providers: ProviderWithKeysDisplay[]) => {
|
||||
const grouped = groupProviders(providers);
|
||||
|
||||
let totalCount = 0;
|
||||
grouped.forEach((list) => {
|
||||
totalCount += list.length;
|
||||
});
|
||||
|
||||
expect(totalCount).toBe(providers.length);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerListArbitrary], { numRuns: 100 })(
|
||||
"每个分组内的 Provider 应按 sort_order 排序",
|
||||
(providers: ProviderWithKeysDisplay[]) => {
|
||||
const grouped = groupProviders(providers);
|
||||
|
||||
grouped.forEach((list) => {
|
||||
for (let i = 1; i < list.length; i++) {
|
||||
expect(list[i].sort_order).toBeGreaterThanOrEqual(
|
||||
list[i - 1].sort_order,
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
test("所有有效分组都应在结果中存在", () => {
|
||||
const grouped = groupProviders([]);
|
||||
|
||||
validGroups.forEach((group) => {
|
||||
expect(grouped.has(group)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Property 15: Provider 搜索正确性
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 15: Provider 搜索正确性", () => {
|
||||
/**
|
||||
* Property 15: Provider 搜索正确性
|
||||
*
|
||||
* *对于任意* 搜索查询，返回的 Provider 列表应只包含名称匹配的 Provider
|
||||
*
|
||||
* **Validates: Requirements 8.2**
|
||||
*/
|
||||
test.prop([providerListArbitrary, searchQueryArbitrary], { numRuns: 100 })(
|
||||
"过滤后的 Provider 应都匹配搜索查询",
|
||||
(providers: ProviderWithKeysDisplay[], query: string) => {
|
||||
const filtered = filterProviders(providers, query);
|
||||
|
||||
// 所有过滤后的 Provider 都应匹配查询
|
||||
filtered.forEach((provider) => {
|
||||
expect(matchesSearchQuery(provider, query)).toBe(true);
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerListArbitrary, searchQueryArbitrary], { numRuns: 100 })(
|
||||
"过滤后的 Provider 数量应小于等于原始数量",
|
||||
(providers: ProviderWithKeysDisplay[], query: string) => {
|
||||
const filtered = filterProviders(providers, query);
|
||||
|
||||
expect(filtered.length).toBeLessThanOrEqual(providers.length);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerListArbitrary], { numRuns: 100 })(
|
||||
"空查询应返回所有 Provider",
|
||||
(providers: ProviderWithKeysDisplay[]) => {
|
||||
const filtered = filterProviders(providers, "");
|
||||
|
||||
expect(filtered.length).toBe(providers.length);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerListArbitrary], { numRuns: 100 })(
|
||||
"空白查询应返回所有 Provider",
|
||||
(providers: ProviderWithKeysDisplay[]) => {
|
||||
const filtered = filterProviders(providers, " ");
|
||||
|
||||
expect(filtered.length).toBe(providers.length);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"使用 Provider 名称搜索应返回该 Provider",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const providers = [provider];
|
||||
const filtered = filterProviders(providers, provider.name);
|
||||
|
||||
expect(filtered.length).toBe(1);
|
||||
expect(filtered[0].id).toBe(provider.id);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"使用 Provider ID 搜索应返回该 Provider",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const providers = [provider];
|
||||
const filtered = filterProviders(providers, provider.id);
|
||||
|
||||
expect(filtered.length).toBe(1);
|
||||
expect(filtered[0].id).toBe(provider.id);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"搜索应不区分大小写",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const providers = [provider];
|
||||
|
||||
// 使用大写名称搜索
|
||||
const filteredUpper = filterProviders(
|
||||
providers,
|
||||
provider.name.toUpperCase(),
|
||||
);
|
||||
// 使用小写名称搜索
|
||||
const filteredLower = filterProviders(
|
||||
providers,
|
||||
provider.name.toLowerCase(),
|
||||
);
|
||||
|
||||
expect(filteredUpper.length).toBe(1);
|
||||
expect(filteredLower.length).toBe(1);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"matchesSearchQuery 应对空查询返回 true",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(matchesSearchQuery(provider, "")).toBe(true);
|
||||
expect(matchesSearchQuery(provider, " ")).toBe(true);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Property 10: 自定义 Provider 分组显示
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 10: 自定义 Provider 分组显示", () => {
|
||||
/**
|
||||
* Property 10: 自定义 Provider 分组显示
|
||||
*
|
||||
* *对于任意* 自定义 Provider，应显示在 Provider 列表的「自定义」分组中
|
||||
*
|
||||
* **Validates: Requirements 6.5**
|
||||
*/
|
||||
test.prop([customProviderListArbitrary], { numRuns: 100 })(
|
||||
"自定义 Provider 应被分配到 custom 分组",
|
||||
(customProviders: ProviderWithKeysDisplay[]) => {
|
||||
const grouped = groupProviders(customProviders);
|
||||
const customGroup = grouped.get("custom");
|
||||
|
||||
// custom 分组应该存在
|
||||
expect(customGroup).toBeDefined();
|
||||
|
||||
// 所有自定义 Provider 都应在 custom 分组中
|
||||
customProviders.forEach((provider) => {
|
||||
const found = customGroup?.some((p) => p.id === provider.id);
|
||||
expect(found).toBe(true);
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([customProviderArbitrary], { numRuns: 100 })(
|
||||
"自定义 Provider 的 group 属性应为 custom",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(provider.group).toBe("custom");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([customProviderArbitrary], { numRuns: 100 })(
|
||||
"自定义 Provider 的 is_system 属性应为 false",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(provider.is_system).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([customProviderArbitrary], { numRuns: 100 })(
|
||||
"isProviderInGroup 应正确识别自定义 Provider 属于 custom 分组",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(isProviderInGroup(provider, "custom")).toBe(true);
|
||||
expect(isProviderInGroup(provider, "mainstream")).toBe(false);
|
||||
expect(isProviderInGroup(provider, "chinese")).toBe(false);
|
||||
expect(isProviderInGroup(provider, "cloud")).toBe(false);
|
||||
expect(isProviderInGroup(provider, "aggregator")).toBe(false);
|
||||
expect(isProviderInGroup(provider, "local")).toBe(false);
|
||||
expect(isProviderInGroup(provider, "specialized")).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerListArbitrary, customProviderListArbitrary], {
|
||||
numRuns: 100,
|
||||
})(
|
||||
"混合列表中自定义 Provider 应只出现在 custom 分组",
|
||||
(
|
||||
otherProviders: ProviderWithKeysDisplay[],
|
||||
customProviders: ProviderWithKeysDisplay[],
|
||||
) => {
|
||||
// 确保 customProviders 的 ID 是唯一的，不与 otherProviders 重复
|
||||
const customIds = new Set(customProviders.map((p) => p.id));
|
||||
const filteredOtherProviders = otherProviders.filter(
|
||||
(p) => !customIds.has(p.id),
|
||||
);
|
||||
|
||||
const allProviders = [...filteredOtherProviders, ...customProviders];
|
||||
const grouped = groupProviders(allProviders);
|
||||
const customGroup = grouped.get("custom");
|
||||
|
||||
// 验证所有自定义 Provider 都在 custom 分组中
|
||||
customProviders.forEach((provider) => {
|
||||
const found = customGroup?.some((p) => p.id === provider.id);
|
||||
expect(found).toBe(true);
|
||||
});
|
||||
|
||||
// 验证自定义 Provider 不在其他分组中
|
||||
// 注意：这里只检查 customProviders 列表中的 Provider
|
||||
const nonCustomGroups: ProviderGroup[] = [
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
];
|
||||
|
||||
customProviders.forEach((provider) => {
|
||||
nonCustomGroups.forEach((group) => {
|
||||
const groupList = grouped.get(group);
|
||||
const found = groupList?.some((p) => p.id === provider.id);
|
||||
expect(found).toBe(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
test("空的自定义 Provider 列表应返回空的 custom 分组", () => {
|
||||
const grouped = groupProviders([]);
|
||||
const customGroup = grouped.get("custom");
|
||||
|
||||
expect(customGroup).toBeDefined();
|
||||
expect(customGroup?.length).toBe(0);
|
||||
});
|
||||
|
||||
test("自定义 Provider 应按 sort_order 排序", () => {
|
||||
const customProviders: ProviderWithKeysDisplay[] = [
|
||||
{
|
||||
id: "custom-3",
|
||||
name: "Custom 3",
|
||||
type: "openai",
|
||||
api_host: "https://api3.example.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 30,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
},
|
||||
{
|
||||
id: "custom-1",
|
||||
name: "Custom 1",
|
||||
type: "openai",
|
||||
api_host: "https://api1.example.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 10,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
},
|
||||
{
|
||||
id: "custom-2",
|
||||
name: "Custom 2",
|
||||
type: "openai",
|
||||
api_host: "https://api2.example.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 20,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
},
|
||||
];
|
||||
|
||||
const grouped = groupProviders(customProviders);
|
||||
const customGroup = grouped.get("custom");
|
||||
|
||||
expect(customGroup).toBeDefined();
|
||||
expect(customGroup?.length).toBe(3);
|
||||
expect(customGroup?.[0].id).toBe("custom-1");
|
||||
expect(customGroup?.[1].id).toBe("custom-2");
|
||||
expect(customGroup?.[2].id).toBe("custom-3");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,288 @@
|
||||
/**
|
||||
* @file ProviderList 组件
|
||||
* @description Provider 列表组件，集成搜索框、分组显示和拖拽排序
|
||||
* @module components/provider-pool/api-key/ProviderList
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 1.2, 1.5, 8.1, 8.2**
|
||||
*/
|
||||
|
||||
import React, { useMemo } from "react";
|
||||
import { Search, Plus, Settings2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PROVIDER_GROUPS } from "@/lib/config/providers";
|
||||
import type { ProviderGroup as ProviderGroupType } from "@/lib/types/provider";
|
||||
import type { ProviderWithKeysDisplay } from "@/lib/api/apiKeyProvider";
|
||||
import { ProviderGroup } from "./ProviderGroup";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ProviderListProps {
|
||||
/** Provider 列表（按分组组织） */
|
||||
providersByGroup: Map<ProviderGroupType, ProviderWithKeysDisplay[]>;
|
||||
/** 当前选中的 Provider ID */
|
||||
selectedProviderId?: string | null;
|
||||
/** Provider 选择回调 */
|
||||
onProviderSelect?: (id: string) => void;
|
||||
/** 搜索查询 */
|
||||
searchQuery?: string;
|
||||
/** 搜索查询变更回调 */
|
||||
onSearchChange?: (query: string) => void;
|
||||
/** 折叠的分组集合 */
|
||||
collapsedGroups?: Set<ProviderGroupType>;
|
||||
/** 分组折叠/展开回调 */
|
||||
onToggleGroup?: (group: ProviderGroupType) => void;
|
||||
/** 添加自定义 Provider 回调 */
|
||||
onAddCustomProvider?: () => void;
|
||||
/** 导入导出回调 */
|
||||
onImportExport?: () => void;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 分组排序
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取排序后的分组列表
|
||||
*/
|
||||
function getSortedGroups(): ProviderGroupType[] {
|
||||
return (
|
||||
Object.entries(PROVIDER_GROUPS) as [ProviderGroupType, { order: number }][]
|
||||
)
|
||||
.sort((a, b) => a[1].order - b[1].order)
|
||||
.map(([group]) => group);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 列表组件
|
||||
*
|
||||
* 显示所有 Provider，支持搜索过滤、分组显示和折叠/展开。
|
||||
* 固定宽度约 240px，用于左右分栏布局的左侧。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ProviderList
|
||||
* providersByGroup={providersByGroup}
|
||||
* selectedProviderId={selectedId}
|
||||
* onProviderSelect={setSelectedId}
|
||||
* searchQuery={searchQuery}
|
||||
* onSearchChange={setSearchQuery}
|
||||
* collapsedGroups={collapsedGroups}
|
||||
* onToggleGroup={toggleGroup}
|
||||
* onAddCustomProvider={() => setShowAddModal(true)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderList: React.FC<ProviderListProps> = ({
|
||||
providersByGroup,
|
||||
selectedProviderId,
|
||||
onProviderSelect,
|
||||
searchQuery = "",
|
||||
onSearchChange,
|
||||
collapsedGroups = new Set(),
|
||||
onToggleGroup,
|
||||
onAddCustomProvider,
|
||||
onImportExport,
|
||||
className,
|
||||
}) => {
|
||||
// 获取排序后的分组
|
||||
const sortedGroups = useMemo(() => getSortedGroups(), []);
|
||||
|
||||
// 计算总 Provider 数量
|
||||
const totalProviders = useMemo(() => {
|
||||
let count = 0;
|
||||
providersByGroup.forEach((providers) => {
|
||||
count += providers.length;
|
||||
});
|
||||
return count;
|
||||
}, [providersByGroup]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col h-full w-60 border-r border-border bg-background",
|
||||
className,
|
||||
)}
|
||||
data-testid="provider-list"
|
||||
>
|
||||
{/* 搜索框 */}
|
||||
<div className="p-3 border-b border-border">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索 Provider..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange?.(e.target.value)}
|
||||
className={cn(
|
||||
"w-full pl-9 pr-3 py-2 text-sm rounded-lg",
|
||||
"bg-muted/50 border border-transparent",
|
||||
"placeholder:text-muted-foreground/60",
|
||||
"focus:outline-none focus:border-primary/30 focus:bg-background",
|
||||
"transition-colors",
|
||||
)}
|
||||
data-testid="provider-search-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Provider 分组列表 */}
|
||||
<div
|
||||
className="flex-1 overflow-y-auto p-2"
|
||||
data-testid="provider-groups-container"
|
||||
>
|
||||
{totalProviders === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-32 text-muted-foreground text-sm">
|
||||
<p>未找到 Provider</p>
|
||||
{searchQuery && <p className="text-xs mt-1">尝试其他搜索词</p>}
|
||||
</div>
|
||||
) : (
|
||||
sortedGroups.map((group) => {
|
||||
const providers = providersByGroup.get(group) ?? [];
|
||||
if (providers.length === 0) return null;
|
||||
|
||||
return (
|
||||
<ProviderGroup
|
||||
key={group}
|
||||
group={group}
|
||||
providers={providers}
|
||||
collapsed={collapsedGroups.has(group)}
|
||||
onToggle={() => onToggleGroup?.(group)}
|
||||
selectedProviderId={selectedProviderId}
|
||||
onProviderSelect={onProviderSelect}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 添加自定义 Provider 按钮 */}
|
||||
{(onAddCustomProvider || onImportExport) && (
|
||||
<div className="p-3 border-t border-border space-y-2">
|
||||
{onAddCustomProvider && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAddCustomProvider}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg",
|
||||
"text-sm font-medium text-primary",
|
||||
"bg-primary/10 hover:bg-primary/20",
|
||||
"transition-colors",
|
||||
"focus:outline-none focus:ring-2 focus:ring-primary/20",
|
||||
)}
|
||||
data-testid="add-custom-provider-button"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
添加自定义 Provider
|
||||
</button>
|
||||
)}
|
||||
{onImportExport && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onImportExport}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg",
|
||||
"text-sm font-medium text-muted-foreground",
|
||||
"bg-muted/50 hover:bg-muted",
|
||||
"transition-colors",
|
||||
"focus:outline-none focus:ring-2 focus:ring-muted/20",
|
||||
)}
|
||||
data-testid="import-export-button"
|
||||
>
|
||||
<Settings2 className="h-4 w-4" />
|
||||
导入/导出配置
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 过滤 Provider 列表
|
||||
* 用于属性测试验证搜索正确性
|
||||
*/
|
||||
export function filterProviders(
|
||||
providers: ProviderWithKeysDisplay[],
|
||||
query: string,
|
||||
): ProviderWithKeysDisplay[] {
|
||||
if (!query.trim()) return providers;
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return providers.filter(
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(lowerQuery) ||
|
||||
p.id.toLowerCase().includes(lowerQuery),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 按分组组织 Provider
|
||||
* 用于属性测试验证分组正确性
|
||||
*/
|
||||
export function groupProviders(
|
||||
providers: ProviderWithKeysDisplay[],
|
||||
): Map<ProviderGroupType, ProviderWithKeysDisplay[]> {
|
||||
const groups = new Map<ProviderGroupType, ProviderWithKeysDisplay[]>();
|
||||
|
||||
// 初始化所有分组
|
||||
const allGroups: ProviderGroupType[] = [
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
];
|
||||
allGroups.forEach((g) => groups.set(g, []));
|
||||
|
||||
// 分配 Provider 到对应分组
|
||||
providers.forEach((p) => {
|
||||
const group = p.group as ProviderGroupType;
|
||||
const list = groups.get(group);
|
||||
if (list) {
|
||||
list.push(p);
|
||||
} else {
|
||||
// 未知分组放入 custom
|
||||
groups.get("custom")?.push(p);
|
||||
}
|
||||
});
|
||||
|
||||
// 按 sort_order 排序每个分组内的 Provider
|
||||
groups.forEach((list) => {
|
||||
list.sort((a, b) => a.sort_order - b.sort_order);
|
||||
});
|
||||
|
||||
return groups;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查 Provider 是否匹配搜索查询
|
||||
* 用于属性测试验证搜索正确性
|
||||
*/
|
||||
export function matchesSearchQuery(
|
||||
provider: ProviderWithKeysDisplay,
|
||||
query: string,
|
||||
): boolean {
|
||||
if (!query.trim()) return true;
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return (
|
||||
provider.name.toLowerCase().includes(lowerQuery) ||
|
||||
provider.id.toLowerCase().includes(lowerQuery)
|
||||
);
|
||||
}
|
||||
|
||||
export default ProviderList;
|
||||
@@ -0,0 +1,248 @@
|
||||
/**
|
||||
* @file ProviderListItem 属性测试
|
||||
* @description 测试 Provider 列表项显示完整性和 API Key 数量徽章正确性
|
||||
* @module components/provider-pool/api-key/ProviderListItem.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 1: Provider 列表项显示完整性**
|
||||
* **Property 11: API Key 数量徽章正确性**
|
||||
* **Validates: Requirements 1.6, 7.2, 10.4**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import { extractListItemDisplayInfo, getApiKeyCount } from "./ProviderListItem";
|
||||
import type {
|
||||
ProviderWithKeysDisplay,
|
||||
ApiKeyDisplay,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成有效的 ISO 日期字符串
|
||||
* 使用整数时间戳避免无效日期问题
|
||||
*/
|
||||
const validDateArbitrary = fc
|
||||
.integer({
|
||||
min: new Date("2020-01-01").getTime(),
|
||||
max: new Date("2030-12-31").getTime(),
|
||||
})
|
||||
.map((timestamp) => new Date(timestamp).toISOString());
|
||||
|
||||
/**
|
||||
* 生成随机 API Key 显示数据
|
||||
*/
|
||||
const apiKeyDisplayArbitrary: fc.Arbitrary<ApiKeyDisplay> = fc.record({
|
||||
id: fc.uuid(),
|
||||
provider_id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
api_key_masked: fc
|
||||
.string({ minLength: 1, maxLength: 20 })
|
||||
.map((s) => `sk-****${s}`),
|
||||
alias: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
enabled: fc.boolean(),
|
||||
usage_count: fc.nat({ max: 10000 }),
|
||||
error_count: fc.nat({ max: 1000 }),
|
||||
last_used_at: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
created_at: validDateArbitrary,
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成随机 Provider 显示数据（包含 API Keys）
|
||||
*/
|
||||
const providerWithKeysArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> =
|
||||
fc.record({
|
||||
id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
name: fc.string({ minLength: 1, maxLength: 100 }),
|
||||
type: fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
),
|
||||
api_host: fc.webUrl(),
|
||||
is_system: fc.boolean(),
|
||||
group: fc.constantFrom(
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
),
|
||||
enabled: fc.boolean(),
|
||||
sort_order: fc.nat({ max: 100 }),
|
||||
api_version: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
api_key_count: fc.nat({ max: 20 }),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
api_keys: fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 10 }),
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Property 1: Provider 列表项显示完整性
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 1: Provider 列表项显示完整性", () => {
|
||||
/**
|
||||
* Property 1: Provider 列表项显示完整性
|
||||
*
|
||||
* *对于任意* Provider 配置，渲染后的列表项应包含图标、名称和启用状态三个元素
|
||||
*
|
||||
* **Validates: Requirements 1.6, 10.4**
|
||||
*/
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"每个 Provider 列表项应包含图标、名称和启用状态",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const displayInfo = extractListItemDisplayInfo(provider);
|
||||
|
||||
// 验证图标信息存在（通过 provider.id 确定）
|
||||
expect(displayInfo.hasIcon).toBe(true);
|
||||
|
||||
// 验证名称存在
|
||||
expect(displayInfo.hasName).toBe(true);
|
||||
|
||||
// 验证启用状态存在
|
||||
expect(displayInfo.hasStatus).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"Provider ID 应为非空字符串（用于图标显示）",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(typeof provider.id).toBe("string");
|
||||
expect(provider.id.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"Provider 名称应为非空字符串",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(typeof provider.name).toBe("string");
|
||||
expect(provider.name.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"Provider 启用状态应为布尔值",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(typeof provider.enabled).toBe("boolean");
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Property 11: API Key 数量徽章正确性
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 11: API Key 数量徽章正确性", () => {
|
||||
/**
|
||||
* Property 11: API Key 数量徽章正确性
|
||||
*
|
||||
* *对于任意* Provider，列表项上的徽章数字应等于该 Provider 的 API Key 数量
|
||||
*
|
||||
* **Validates: Requirements 7.2**
|
||||
*/
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"API Key 数量应等于 api_keys 数组长度",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const count = getApiKeyCount(provider);
|
||||
const expectedCount = provider.api_keys?.length ?? 0;
|
||||
|
||||
expect(count).toBe(expectedCount);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"API Key 数量应为非负整数",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const count = getApiKeyCount(provider);
|
||||
|
||||
expect(Number.isInteger(count)).toBe(true);
|
||||
expect(count).toBeGreaterThanOrEqual(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop(
|
||||
[fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 20 })],
|
||||
{ numRuns: 100 },
|
||||
)("不同数量的 API Keys 应正确反映在计数中", (apiKeys: ApiKeyDisplay[]) => {
|
||||
const provider: ProviderWithKeysDisplay = {
|
||||
id: "test-provider",
|
||||
name: "Test Provider",
|
||||
type: "openai",
|
||||
api_host: "https://api.test.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 1,
|
||||
api_key_count: apiKeys.length,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: apiKeys,
|
||||
};
|
||||
|
||||
const count = getApiKeyCount(provider);
|
||||
expect(count).toBe(apiKeys.length);
|
||||
});
|
||||
|
||||
test("空 api_keys 数组应返回 0", () => {
|
||||
const provider: ProviderWithKeysDisplay = {
|
||||
id: "test-provider",
|
||||
name: "Test Provider",
|
||||
type: "openai",
|
||||
api_host: "https://api.test.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 1,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
};
|
||||
|
||||
expect(getApiKeyCount(provider)).toBe(0);
|
||||
});
|
||||
|
||||
test("undefined api_keys 应返回 0", () => {
|
||||
const provider = {
|
||||
id: "test-provider",
|
||||
name: "Test Provider",
|
||||
type: "openai",
|
||||
api_host: "https://api.test.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 1,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
} as ProviderWithKeysDisplay;
|
||||
|
||||
expect(getApiKeyCount(provider)).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,162 @@
|
||||
/**
|
||||
* @file ProviderListItem 组件
|
||||
* @description Provider 列表项组件，显示图标、名称、启用状态和 API Key 数量徽章
|
||||
* @module components/provider-pool/api-key/ProviderListItem
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 1.6, 7.2**
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ProviderIcon } from "@/icons/providers";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { ProviderWithKeysDisplay } from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ProviderListItemProps {
|
||||
/** Provider 数据（包含 API Keys） */
|
||||
provider: ProviderWithKeysDisplay;
|
||||
/** 是否选中 */
|
||||
selected?: boolean;
|
||||
/** 点击回调 */
|
||||
onClick?: () => void;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 列表项组件
|
||||
*
|
||||
* 显示 Provider 的图标、名称、启用状态和 API Key 数量徽章。
|
||||
* 支持选中状态高亮显示。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ProviderListItem
|
||||
* provider={provider}
|
||||
* selected={selectedId === provider.id}
|
||||
* onClick={() => onSelect(provider.id)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderListItem: React.FC<ProviderListItemProps> = ({
|
||||
provider,
|
||||
selected = false,
|
||||
onClick,
|
||||
className,
|
||||
}) => {
|
||||
const apiKeyCount = provider.api_keys?.length ?? 0;
|
||||
const isEnabled = provider.enabled;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onClick}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onClick?.();
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
// 基础样式
|
||||
"flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer",
|
||||
"transition-all duration-150 ease-in-out",
|
||||
// 默认状态
|
||||
"hover:bg-muted/60",
|
||||
// 选中状态
|
||||
selected &&
|
||||
"bg-primary/10 hover:bg-primary/15 border border-primary/20",
|
||||
// 禁用状态
|
||||
!isEnabled && "opacity-60",
|
||||
className,
|
||||
)}
|
||||
data-testid="provider-list-item"
|
||||
data-provider-id={provider.id}
|
||||
data-selected={selected}
|
||||
data-enabled={isEnabled}
|
||||
>
|
||||
{/* Provider 图标 */}
|
||||
<ProviderIcon
|
||||
providerType={provider.id}
|
||||
size={24}
|
||||
className="flex-shrink-0"
|
||||
data-testid="provider-icon"
|
||||
/>
|
||||
|
||||
{/* Provider 名称 */}
|
||||
<span
|
||||
className={cn(
|
||||
"flex-1 text-sm font-medium truncate",
|
||||
!isEnabled && "text-muted-foreground",
|
||||
)}
|
||||
data-testid="provider-name"
|
||||
>
|
||||
{provider.name}
|
||||
</span>
|
||||
|
||||
{/* 启用状态指示器 */}
|
||||
<div
|
||||
className={cn(
|
||||
"w-2 h-2 rounded-full flex-shrink-0",
|
||||
isEnabled ? "bg-green-500" : "bg-gray-300 dark:bg-gray-600",
|
||||
)}
|
||||
title={isEnabled ? "已启用" : "已禁用"}
|
||||
data-testid="provider-status"
|
||||
data-enabled={isEnabled}
|
||||
/>
|
||||
|
||||
{/* API Key 数量徽章 */}
|
||||
{apiKeyCount > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="flex-shrink-0 min-w-[20px] h-5 px-1.5 text-xs font-medium"
|
||||
data-testid="api-key-count-badge"
|
||||
>
|
||||
{apiKeyCount}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 从 Provider 数据中提取列表项显示所需的信息
|
||||
* 用于属性测试验证显示完整性
|
||||
*/
|
||||
export function extractListItemDisplayInfo(provider: ProviderWithKeysDisplay): {
|
||||
hasIcon: boolean;
|
||||
hasName: boolean;
|
||||
hasStatus: boolean;
|
||||
apiKeyCount: number;
|
||||
} {
|
||||
return {
|
||||
hasIcon: typeof provider.id === "string" && provider.id.length > 0,
|
||||
hasName: typeof provider.name === "string" && provider.name.length > 0,
|
||||
hasStatus: typeof provider.enabled === "boolean",
|
||||
apiKeyCount: provider.api_keys?.length ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算 Provider 的 API Key 数量
|
||||
* 用于属性测试验证徽章正确性
|
||||
*/
|
||||
export function getApiKeyCount(provider: ProviderWithKeysDisplay): number {
|
||||
return provider.api_keys?.length ?? 0;
|
||||
}
|
||||
|
||||
export default ProviderListItem;
|
||||
@@ -0,0 +1,315 @@
|
||||
/**
|
||||
* @file ProviderSetting 属性测试
|
||||
* @description 测试 Provider 设置面板字段完整性
|
||||
* @module components/provider-pool/api-key/ProviderSetting.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Property 6: Provider 设置面板字段完整性**
|
||||
* **Validates: Requirements 4.1**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import { extractProviderSettingInfo } from "./ProviderSetting";
|
||||
import type {
|
||||
ProviderWithKeysDisplay,
|
||||
ApiKeyDisplay,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试数据生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成有效的 ISO 日期字符串
|
||||
*/
|
||||
const validDateArbitrary = fc
|
||||
.integer({
|
||||
min: new Date("2020-01-01").getTime(),
|
||||
max: new Date("2030-12-31").getTime(),
|
||||
})
|
||||
.map((timestamp) => new Date(timestamp).toISOString());
|
||||
|
||||
/**
|
||||
* 生成随机 API Key 显示数据
|
||||
*/
|
||||
const apiKeyDisplayArbitrary: fc.Arbitrary<ApiKeyDisplay> = fc.record({
|
||||
id: fc.uuid(),
|
||||
provider_id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
api_key_masked: fc
|
||||
.string({ minLength: 1, maxLength: 20 })
|
||||
.map((s) => `sk-****${s}`),
|
||||
alias: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
enabled: fc.boolean(),
|
||||
usage_count: fc.nat({ max: 10000 }),
|
||||
error_count: fc.nat({ max: 1000 }),
|
||||
last_used_at: fc.option(validDateArbitrary, { nil: undefined }),
|
||||
created_at: validDateArbitrary,
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成随机 Provider 显示数据（包含 API Keys）
|
||||
*/
|
||||
const providerWithKeysArbitrary: fc.Arbitrary<ProviderWithKeysDisplay> =
|
||||
fc.record({
|
||||
id: fc.string({ minLength: 1, maxLength: 50 }),
|
||||
name: fc.string({ minLength: 1, maxLength: 100 }),
|
||||
type: fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
),
|
||||
api_host: fc.webUrl(),
|
||||
is_system: fc.boolean(),
|
||||
group: fc.constantFrom(
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
),
|
||||
enabled: fc.boolean(),
|
||||
sort_order: fc.nat({ max: 100 }),
|
||||
api_version: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
api_key_count: fc.nat({ max: 20 }),
|
||||
created_at: validDateArbitrary,
|
||||
updated_at: validDateArbitrary,
|
||||
api_keys: fc.array(apiKeyDisplayArbitrary, { minLength: 0, maxLength: 10 }),
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Property 6: Provider 设置面板字段完整性
|
||||
// ============================================================================
|
||||
|
||||
describe("Property 6: Provider 设置面板字段完整性", () => {
|
||||
/**
|
||||
* Property 6: Provider 设置面板字段完整性
|
||||
*
|
||||
* *对于任意* Provider，设置面板应显示名称、图标、启用开关、API Key 输入框、API Host 输入框和连接测试按钮
|
||||
*
|
||||
* **Validates: Requirements 4.1**
|
||||
*/
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"每个 Provider 设置面板应包含所有必需字段",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
const info = extractProviderSettingInfo(provider);
|
||||
|
||||
// 验证 Provider 存在
|
||||
expect(info.hasProvider).toBe(true);
|
||||
|
||||
// 验证图标信息存在（通过 provider.id 确定）
|
||||
expect(info.hasIcon).toBe(true);
|
||||
|
||||
// 验证名称存在
|
||||
expect(info.hasName).toBe(true);
|
||||
|
||||
// 验证启用开关存在
|
||||
expect(info.hasEnabledSwitch).toBe(true);
|
||||
|
||||
// 验证 API Key 区域存在
|
||||
expect(info.hasApiKeySection).toBe(true);
|
||||
|
||||
// 验证配置区域存在（包含 API Host 输入框）
|
||||
expect(info.hasConfigSection).toBe(true);
|
||||
|
||||
// 验证连接测试按钮存在
|
||||
expect(info.hasConnectionTest).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"Provider ID 应为非空字符串（用于图标显示）",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(typeof provider.id).toBe("string");
|
||||
expect(provider.id.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"Provider 名称应为非空字符串",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(typeof provider.name).toBe("string");
|
||||
expect(provider.name.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"Provider 启用状态应为布尔值",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(typeof provider.enabled).toBe("boolean");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"Provider API Host 应为有效 URL",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(typeof provider.api_host).toBe("string");
|
||||
expect(provider.api_host.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
// 空状态测试
|
||||
describe("空状态处理", () => {
|
||||
test("null Provider 应返回空状态信息", () => {
|
||||
const info = extractProviderSettingInfo(null);
|
||||
|
||||
expect(info.hasProvider).toBe(false);
|
||||
expect(info.hasIcon).toBe(false);
|
||||
expect(info.hasName).toBe(false);
|
||||
expect(info.hasEnabledSwitch).toBe(false);
|
||||
expect(info.hasApiKeySection).toBe(false);
|
||||
expect(info.hasConfigSection).toBe(false);
|
||||
expect(info.hasConnectionTest).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// 具体字段验证
|
||||
describe("具体字段验证", () => {
|
||||
test("Provider 应包含有效的类型", () => {
|
||||
const validTypes = [
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
];
|
||||
|
||||
const provider: ProviderWithKeysDisplay = {
|
||||
id: "test-provider",
|
||||
name: "Test Provider",
|
||||
type: "openai",
|
||||
api_host: "https://api.test.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 1,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
};
|
||||
|
||||
expect(validTypes).toContain(provider.type);
|
||||
});
|
||||
|
||||
test("Provider 应包含有效的分组", () => {
|
||||
const validGroups = [
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
];
|
||||
|
||||
const provider: ProviderWithKeysDisplay = {
|
||||
id: "test-provider",
|
||||
name: "Test Provider",
|
||||
type: "openai",
|
||||
api_host: "https://api.test.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 1,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
};
|
||||
|
||||
expect(validGroups).toContain(provider.group);
|
||||
});
|
||||
|
||||
test("System Provider 应标记为 is_system: true", () => {
|
||||
const systemProvider: ProviderWithKeysDisplay = {
|
||||
id: "openai",
|
||||
name: "OpenAI",
|
||||
type: "openai-response",
|
||||
api_host: "https://api.openai.com",
|
||||
is_system: true,
|
||||
group: "mainstream",
|
||||
enabled: true,
|
||||
sort_order: 1,
|
||||
api_key_count: 1,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
};
|
||||
|
||||
expect(systemProvider.is_system).toBe(true);
|
||||
});
|
||||
|
||||
test("Custom Provider 应标记为 is_system: false", () => {
|
||||
const customProvider: ProviderWithKeysDisplay = {
|
||||
id: "my-custom-provider",
|
||||
name: "My Custom Provider",
|
||||
type: "openai",
|
||||
api_host: "https://api.custom.com",
|
||||
is_system: false,
|
||||
group: "custom",
|
||||
enabled: true,
|
||||
sort_order: 100,
|
||||
api_key_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
api_keys: [],
|
||||
};
|
||||
|
||||
expect(customProvider.is_system).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// API Keys 数组验证
|
||||
describe("API Keys 数组验证", () => {
|
||||
test.prop([providerWithKeysArbitrary], { numRuns: 100 })(
|
||||
"api_keys 应为数组",
|
||||
(provider: ProviderWithKeysDisplay) => {
|
||||
expect(Array.isArray(provider.api_keys)).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop(
|
||||
[fc.array(apiKeyDisplayArbitrary, { minLength: 1, maxLength: 5 })],
|
||||
{ numRuns: 100 },
|
||||
)("每个 API Key 应包含必需字段", (apiKeys: ApiKeyDisplay[]) => {
|
||||
for (const apiKey of apiKeys) {
|
||||
expect(typeof apiKey.id).toBe("string");
|
||||
expect(typeof apiKey.provider_id).toBe("string");
|
||||
expect(typeof apiKey.api_key_masked).toBe("string");
|
||||
expect(typeof apiKey.enabled).toBe("boolean");
|
||||
expect(typeof apiKey.usage_count).toBe("number");
|
||||
expect(typeof apiKey.error_count).toBe("number");
|
||||
expect(typeof apiKey.created_at).toBe("string");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,281 @@
|
||||
/**
|
||||
* @file ProviderSetting 组件
|
||||
* @description Provider 设置面板组件，集成所有子组件，显示 Provider 头部信息和配置
|
||||
* @module components/provider-pool/api-key/ProviderSetting
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 4.1, 6.3, 6.4**
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { ProviderIcon } from "@/icons/providers";
|
||||
import { ApiKeyList } from "./ApiKeyList";
|
||||
import { ProviderConfigForm } from "./ProviderConfigForm";
|
||||
import {
|
||||
ConnectionTestButton,
|
||||
ConnectionTestResult,
|
||||
} from "./ConnectionTestButton";
|
||||
import type {
|
||||
ProviderWithKeysDisplay,
|
||||
UpdateProviderRequest,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface ProviderSettingProps {
|
||||
/** Provider 数据（包含 API Keys） */
|
||||
provider: ProviderWithKeysDisplay | null;
|
||||
/** 更新 Provider 配置回调 */
|
||||
onUpdate?: (id: string, request: UpdateProviderRequest) => Promise<void>;
|
||||
/** 添加 API Key 回调 */
|
||||
onAddApiKey?: (
|
||||
providerId: string,
|
||||
apiKey: string,
|
||||
alias?: string,
|
||||
) => Promise<void>;
|
||||
/** 删除 API Key 回调 */
|
||||
onDeleteApiKey?: (keyId: string) => void;
|
||||
/** 切换 API Key 启用状态回调 */
|
||||
onToggleApiKey?: (keyId: string, enabled: boolean) => void;
|
||||
/** 测试连接回调 */
|
||||
onTestConnection?: (providerId: string) => Promise<ConnectionTestResult>;
|
||||
/** 删除自定义 Provider 回调 */
|
||||
onDeleteProvider?: (providerId: string) => void;
|
||||
/** 是否正在加载 */
|
||||
loading?: boolean;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 组件实现
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 设置面板组件
|
||||
*
|
||||
* 显示选中 Provider 的完整配置界面，包括：
|
||||
* - Provider 头部信息（图标、名称、启用开关）
|
||||
* - API Key 列表
|
||||
* - Provider 配置表单
|
||||
* - 连接测试按钮
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ProviderSetting
|
||||
* provider={selectedProvider}
|
||||
* onUpdate={updateProvider}
|
||||
* onAddApiKey={addApiKey}
|
||||
* onDeleteApiKey={deleteApiKey}
|
||||
* onToggleApiKey={toggleApiKey}
|
||||
* onTestConnection={testConnection}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderSetting: React.FC<ProviderSettingProps> = ({
|
||||
provider,
|
||||
onUpdate,
|
||||
onAddApiKey,
|
||||
onDeleteApiKey,
|
||||
onToggleApiKey,
|
||||
onTestConnection,
|
||||
onDeleteProvider,
|
||||
loading = false,
|
||||
className,
|
||||
}) => {
|
||||
// 空状态
|
||||
if (!provider) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center h-full text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
data-testid="provider-setting-empty"
|
||||
>
|
||||
<div className="text-center">
|
||||
<p className="text-sm">请从左侧列表选择一个 Provider</p>
|
||||
<p className="text-xs mt-1">选择后可在此处配置 API Key 和其他设置</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 处理启用/禁用切换
|
||||
const handleToggleEnabled = async (enabled: boolean) => {
|
||||
if (onUpdate) {
|
||||
await onUpdate(provider.id, { enabled });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("flex flex-col h-full", className)}
|
||||
data-testid="provider-setting"
|
||||
data-provider-id={provider.id}
|
||||
>
|
||||
{/* Provider 头部 */}
|
||||
<div
|
||||
className="flex items-center gap-4 p-4 border-b border-border"
|
||||
data-testid="provider-header"
|
||||
>
|
||||
{/* 图标 */}
|
||||
<ProviderIcon
|
||||
providerType={provider.id}
|
||||
size={40}
|
||||
className="flex-shrink-0"
|
||||
data-testid="provider-icon"
|
||||
/>
|
||||
|
||||
{/* 名称和类型 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3
|
||||
className="text-lg font-semibold truncate"
|
||||
data-testid="provider-name"
|
||||
>
|
||||
{provider.name}
|
||||
</h3>
|
||||
<p
|
||||
className="text-sm text-muted-foreground"
|
||||
data-testid="provider-type"
|
||||
>
|
||||
类型: {provider.type}
|
||||
{provider.is_system && (
|
||||
<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">
|
||||
系统预设
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 启用开关 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{provider.enabled ? "已启用" : "已禁用"}
|
||||
</span>
|
||||
<Switch
|
||||
checked={provider.enabled}
|
||||
onCheckedChange={handleToggleEnabled}
|
||||
disabled={loading}
|
||||
data-testid="provider-enabled-switch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 删除按钮（仅自定义 Provider） */}
|
||||
{!provider.is_system && onDeleteProvider && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDeleteProvider(provider.id)}
|
||||
disabled={loading}
|
||||
className="text-muted-foreground hover:text-red-600 hover:bg-red-50"
|
||||
title="删除此 Provider"
|
||||
data-testid="delete-provider-button"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-6">
|
||||
{/* API Key 列表 */}
|
||||
<section data-testid="api-key-section">
|
||||
<ApiKeyList
|
||||
apiKeys={provider.api_keys || []}
|
||||
providerId={provider.id}
|
||||
onAdd={onAddApiKey}
|
||||
onToggle={onToggleApiKey}
|
||||
onDelete={onDeleteApiKey}
|
||||
loading={loading}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* 分隔线 */}
|
||||
<div className="border-t border-border" />
|
||||
|
||||
{/* Provider 配置表单 */}
|
||||
<section data-testid="config-section">
|
||||
<h4 className="text-sm font-medium text-foreground mb-3">配置</h4>
|
||||
<ProviderConfigForm
|
||||
provider={provider}
|
||||
onUpdate={onUpdate}
|
||||
loading={loading}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* 分隔线 */}
|
||||
<div className="border-t border-border" />
|
||||
|
||||
{/* 连接测试 */}
|
||||
<section data-testid="connection-test-section">
|
||||
<h4 className="text-sm font-medium text-foreground mb-3">连接测试</h4>
|
||||
<ConnectionTestButton
|
||||
providerId={provider.id}
|
||||
onTest={onTestConnection}
|
||||
disabled={
|
||||
loading ||
|
||||
!provider.enabled ||
|
||||
(provider.api_keys?.length ?? 0) === 0
|
||||
}
|
||||
/>
|
||||
{(provider.api_keys?.length ?? 0) === 0 && (
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
请先添加 API Key 后再进行连接测试
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数（用于测试）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 从 Provider 数据中提取设置面板显示所需的信息
|
||||
* 用于属性测试验证设置面板字段完整性
|
||||
*/
|
||||
export function extractProviderSettingInfo(
|
||||
provider: ProviderWithKeysDisplay | null,
|
||||
): {
|
||||
hasProvider: boolean;
|
||||
hasIcon: boolean;
|
||||
hasName: boolean;
|
||||
hasEnabledSwitch: boolean;
|
||||
hasApiKeySection: boolean;
|
||||
hasConfigSection: boolean;
|
||||
hasConnectionTest: boolean;
|
||||
} {
|
||||
if (!provider) {
|
||||
return {
|
||||
hasProvider: false,
|
||||
hasIcon: false,
|
||||
hasName: false,
|
||||
hasEnabledSwitch: false,
|
||||
hasApiKeySection: false,
|
||||
hasConfigSection: false,
|
||||
hasConnectionTest: false,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
hasProvider: true,
|
||||
hasIcon: typeof provider.id === "string" && provider.id.length > 0,
|
||||
hasName: typeof provider.name === "string" && provider.name.length > 0,
|
||||
hasEnabledSwitch: typeof provider.enabled === "boolean",
|
||||
hasApiKeySection: true,
|
||||
hasConfigSection: true,
|
||||
hasConnectionTest: true,
|
||||
};
|
||||
}
|
||||
|
||||
export default ProviderSetting;
|
||||
@@ -0,0 +1,98 @@
|
||||
# API Key Provider 组件
|
||||
|
||||
本目录包含 API Key Provider 管理界面的所有组件。
|
||||
|
||||
## 组件列表
|
||||
|
||||
| 文件 | 描述 |
|
||||
|------|------|
|
||||
| `ProviderListItem.tsx` | Provider 列表项组件，显示图标、名称、启用状态和 API Key 数量徽章 |
|
||||
| `ProviderGroup.tsx` | Provider 分组组件，支持折叠/展开和显示分组标题 |
|
||||
| `ProviderList.tsx` | Provider 列表组件，集成搜索框、分组显示 |
|
||||
| `ApiKeyItem.tsx` | API Key 列表项组件，显示掩码 Key、别名、使用统计，支持启用/禁用、删除 |
|
||||
| `ApiKeyList.tsx` | API Key 列表组件，显示 Provider 的所有 API Key，支持添加新 Key |
|
||||
| `ProviderConfigForm.tsx` | Provider 配置表单组件，显示 API Host 和根据类型显示额外字段 |
|
||||
| `ConnectionTestButton.tsx` | 连接测试按钮组件，用于测试 Provider API 连接 |
|
||||
| `ProviderSetting.tsx` | Provider 设置面板组件，集成所有子组件，显示完整配置界面 |
|
||||
| `ApiKeyProviderSection.tsx` | API Key Provider 管理区域组件，实现左右分栏布局 |
|
||||
| `AddCustomProviderModal.tsx` | 添加自定义 Provider 模态框组件，实现表单验证 |
|
||||
| `DeleteProviderDialog.tsx` | 删除自定义 Provider 确认对话框组件 |
|
||||
| `ImportExportDialog.tsx` | Provider 配置导入导出对话框组件 |
|
||||
| `index.ts` | 组件导出入口 |
|
||||
|
||||
## 测试文件
|
||||
|
||||
| 文件 | 描述 |
|
||||
|------|------|
|
||||
| `ProviderListItem.test.ts` | Property 1 & 11 属性测试 |
|
||||
| `ProviderList.test.ts` | Property 10, 14 & 15 属性测试 |
|
||||
| `ProviderConfigForm.test.ts` | Property 7 属性测试：Provider 类型处理正确性 |
|
||||
| `ProviderSetting.test.ts` | Property 6 属性测试：Provider 设置面板字段完整性 |
|
||||
| `ApiKeyProviderSection.test.ts` | Property 2 属性测试：Provider 选择同步 |
|
||||
| `AddCustomProviderModal.test.ts` | Property 8 属性测试：自定义 Provider 表单验证 |
|
||||
| `DeleteProviderDialog.test.ts` | Property 9 属性测试：System Provider 删除保护 |
|
||||
|
||||
## 使用示例
|
||||
|
||||
```tsx
|
||||
import { ApiKeyProviderSection } from "@/components/provider-pool/api-key";
|
||||
|
||||
function ProviderPoolPage() {
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<ApiKeyProviderSection
|
||||
onAddCustomProvider={() => setShowAddModal(true)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 单独使用 ProviderList 和 ProviderSetting
|
||||
|
||||
```tsx
|
||||
import { ProviderList, ProviderSetting } from "@/components/provider-pool/api-key";
|
||||
|
||||
function ApiKeySection() {
|
||||
const {
|
||||
providersByGroup,
|
||||
selectedProviderId,
|
||||
selectedProvider,
|
||||
selectProvider,
|
||||
updateProvider,
|
||||
addApiKey,
|
||||
deleteApiKey,
|
||||
toggleApiKey,
|
||||
} = useApiKeyProvider();
|
||||
|
||||
return (
|
||||
<div className="flex">
|
||||
<ProviderList
|
||||
providersByGroup={providersByGroup}
|
||||
selectedProviderId={selectedProviderId}
|
||||
onProviderSelect={selectProvider}
|
||||
/>
|
||||
<ProviderSetting
|
||||
provider={selectedProvider}
|
||||
onUpdate={updateProvider}
|
||||
onAddApiKey={addApiKey}
|
||||
onDeleteApiKey={deleteApiKey}
|
||||
onToggleApiKey={toggleApiKey}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 相关需求
|
||||
|
||||
- Requirements 1.1, 1.3, 1.4: API Key Provider 左右分栏布局
|
||||
- Requirements 1.2, 1.5, 1.6: Provider 列表布局和交互
|
||||
- Requirements 4.1, 4.2, 4.3, 4.4: Provider 设置面板
|
||||
- Requirements 5.1-5.5: Provider 类型系统
|
||||
- Requirements 7.1, 7.2, 7.5: 多 API Key 支持
|
||||
- Requirements 8.1, 8.2, 8.3: Provider 分组和搜索
|
||||
- Requirements 10.4: Provider 图标显示
|
||||
- Requirements 9.4, 9.5: 导入导出功能
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* @file API Key Provider 组件导出
|
||||
* @description 导出所有 API Key Provider 相关组件
|
||||
* @module components/provider-pool/api-key
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
*/
|
||||
|
||||
export { ProviderListItem } from "./ProviderListItem";
|
||||
export type { ProviderListItemProps } from "./ProviderListItem";
|
||||
|
||||
export { ProviderGroup } from "./ProviderGroup";
|
||||
export type { ProviderGroupProps } from "./ProviderGroup";
|
||||
|
||||
export { ProviderList } from "./ProviderList";
|
||||
export type { ProviderListProps } from "./ProviderList";
|
||||
|
||||
export { ApiKeyItem } from "./ApiKeyItem";
|
||||
export type { ApiKeyItemProps } from "./ApiKeyItem";
|
||||
|
||||
export { ApiKeyList } from "./ApiKeyList";
|
||||
export type { ApiKeyListProps } from "./ApiKeyList";
|
||||
|
||||
export { ProviderConfigForm } from "./ProviderConfigForm";
|
||||
export type { ProviderConfigFormProps } from "./ProviderConfigForm";
|
||||
|
||||
export { ConnectionTestButton } from "./ConnectionTestButton";
|
||||
export type {
|
||||
ConnectionTestButtonProps,
|
||||
ConnectionTestResult,
|
||||
ConnectionTestStatus,
|
||||
} from "./ConnectionTestButton";
|
||||
|
||||
export { ProviderSetting } from "./ProviderSetting";
|
||||
export type { ProviderSettingProps } from "./ProviderSetting";
|
||||
|
||||
export { ApiKeyProviderSection } from "./ApiKeyProviderSection";
|
||||
export type { ApiKeyProviderSectionProps } from "./ApiKeyProviderSection";
|
||||
|
||||
export { AddCustomProviderModal } from "./AddCustomProviderModal";
|
||||
export type { AddCustomProviderModalProps } from "./AddCustomProviderModal";
|
||||
|
||||
export { DeleteProviderDialog } from "./DeleteProviderDialog";
|
||||
export type { DeleteProviderDialogProps } from "./DeleteProviderDialog";
|
||||
|
||||
export { ImportExportDialog } from "./ImportExportDialog";
|
||||
export type { ImportExportDialogProps } from "./ImportExportDialog";
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* @file Checkbox 组件
|
||||
* @description 复选框组件
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface CheckboxProps extends Omit<
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
"onChange"
|
||||
> {
|
||||
checked?: boolean;
|
||||
onCheckedChange?: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
|
||||
({ className, checked = false, onCheckedChange, id, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="checkbox"
|
||||
aria-checked={checked}
|
||||
id={id}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
checked ? "bg-primary text-primary-foreground" : "bg-background",
|
||||
className,
|
||||
)}
|
||||
onClick={() => onCheckedChange?.(!checked)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{checked && <Check className="h-3 w-3 mx-auto" />}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
);
|
||||
Checkbox.displayName = "Checkbox";
|
||||
|
||||
export { Checkbox };
|
||||
@@ -11,10 +11,29 @@ const DialogContext = createContext<DialogContextType | undefined>(undefined);
|
||||
|
||||
interface DialogProps {
|
||||
children: React.ReactNode;
|
||||
/** 受控模式：是否打开 */
|
||||
open?: boolean;
|
||||
/** 受控模式：打开状态变化回调 */
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const Dialog: React.FC<DialogProps> = ({ children }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const Dialog: React.FC<DialogProps> = ({
|
||||
children,
|
||||
open: controlledOpen,
|
||||
onOpenChange,
|
||||
}) => {
|
||||
const [internalOpen, setInternalOpen] = useState(false);
|
||||
|
||||
// 支持受控和非受控模式
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
const open = isControlled ? controlledOpen : internalOpen;
|
||||
|
||||
const setOpen = (newOpen: boolean) => {
|
||||
if (!isControlled) {
|
||||
setInternalOpen(newOpen);
|
||||
}
|
||||
onOpenChange?.(newOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContext.Provider value={{ open, setOpen }}>
|
||||
|
||||
@@ -10,6 +10,7 @@ React 自定义 Hooks，封装业务逻辑和状态管理。
|
||||
## 文件索引
|
||||
|
||||
- `index.ts` - Hooks 导出入口
|
||||
- `useApiKeyProvider.ts` - API Key Provider 管理 Hook（Requirements 9.1）
|
||||
- `useErrorHandler.ts` - 错误处理 Hook
|
||||
- `useFileMonitoring.ts` - 文件监控 Hook
|
||||
- `useFlowActions.ts` - 流量操作 Hook
|
||||
|
||||
@@ -0,0 +1,456 @@
|
||||
/**
|
||||
* @file useApiKeyProvider Hook
|
||||
* @description 管理 API Key Provider 状态和 CRUD 操作
|
||||
* @module hooks/useApiKeyProvider
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 9.1**
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import {
|
||||
apiKeyProviderApi,
|
||||
ProviderWithKeysDisplay,
|
||||
ProviderDisplay,
|
||||
ApiKeyDisplay,
|
||||
AddCustomProviderRequest,
|
||||
UpdateProviderRequest,
|
||||
AddApiKeyRequest,
|
||||
ImportResult,
|
||||
} from "@/lib/api/apiKeyProvider";
|
||||
import { ProviderGroup } from "@/lib/types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// Hook 返回类型
|
||||
// ============================================================================
|
||||
|
||||
export interface UseApiKeyProviderReturn {
|
||||
/** 所有 Provider（包含 API Keys） */
|
||||
providers: ProviderWithKeysDisplay[];
|
||||
/** 当前选中的 Provider ID */
|
||||
selectedProviderId: string | null;
|
||||
/** 当前选中的 Provider（包含 API Keys） */
|
||||
selectedProvider: ProviderWithKeysDisplay | null;
|
||||
/** 是否正在加载 */
|
||||
loading: boolean;
|
||||
/** 错误信息 */
|
||||
error: string | null;
|
||||
/** 搜索查询 */
|
||||
searchQuery: string;
|
||||
/** 折叠的分组 */
|
||||
collapsedGroups: Set<ProviderGroup>;
|
||||
|
||||
// ===== 操作方法 =====
|
||||
|
||||
/** 刷新 Provider 列表 */
|
||||
refresh: () => Promise<void>;
|
||||
/** 选择 Provider */
|
||||
selectProvider: (id: string | null) => void;
|
||||
/** 设置搜索查询 */
|
||||
setSearchQuery: (query: string) => void;
|
||||
/** 切换分组折叠状态 */
|
||||
toggleGroup: (group: ProviderGroup) => void;
|
||||
/** 重新排序 Provider（在分组内） */
|
||||
reorderProviders: (
|
||||
group: ProviderGroup,
|
||||
reorderedIds: string[],
|
||||
) => Promise<void>;
|
||||
|
||||
// ===== Provider CRUD =====
|
||||
|
||||
/** 添加自定义 Provider */
|
||||
addCustomProvider: (
|
||||
request: AddCustomProviderRequest,
|
||||
) => Promise<ProviderDisplay>;
|
||||
/** 更新 Provider */
|
||||
updateProvider: (
|
||||
id: string,
|
||||
request: UpdateProviderRequest,
|
||||
) => Promise<ProviderDisplay>;
|
||||
/** 删除自定义 Provider */
|
||||
deleteCustomProvider: (id: string) => Promise<boolean>;
|
||||
/** 切换 Provider 启用状态 */
|
||||
toggleProviderEnabled: (
|
||||
id: string,
|
||||
enabled: boolean,
|
||||
) => Promise<ProviderDisplay>;
|
||||
|
||||
// ===== API Key CRUD =====
|
||||
|
||||
/** 添加 API Key */
|
||||
addApiKey: (
|
||||
providerId: string,
|
||||
apiKey: string,
|
||||
alias?: string,
|
||||
) => Promise<ApiKeyDisplay>;
|
||||
/** 删除 API Key */
|
||||
deleteApiKey: (keyId: string) => Promise<boolean>;
|
||||
/** 切换 API Key 启用状态 */
|
||||
toggleApiKey: (keyId: string, enabled: boolean) => Promise<ApiKeyDisplay>;
|
||||
/** 更新 API Key 别名 */
|
||||
updateApiKeyAlias: (keyId: string, alias?: string) => Promise<ApiKeyDisplay>;
|
||||
|
||||
// ===== 导入导出 =====
|
||||
|
||||
/** 导出配置 */
|
||||
exportConfig: (includeKeys: boolean) => Promise<string>;
|
||||
/** 导入配置 */
|
||||
importConfig: (configJson: string) => Promise<ImportResult>;
|
||||
|
||||
// ===== 过滤后的数据 =====
|
||||
|
||||
/** 按搜索过滤后的 Provider 列表 */
|
||||
filteredProviders: ProviderWithKeysDisplay[];
|
||||
/** 按分组组织的 Provider */
|
||||
providersByGroup: Map<ProviderGroup, ProviderWithKeysDisplay[]>;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// UI 状态键
|
||||
// ============================================================================
|
||||
|
||||
const UI_STATE_KEYS = {
|
||||
COLLAPSED_GROUPS: "collapsed_groups",
|
||||
SELECTED_PROVIDER: "selected_provider",
|
||||
PROVIDER_SORT_ORDERS: "provider_sort_orders",
|
||||
} as const;
|
||||
|
||||
// ============================================================================
|
||||
// Hook 实现
|
||||
// ============================================================================
|
||||
|
||||
export function useApiKeyProvider(): UseApiKeyProviderReturn {
|
||||
// ===== 状态 =====
|
||||
const [providers, setProviders] = useState<ProviderWithKeysDisplay[]>([]);
|
||||
const [selectedProviderId, setSelectedProviderId] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [collapsedGroups, setCollapsedGroups] = useState<Set<ProviderGroup>>(
|
||||
new Set(),
|
||||
);
|
||||
|
||||
// ===== 加载 Provider 列表 =====
|
||||
const fetchProviders = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await apiKeyProviderApi.getProviders();
|
||||
setProviders(data);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ===== 加载 UI 状态 =====
|
||||
const loadUiState = useCallback(async () => {
|
||||
try {
|
||||
// 加载折叠状态
|
||||
const collapsedJson = await apiKeyProviderApi.getUiState(
|
||||
UI_STATE_KEYS.COLLAPSED_GROUPS,
|
||||
);
|
||||
if (collapsedJson) {
|
||||
const collapsed = JSON.parse(collapsedJson) as ProviderGroup[];
|
||||
setCollapsedGroups(new Set(collapsed));
|
||||
}
|
||||
|
||||
// 加载选中的 Provider
|
||||
const selectedId = await apiKeyProviderApi.getUiState(
|
||||
UI_STATE_KEYS.SELECTED_PROVIDER,
|
||||
);
|
||||
if (selectedId) {
|
||||
setSelectedProviderId(selectedId);
|
||||
}
|
||||
} catch {
|
||||
// 忽略 UI 状态加载错误
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ===== 初始化 =====
|
||||
useEffect(() => {
|
||||
fetchProviders();
|
||||
loadUiState();
|
||||
}, [fetchProviders, loadUiState]);
|
||||
|
||||
// ===== 保存折叠状态 =====
|
||||
const saveCollapsedGroups = useCallback(
|
||||
async (groups: Set<ProviderGroup>) => {
|
||||
try {
|
||||
await apiKeyProviderApi.setUiState(
|
||||
UI_STATE_KEYS.COLLAPSED_GROUPS,
|
||||
JSON.stringify(Array.from(groups)),
|
||||
);
|
||||
} catch {
|
||||
// 忽略保存错误
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// ===== 保存选中的 Provider =====
|
||||
const saveSelectedProvider = useCallback(async (id: string | null) => {
|
||||
try {
|
||||
if (id) {
|
||||
await apiKeyProviderApi.setUiState(UI_STATE_KEYS.SELECTED_PROVIDER, id);
|
||||
}
|
||||
} catch {
|
||||
// 忽略保存错误
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ===== 选择 Provider =====
|
||||
const selectProvider = useCallback(
|
||||
(id: string | null) => {
|
||||
setSelectedProviderId(id);
|
||||
saveSelectedProvider(id);
|
||||
},
|
||||
[saveSelectedProvider],
|
||||
);
|
||||
|
||||
// ===== 切换分组折叠 =====
|
||||
const toggleGroup = useCallback(
|
||||
(group: ProviderGroup) => {
|
||||
setCollapsedGroups((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(group)) {
|
||||
next.delete(group);
|
||||
} else {
|
||||
next.add(group);
|
||||
}
|
||||
saveCollapsedGroups(next);
|
||||
return next;
|
||||
});
|
||||
},
|
||||
[saveCollapsedGroups],
|
||||
);
|
||||
|
||||
// ===== 重新排序 Provider =====
|
||||
const reorderProviders = useCallback(
|
||||
async (group: ProviderGroup, reorderedIds: string[]) => {
|
||||
// 计算新的 sort_order 值
|
||||
// 每个分组内的 Provider 按顺序分配 sort_order
|
||||
const sortOrders: [string, number][] = reorderedIds.map((id, index) => [
|
||||
id,
|
||||
index,
|
||||
]);
|
||||
|
||||
try {
|
||||
// 更新数据库
|
||||
await apiKeyProviderApi.updateSortOrders(sortOrders);
|
||||
// 刷新列表
|
||||
await fetchProviders();
|
||||
} catch {
|
||||
// 忽略错误，保持 UI 状态
|
||||
}
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
// ===== Provider CRUD =====
|
||||
|
||||
const addCustomProvider = useCallback(
|
||||
async (request: AddCustomProviderRequest): Promise<ProviderDisplay> => {
|
||||
const result = await apiKeyProviderApi.addCustomProvider(request);
|
||||
await fetchProviders();
|
||||
// 自动选中新添加的 Provider
|
||||
selectProvider(result.id);
|
||||
return result;
|
||||
},
|
||||
[fetchProviders, selectProvider],
|
||||
);
|
||||
|
||||
const updateProvider = useCallback(
|
||||
async (
|
||||
id: string,
|
||||
request: UpdateProviderRequest,
|
||||
): Promise<ProviderDisplay> => {
|
||||
const result = await apiKeyProviderApi.updateProvider(id, request);
|
||||
await fetchProviders();
|
||||
return result;
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
const deleteCustomProvider = useCallback(
|
||||
async (id: string): Promise<boolean> => {
|
||||
const result = await apiKeyProviderApi.deleteCustomProvider(id);
|
||||
if (result) {
|
||||
await fetchProviders();
|
||||
// 如果删除的是当前选中的，清除选中状态
|
||||
if (selectedProviderId === id) {
|
||||
selectProvider(null);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
[fetchProviders, selectedProviderId, selectProvider],
|
||||
);
|
||||
|
||||
const toggleProviderEnabled = useCallback(
|
||||
async (id: string, enabled: boolean): Promise<ProviderDisplay> => {
|
||||
const result = await apiKeyProviderApi.updateProvider(id, { enabled });
|
||||
await fetchProviders();
|
||||
return result;
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
// ===== API Key CRUD =====
|
||||
|
||||
const addApiKey = useCallback(
|
||||
async (
|
||||
providerId: string,
|
||||
apiKey: string,
|
||||
alias?: string,
|
||||
): Promise<ApiKeyDisplay> => {
|
||||
const request: AddApiKeyRequest = {
|
||||
provider_id: providerId,
|
||||
api_key: apiKey,
|
||||
alias,
|
||||
};
|
||||
const result = await apiKeyProviderApi.addApiKey(request);
|
||||
await fetchProviders();
|
||||
return result;
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
const deleteApiKey = useCallback(
|
||||
async (keyId: string): Promise<boolean> => {
|
||||
const result = await apiKeyProviderApi.deleteApiKey(keyId);
|
||||
if (result) {
|
||||
await fetchProviders();
|
||||
}
|
||||
return result;
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
const toggleApiKey = useCallback(
|
||||
async (keyId: string, enabled: boolean): Promise<ApiKeyDisplay> => {
|
||||
const result = await apiKeyProviderApi.toggleApiKey(keyId, enabled);
|
||||
await fetchProviders();
|
||||
return result;
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
const updateApiKeyAlias = useCallback(
|
||||
async (keyId: string, alias?: string): Promise<ApiKeyDisplay> => {
|
||||
const result = await apiKeyProviderApi.updateApiKeyAlias(keyId, alias);
|
||||
await fetchProviders();
|
||||
return result;
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
// ===== 导入导出 =====
|
||||
|
||||
const exportConfig = useCallback(
|
||||
async (includeKeys: boolean): Promise<string> => {
|
||||
return apiKeyProviderApi.exportConfig(includeKeys);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const importConfig = useCallback(
|
||||
async (configJson: string): Promise<ImportResult> => {
|
||||
const result = await apiKeyProviderApi.importConfig(configJson);
|
||||
await fetchProviders();
|
||||
return result;
|
||||
},
|
||||
[fetchProviders],
|
||||
);
|
||||
|
||||
// ===== 计算属性 =====
|
||||
|
||||
/** 当前选中的 Provider */
|
||||
const selectedProvider = useMemo(() => {
|
||||
if (!selectedProviderId) return null;
|
||||
return providers.find((p) => p.id === selectedProviderId) ?? null;
|
||||
}, [providers, selectedProviderId]);
|
||||
|
||||
/** 按搜索过滤后的 Provider 列表 */
|
||||
const filteredProviders = useMemo(() => {
|
||||
if (!searchQuery.trim()) return providers;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return providers.filter(
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(query) ||
|
||||
p.id.toLowerCase().includes(query),
|
||||
);
|
||||
}, [providers, searchQuery]);
|
||||
|
||||
/** 按分组组织的 Provider */
|
||||
const providersByGroup = useMemo(() => {
|
||||
const groups = new Map<ProviderGroup, ProviderWithKeysDisplay[]>();
|
||||
|
||||
// 初始化所有分组
|
||||
const allGroups: ProviderGroup[] = [
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
];
|
||||
allGroups.forEach((g) => groups.set(g, []));
|
||||
|
||||
// 分配 Provider 到对应分组
|
||||
filteredProviders.forEach((p) => {
|
||||
const group = p.group as ProviderGroup;
|
||||
const list = groups.get(group);
|
||||
if (list) {
|
||||
list.push(p);
|
||||
} else {
|
||||
// 未知分组放入 custom
|
||||
groups.get("custom")?.push(p);
|
||||
}
|
||||
});
|
||||
|
||||
// 按 sort_order 排序每个分组内的 Provider
|
||||
groups.forEach((list) => {
|
||||
list.sort((a, b) => a.sort_order - b.sort_order);
|
||||
});
|
||||
|
||||
return groups;
|
||||
}, [filteredProviders]);
|
||||
|
||||
// ===== 返回 =====
|
||||
return {
|
||||
providers,
|
||||
selectedProviderId,
|
||||
selectedProvider,
|
||||
loading,
|
||||
error,
|
||||
searchQuery,
|
||||
collapsedGroups,
|
||||
|
||||
refresh: fetchProviders,
|
||||
selectProvider,
|
||||
setSearchQuery,
|
||||
toggleGroup,
|
||||
reorderProviders,
|
||||
|
||||
addCustomProvider,
|
||||
updateProvider,
|
||||
deleteCustomProvider,
|
||||
toggleProviderEnabled,
|
||||
|
||||
addApiKey,
|
||||
deleteApiKey,
|
||||
toggleApiKey,
|
||||
updateApiKeyAlias,
|
||||
|
||||
exportConfig,
|
||||
importConfig,
|
||||
|
||||
filteredProviders,
|
||||
providersByGroup,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>302.AI</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 294 B |
@@ -0,0 +1,65 @@
|
||||
# Provider 图标系统
|
||||
|
||||
Provider 图标组件和资源文件。
|
||||
|
||||
## 文件索引
|
||||
|
||||
| 文件 | 描述 |
|
||||
|------|------|
|
||||
| `index.tsx` | Provider 图标组件，统一的图标渲染接口 |
|
||||
| `utils.ts` | 图标辅助函数，Provider ID 到图标名称的映射 |
|
||||
| `*.svg` | SVG 图标资源文件 |
|
||||
|
||||
## 使用方法
|
||||
|
||||
```tsx
|
||||
import { ProviderIcon } from '@/icons/providers';
|
||||
|
||||
// 基本用法
|
||||
<ProviderIcon providerType="openai" size={24} />
|
||||
|
||||
// 使用字符串大小
|
||||
<ProviderIcon providerType="deepseek" size="1.5rem" />
|
||||
|
||||
// 禁用 fallback
|
||||
<ProviderIcon providerType="custom" showFallback={false} />
|
||||
```
|
||||
|
||||
## 支持的 Provider
|
||||
|
||||
### 主流 AI
|
||||
- openai, anthropic, gemini, deepseek, moonshot
|
||||
- groq, grok, mistral, perplexity, cohere
|
||||
|
||||
### 国内 AI
|
||||
- zhipu, baichuan, dashscope, stepfun, doubao
|
||||
- minimax, yi, hunyuan, tencent-cloud-ti, baidu-cloud
|
||||
- infini, modelscope, xirang, mimo, zhinao
|
||||
|
||||
### 云服务
|
||||
- azure-openai, vertexai, aws-bedrock, github, copilot
|
||||
|
||||
### API 聚合
|
||||
- silicon, openrouter, aihubmix, 302ai, together
|
||||
- fireworks, nvidia, hyperbolic, cerebras, ppio
|
||||
- 等 25+ 服务
|
||||
|
||||
### 本地服务
|
||||
- ollama, lmstudio, new-api, gpustack, ovms
|
||||
|
||||
### 专用服务
|
||||
- jina, voyageai, cherryin
|
||||
|
||||
## 添加新图标
|
||||
|
||||
1. 将 SVG 文件添加到此目录
|
||||
2. 在 `utils.ts` 的 `availableIcons` 数组中添加图标名称
|
||||
3. 在 `utils.ts` 的 `providerTypeToIcon` 映射中添加 Provider ID 到图标名称的映射
|
||||
4. 在 `index.tsx` 中导入 SVG 并添加到 `iconComponents` 映射
|
||||
|
||||
## 图标规范
|
||||
|
||||
- 格式：SVG
|
||||
- 大小：建议使用 `height="1em" width="1em"` 以支持响应式
|
||||
- 颜色：使用 `fill="currentColor"` 以支持主题切换
|
||||
- 命名：使用小写字母和连字符，如 `azure-openai.svg`
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>AiHubMix</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 221 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>AIOnly</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
|
||||
|
After Width: | Height: | Size: 268 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>AlayaNew</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 221 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>百川 (Baichuan)</title><path d="M12 2L4 6v12l8 4 8-4V6l-8-4zm0 2.5L18 8v8l-6 3-6-3V8l6-3.5zm0 3.5l-4 2v4l4 2 4-2v-4l-4-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 244 B |
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>BaiduCloud</title><path d="M21.715 5.61l-3.983 2.31a.903.903 0 01-.896 0L12.44 5.384a.903.903 0 00-.897 0L7.156 7.92a.903.903 0 01-.896 0L2.276 5.617 12.002 0l9.713 5.61z" fill="#5BCA87"></path><path d="M18.641 9.467a.89.89 0 00-.438.77v5.072a.896.896 0 01-.445.77l-4.428 2.51a.884.884 0 00-.445.777v4.607l4.429-2.536 5.31-3.047V7.157l-3.983 2.31z" fill="#EC5D3E"></path><path d="M10.98 18.941a.936.936 0 00-.305-.352l-4.429-2.516a.903.903 0 01-.431-.764v-5.078a.89.89 0 00-.452-.757l-.451-.26L1.38 7.158V18.39l5.311 3.047L11.126 24v-4.608a.881.881 0 00-.146-.45z" fill="#2464F5"></path></svg>
|
||||
|
After Width: | Height: | Size: 717 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>AWS Bedrock</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18zM4 9.27l7 3.5v7.05l-7-3.5V9.27zm9 10.55v-7.05l7-3.5v7.05l-7 3.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 288 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>BurnCloud</title><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></svg>
|
||||
|
After Width: | Height: | Size: 299 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cephalon</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7z"/></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cerebras</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7z"/></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>CherryIN</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
|
After Width: | Height: | Size: 263 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cohere</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
|
After Width: | Height: | Size: 261 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Custom Provider</title><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
|
||||
|
After Width: | Height: | Size: 274 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>百炼/通义千问 (Dashscope)</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18zM4 9.27l7 3.5v7.05l-7-3.5V9.27zm9 10.55v-7.05l7-3.5v7.05l-7 3.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 308 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>DMXAPI</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 219 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Fireworks</title><path d="M12 2l2.4 7.2H22l-6 4.8 2.4 7.2L12 16.4l-6.4 4.8 2.4-7.2-6-4.8h7.6L12 2z"/></svg>
|
||||
|
After Width: | Height: | Size: 219 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Github</title><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"/></svg>
|
||||
|
After Width: | Height: | Size: 858 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>GPUStack</title><path d="M4 4h4v4H4V4zm6 0h4v4h-4V4zm6 0h4v4h-4V4zM4 10h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4zM4 16h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4z"/></svg>
|
||||
|
After Width: | Height: | Size: 277 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Grok (xAI)</title><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
|
After Width: | Height: | Size: 303 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Groq</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zm0 2.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm0 2a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"/></svg>
|
||||
|
After Width: | Height: | Size: 341 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Hugging Face</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
|
||||
|
After Width: | Height: | Size: 377 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>腾讯混元 (Hunyuan)</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
|
After Width: | Height: | Size: 460 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Hyperbolic</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 298 B |
@@ -1,8 +1,21 @@
|
||||
/**
|
||||
* @file Provider 图标组件
|
||||
* @description 统一的 Provider 图标组件，支持所有 System Provider
|
||||
* @module icons/providers
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 10.1, 10.2, 10.4**
|
||||
*/
|
||||
|
||||
import React, { useMemo, ComponentType, SVGProps } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { providerTypeToIcon } from "./utils";
|
||||
|
||||
// 使用 SVGR 导入 SVG 组件
|
||||
// ============================================================================
|
||||
// SVG 图标导入 - 使用 SVGR
|
||||
// ============================================================================
|
||||
|
||||
// 现有图标
|
||||
import AwsIcon from "./aws.svg?react";
|
||||
import GeminiIcon from "./gemini.svg?react";
|
||||
import AnthropicIcon from "./anthropic.svg?react";
|
||||
@@ -23,8 +36,85 @@ import AzureIcon from "./azure.svg?react";
|
||||
import AntigravityIcon from "./antigravity.svg?react";
|
||||
import ProxycastIcon from "./proxycast.svg?react";
|
||||
|
||||
// 新增图标 - 主流 AI
|
||||
import PerplexityIcon from "./perplexity.svg?react";
|
||||
import MoonshotIcon from "./moonshot.svg?react";
|
||||
import GrokIcon from "./grok.svg?react";
|
||||
import GroqIcon from "./groq.svg?react";
|
||||
import MistralIcon from "./mistral.svg?react";
|
||||
import CohereIcon from "./cohere.svg?react";
|
||||
|
||||
// 新增图标 - 国内 AI
|
||||
import BaiduIcon from "./baidu.svg?react";
|
||||
import YiIcon from "./yi.svg?react";
|
||||
import BaichuanIcon from "./baichuan.svg?react";
|
||||
import HunyuanIcon from "./hunyuan.svg?react";
|
||||
import StepfunIcon from "./stepfun.svg?react";
|
||||
import TencentIcon from "./tencent.svg?react";
|
||||
import InfiniIcon from "./infini.svg?react";
|
||||
import XirangIcon from "./xirang.svg?react";
|
||||
import MimoIcon from "./mimo.svg?react";
|
||||
import ModelscopeIcon from "./modelscope.svg?react";
|
||||
import ZhinaoIcon from "./zhinao.svg?react";
|
||||
import DashscopeIcon from "./dashscope.svg?react";
|
||||
|
||||
// 新增图标 - 云服务
|
||||
import VertexaiIcon from "./vertexai.svg?react";
|
||||
import BedrockIcon from "./bedrock.svg?react";
|
||||
import GithubIcon from "./github.svg?react";
|
||||
|
||||
// 新增图标 - API 聚合
|
||||
import SiliconIcon from "./silicon.svg?react";
|
||||
import OpenrouterIcon from "./openrouter.svg?react";
|
||||
import Ai302Icon from "./302ai.svg?react";
|
||||
import AihubmixIcon from "./aihubmix.svg?react";
|
||||
import TogetherIcon from "./together.svg?react";
|
||||
import PpioIcon from "./ppio.svg?react";
|
||||
import HyperbolicIcon from "./hyperbolic.svg?react";
|
||||
import CerebrasIcon from "./cerebras.svg?react";
|
||||
import NvidiaIcon from "./nvidia.svg?react";
|
||||
import FireworksIcon from "./fireworks.svg?react";
|
||||
import TokenfluxIcon from "./tokenflux.svg?react";
|
||||
import CephalonIcon from "./cephalon.svg?react";
|
||||
import Ph8Icon from "./ph8.svg?react";
|
||||
import QiniuIcon from "./qiniu.svg?react";
|
||||
import LanyunIcon from "./lanyun.svg?react";
|
||||
import SophnetIcon from "./sophnet.svg?react";
|
||||
import BurncloudIcon from "./burncloud.svg?react";
|
||||
import DmxapiIcon from "./dmxapi.svg?react";
|
||||
import LongcatIcon from "./longcat.svg?react";
|
||||
import AlayanewIcon from "./alayanew.svg?react";
|
||||
import AionlyIcon from "./aionly.svg?react";
|
||||
import OcoolaiIcon from "./ocoolai.svg?react";
|
||||
import VercelIcon from "./vercel.svg?react";
|
||||
import PoeIcon from "./poe.svg?react";
|
||||
import HuggingfaceIcon from "./huggingface.svg?react";
|
||||
|
||||
// 新增图标 - 本地服务
|
||||
import OllamaIcon from "./ollama.svg?react";
|
||||
import LmstudioIcon from "./lmstudio.svg?react";
|
||||
import NewapiIcon from "./newapi.svg?react";
|
||||
import GpustackIcon from "./gpustack.svg?react";
|
||||
import OvmsIcon from "./ovms.svg?react";
|
||||
|
||||
// 新增图标 - 专用服务
|
||||
import JinaIcon from "./jina.svg?react";
|
||||
import VoyageaiIcon from "./voyageai.svg?react";
|
||||
import CherryinIcon from "./cherryin.svg?react";
|
||||
|
||||
// 自定义 Provider 图标
|
||||
import CustomIcon from "./custom.svg?react";
|
||||
|
||||
// ============================================================================
|
||||
// 图标组件映射
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 图标组件映射表
|
||||
* 将图标名称映射到对应的 SVG 组件
|
||||
*/
|
||||
const iconComponents: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
|
||||
// 现有图标
|
||||
aws: AwsIcon,
|
||||
gemini: GeminiIcon,
|
||||
anthropic: AnthropicIcon,
|
||||
@@ -44,15 +134,105 @@ const iconComponents: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
|
||||
azure: AzureIcon,
|
||||
antigravity: AntigravityIcon,
|
||||
proxycast: ProxycastIcon,
|
||||
|
||||
// 主流 AI
|
||||
perplexity: PerplexityIcon,
|
||||
moonshot: MoonshotIcon,
|
||||
grok: GrokIcon,
|
||||
groq: GroqIcon,
|
||||
mistral: MistralIcon,
|
||||
cohere: CohereIcon,
|
||||
|
||||
// 国内 AI
|
||||
baidu: BaiduIcon,
|
||||
yi: YiIcon,
|
||||
baichuan: BaichuanIcon,
|
||||
hunyuan: HunyuanIcon,
|
||||
stepfun: StepfunIcon,
|
||||
tencent: TencentIcon,
|
||||
infini: InfiniIcon,
|
||||
xirang: XirangIcon,
|
||||
mimo: MimoIcon,
|
||||
modelscope: ModelscopeIcon,
|
||||
zhinao: ZhinaoIcon,
|
||||
dashscope: DashscopeIcon,
|
||||
|
||||
// 云服务
|
||||
vertexai: VertexaiIcon,
|
||||
bedrock: BedrockIcon,
|
||||
github: GithubIcon,
|
||||
|
||||
// API 聚合
|
||||
silicon: SiliconIcon,
|
||||
openrouter: OpenrouterIcon,
|
||||
"302ai": Ai302Icon,
|
||||
aihubmix: AihubmixIcon,
|
||||
together: TogetherIcon,
|
||||
ppio: PpioIcon,
|
||||
hyperbolic: HyperbolicIcon,
|
||||
cerebras: CerebrasIcon,
|
||||
nvidia: NvidiaIcon,
|
||||
fireworks: FireworksIcon,
|
||||
tokenflux: TokenfluxIcon,
|
||||
cephalon: CephalonIcon,
|
||||
ph8: Ph8Icon,
|
||||
qiniu: QiniuIcon,
|
||||
lanyun: LanyunIcon,
|
||||
sophnet: SophnetIcon,
|
||||
burncloud: BurncloudIcon,
|
||||
dmxapi: DmxapiIcon,
|
||||
longcat: LongcatIcon,
|
||||
alayanew: AlayanewIcon,
|
||||
aionly: AionlyIcon,
|
||||
ocoolai: OcoolaiIcon,
|
||||
vercel: VercelIcon,
|
||||
poe: PoeIcon,
|
||||
huggingface: HuggingfaceIcon,
|
||||
|
||||
// 本地服务
|
||||
ollama: OllamaIcon,
|
||||
lmstudio: LmstudioIcon,
|
||||
newapi: NewapiIcon,
|
||||
gpustack: GpustackIcon,
|
||||
ovms: OvmsIcon,
|
||||
|
||||
// 专用服务
|
||||
jina: JinaIcon,
|
||||
voyageai: VoyageaiIcon,
|
||||
cherryin: CherryinIcon,
|
||||
|
||||
// 自定义
|
||||
custom: CustomIcon,
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// ProviderIcon 组件
|
||||
// ============================================================================
|
||||
|
||||
interface ProviderIconProps {
|
||||
/** Provider 类型或 ID */
|
||||
providerType: string;
|
||||
/** 图标大小，支持数字（px）或字符串 */
|
||||
size?: number | string;
|
||||
/** 额外的 CSS 类名 */
|
||||
className?: string;
|
||||
/** 是否显示 fallback（首字母缩写） */
|
||||
showFallback?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider 图标组件
|
||||
*
|
||||
* 根据 Provider 类型或 ID 显示对应的图标。
|
||||
* 如果没有对应图标且 showFallback 为 true，则显示首字母缩写。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <ProviderIcon providerType="openai" size={24} />
|
||||
* <ProviderIcon providerType="deepseek" size="1.5rem" />
|
||||
* <ProviderIcon providerType="custom-provider" showFallback />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderIcon: React.FC<ProviderIconProps> = ({
|
||||
providerType,
|
||||
size = 24,
|
||||
@@ -89,7 +269,7 @@ export const ProviderIcon: React.FC<ProviderIconProps> = ({
|
||||
// Fallback：显示首字母
|
||||
if (showFallback) {
|
||||
const initials = providerType
|
||||
.split("_")
|
||||
.split(/[-_]/)
|
||||
.map((word) => word[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
@@ -112,3 +292,10 @@ export const ProviderIcon: React.FC<ProviderIconProps> = ({
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 导出
|
||||
// ============================================================================
|
||||
|
||||
export { iconComponents };
|
||||
export type { ProviderIconProps };
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>无问芯穹 (Infini)</title><path d="M18.6 6.62c-1.44 0-2.8.56-3.77 1.53L12 10.66 9.17 8.15C8.2 7.18 6.84 6.62 5.4 6.62 2.42 6.62 0 9.04 0 12s2.42 5.38 5.4 5.38c1.44 0 2.8-.56 3.77-1.53l2.83-2.5 2.83 2.5c.97.97 2.33 1.53 3.77 1.53 2.98 0 5.4-2.42 5.4-5.38s-2.42-5.38-5.4-5.38zM5.4 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13.2 0c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>
|
||||
|
After Width: | Height: | Size: 518 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Jina (Embedding/Rerank)</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7z"/></svg>
|
||||
|
After Width: | Height: | Size: 284 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>蓝云 (Lanyun)</title><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></svg>
|
||||
|
After Width: | Height: | Size: 305 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LM Studio</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18zM4 9.27l7 3.5v7.05l-7-3.5V9.27zm9 10.55v-7.05l7-3.5v7.05l-7 3.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 286 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LongCat</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
|
||||
|
After Width: | Height: | Size: 372 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>小米 MiMo</title><path d="M16.94 4H7.06C5.37 4 4 5.37 4 7.06v9.88C4 18.63 5.37 20 7.06 20h9.88c1.69 0 3.06-1.37 3.06-3.06V7.06C20 5.37 18.63 4 16.94 4zm-4.94 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>
|
||||
|
After Width: | Height: | Size: 336 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Mistral</title><rect x="2" y="2" width="4" height="4"/><rect x="10" y="2" width="4" height="4"/><rect x="18" y="2" width="4" height="4"/><rect x="2" y="6" width="4" height="4"/><rect x="6" y="6" width="4" height="4"/><rect x="10" y="6" width="4" height="4"/><rect x="14" y="6" width="4" height="4"/><rect x="18" y="6" width="4" height="4"/><rect x="2" y="10" width="4" height="4"/><rect x="10" y="10" width="4" height="4"/><rect x="18" y="10" width="4" height="4"/><rect x="2" y="14" width="4" height="4"/><rect x="6" y="14" width="4" height="4"/><rect x="10" y="14" width="4" height="4"/><rect x="14" y="14" width="4" height="4"/><rect x="18" y="14" width="4" height="4"/><rect x="2" y="18" width="4" height="4"/><rect x="10" y="18" width="4" height="4"/><rect x="18" y="18" width="4" height="4"/></svg>
|
||||
|
After Width: | Height: | Size: 916 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>魔搭 (ModelScope)</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
|
After Width: | Height: | Size: 274 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Moonshot</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.41 0 8 3.59 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>
|
||||
|
After Width: | Height: | Size: 384 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>New API</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 220 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>NVIDIA</title><path d="M8.948 8.798v-1.43c.186-.012.37-.018.556-.018 3.156 0 5.718 2.562 5.718 5.718 0 .186-.006.37-.018.556h1.43c.012-.186.018-.37.018-.556 0-4.262-3.456-7.718-7.718-7.718-.186 0-.37.006-.556.018v1.43c.186-.012.37-.018.556-.018 3.468 0 6.288 2.82 6.288 6.288 0 .186-.006.37-.018.556h1.43c.012-.186.018-.37.018-.556 0-4.574-3.714-8.288-8.288-8.288-.186 0-.37.006-.556.018v1.43c.186-.012.37-.018.556-.018 3.78 0 6.858 3.078 6.858 6.858 0 .186-.006.37-.018.556h1.43c.012-.186.018-.37.018-.556 0-4.886-3.972-8.858-8.858-8.858-.186 0-.37.006-.556.018v1.43c.186-.012.37-.018.556-.018 4.092 0 7.428 3.336 7.428 7.428 0 .186-.006.37-.018.556h1.43c.012-.186.018-.37.018-.556 0-5.198-4.23-9.428-9.428-9.428-.186 0-.37.006-.556.018z"/></svg>
|
||||
|
After Width: | Height: | Size: 859 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ocoolAI</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7z"/></svg>
|
||||
|
After Width: | Height: | Size: 268 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Ollama</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zm0 2.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"/></svg>
|
||||
|
After Width: | Height: | Size: 306 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenRouter</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zm0 2.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"/></svg>
|
||||
|
After Width: | Height: | Size: 310 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenVINO Model Server</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18zM4 9.27l7 3.5v7.05l-7-3.5V9.27zm9 10.55v-7.05l7-3.5v7.05l-7 3.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 298 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Perplexity</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18zM4 9.27l7 3.5v7.05l-7-3.5V9.27zm9 10.55v-7.05l7-3.5v7.05l-7 3.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 287 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>PH8</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Poe</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
|
After Width: | Height: | Size: 258 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>PPIO</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 217 B |
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* @file Provider 图标完整性属性测试
|
||||
* @description 测试所有 System Provider 都有对应的图标
|
||||
* @module icons/providers/providers-icons.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor, Property 19: Provider 图标完整性**
|
||||
* **Validates: Requirements 10.1**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import { getSystemProviderIds } from "@/lib/config/providers";
|
||||
import type { SystemProviderId } from "@/lib/types/provider";
|
||||
import {
|
||||
providerTypeToIcon,
|
||||
hasProviderIcon,
|
||||
getIconName,
|
||||
availableIcons,
|
||||
} from "./utils";
|
||||
import { iconComponents } from "./index";
|
||||
|
||||
describe("Provider 图标系统", () => {
|
||||
/**
|
||||
* Property 19: Provider 图标完整性
|
||||
*
|
||||
* *对于任意* System Provider ID，应存在对应的图标资源
|
||||
*
|
||||
* **Validates: Requirements 10.1**
|
||||
*/
|
||||
describe("Property 19: Provider 图标完整性", () => {
|
||||
// 获取所有 System Provider ID
|
||||
const systemProviderIds = getSystemProviderIds();
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"每个 System Provider 应有对应的图标映射",
|
||||
(providerId: SystemProviderId) => {
|
||||
// 验证 Provider ID 在映射表中存在
|
||||
const iconName = providerTypeToIcon[providerId];
|
||||
expect(iconName).toBeDefined();
|
||||
expect(typeof iconName).toBe("string");
|
||||
expect(iconName.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"每个 System Provider 的图标名称应在可用图标列表中",
|
||||
(providerId: SystemProviderId) => {
|
||||
const iconName = getIconName(providerId);
|
||||
expect((availableIcons as readonly string[]).includes(iconName)).toBe(
|
||||
true,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"每个 System Provider 应有对应的图标组件",
|
||||
(providerId: SystemProviderId) => {
|
||||
const iconName = getIconName(providerId);
|
||||
const IconComponent = iconComponents[iconName];
|
||||
|
||||
expect(IconComponent).toBeDefined();
|
||||
expect(typeof IconComponent).toBe("function");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"hasProviderIcon 应对所有 System Provider 返回 true",
|
||||
(providerId: SystemProviderId) => {
|
||||
expect(hasProviderIcon(providerId)).toBe(true);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("图标映射一致性", () => {
|
||||
test("所有可用图标应有对应的组件", () => {
|
||||
for (const iconName of availableIcons) {
|
||||
const IconComponent = iconComponents[iconName];
|
||||
expect(IconComponent).toBeDefined();
|
||||
expect(typeof IconComponent).toBe("function");
|
||||
}
|
||||
});
|
||||
|
||||
test("图标组件映射应包含所有可用图标", () => {
|
||||
const componentKeys = Object.keys(iconComponents);
|
||||
for (const iconName of availableIcons) {
|
||||
expect(componentKeys).toContain(iconName);
|
||||
}
|
||||
});
|
||||
|
||||
test("Provider 类型映射的值应都在可用图标列表中", () => {
|
||||
const mappedIcons = Object.values(providerTypeToIcon);
|
||||
for (const iconName of mappedIcons) {
|
||||
expect((availableIcons as readonly string[]).includes(iconName)).toBe(
|
||||
true,
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("图标数量验证", () => {
|
||||
test("可用图标数量应至少为 60", () => {
|
||||
expect(availableIcons.length).toBeGreaterThanOrEqual(60);
|
||||
});
|
||||
|
||||
test("图标组件数量应与可用图标数量一致", () => {
|
||||
const componentCount = Object.keys(iconComponents).length;
|
||||
expect(componentCount).toBe(availableIcons.length);
|
||||
});
|
||||
|
||||
test("所有 System Provider 都应有图标映射", () => {
|
||||
const systemProviderIds = getSystemProviderIds();
|
||||
const mappedProviders = Object.keys(providerTypeToIcon);
|
||||
|
||||
for (const providerId of systemProviderIds) {
|
||||
expect(mappedProviders).toContain(providerId);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>七牛 (Qiniu)</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Silicon Flow</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93s3.05-7.44 7-7.93v15.86zm2-15.86c3.95.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07z"/></svg>
|
||||
|
After Width: | Height: | Size: 327 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>SophNet</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 220 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>阶跃星辰 (StepFun)</title><path d="M12 2l2.4 7.2H22l-6 4.8 2.4 7.2L12 16.4l-6.4 4.8 2.4-7.2-6-4.8h7.6L12 2z"/></svg>
|
||||
|
After Width: | Height: | Size: 232 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>腾讯云 TI</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/></svg>
|
||||
|
After Width: | Height: | Size: 652 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Together</title><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 435 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>TokenFlux</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 222 B |
+190
-10
@@ -1,7 +1,24 @@
|
||||
// Provider 图标辅助函数
|
||||
/**
|
||||
* @file Provider 图标辅助函数
|
||||
* @description Provider 图标映射和工具函数
|
||||
* @module icons/providers/utils
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 10.1, 10.2**
|
||||
*/
|
||||
|
||||
// 可用的图标名称列表
|
||||
import type { SystemProviderId } from "@/lib/types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// 可用图标列表
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 可用的图标名称列表
|
||||
* 这些图标在 providers 目录下有对应的 SVG 文件
|
||||
*/
|
||||
export const availableIcons = [
|
||||
// 现有图标
|
||||
"aws",
|
||||
"gemini",
|
||||
"anthropic",
|
||||
@@ -21,10 +38,76 @@ export const availableIcons = [
|
||||
"azure",
|
||||
"antigravity",
|
||||
"proxycast",
|
||||
// 新增图标
|
||||
"perplexity",
|
||||
"moonshot",
|
||||
"grok",
|
||||
"groq",
|
||||
"mistral",
|
||||
"cohere",
|
||||
"baidu",
|
||||
"yi",
|
||||
"baichuan",
|
||||
"hunyuan",
|
||||
"stepfun",
|
||||
"tencent",
|
||||
"infini",
|
||||
"xirang",
|
||||
"mimo",
|
||||
"modelscope",
|
||||
"zhinao",
|
||||
"vertexai",
|
||||
"silicon",
|
||||
"openrouter",
|
||||
"302ai",
|
||||
"github",
|
||||
"bedrock",
|
||||
"aihubmix",
|
||||
"together",
|
||||
"ppio",
|
||||
"hyperbolic",
|
||||
"cerebras",
|
||||
"nvidia",
|
||||
"fireworks",
|
||||
"tokenflux",
|
||||
"cephalon",
|
||||
"ph8",
|
||||
"qiniu",
|
||||
"lanyun",
|
||||
"sophnet",
|
||||
"burncloud",
|
||||
"dmxapi",
|
||||
"longcat",
|
||||
"alayanew",
|
||||
"aionly",
|
||||
"ocoolai",
|
||||
"vercel",
|
||||
"poe",
|
||||
"newapi",
|
||||
"huggingface",
|
||||
"lmstudio",
|
||||
"ollama",
|
||||
"dashscope",
|
||||
"jina",
|
||||
"gpustack",
|
||||
"voyageai",
|
||||
"cherryin",
|
||||
"ovms",
|
||||
"custom",
|
||||
] as const;
|
||||
|
||||
export type AvailableIcon = (typeof availableIcons)[number];
|
||||
|
||||
// ============================================================================
|
||||
// Provider 类型到图标名称的映射
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 类型/ID 到图标名称的映射
|
||||
* 支持 OAuth Provider 类型和 API Key Provider ID
|
||||
*/
|
||||
export const providerTypeToIcon: Record<string, string> = {
|
||||
// ===== OAuth Provider 类型映射 =====
|
||||
kiro: "kiro",
|
||||
gemini: "gemini",
|
||||
qwen: "qwen",
|
||||
@@ -39,23 +122,120 @@ export const providerTypeToIcon: Record<string, string> = {
|
||||
google: "google",
|
||||
alibaba: "alibaba",
|
||||
copilot: "copilot",
|
||||
deepseek: "deepseek",
|
||||
zhipu: "zhipu",
|
||||
kimi: "kimi",
|
||||
minimax: "minimax",
|
||||
doubao: "doubao",
|
||||
azure: "azure",
|
||||
aws: "aws",
|
||||
proxycast: "proxycast",
|
||||
|
||||
// ===== 主流 AI Provider =====
|
||||
deepseek: "deepseek",
|
||||
moonshot: "moonshot",
|
||||
groq: "groq",
|
||||
grok: "grok",
|
||||
mistral: "mistral",
|
||||
perplexity: "perplexity",
|
||||
cohere: "cohere",
|
||||
|
||||
// ===== 国内 AI Provider =====
|
||||
zhipu: "zhipu",
|
||||
baichuan: "baichuan",
|
||||
dashscope: "dashscope",
|
||||
stepfun: "stepfun",
|
||||
doubao: "doubao",
|
||||
minimax: "minimax",
|
||||
yi: "yi",
|
||||
hunyuan: "hunyuan",
|
||||
"tencent-cloud-ti": "tencent",
|
||||
"baidu-cloud": "baidu",
|
||||
infini: "infini",
|
||||
modelscope: "modelscope",
|
||||
xirang: "xirang",
|
||||
mimo: "mimo",
|
||||
zhinao: "zhinao",
|
||||
|
||||
// ===== 云服务 Provider =====
|
||||
"azure-openai": "azure",
|
||||
vertexai: "vertexai",
|
||||
"aws-bedrock": "bedrock",
|
||||
github: "github",
|
||||
|
||||
// ===== API 聚合服务 =====
|
||||
silicon: "silicon",
|
||||
openrouter: "openrouter",
|
||||
aihubmix: "aihubmix",
|
||||
"302ai": "302ai",
|
||||
together: "together",
|
||||
fireworks: "fireworks",
|
||||
nvidia: "nvidia",
|
||||
hyperbolic: "hyperbolic",
|
||||
cerebras: "cerebras",
|
||||
ppio: "ppio",
|
||||
qiniu: "qiniu",
|
||||
tokenflux: "tokenflux",
|
||||
cephalon: "cephalon",
|
||||
lanyun: "lanyun",
|
||||
ph8: "ph8",
|
||||
sophnet: "sophnet",
|
||||
ocoolai: "ocoolai",
|
||||
dmxapi: "dmxapi",
|
||||
aionly: "aionly",
|
||||
burncloud: "burncloud",
|
||||
alayanew: "alayanew",
|
||||
longcat: "longcat",
|
||||
poe: "poe",
|
||||
huggingface: "huggingface",
|
||||
"vercel-gateway": "vercel",
|
||||
|
||||
// ===== 本地服务 Provider =====
|
||||
ollama: "ollama",
|
||||
lmstudio: "lmstudio",
|
||||
"new-api": "newapi",
|
||||
gpustack: "gpustack",
|
||||
ovms: "ovms",
|
||||
|
||||
// ===== 专用服务 Provider =====
|
||||
jina: "jina",
|
||||
voyageai: "voyageai",
|
||||
cherryin: "cherryin",
|
||||
|
||||
// ===== 自定义 Provider =====
|
||||
custom: "custom",
|
||||
};
|
||||
|
||||
// 获取规范化的图标名称
|
||||
// ============================================================================
|
||||
// 辅助函数
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取规范化的图标名称
|
||||
* @param providerType Provider 类型或 ID
|
||||
* @returns 图标名称
|
||||
*/
|
||||
export const getIconName = (providerType: string): string => {
|
||||
return providerTypeToIcon[providerType] || providerType;
|
||||
};
|
||||
|
||||
// 检查是否有对应的图标
|
||||
/**
|
||||
* 检查是否有对应的图标
|
||||
* @param providerType Provider 类型或 ID
|
||||
* @returns 是否有对应图标
|
||||
*/
|
||||
export const hasProviderIcon = (providerType: string): boolean => {
|
||||
const iconName = getIconName(providerType);
|
||||
return (availableIcons as readonly string[]).includes(iconName);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取 System Provider 的图标名称
|
||||
* @param providerId System Provider ID
|
||||
* @returns 图标名称
|
||||
*/
|
||||
export const getSystemProviderIcon = (providerId: SystemProviderId): string => {
|
||||
return providerTypeToIcon[providerId] || "custom";
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取所有 System Provider ID 到图标的映射
|
||||
* @returns Provider ID 到图标名称的映射
|
||||
*/
|
||||
export const getAllProviderIconMappings = (): Record<string, string> => {
|
||||
return { ...providerTypeToIcon };
|
||||
};
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Vercel</title><path d="M12 0l12 20.785H0L12 0z"></path></svg>
|
||||
|
After Width: | Height: | Size: 225 B |
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>VertexAI</title><path d="M11.995 20.216a1.892 1.892 0 100 3.785 1.892 1.892 0 000-3.785zm0 2.806a.927.927 0 11.927-.914.914.914 0 01-.927.914z" fill="#4285F4"></path><path clip-rule="evenodd" d="M21.687 14.144c.237.038.452.16.605.344a.978.978 0 01-.18 1.3l-8.24 6.082a1.892 1.892 0 00-1.147-1.508l8.28-6.08a.991.991 0 01.682-.138z" fill="#669DF6" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M10.122 21.842l-8.217-6.066a.952.952 0 01-.206-1.287.978.978 0 011.287-.206l8.28 6.08a1.893 1.893 0 00-1.144 1.479z" fill="#AECBFA" fill-rule="evenodd"></path><path d="M4.273 4.475a.978.978 0 01-.965-.965V1.09a.978.978 0 111.943 0v2.42a.978.978 0 01-.978.965zM4.247 13.034a.978.978 0 100-1.956.978.978 0 000 1.956zM4.247 10.19a.978.978 0 100-1.956.978.978 0 000 1.956zM4.247 7.332a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#AECBFA"></path><path d="M19.718 7.307a.978.978 0 01-.965-.979v-2.42a.965.965 0 011.93 0v2.42a.964.964 0 01-.965.979zM19.743 13.047a.978.978 0 100-1.956.978.978 0 000 1.956zM19.743 10.151a.978.978 0 100-1.956.978.978 0 000 1.956zM19.743 2.068a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#4285F4"></path><path d="M11.995 15.917a.978.978 0 01-.965-.965v-2.459a.978.978 0 011.943 0v2.433a.976.976 0 01-.978.991zM11.995 18.762a.978.978 0 100-1.956.978.978 0 000 1.956zM11.995 10.64a.978.978 0 100-1.956.978.978 0 000 1.956zM11.995 7.783a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#669DF6"></path><path d="M15.856 10.177a.978.978 0 01-.965-.965v-2.42a.977.977 0 011.702-.763.979.979 0 01.241.763v2.42a.978.978 0 01-.978.965zM15.869 4.913a.978.978 0 100-1.956.978.978 0 000 1.956zM15.869 15.853a.978.978 0 100-1.956.978.978 0 000 1.956zM15.869 12.996a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#4285F4"></path><path d="M8.121 15.853a.978.978 0 100-1.956.978.978 0 000 1.956zM8.121 7.783a.978.978 0 100-1.956.978.978 0 000 1.956zM8.121 4.913a.978.978 0 100-1.957.978.978 0 000 1.957zM8.134 12.996a.978.978 0 01-.978-.94V9.611a.965.965 0 011.93 0v2.445a.966.966 0 01-.952.94z" fill="#AECBFA"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>VoyageAI (Embedding)</title><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.09 3.54L12 11.27 4.91 7.72 12 4.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 233 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>息壤 (Xirang)</title><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
|
After Width: | Height: | Size: 208 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>零一万物 (Yi)</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
|
||||
|
After Width: | Height: | Size: 382 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>360 智脑 (Zhinao)</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 307 B |
@@ -10,7 +10,12 @@
|
||||
## 文件索引
|
||||
|
||||
- `api/` - API 调用封装
|
||||
- `apiKeyProvider.ts` - API Key Provider API 封装（Requirements 9.1）
|
||||
- `pluginUI.ts` - 插件 UI API（Requirements 3.1）
|
||||
- `config/` - 配置模块
|
||||
- `providers.ts` - System Provider 预设配置（Requirements 3.1-3.6）
|
||||
- `types/` - 类型定义模块
|
||||
- `provider.ts` - API Key Provider 系统类型定义（Requirements 5.1）
|
||||
- `errors/` - 错误处理模块
|
||||
- `playwrightErrors.ts` - Playwright 登录错误处理（Requirements 5.1, 5.2, 5.3, 5.4）
|
||||
- `plugin-ui/` - 插件 UI 系统（基于 A2UI 设计理念）
|
||||
@@ -24,6 +29,8 @@
|
||||
- `components/` - 标准组件实现
|
||||
- `tauri/` - Tauri 命令封装
|
||||
- `utils/` - 通用工具函数
|
||||
- `apiKeyValidation.ts` - API Key 格式验证（Requirements 3.8）
|
||||
- `syntaxHighlight.ts` - 语法高亮工具
|
||||
- `flowEventManager.ts` - 流量事件管理器
|
||||
- `notificationService.ts` - 通知服务
|
||||
- `utils.ts` - 通用工具函数
|
||||
|
||||
+27
-2
@@ -44,6 +44,7 @@ export type StreamEvent =
|
||||
| StreamEventToolStart
|
||||
| StreamEventToolEnd
|
||||
| StreamEventDone
|
||||
| StreamEventFinalDone
|
||||
| StreamEventError;
|
||||
|
||||
/**
|
||||
@@ -65,6 +66,8 @@ export interface StreamEventToolStart {
|
||||
tool_name: string;
|
||||
/** 工具调用 ID */
|
||||
tool_id: string;
|
||||
/** 工具参数（JSON 字符串） */
|
||||
arguments?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -80,7 +83,7 @@ export interface StreamEventToolEnd {
|
||||
}
|
||||
|
||||
/**
|
||||
* 完成事件
|
||||
* 完成事件（单次 API 响应完成，工具循环可能继续）
|
||||
* Requirements: 9.5 - THE Frontend SHALL display token usage statistics after each Agent response
|
||||
*/
|
||||
export interface StreamEventDone {
|
||||
@@ -89,6 +92,16 @@ export interface StreamEventDone {
|
||||
usage?: TokenUsage;
|
||||
}
|
||||
|
||||
/**
|
||||
* 最终完成事件（整个对话完成，包括所有工具调用循环）
|
||||
* 前端收到此事件后才能取消监听
|
||||
*/
|
||||
export interface StreamEventFinalDone {
|
||||
type: "final_done";
|
||||
/** Token 使用量（可选） */
|
||||
usage?: TokenUsage;
|
||||
}
|
||||
|
||||
/**
|
||||
* 错误事件
|
||||
*/
|
||||
@@ -106,6 +119,8 @@ export interface ToolCallState {
|
||||
id: string;
|
||||
/** 工具名称 */
|
||||
name: string;
|
||||
/** 工具参数（JSON 字符串） */
|
||||
arguments?: string;
|
||||
/** 执行状态 */
|
||||
status: "running" | "completed" | "failed";
|
||||
/** 执行结果（完成后） */
|
||||
@@ -114,6 +129,8 @@ export interface ToolCallState {
|
||||
startTime: Date;
|
||||
/** 结束时间（完成后） */
|
||||
endTime?: Date;
|
||||
/** 执行日志（实时更新） */
|
||||
logs?: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -138,6 +155,7 @@ export function parseStreamEvent(data: unknown): StreamEvent | null {
|
||||
type: "tool_start",
|
||||
tool_name: (event.tool_name as string) || "",
|
||||
tool_id: (event.tool_id as string) || "",
|
||||
arguments: event.arguments as string | undefined,
|
||||
};
|
||||
case "tool_end":
|
||||
return {
|
||||
@@ -150,6 +168,11 @@ export function parseStreamEvent(data: unknown): StreamEvent | null {
|
||||
type: "done",
|
||||
usage: event.usage as TokenUsage | undefined,
|
||||
};
|
||||
case "final_done":
|
||||
return {
|
||||
type: "final_done",
|
||||
usage: event.usage as TokenUsage | undefined,
|
||||
};
|
||||
case "error":
|
||||
return {
|
||||
type: "error",
|
||||
@@ -280,18 +303,20 @@ export async function sendAgentMessage(
|
||||
* // 处理文本增量
|
||||
* }
|
||||
* });
|
||||
* await sendAgentMessageStream(message, eventName);
|
||||
* await sendAgentMessageStream(message, eventName, sessionId);
|
||||
* ```
|
||||
*/
|
||||
export async function sendAgentMessageStream(
|
||||
message: string,
|
||||
eventName: string,
|
||||
sessionId?: string,
|
||||
model?: string,
|
||||
images?: ImageInput[],
|
||||
): Promise<void> {
|
||||
return await invoke("native_agent_chat_stream", {
|
||||
message,
|
||||
eventName,
|
||||
sessionId,
|
||||
model,
|
||||
images,
|
||||
});
|
||||
|
||||
@@ -0,0 +1,246 @@
|
||||
/**
|
||||
* @file API Key Provider API 模块
|
||||
* @description 封装 API Key Provider 相关的 Tauri 命令调用
|
||||
* @module lib/api/apiKeyProvider
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 9.1**
|
||||
*/
|
||||
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
// ============================================================================
|
||||
// 请求类型
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 添加自定义 Provider 请求
|
||||
*/
|
||||
export interface AddCustomProviderRequest {
|
||||
name: string;
|
||||
type: string;
|
||||
api_host: string;
|
||||
api_version?: string;
|
||||
project?: string;
|
||||
location?: string;
|
||||
region?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新 Provider 请求
|
||||
*/
|
||||
export interface UpdateProviderRequest {
|
||||
name?: string;
|
||||
api_host?: string;
|
||||
enabled?: boolean;
|
||||
sort_order?: number;
|
||||
api_version?: string;
|
||||
project?: string;
|
||||
location?: string;
|
||||
region?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加 API Key 请求
|
||||
*/
|
||||
export interface AddApiKeyRequest {
|
||||
provider_id: string;
|
||||
api_key: string;
|
||||
alias?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 响应类型
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 显示数据（用于前端）
|
||||
*/
|
||||
export interface ProviderDisplay {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
api_host: string;
|
||||
is_system: boolean;
|
||||
group: string;
|
||||
enabled: boolean;
|
||||
sort_order: number;
|
||||
api_version?: string;
|
||||
project?: string;
|
||||
location?: string;
|
||||
region?: string;
|
||||
api_key_count: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* API Key 显示数据（用于前端，掩码显示）
|
||||
*/
|
||||
export interface ApiKeyDisplay {
|
||||
id: string;
|
||||
provider_id: string;
|
||||
/** 掩码后的 API Key */
|
||||
api_key_masked: string;
|
||||
alias?: string;
|
||||
enabled: boolean;
|
||||
usage_count: number;
|
||||
error_count: number;
|
||||
last_used_at?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider 完整显示数据（包含 API Keys）
|
||||
*/
|
||||
export interface ProviderWithKeysDisplay extends ProviderDisplay {
|
||||
api_keys: ApiKeyDisplay[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入结果
|
||||
*/
|
||||
export interface ImportResult {
|
||||
success: boolean;
|
||||
imported_providers: number;
|
||||
imported_api_keys: number;
|
||||
skipped_providers: number;
|
||||
errors: string[];
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// API 函数
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* API Key Provider API 封装
|
||||
*/
|
||||
export const apiKeyProviderApi = {
|
||||
/**
|
||||
* 获取所有 API Key Provider（包含 API Keys）
|
||||
*/
|
||||
async getProviders(): Promise<ProviderWithKeysDisplay[]> {
|
||||
return invoke("get_api_key_providers");
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取单个 API Key Provider（包含 API Keys）
|
||||
*/
|
||||
async getProvider(id: string): Promise<ProviderWithKeysDisplay | null> {
|
||||
return invoke("get_api_key_provider", { id });
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加自定义 Provider
|
||||
*/
|
||||
async addCustomProvider(
|
||||
request: AddCustomProviderRequest,
|
||||
): Promise<ProviderDisplay> {
|
||||
return invoke("add_custom_api_key_provider", { request });
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新 Provider 配置
|
||||
*/
|
||||
async updateProvider(
|
||||
id: string,
|
||||
request: UpdateProviderRequest,
|
||||
): Promise<ProviderDisplay> {
|
||||
return invoke("update_api_key_provider", { id, request });
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除自定义 Provider
|
||||
*/
|
||||
async deleteCustomProvider(id: string): Promise<boolean> {
|
||||
return invoke("delete_custom_api_key_provider", { id });
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加 API Key
|
||||
*/
|
||||
async addApiKey(request: AddApiKeyRequest): Promise<ApiKeyDisplay> {
|
||||
return invoke("add_api_key", { request });
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除 API Key
|
||||
*/
|
||||
async deleteApiKey(keyId: string): Promise<boolean> {
|
||||
return invoke("delete_api_key", { keyId });
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换 API Key 启用状态
|
||||
*/
|
||||
async toggleApiKey(keyId: string, enabled: boolean): Promise<ApiKeyDisplay> {
|
||||
return invoke("toggle_api_key", { keyId, enabled });
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新 API Key 别名
|
||||
*/
|
||||
async updateApiKeyAlias(
|
||||
keyId: string,
|
||||
alias?: string,
|
||||
): Promise<ApiKeyDisplay> {
|
||||
return invoke("update_api_key_alias", { keyId, alias });
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取下一个可用的 API Key（用于 API 调用）
|
||||
*/
|
||||
async getNextApiKey(providerId: string): Promise<string | null> {
|
||||
return invoke("get_next_api_key", { providerId });
|
||||
},
|
||||
|
||||
/**
|
||||
* 记录 API Key 使用
|
||||
*/
|
||||
async recordUsage(keyId: string): Promise<void> {
|
||||
return invoke("record_api_key_usage", { keyId });
|
||||
},
|
||||
|
||||
/**
|
||||
* 记录 API Key 错误
|
||||
*/
|
||||
async recordError(keyId: string): Promise<void> {
|
||||
return invoke("record_api_key_error", { keyId });
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取 UI 状态
|
||||
*/
|
||||
async getUiState(key: string): Promise<string | null> {
|
||||
return invoke("get_provider_ui_state", { key });
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置 UI 状态
|
||||
*/
|
||||
async setUiState(key: string, value: string): Promise<void> {
|
||||
return invoke("set_provider_ui_state", { key, value });
|
||||
},
|
||||
|
||||
/**
|
||||
* 批量更新 Provider 排序顺序
|
||||
* **Validates: Requirements 8.4**
|
||||
*/
|
||||
async updateSortOrders(sortOrders: [string, number][]): Promise<void> {
|
||||
return invoke("update_provider_sort_orders", { sortOrders });
|
||||
},
|
||||
|
||||
/**
|
||||
* 导出 Provider 配置
|
||||
*/
|
||||
async exportConfig(includeKeys: boolean): Promise<string> {
|
||||
return invoke("export_api_key_providers", { includeKeys });
|
||||
},
|
||||
|
||||
/**
|
||||
* 导入 Provider 配置
|
||||
*/
|
||||
async importConfig(configJson: string): Promise<ImportResult> {
|
||||
return invoke("import_api_key_providers", { configJson });
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,416 @@
|
||||
/**
|
||||
* @file 导入导出属性测试
|
||||
* @description 测试 Provider 配置导入导出的 Round-Trip 正确性
|
||||
* @module lib/api/importExport.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor, Property 18: 导入导出 Round-Trip**
|
||||
* **Validates: Requirements 9.4**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import type {
|
||||
ProviderConfig,
|
||||
ProviderType,
|
||||
ProviderGroup,
|
||||
} from "../types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// 测试用的纯函数（模拟导入导出逻辑）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 导出配置格式
|
||||
*/
|
||||
interface ExportedConfig {
|
||||
version: string;
|
||||
exported_at: string;
|
||||
providers: ProviderConfig[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入结果
|
||||
*/
|
||||
interface ImportResult {
|
||||
success: boolean;
|
||||
imported_providers: number;
|
||||
skipped_providers: number;
|
||||
errors: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出 Provider 配置为 JSON
|
||||
* 模拟后端的导出逻辑
|
||||
*/
|
||||
function exportProviders(
|
||||
providers: ProviderConfig[],
|
||||
_includeKeys: boolean,
|
||||
): string {
|
||||
const exportData: ExportedConfig = {
|
||||
version: "1.0",
|
||||
exported_at: new Date().toISOString(),
|
||||
providers: providers.map((p) => ({
|
||||
...p,
|
||||
// 导出时不包含敏感信息
|
||||
})),
|
||||
};
|
||||
return JSON.stringify(exportData, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析导出的配置 JSON
|
||||
* 模拟后端的导入解析逻辑
|
||||
*/
|
||||
function parseExportedConfig(configJson: string): ExportedConfig | null {
|
||||
try {
|
||||
const parsed = JSON.parse(configJson);
|
||||
if (
|
||||
!parsed.version ||
|
||||
!parsed.providers ||
|
||||
!Array.isArray(parsed.providers)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
return parsed as ExportedConfig;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入 Provider 配置
|
||||
* 模拟后端的导入逻辑（不包含数据库操作）
|
||||
*/
|
||||
function importProviders(
|
||||
configJson: string,
|
||||
existingProviderIds: Set<string>,
|
||||
): ImportResult {
|
||||
const parsed = parseExportedConfig(configJson);
|
||||
if (!parsed) {
|
||||
return {
|
||||
success: false,
|
||||
imported_providers: 0,
|
||||
skipped_providers: 0,
|
||||
errors: ["无效的配置格式"],
|
||||
};
|
||||
}
|
||||
|
||||
let imported = 0;
|
||||
let skipped = 0;
|
||||
const errors: string[] = [];
|
||||
|
||||
for (const provider of parsed.providers) {
|
||||
if (!provider.id) {
|
||||
errors.push("Provider 缺少 id");
|
||||
continue;
|
||||
}
|
||||
|
||||
// 检查是否已存在（冲突处理）
|
||||
if (existingProviderIds.has(provider.id)) {
|
||||
skipped++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// 验证必填字段
|
||||
if (
|
||||
!provider.name ||
|
||||
!provider.type ||
|
||||
!provider.apiHost ||
|
||||
!provider.group
|
||||
) {
|
||||
errors.push(`Provider ${provider.id} 缺少必填字段`);
|
||||
continue;
|
||||
}
|
||||
|
||||
imported++;
|
||||
}
|
||||
|
||||
return {
|
||||
success: errors.length === 0,
|
||||
imported_providers: imported,
|
||||
skipped_providers: skipped,
|
||||
errors,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较两个 Provider 配置是否等价
|
||||
* 忽略时间戳等动态字段
|
||||
*/
|
||||
function areProvidersEquivalent(a: ProviderConfig, b: ProviderConfig): boolean {
|
||||
return (
|
||||
a.id === b.id &&
|
||||
a.name === b.name &&
|
||||
a.type === b.type &&
|
||||
a.apiHost === b.apiHost &&
|
||||
a.isSystem === b.isSystem &&
|
||||
a.group === b.group &&
|
||||
a.enabled === b.enabled &&
|
||||
a.sortOrder === b.sortOrder &&
|
||||
a.apiVersion === b.apiVersion &&
|
||||
a.project === b.project &&
|
||||
a.location === b.location &&
|
||||
a.region === b.region
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Arbitrary 生成器
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成有效的 Provider ID
|
||||
*/
|
||||
const providerIdArb = fc.stringMatching(/^[a-z][a-z0-9-]{2,20}$/);
|
||||
|
||||
/**
|
||||
* 生成有效的 Provider 名称
|
||||
*/
|
||||
const providerNameArb = fc.string({ minLength: 1, maxLength: 50 });
|
||||
|
||||
/**
|
||||
* 生成有效的 API Host
|
||||
*/
|
||||
const apiHostArb = fc.oneof(
|
||||
fc.constant("https://api.openai.com"),
|
||||
fc.constant("https://api.anthropic.com"),
|
||||
fc.constant("https://api.example.com"),
|
||||
fc.stringMatching(/^https?:\/\/[a-z0-9.-]+\.[a-z]{2,}(\/[a-z0-9-]*)*\/?$/),
|
||||
);
|
||||
|
||||
/**
|
||||
* 生成有效的 Provider Type
|
||||
*/
|
||||
const providerTypeArb: fc.Arbitrary<ProviderType> = fc.constantFrom(
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
);
|
||||
|
||||
/**
|
||||
* 生成有效的 Provider Group
|
||||
*/
|
||||
const providerGroupArb: fc.Arbitrary<ProviderGroup> = fc.constantFrom(
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
);
|
||||
|
||||
/**
|
||||
* 生成有效的 Provider 配置
|
||||
*/
|
||||
const providerConfigArb: fc.Arbitrary<ProviderConfig> = fc.record({
|
||||
id: providerIdArb,
|
||||
name: providerNameArb,
|
||||
type: providerTypeArb,
|
||||
apiHost: apiHostArb,
|
||||
isSystem: fc.boolean(),
|
||||
group: providerGroupArb,
|
||||
enabled: fc.boolean(),
|
||||
sortOrder: fc.integer({ min: 0, max: 9999 }),
|
||||
apiVersion: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
project: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
location: fc.option(fc.string({ minLength: 1, maxLength: 50 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
region: fc.option(fc.string({ minLength: 1, maxLength: 20 }), {
|
||||
nil: undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
/**
|
||||
* 生成唯一 ID 的 Provider 配置列表
|
||||
*/
|
||||
const uniqueProvidersArb = fc
|
||||
.array(providerConfigArb, { minLength: 0, maxLength: 10 })
|
||||
.map((providers) => {
|
||||
// 确保 ID 唯一
|
||||
const seen = new Set<string>();
|
||||
return providers.filter((p) => {
|
||||
if (seen.has(p.id)) return false;
|
||||
seen.add(p.id);
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// 属性测试
|
||||
// ============================================================================
|
||||
|
||||
describe("导入导出功能", () => {
|
||||
/**
|
||||
* Property 18: 导入导出 Round-Trip
|
||||
*
|
||||
* *对于任意* Provider 配置集合，导出后再导入应得到等价的配置
|
||||
*
|
||||
* **Validates: Requirements 9.4**
|
||||
*/
|
||||
describe("Property 18: 导入导出 Round-Trip", () => {
|
||||
test.prop([uniqueProvidersArb], { numRuns: 100 })(
|
||||
"导出后再导入应保留所有 Provider 配置",
|
||||
(providers) => {
|
||||
// 导出配置
|
||||
const exported = exportProviders(providers, false);
|
||||
|
||||
// 解析导出的配置
|
||||
const parsed = parseExportedConfig(exported);
|
||||
|
||||
// 验证解析成功
|
||||
expect(parsed).not.toBeNull();
|
||||
if (!parsed) return;
|
||||
|
||||
// 验证 Provider 数量一致
|
||||
expect(parsed.providers.length).toBe(providers.length);
|
||||
|
||||
// 验证每个 Provider 配置等价
|
||||
for (let i = 0; i < providers.length; i++) {
|
||||
expect(
|
||||
areProvidersEquivalent(providers[i], parsed.providers[i]),
|
||||
).toBe(true);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([uniqueProvidersArb], { numRuns: 100 })(
|
||||
"导入到空数据库应导入所有 Provider",
|
||||
(providers) => {
|
||||
// 导出配置
|
||||
const exported = exportProviders(providers, false);
|
||||
|
||||
// 导入到空数据库（无已存在的 Provider）
|
||||
const result = importProviders(exported, new Set());
|
||||
|
||||
// 验证导入结果
|
||||
expect(result.imported_providers).toBe(providers.length);
|
||||
expect(result.skipped_providers).toBe(0);
|
||||
expect(result.errors.length).toBe(0);
|
||||
expect(result.success).toBe(true);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([uniqueProvidersArb, uniqueProvidersArb], { numRuns: 100 })(
|
||||
"导入时应跳过已存在的 Provider",
|
||||
(existingProviders, newProviders) => {
|
||||
// 创建已存在的 Provider ID 集合
|
||||
const existingIds = new Set(existingProviders.map((p) => p.id));
|
||||
|
||||
// 导出新 Provider 配置
|
||||
const exported = exportProviders(newProviders, false);
|
||||
|
||||
// 导入配置
|
||||
const result = importProviders(exported, existingIds);
|
||||
|
||||
// 计算预期的导入和跳过数量
|
||||
const expectedImported = newProviders.filter(
|
||||
(p) => !existingIds.has(p.id),
|
||||
).length;
|
||||
const expectedSkipped = newProviders.filter((p) =>
|
||||
existingIds.has(p.id),
|
||||
).length;
|
||||
|
||||
// 验证导入结果
|
||||
expect(result.imported_providers).toBe(expectedImported);
|
||||
expect(result.skipped_providers).toBe(expectedSkipped);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([uniqueProvidersArb], { numRuns: 100 })(
|
||||
"导出的 JSON 应包含版本信息",
|
||||
(providers) => {
|
||||
const exported = exportProviders(providers, false);
|
||||
const parsed = parseExportedConfig(exported);
|
||||
|
||||
expect(parsed).not.toBeNull();
|
||||
if (!parsed) return;
|
||||
|
||||
expect(parsed.version).toBe("1.0");
|
||||
expect(parsed.exported_at).toBeDefined();
|
||||
expect(typeof parsed.exported_at).toBe("string");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.string()], { numRuns: 100 })(
|
||||
"无效的 JSON 应返回导入失败",
|
||||
(invalidJson) => {
|
||||
// 跳过恰好是有效配置的情况
|
||||
const parsed = parseExportedConfig(invalidJson);
|
||||
if (parsed !== null) return;
|
||||
|
||||
const result = importProviders(invalidJson, new Set());
|
||||
|
||||
expect(result.success).toBe(false);
|
||||
expect(result.imported_providers).toBe(0);
|
||||
expect(result.errors.length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("导出配置格式", () => {
|
||||
test.prop([uniqueProvidersArb], { numRuns: 100 })(
|
||||
"导出的 JSON 应是有效的 JSON 格式",
|
||||
(providers) => {
|
||||
const exported = exportProviders(providers, false);
|
||||
|
||||
// 验证是有效的 JSON
|
||||
expect(() => JSON.parse(exported)).not.toThrow();
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([uniqueProvidersArb], { numRuns: 100 })(
|
||||
"导出的配置应包含所有必填字段",
|
||||
(providers) => {
|
||||
const exported = exportProviders(providers, false);
|
||||
const parsed = parseExportedConfig(exported);
|
||||
|
||||
expect(parsed).not.toBeNull();
|
||||
if (!parsed) return;
|
||||
|
||||
for (const provider of parsed.providers) {
|
||||
expect(provider.id).toBeDefined();
|
||||
expect(provider.name).toBeDefined();
|
||||
expect(provider.type).toBeDefined();
|
||||
expect(provider.apiHost).toBeDefined();
|
||||
expect(provider.group).toBeDefined();
|
||||
expect(typeof provider.isSystem).toBe("boolean");
|
||||
expect(typeof provider.enabled).toBe("boolean");
|
||||
expect(typeof provider.sortOrder).toBe("number");
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("冲突处理", () => {
|
||||
test.prop([providerConfigArb], { numRuns: 100 })(
|
||||
"导入已存在的 Provider 应被跳过",
|
||||
(provider) => {
|
||||
// 导出单个 Provider
|
||||
const exported = exportProviders([provider], false);
|
||||
|
||||
// 导入到已存在该 Provider 的数据库
|
||||
const existingIds = new Set([provider.id]);
|
||||
const result = importProviders(exported, existingIds);
|
||||
|
||||
// 验证被跳过
|
||||
expect(result.imported_providers).toBe(0);
|
||||
expect(result.skipped_providers).toBe(1);
|
||||
expect(result.success).toBe(true);
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
# config
|
||||
|
||||
<!-- 一旦我所属的文件夹有所变化，请更新我 -->
|
||||
|
||||
## 架构说明
|
||||
|
||||
前端配置模块，包含各功能模块的静态配置定义。
|
||||
|
||||
## 文件索引
|
||||
|
||||
- `providers.ts` - System Provider 预设配置（Requirements 3.1-3.6）
|
||||
- `PROVIDER_GROUPS` - Provider 分组配置
|
||||
- `SYSTEM_PROVIDERS` - 60+ 系统预设 Provider 配置
|
||||
- `getSystemProviderIds()` - 获取所有 Provider ID
|
||||
- `getProvidersByGroup()` - 按分组获取 Provider
|
||||
- `getProvidersGrouped()` - 获取分组后的 Provider
|
||||
- `isSystemProviderId()` - 检查是否为系统 Provider
|
||||
- `getSystemProvider()` - 获取指定 Provider 配置
|
||||
- `getSystemProviderCount()` - 获取 Provider 总数
|
||||
|
||||
## 更新提醒
|
||||
|
||||
任何文件变更后，请更新此文档和相关的上级文档。
|
||||
@@ -0,0 +1,231 @@
|
||||
/**
|
||||
* @file System Provider 配置属性测试
|
||||
* @description 测试 System Provider 配置完整性
|
||||
* @module lib/config/providers.test
|
||||
*
|
||||
* **Feature: provider-ui-refactor, Property 4: System Provider 配置完整性**
|
||||
* **Validates: Requirements 3.1-3.6**
|
||||
*/
|
||||
|
||||
import { describe, expect } from "vitest";
|
||||
import { test } from "@fast-check/vitest";
|
||||
import * as fc from "fast-check";
|
||||
import {
|
||||
SYSTEM_PROVIDERS,
|
||||
PROVIDER_GROUPS,
|
||||
getSystemProviderIds,
|
||||
getProvidersByGroup,
|
||||
getProvidersGrouped,
|
||||
isSystemProviderId,
|
||||
getSystemProvider,
|
||||
getSystemProviderCount,
|
||||
} from "./providers";
|
||||
import type { SystemProviderId, ProviderGroup } from "../types/provider";
|
||||
|
||||
describe("System Provider 配置", () => {
|
||||
/**
|
||||
* Property 4: System Provider 配置完整性
|
||||
*
|
||||
* *对于任意* System Provider ID，应存在对应的预设配置，
|
||||
* 包含 id、name、type、apiHost、group
|
||||
*
|
||||
* **Validates: Requirements 3.1-3.6**
|
||||
*/
|
||||
describe("Property 4: System Provider 配置完整性", () => {
|
||||
// 获取所有 System Provider ID
|
||||
const systemProviderIds = getSystemProviderIds();
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"每个 System Provider 应包含完整的必填字段",
|
||||
(providerId: SystemProviderId) => {
|
||||
const config = SYSTEM_PROVIDERS[providerId];
|
||||
|
||||
// 验证必填字段存在且类型正确
|
||||
expect(config).toBeDefined();
|
||||
expect(config.id).toBe(providerId);
|
||||
expect(typeof config.name).toBe("string");
|
||||
expect(config.name.length).toBeGreaterThan(0);
|
||||
expect(typeof config.type).toBe("string");
|
||||
expect(config.type.length).toBeGreaterThan(0);
|
||||
expect(typeof config.apiHost).toBe("string");
|
||||
expect(typeof config.group).toBe("string");
|
||||
expect(config.group.length).toBeGreaterThan(0);
|
||||
expect(typeof config.isSystem).toBe("boolean");
|
||||
expect(config.isSystem).toBe(true);
|
||||
expect(typeof config.enabled).toBe("boolean");
|
||||
expect(typeof config.sortOrder).toBe("number");
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"每个 System Provider 的 group 应为有效的分组类型",
|
||||
(providerId: SystemProviderId) => {
|
||||
const config = SYSTEM_PROVIDERS[providerId];
|
||||
const validGroups: ProviderGroup[] = [
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
];
|
||||
|
||||
expect(validGroups).toContain(config.group);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"每个 System Provider 的 type 应为有效的 API 类型",
|
||||
(providerId: SystemProviderId) => {
|
||||
const config = SYSTEM_PROVIDERS[providerId];
|
||||
const validTypes = [
|
||||
"openai",
|
||||
"openai-response",
|
||||
"anthropic",
|
||||
"gemini",
|
||||
"azure-openai",
|
||||
"vertexai",
|
||||
"aws-bedrock",
|
||||
"ollama",
|
||||
"new-api",
|
||||
"gateway",
|
||||
];
|
||||
|
||||
expect(validTypes).toContain(config.type);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"getSystemProvider 应返回与 SYSTEM_PROVIDERS 相同的配置",
|
||||
(providerId: SystemProviderId) => {
|
||||
const directConfig = SYSTEM_PROVIDERS[providerId];
|
||||
const functionConfig = getSystemProvider(providerId);
|
||||
|
||||
expect(functionConfig).toEqual(directConfig);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...systemProviderIds)])(
|
||||
"isSystemProviderId 应对所有 System Provider ID 返回 true",
|
||||
(providerId: SystemProviderId) => {
|
||||
expect(isSystemProviderId(providerId)).toBe(true);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("Provider 分组配置", () => {
|
||||
const validGroups: ProviderGroup[] = [
|
||||
"mainstream",
|
||||
"chinese",
|
||||
"cloud",
|
||||
"aggregator",
|
||||
"local",
|
||||
"specialized",
|
||||
"custom",
|
||||
];
|
||||
|
||||
test.prop([fc.constantFrom(...validGroups)])(
|
||||
"每个分组应有对应的配置",
|
||||
(group: ProviderGroup) => {
|
||||
const groupConfig = PROVIDER_GROUPS[group];
|
||||
|
||||
expect(groupConfig).toBeDefined();
|
||||
expect(typeof groupConfig.label).toBe("string");
|
||||
expect(groupConfig.label.length).toBeGreaterThan(0);
|
||||
expect(typeof groupConfig.order).toBe("number");
|
||||
expect(groupConfig.order).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
|
||||
test.prop([fc.constantFrom(...validGroups)])(
|
||||
"getProvidersByGroup 应返回该分组的所有 Provider",
|
||||
(group: ProviderGroup) => {
|
||||
const providers = getProvidersByGroup(group);
|
||||
|
||||
// 验证返回的所有 Provider 都属于该分组
|
||||
for (const provider of providers) {
|
||||
expect(provider.group).toBe(group);
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("Provider 数量验证", () => {
|
||||
test("System Provider 总数应至少为 60", () => {
|
||||
const count = getSystemProviderCount();
|
||||
expect(count).toBeGreaterThanOrEqual(60);
|
||||
});
|
||||
|
||||
test("主流 AI 分组应有 10 个 Provider", () => {
|
||||
const providers = getProvidersByGroup("mainstream");
|
||||
expect(providers.length).toBe(10);
|
||||
});
|
||||
|
||||
test("国内 AI 分组应有 15 个 Provider", () => {
|
||||
const providers = getProvidersByGroup("chinese");
|
||||
expect(providers.length).toBe(15);
|
||||
});
|
||||
|
||||
test("云服务分组应有 5 个 Provider", () => {
|
||||
const providers = getProvidersByGroup("cloud");
|
||||
expect(providers.length).toBe(5);
|
||||
});
|
||||
|
||||
test("API 聚合分组应有 25 个 Provider", () => {
|
||||
const providers = getProvidersByGroup("aggregator");
|
||||
expect(providers.length).toBe(25);
|
||||
});
|
||||
|
||||
test("本地服务分组应有 5 个 Provider", () => {
|
||||
const providers = getProvidersByGroup("local");
|
||||
expect(providers.length).toBe(5);
|
||||
});
|
||||
|
||||
test("专用服务分组应有 3 个 Provider", () => {
|
||||
const providers = getProvidersByGroup("specialized");
|
||||
expect(providers.length).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe("辅助函数", () => {
|
||||
test("getProvidersGrouped 应返回按分组组织的 Provider", () => {
|
||||
const grouped = getProvidersGrouped();
|
||||
|
||||
// 验证所有分组都存在
|
||||
expect(grouped.mainstream).toBeDefined();
|
||||
expect(grouped.chinese).toBeDefined();
|
||||
expect(grouped.cloud).toBeDefined();
|
||||
expect(grouped.aggregator).toBeDefined();
|
||||
expect(grouped.local).toBeDefined();
|
||||
expect(grouped.specialized).toBeDefined();
|
||||
expect(grouped.custom).toBeDefined();
|
||||
|
||||
// 验证每个分组内的 Provider 按 sortOrder 排序
|
||||
for (const group of Object.keys(grouped) as ProviderGroup[]) {
|
||||
const providers = grouped[group];
|
||||
for (let i = 1; i < providers.length; i++) {
|
||||
expect(providers[i].sortOrder).toBeGreaterThanOrEqual(
|
||||
providers[i - 1].sortOrder,
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test("isSystemProviderId 应对无效 ID 返回 false", () => {
|
||||
expect(isSystemProviderId("invalid-provider")).toBe(false);
|
||||
expect(isSystemProviderId("")).toBe(false);
|
||||
expect(isSystemProviderId("random-string-123")).toBe(false);
|
||||
});
|
||||
|
||||
test("getSystemProviderIds 应返回所有 Provider ID", () => {
|
||||
const ids = getSystemProviderIds();
|
||||
const directIds = Object.keys(SYSTEM_PROVIDERS);
|
||||
|
||||
expect(ids.length).toBe(directIds.length);
|
||||
for (const id of ids) {
|
||||
expect(directIds).toContain(id);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,763 @@
|
||||
/**
|
||||
* @file System Provider 配置
|
||||
* @description 所有系统预设 Provider 的配置定义
|
||||
* @module lib/config/providers
|
||||
*
|
||||
* **Feature: provider-ui-refactor**
|
||||
* **Validates: Requirements 3.1-3.6**
|
||||
*/
|
||||
|
||||
import type {
|
||||
ProviderConfig,
|
||||
ProviderGroup,
|
||||
ProviderGroupConfig,
|
||||
SystemProviderId,
|
||||
} from "../types/provider";
|
||||
|
||||
// ============================================================================
|
||||
// Provider 分组配置
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Provider 分组配置
|
||||
* 定义各分组的显示标签和排序顺序
|
||||
*/
|
||||
export const PROVIDER_GROUPS: Record<ProviderGroup, ProviderGroupConfig> = {
|
||||
mainstream: { label: "主流 AI", order: 1 },
|
||||
chinese: { label: "国内 AI", order: 2 },
|
||||
cloud: { label: "云服务", order: 3 },
|
||||
aggregator: { label: "API 聚合", order: 4 },
|
||||
local: { label: "本地服务", order: 5 },
|
||||
specialized: { label: "专用服务", order: 6 },
|
||||
custom: { label: "自定义", order: 7 },
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// System Provider 预设配置
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* System Provider 预设配置
|
||||
* 包含所有 60+ 系统预设 Provider 的完整配置
|
||||
*/
|
||||
export const SYSTEM_PROVIDERS: Record<SystemProviderId, ProviderConfig> = {
|
||||
// =========================================================================
|
||||
// 主流 AI (10个) - Requirements 3.1
|
||||
// =========================================================================
|
||||
openai: {
|
||||
id: "openai",
|
||||
name: "OpenAI",
|
||||
type: "openai-response",
|
||||
apiHost: "https://api.openai.com",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 1,
|
||||
},
|
||||
anthropic: {
|
||||
id: "anthropic",
|
||||
name: "Anthropic",
|
||||
type: "anthropic",
|
||||
apiHost: "https://api.anthropic.com",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 2,
|
||||
},
|
||||
gemini: {
|
||||
id: "gemini",
|
||||
name: "Gemini",
|
||||
type: "gemini",
|
||||
apiHost: "https://generativelanguage.googleapis.com",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 3,
|
||||
},
|
||||
deepseek: {
|
||||
id: "deepseek",
|
||||
name: "DeepSeek",
|
||||
type: "openai",
|
||||
apiHost: "https://api.deepseek.com",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 4,
|
||||
},
|
||||
moonshot: {
|
||||
id: "moonshot",
|
||||
name: "Moonshot",
|
||||
type: "openai",
|
||||
apiHost: "https://api.moonshot.cn",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 5,
|
||||
},
|
||||
groq: {
|
||||
id: "groq",
|
||||
name: "Groq",
|
||||
type: "openai",
|
||||
apiHost: "https://api.groq.com/openai",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 6,
|
||||
},
|
||||
grok: {
|
||||
id: "grok",
|
||||
name: "Grok (xAI)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.x.ai",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 7,
|
||||
},
|
||||
mistral: {
|
||||
id: "mistral",
|
||||
name: "Mistral",
|
||||
type: "openai",
|
||||
apiHost: "https://api.mistral.ai",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 8,
|
||||
},
|
||||
perplexity: {
|
||||
id: "perplexity",
|
||||
name: "Perplexity",
|
||||
type: "openai",
|
||||
apiHost: "https://api.perplexity.ai/",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 9,
|
||||
},
|
||||
cohere: {
|
||||
id: "cohere",
|
||||
name: "Cohere",
|
||||
type: "openai",
|
||||
apiHost: "https://api.cohere.ai",
|
||||
isSystem: true,
|
||||
group: "mainstream",
|
||||
enabled: false,
|
||||
sortOrder: 10,
|
||||
},
|
||||
|
||||
// =========================================================================
|
||||
// 国内 AI (15个) - Requirements 3.2
|
||||
// =========================================================================
|
||||
zhipu: {
|
||||
id: "zhipu",
|
||||
name: "智谱 (ZhiPu)",
|
||||
type: "openai",
|
||||
apiHost: "https://open.bigmodel.cn/api/paas/v4/",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 11,
|
||||
},
|
||||
baichuan: {
|
||||
id: "baichuan",
|
||||
name: "百川 (Baichuan)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.baichuan-ai.com",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 12,
|
||||
},
|
||||
dashscope: {
|
||||
id: "dashscope",
|
||||
name: "百炼/通义千问 (Dashscope)",
|
||||
type: "openai",
|
||||
apiHost: "https://dashscope.aliyuncs.com/compatible-mode/v1/",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 13,
|
||||
},
|
||||
stepfun: {
|
||||
id: "stepfun",
|
||||
name: "阶跃星辰 (StepFun)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.stepfun.com",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 14,
|
||||
},
|
||||
doubao: {
|
||||
id: "doubao",
|
||||
name: "豆包 (Doubao)",
|
||||
type: "openai",
|
||||
apiHost: "https://ark.cn-beijing.volces.com/api/v3/",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 15,
|
||||
},
|
||||
minimax: {
|
||||
id: "minimax",
|
||||
name: "MiniMax",
|
||||
type: "openai",
|
||||
apiHost: "https://api.minimaxi.com/v1",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 16,
|
||||
},
|
||||
yi: {
|
||||
id: "yi",
|
||||
name: "零一万物 (Yi)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.lingyiwanwu.com",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 17,
|
||||
},
|
||||
hunyuan: {
|
||||
id: "hunyuan",
|
||||
name: "腾讯混元 (Hunyuan)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.hunyuan.cloud.tencent.com",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 18,
|
||||
},
|
||||
"tencent-cloud-ti": {
|
||||
id: "tencent-cloud-ti",
|
||||
name: "腾讯云 TI",
|
||||
type: "openai",
|
||||
apiHost: "https://api.lkeap.cloud.tencent.com",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 19,
|
||||
},
|
||||
"baidu-cloud": {
|
||||
id: "baidu-cloud",
|
||||
name: "百度云 (Baidu Cloud)",
|
||||
type: "openai",
|
||||
apiHost: "https://qianfan.baidubce.com/v2/",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 20,
|
||||
},
|
||||
infini: {
|
||||
id: "infini",
|
||||
name: "无问芯穹 (Infini)",
|
||||
type: "openai",
|
||||
apiHost: "https://cloud.infini-ai.com/maas",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 21,
|
||||
},
|
||||
modelscope: {
|
||||
id: "modelscope",
|
||||
name: "魔搭 (ModelScope)",
|
||||
type: "openai",
|
||||
apiHost: "https://api-inference.modelscope.cn/v1/",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 22,
|
||||
},
|
||||
xirang: {
|
||||
id: "xirang",
|
||||
name: "息壤 (Xirang)",
|
||||
type: "openai",
|
||||
apiHost: "https://wishub-x1.ctyun.cn",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 23,
|
||||
},
|
||||
mimo: {
|
||||
id: "mimo",
|
||||
name: "小米 MiMo",
|
||||
type: "openai",
|
||||
apiHost: "https://api.xiaomimimo.com",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 24,
|
||||
},
|
||||
zhinao: {
|
||||
id: "zhinao",
|
||||
name: "360 智脑 (Zhinao)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.360.cn",
|
||||
isSystem: true,
|
||||
group: "chinese",
|
||||
enabled: false,
|
||||
sortOrder: 25,
|
||||
},
|
||||
|
||||
// =========================================================================
|
||||
// 云服务 (5个) - Requirements 3.3
|
||||
// =========================================================================
|
||||
"azure-openai": {
|
||||
id: "azure-openai",
|
||||
name: "Azure OpenAI",
|
||||
type: "azure-openai",
|
||||
apiHost: "", // 用户自定义
|
||||
isSystem: true,
|
||||
group: "cloud",
|
||||
enabled: false,
|
||||
sortOrder: 26,
|
||||
apiVersion: "2024-02-15-preview",
|
||||
},
|
||||
vertexai: {
|
||||
id: "vertexai",
|
||||
name: "VertexAI",
|
||||
type: "vertexai",
|
||||
apiHost: "", // 用户自定义
|
||||
isSystem: true,
|
||||
group: "cloud",
|
||||
enabled: false,
|
||||
sortOrder: 27,
|
||||
},
|
||||
"aws-bedrock": {
|
||||
id: "aws-bedrock",
|
||||
name: "AWS Bedrock",
|
||||
type: "aws-bedrock",
|
||||
apiHost: "", // 用户自定义
|
||||
isSystem: true,
|
||||
group: "cloud",
|
||||
enabled: false,
|
||||
sortOrder: 28,
|
||||
},
|
||||
github: {
|
||||
id: "github",
|
||||
name: "Github Models",
|
||||
type: "openai",
|
||||
apiHost: "https://models.github.ai/inference",
|
||||
isSystem: true,
|
||||
group: "cloud",
|
||||
enabled: false,
|
||||
sortOrder: 29,
|
||||
},
|
||||
copilot: {
|
||||
id: "copilot",
|
||||
name: "Github Copilot",
|
||||
type: "openai",
|
||||
apiHost: "https://api.githubcopilot.com/",
|
||||
isSystem: true,
|
||||
group: "cloud",
|
||||
enabled: false,
|
||||
sortOrder: 30,
|
||||
},
|
||||
|
||||
// =========================================================================
|
||||
// API 聚合/中转服务 (25个) - Requirements 3.4
|
||||
// =========================================================================
|
||||
silicon: {
|
||||
id: "silicon",
|
||||
name: "Silicon Flow",
|
||||
type: "openai",
|
||||
apiHost: "https://api.siliconflow.cn",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 31,
|
||||
},
|
||||
openrouter: {
|
||||
id: "openrouter",
|
||||
name: "OpenRouter",
|
||||
type: "openai",
|
||||
apiHost: "https://openrouter.ai/api/v1/",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 32,
|
||||
},
|
||||
aihubmix: {
|
||||
id: "aihubmix",
|
||||
name: "AiHubMix",
|
||||
type: "openai",
|
||||
apiHost: "https://aihubmix.com",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 33,
|
||||
},
|
||||
"302ai": {
|
||||
id: "302ai",
|
||||
name: "302.AI",
|
||||
type: "openai",
|
||||
apiHost: "https://api.302.ai",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 34,
|
||||
},
|
||||
together: {
|
||||
id: "together",
|
||||
name: "Together",
|
||||
type: "openai",
|
||||
apiHost: "https://api.together.xyz",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 35,
|
||||
},
|
||||
fireworks: {
|
||||
id: "fireworks",
|
||||
name: "Fireworks",
|
||||
type: "openai",
|
||||
apiHost: "https://api.fireworks.ai/inference",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 36,
|
||||
},
|
||||
nvidia: {
|
||||
id: "nvidia",
|
||||
name: "NVIDIA",
|
||||
type: "openai",
|
||||
apiHost: "https://integrate.api.nvidia.com",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 37,
|
||||
},
|
||||
hyperbolic: {
|
||||
id: "hyperbolic",
|
||||
name: "Hyperbolic",
|
||||
type: "openai",
|
||||
apiHost: "https://api.hyperbolic.xyz",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 38,
|
||||
},
|
||||
cerebras: {
|
||||
id: "cerebras",
|
||||
name: "Cerebras",
|
||||
type: "openai",
|
||||
apiHost: "https://api.cerebras.ai/v1",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 39,
|
||||
},
|
||||
ppio: {
|
||||
id: "ppio",
|
||||
name: "PPIO",
|
||||
type: "openai",
|
||||
apiHost: "https://api.ppinfra.com/v3/openai/",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 40,
|
||||
},
|
||||
qiniu: {
|
||||
id: "qiniu",
|
||||
name: "七牛 (Qiniu)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.qnaigc.com",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 41,
|
||||
},
|
||||
tokenflux: {
|
||||
id: "tokenflux",
|
||||
name: "TokenFlux",
|
||||
type: "openai",
|
||||
apiHost: "https://api.tokenflux.ai/openai/v1",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 42,
|
||||
},
|
||||
cephalon: {
|
||||
id: "cephalon",
|
||||
name: "Cephalon",
|
||||
type: "openai",
|
||||
apiHost: "https://cephalon.cloud/user-center/v1/model",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 43,
|
||||
},
|
||||
lanyun: {
|
||||
id: "lanyun",
|
||||
name: "蓝云 (Lanyun)",
|
||||
type: "openai",
|
||||
apiHost: "https://maas-api.lanyun.net",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 44,
|
||||
},
|
||||
ph8: {
|
||||
id: "ph8",
|
||||
name: "PH8",
|
||||
type: "openai",
|
||||
apiHost: "https://ph8.co",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 45,
|
||||
},
|
||||
sophnet: {
|
||||
id: "sophnet",
|
||||
name: "SophNet",
|
||||
type: "openai",
|
||||
apiHost: "https://www.sophnet.com/api/open-apis/v1",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 46,
|
||||
},
|
||||
ocoolai: {
|
||||
id: "ocoolai",
|
||||
name: "ocoolAI",
|
||||
type: "openai",
|
||||
apiHost: "https://api.ocoolai.com",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 47,
|
||||
},
|
||||
dmxapi: {
|
||||
id: "dmxapi",
|
||||
name: "DMXAPI",
|
||||
type: "openai",
|
||||
apiHost: "https://www.dmxapi.cn",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 48,
|
||||
},
|
||||
aionly: {
|
||||
id: "aionly",
|
||||
name: "AIOnly",
|
||||
type: "openai",
|
||||
apiHost: "https://api.aiionly.com",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 49,
|
||||
},
|
||||
burncloud: {
|
||||
id: "burncloud",
|
||||
name: "BurnCloud",
|
||||
type: "openai",
|
||||
apiHost: "https://ai.burncloud.com",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 50,
|
||||
},
|
||||
alayanew: {
|
||||
id: "alayanew",
|
||||
name: "AlayaNew",
|
||||
type: "openai",
|
||||
apiHost: "https://deepseek.alayanew.com",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 51,
|
||||
},
|
||||
longcat: {
|
||||
id: "longcat",
|
||||
name: "LongCat",
|
||||
type: "openai",
|
||||
apiHost: "https://api.longcat.chat/openai",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 52,
|
||||
},
|
||||
poe: {
|
||||
id: "poe",
|
||||
name: "Poe",
|
||||
type: "openai",
|
||||
apiHost: "https://api.poe.com/v1/",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 53,
|
||||
},
|
||||
huggingface: {
|
||||
id: "huggingface",
|
||||
name: "Hugging Face",
|
||||
type: "openai-response",
|
||||
apiHost: "https://router.huggingface.co/v1/",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 54,
|
||||
},
|
||||
"vercel-gateway": {
|
||||
id: "vercel-gateway",
|
||||
name: "Vercel AI Gateway",
|
||||
type: "gateway",
|
||||
apiHost: "https://ai-gateway.vercel.sh/v1/ai",
|
||||
isSystem: true,
|
||||
group: "aggregator",
|
||||
enabled: false,
|
||||
sortOrder: 55,
|
||||
},
|
||||
|
||||
// =========================================================================
|
||||
// 本地/自托管服务 (5个) - Requirements 3.5
|
||||
// =========================================================================
|
||||
ollama: {
|
||||
id: "ollama",
|
||||
name: "Ollama",
|
||||
type: "ollama",
|
||||
apiHost: "http://localhost:11434",
|
||||
isSystem: true,
|
||||
group: "local",
|
||||
enabled: false,
|
||||
sortOrder: 56,
|
||||
},
|
||||
lmstudio: {
|
||||
id: "lmstudio",
|
||||
name: "LM Studio",
|
||||
type: "openai",
|
||||
apiHost: "http://localhost:1234",
|
||||
isSystem: true,
|
||||
group: "local",
|
||||
enabled: false,
|
||||
sortOrder: 57,
|
||||
},
|
||||
"new-api": {
|
||||
id: "new-api",
|
||||
name: "New API",
|
||||
type: "new-api",
|
||||
apiHost: "http://localhost:3000",
|
||||
isSystem: true,
|
||||
group: "local",
|
||||
enabled: false,
|
||||
sortOrder: 58,
|
||||
},
|
||||
gpustack: {
|
||||
id: "gpustack",
|
||||
name: "GPUStack",
|
||||
type: "openai",
|
||||
apiHost: "", // 用户自定义
|
||||
isSystem: true,
|
||||
group: "local",
|
||||
enabled: false,
|
||||
sortOrder: 59,
|
||||
},
|
||||
ovms: {
|
||||
id: "ovms",
|
||||
name: "OpenVINO Model Server",
|
||||
type: "openai",
|
||||
apiHost: "http://localhost:8000/v3/",
|
||||
isSystem: true,
|
||||
group: "local",
|
||||
enabled: false,
|
||||
sortOrder: 60,
|
||||
},
|
||||
|
||||
// =========================================================================
|
||||
// 专用服务 (3个) - Requirements 3.6
|
||||
// =========================================================================
|
||||
jina: {
|
||||
id: "jina",
|
||||
name: "Jina (Embedding/Rerank)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.jina.ai",
|
||||
isSystem: true,
|
||||
group: "specialized",
|
||||
enabled: false,
|
||||
sortOrder: 61,
|
||||
},
|
||||
voyageai: {
|
||||
id: "voyageai",
|
||||
name: "VoyageAI (Embedding)",
|
||||
type: "openai",
|
||||
apiHost: "https://api.voyageai.com",
|
||||
isSystem: true,
|
||||
group: "specialized",
|
||||
enabled: false,
|
||||
sortOrder: 62,
|
||||
},
|
||||
cherryin: {
|
||||
id: "cherryin",
|
||||
name: "CherryIN",
|
||||
type: "openai",
|
||||
apiHost: "https://open.cherryin.net",
|
||||
isSystem: true,
|
||||
group: "specialized",
|
||||
enabled: false,
|
||||
sortOrder: 63,
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 辅助函数
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取所有 System Provider ID 列表
|
||||
*/
|
||||
export function getSystemProviderIds(): SystemProviderId[] {
|
||||
return Object.keys(SYSTEM_PROVIDERS) as SystemProviderId[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定分组的 Provider 列表
|
||||
*/
|
||||
export function getProvidersByGroup(group: ProviderGroup): ProviderConfig[] {
|
||||
return Object.values(SYSTEM_PROVIDERS).filter((p) => p.group === group);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取按分组排序的所有 Provider
|
||||
*/
|
||||
export function getProvidersGrouped(): Record<ProviderGroup, ProviderConfig[]> {
|
||||
const grouped: Record<ProviderGroup, ProviderConfig[]> = {
|
||||
mainstream: [],
|
||||
chinese: [],
|
||||
cloud: [],
|
||||
aggregator: [],
|
||||
local: [],
|
||||
specialized: [],
|
||||
custom: [],
|
||||
};
|
||||
|
||||
for (const provider of Object.values(SYSTEM_PROVIDERS)) {
|
||||
grouped[provider.group].push(provider);
|
||||
}
|
||||
|
||||
// 按 sortOrder 排序
|
||||
for (const group of Object.keys(grouped) as ProviderGroup[]) {
|
||||
grouped[group].sort((a, b) => a.sortOrder - b.sortOrder);
|
||||
}
|
||||
|
||||
return grouped;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否为有效的 System Provider ID
|
||||
*/
|
||||
export function isSystemProviderId(id: string): id is SystemProviderId {
|
||||
return id in SYSTEM_PROVIDERS;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 System Provider 配置
|
||||
*/
|
||||
export function getSystemProvider(id: SystemProviderId): ProviderConfig {
|
||||
return SYSTEM_PROVIDERS[id];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 System Provider 总数
|
||||
*/
|
||||
export function getSystemProviderCount(): number {
|
||||
return Object.keys(SYSTEM_PROVIDERS).length;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user