mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 00:35:32 +08:00
YoVinchen
17cf701bad
Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language.
85 lines
1.7 KiB
TypeScript
85 lines
1.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
interface IconProps {
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const LOBE_ICONS_VERSION = "latest"; // pin if needed, e.g. "1.4.0"
|
|
const LOBE_BASE = `https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@${LOBE_ICONS_VERSION}/icons`;
|
|
|
|
function IconImage({
|
|
urls,
|
|
alt,
|
|
size,
|
|
className,
|
|
}: {
|
|
urls: string[];
|
|
alt: string;
|
|
size: number;
|
|
className?: string;
|
|
}) {
|
|
const [index, setIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
setIndex(0);
|
|
}, [urls.join("|")]);
|
|
|
|
const src = urls[index] ?? urls[urls.length - 1];
|
|
|
|
return (
|
|
<img
|
|
src={src}
|
|
width={size}
|
|
height={size}
|
|
className={className}
|
|
alt={alt}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer"
|
|
onError={() => {
|
|
if (index < urls.length - 1) {
|
|
setIndex((i) => i + 1);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function ClaudeIcon({ size = 16, className = "" }: IconProps) {
|
|
return (
|
|
<IconImage
|
|
urls={[`${LOBE_BASE}/claude-color.svg`, `${LOBE_BASE}/claude.svg`]}
|
|
size={size}
|
|
className={className}
|
|
alt="Claude"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function CodexIcon({ size = 16, className = "" }: IconProps) {
|
|
return (
|
|
<IconImage
|
|
urls={[
|
|
`${LOBE_BASE}/openai-color.svg`,
|
|
`${LOBE_BASE}/chatgpt-color.svg`,
|
|
`${LOBE_BASE}/openai.svg`,
|
|
`${LOBE_BASE}/chatgpt.svg`,
|
|
]}
|
|
size={size}
|
|
className={className}
|
|
alt="Codex"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function GeminiIcon({ size = 16, className = "" }: IconProps) {
|
|
return (
|
|
<IconImage
|
|
urls={[`${LOBE_BASE}/gemini-color.svg`, `${LOBE_BASE}/gemini.svg`]}
|
|
size={size}
|
|
className={className}
|
|
alt="Gemini"
|
|
/>
|
|
);
|
|
}
|