mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 08:44:41 +08:00
Jason
5f2bede5c4
Restore the vibrant color palette from the pre-refactoring version while maintaining shadcn/ui component architecture and modern design patterns. ## Color Scheme Restoration ### Button Component - **default variant**: Blue primary (`bg-blue-500`) - matches old `primary` - **destructive variant**: Red (`bg-red-500`) - matches old `danger` - **secondary variant**: Gray text (`text-gray-500`) - matches old `secondary` - **ghost variant**: Transparent hover (`hover:bg-gray-100`) - matches old `ghost` - **mcp variant**: Emerald green (`bg-emerald-500`) - matches old `mcp` - Updated border-radius to `rounded-lg` for consistency ### CSS Variables - Set `--primary` to blue (`hsl(217 91% 60%)` ≈ `bg-blue-500`) - Added complete shadcn/ui theme variables for light/dark modes - Maintained semantic color tokens for maintainability ### Component-Specific Colors - **"Currently Using" badge**: Green (`bg-green-500/10 text-green-500`) - **Delete button hover**: Red (`hover:text-red-500 hover:bg-red-100`) - **MCP button**: Emerald green with minimum width (`min-w-[80px]`) - **Links/URLs**: Blue (`text-blue-500`) ## Benefits - ✅ Restored original vibrant UI (blue, green, red accents) - ✅ Maintained shadcn/ui component system (accessibility, animations) - ✅ Easy global theming via CSS variables - ✅ Consistent design language across all components - ✅ Code formatted with Prettier (shadcn/ui standards) ## Files Changed - `src/index.css`: Added shadcn/ui theme variables with blue primary - `src/components/ui/button.tsx`: Restored all original button color variants - `src/components/providers/ProviderCard.tsx`: Green badge for current provider - `src/components/providers/ProviderActions.tsx`: Red hover for delete button - `src/components/mcp/McpPanel.tsx`: Use `mcp` variant for consistency - `src/App.tsx`: MCP button with emerald color and wider width The UI now matches the original colorful design while leveraging modern shadcn/ui components for better maintainability and user experience.
77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import { BarChart3, Check, Play, Trash2 } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ProviderActionsProps {
|
|
isCurrent: boolean;
|
|
onSwitch: () => void;
|
|
onEdit: () => void;
|
|
onConfigureUsage: () => void;
|
|
onDelete: () => void;
|
|
}
|
|
|
|
export function ProviderActions({
|
|
isCurrent,
|
|
onSwitch,
|
|
onEdit,
|
|
onConfigureUsage,
|
|
onDelete,
|
|
}: ProviderActionsProps) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant={isCurrent ? "secondary" : "default"}
|
|
onClick={onSwitch}
|
|
disabled={isCurrent}
|
|
className={cn(
|
|
"w-[96px]",
|
|
isCurrent && "text-muted-foreground hover:text-muted-foreground",
|
|
)}
|
|
>
|
|
{isCurrent ? (
|
|
<>
|
|
<Check className="h-4 w-4" />
|
|
{t("provider.inUse", { defaultValue: "已启用" })}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play className="h-4 w-4" />
|
|
{t("provider.enable", { defaultValue: "启用" })}
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
<Button size="sm" variant="outline" onClick={onEdit}>
|
|
{t("common.edit", { defaultValue: "编辑" })}
|
|
</Button>
|
|
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={onConfigureUsage}
|
|
title={t("provider.configureUsage", { defaultValue: "配置用量查询" })}
|
|
>
|
|
<BarChart3 className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={onDelete}
|
|
disabled={isCurrent}
|
|
className={cn(
|
|
"hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10",
|
|
isCurrent &&
|
|
"text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
|
|
)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|