Fix #22: 供应商管理列表增加类型筛选和图标显示 #24
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| "use client"; | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from "@/components/ui/select"; | ||
| import { Filter } from "lucide-react"; | ||
| import type { ProviderType } from "@/types/provider"; | ||
| import { PROVIDER_TYPE_CONFIG, getAllProviderTypes } from "@/lib/provider-type-utils"; | ||
|
|
||
| interface ProviderTypeFilterProps { | ||
| value: ProviderType | "all"; | ||
| onChange: (value: ProviderType | "all") => void; | ||
| } | ||
|
|
||
| export function ProviderTypeFilter({ value, onChange }: ProviderTypeFilterProps) { | ||
| return ( | ||
| <div className="flex items-center gap-2"> | ||
| <Filter className="h-4 w-4 text-muted-foreground" /> | ||
| <Select value={value} onValueChange={onChange}> | ||
| <SelectTrigger className="w-[200px]"> | ||
| <SelectValue placeholder="筛选供应商类型" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectItem value="all">全部供应商</SelectItem> | ||
| {getAllProviderTypes().map((type) => { | ||
|
Contributor
Author
There was a problem hiding this comment. 潜在问题：
const providerTypes = useMemo(() => getAllProviderTypes(), []);
return (
// ...
{providerTypes.map((type) => {
// ...
})}
);或者将 // provider-type-utils.tsx
export const ALL_PROVIDER_TYPES: ProviderType[] = Object.keys(PROVIDER_TYPE_CONFIG) as ProviderType[]; |
||
| const config = PROVIDER_TYPE_CONFIG[type]; | ||
| const Icon = config.icon; | ||
| return ( | ||
| <SelectItem key={type} value={type}> | ||
| <div className="flex items-center gap-2"> | ||
| <Icon className={`h-3.5 w-3.5 ${config.iconColor}`} /> | ||
|
Contributor
Author
There was a problem hiding this comment. 可访问性改进：建议为每个 SelectItem 添加 <SelectItem
key={type}
value={type}
${config.label} 类型的供应商`}
>
Contributor
Author
There was a problem hiding this comment. ✨ 样式一致性良好 很好地复用了
Contributor
Author
There was a problem hiding this comment. 潜在的颜色类名拼接问题 使用字符串拼接 建议的解决方案：
// 方案 1: 使用 clsx/cn
<Icon className={cn("h-3.5 w-3.5", config.iconColor)} />
// 方案 2: 在 tailwind.config.ts 添加 safelist
safelist: [
'text-orange-600',
'text-purple-600',
'text-blue-600',
// ...
]
Contributor
Author
There was a problem hiding this comment. ✅ 无障碍性建议 图标显示良好，建议添加 <Icon className={`h-3.5 w-3.5 ${config.iconColor}`} />或者在父元素 |
||
| <span>{config.label}</span> | ||
| </div> | ||
| </SelectItem> | ||
| ); | ||
| })} | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { Claude, Anthropic, OpenAI, Gemini } from "@lobehub/icons"; | ||
|
Contributor
Author
There was a problem hiding this comment. 性能优化建议：考虑按需导入以减小打包体积。 // 建议使用具名导入或动态导入
import { Claude, Anthropic, OpenAI, Gemini } from "@lobehub/icons/es";或者评估是否可以使用项目已有的
Contributor
Author
There was a problem hiding this comment. 缺少 React 导入 这是一个 import React from "react";特别是在第 5 行使用了 |
||
| import type { ProviderType } from "@/types/provider"; | ||
|
|
||
| // Anthropic Avatar 橙色包装组件（与 Claude Code 颜色一致） | ||
| const AnthropicOrangeAvatar: React.FC<{ className?: string }> = ({ | ||
| className, | ||
| }) => { | ||
| // 从 className 中提取尺寸，默认 12px（对应 h-3 w-3） | ||
| const sizeMatch = className?.match(/h-(\d+)/); | ||
| const size = sizeMatch ? parseInt(sizeMatch[1]) * 4 : 12; // Tailwind: h-3 = 12px | ||
|
Contributor
Author
There was a problem hiding this comment. 性能优化建议： 这里的尺寸计算逻辑在每次渲染时都会执行正则匹配，建议使用 const getSizeFromClassName = (className?: string): number => {
const sizeMatch = className?.match(/h-(\d+)/);
return sizeMatch ? parseInt(sizeMatch[1]) * 4 : 12;
};
const AnthropicOrangeAvatar: React.FC<{ className?: string }> = ({ className }) => {
const size = useMemo(() => getSizeFromClassName(className), [className]);
// ...
};
Contributor
Author
There was a problem hiding this comment. 当前的简单乘法计算对于非标准 Tailwind 尺寸可能不准确。建议使用映射表： const TAILWIND_SIZE_MAP: Record<string, number> = {
'3': 12, // h-3 (0.75rem)
'3.5': 14, // h-3.5 (0.875rem)
'4': 16, // h-4 (1rem)
'5': 20, // h-5 (1.25rem)
};
const sizeMatch = className?.match(/h-([\d.]+)/);
const size = sizeMatch ? TAILWIND_SIZE_MAP[sizeMatch[1]] || 16 : 12;这样可以处理小数尺寸（如
Contributor
Author
There was a problem hiding this comment. 潜在的性能问题：这个尺寸解析逻辑在每次渲染时都会执行正则匹配。 建议：
const getSizeFromClassName = (className?: string): number => {
const sizeMatch = className?.match(/h-(\d+)/);
return sizeMatch ? parseInt(sizeMatch[1]) * 4 : 12;
};
Contributor
Author
There was a problem hiding this comment. 💡 代码简化建议 尺寸计算逻辑可以更简洁： const size = className?.includes('h-')
? parseInt(className.match(/h-(\d+)/)?.[1] || '3') * 4
: 12;或者直接传递固定尺寸，避免从 className 解析： <Anthropic.Avatar size={12} background="#ffffff" shape="circle" />
Contributor
Author
There was a problem hiding this comment. 通过正则表达式解析 Tailwind 类名来计算尺寸存在以下问题：
建议改进： interface AnthropicOrangeAvatarProps {
size?: number; // 直接接收数值，默认 12px
}
const AnthropicOrangeAvatar: React.FC<AnthropicOrangeAvatarProps> = ({
size = 12
}) => {
return (
<Anthropic.Avatar
size={size}
background="#ffffff"
shape="circle"
/>
);
};这样调用时更清晰：
Contributor
Author
There was a problem hiding this comment. 建议：添加注释说明尺寸计算逻辑。 // Tailwind CSS 尺寸单位转换：h-1 = 4px, h-2 = 8px, h-3 = 12px
const size = sizeMatch ? parseInt(sizeMatch[1]) * 4 : 12;这样可以让其他开发者更容易理解这个魔术数字
Contributor
Author
There was a problem hiding this comment. 尺寸计算逻辑问题 当前的尺寸计算逻辑有潜在问题：
建议修改： const sizeMatch = className?.match(/h-(\d+(?:\.\d+)?)/);
Contributor
Author
There was a problem hiding this comment. 💡 性能优化建议：每次渲染都会执行正则匹配，建议优化： const AnthropicOrangeAvatar: React.FC<{ className?: string; size?: number }> = ({
className,
size = 12, // 直接传递 size，避免正则解析
}) => {
return (
<Anthropic.Avatar
size={size}
background="#ffffff"
shape="circle"
className={className}
/>
);
};这样可以避免重复的字符串解析开销。
Contributor
Author
There was a problem hiding this comment. 当前通过正则提取 Tailwind 类名并计算像素值的方式比较脆弱：
建议改为： const AnthropicOrangeAvatar: React.FC<{ size?: number }> = ({ size = 12 }) => {
return (
<Anthropic.Avatar
size={size}
background="#ffffff"
shape="circle"
/>
);
};然后在使用时直接传入数值而不是 className。
Contributor
Author
There was a problem hiding this comment. 建议优化：尺寸计算可能存在问题 当前实现从 className 中提取尺寸，但这种方式不够可靠：
建议方案： // 方案 1: 支持常见的 Tailwind 尺寸类
const sizeMap: Record<string, number> = {
'h-3': 12,
'h-3.5': 14,
'h-4': 16,
'h-5': 20,
// ...
};
// 方案 2: 直接接收 size prop
const AnthropicOrangeAvatar: React.FC<{ size?: number; className?: string }> = ({
size = 12,
className,
}) => {
return (
<Anthropic.Avatar
size={size}
background="#ffffff"
shape="circle"
className={className}
/>
);
}; |
||
|
|
||
| return ( | ||
| <Anthropic.Avatar | ||
| size={size} | ||
| background="#ffffff" | ||
|
Contributor
Author
There was a problem hiding this comment. 硬编码背景色问题
background="currentColor" // 或者
background="var(--background)" // 使用主题背景色 |
||
| shape="circle" | ||
| className={className} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| // 供应商类型配置 | ||
| export const PROVIDER_TYPE_CONFIG: Record< | ||
|
Contributor
Author
There was a problem hiding this comment. 类型安全改进建议： 建议显式导出 export type ProviderTypeConfig = {
label: string;
icon: React.ComponentType<{ className?: string }>;
iconColor: string;
bgColor: string;
description: string;
};
export const PROVIDER_TYPE_CONFIG: Record<ProviderType, ProviderTypeConfig> = {
// ...
}; |
||
| ProviderType, | ||
| { | ||
| label: string; | ||
| icon: React.ComponentType<{ className?: string }>; | ||
| iconColor: string; | ||
| bgColor: string; | ||
| description: string; | ||
| } | ||
| > = { | ||
| claude: { | ||
| label: "Claude", | ||
| icon: Claude.Color, | ||
| iconColor: "text-orange-600", | ||
| bgColor: "bg-orange-500/15", | ||
| description: "Anthropic 官方 API", | ||
| }, | ||
| "claude-auth": { | ||
| label: "Claude Auth", | ||
| icon: AnthropicOrangeAvatar, // Anthropic Avatar 橙色圆形图标 | ||
| iconColor: "text-purple-600", | ||
| bgColor: "bg-purple-500/15", | ||
| description: "Claude 中转服务", | ||
| }, | ||
| codex: { | ||
| label: "Codex", | ||
| icon: OpenAI, // OpenAI 无文字版本（默认 Mono） | ||
|
Contributor
Author
There was a problem hiding this comment. 代码重复： 建议：如果这是预期行为，建议添加注释说明原因。如果不同，建议为
Contributor
Author
There was a problem hiding this comment. 疑问：OpenAI 图标用于 Codex Codex 是 OpenAI 的产品，但使用 OpenAI 图标可能导致混淆：
建议：考虑使用不同的图标以避免视觉混淆，或者在注释中说明这样设计的原因。 |
||
| iconColor: "text-blue-600", | ||
| bgColor: "bg-blue-500/15", | ||
| description: "Codex CLI API", | ||
| }, | ||
| "gemini-cli": { | ||
| label: "Gemini CLI", | ||
| icon: Gemini.Color, | ||
| iconColor: "text-emerald-600", | ||
| bgColor: "bg-emerald-500/15", | ||
| description: "Gemini CLI API", | ||
| }, | ||
| "openai-compatible": { | ||
| label: "OpenAI Compatible", | ||
| icon: OpenAI, // OpenAI 无文字版本（默认 Mono） | ||
| iconColor: "text-cyan-600", | ||
| bgColor: "bg-cyan-500/15", | ||
| description: "OpenAI 兼容 API", | ||
| }, | ||
|
Comment on lines
+49
to
+67
Contributor
Author
There was a problem hiding this comment. 🤔 图标复用问题
这样可以更清晰地区分不同的供应商类型。 |
||
| }; | ||
|
|
||
| // 获取供应商类型配置 | ||
| export function getProviderTypeConfig(type: ProviderType) { | ||
| return PROVIDER_TYPE_CONFIG[type]; | ||
| } | ||
|
|
||
| // 获取所有供应商类型 | ||
| export function getAllProviderTypes(): ProviderType[] { | ||
|
Contributor
Author
There was a problem hiding this comment. 💡 类型安全改进 使用 export function getAllProviderTypes(): ProviderType[] {
return Object.keys(PROVIDER_TYPE_CONFIG) as Array<keyof typeof PROVIDER_TYPE_CONFIG>;
}这样既保证类型安全，又让 TypeScript 能够推断正确的类型。 |
||
| return Object.keys(PROVIDER_TYPE_CONFIG) as ProviderType[]; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
文档建议：
建议添加更详细的注释说明为什么需要转译这个包，以及可能影响的范围：