mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 00:35:32 +08:00
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.
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { useCallback } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import type { Provider } from "@/types";
|
|
import {
|
|
ProviderForm,
|
|
type ProviderFormValues,
|
|
} from "@/components/providers/forms/ProviderForm";
|
|
import type { AppType } from "@/lib/api";
|
|
|
|
interface EditProviderDialogProps {
|
|
open: boolean;
|
|
provider: Provider | null;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (provider: Provider) => Promise<void> | void;
|
|
appType: AppType;
|
|
}
|
|
|
|
export function EditProviderDialog({
|
|
open,
|
|
provider,
|
|
onOpenChange,
|
|
onSubmit,
|
|
appType,
|
|
}: EditProviderDialogProps) {
|
|
const { t } = useTranslation();
|
|
|
|
const handleSubmit = useCallback(
|
|
async (values: ProviderFormValues) => {
|
|
if (!provider) return;
|
|
|
|
const parsedConfig = JSON.parse(values.settingsConfig) as Record<
|
|
string,
|
|
unknown
|
|
>;
|
|
|
|
const updatedProvider: Provider = {
|
|
...provider,
|
|
name: values.name.trim(),
|
|
websiteUrl: values.websiteUrl?.trim() || undefined,
|
|
settingsConfig: parsedConfig,
|
|
...(values.presetCategory ? { category: values.presetCategory } : {}),
|
|
};
|
|
|
|
await onSubmit(updatedProvider);
|
|
onOpenChange(false);
|
|
},
|
|
[onSubmit, onOpenChange, provider],
|
|
);
|
|
|
|
if (!provider) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("provider.editProvider", { defaultValue: "编辑供应商" })}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t("provider.editDescription", {
|
|
defaultValue: "更新配置后将立即应用到当前供应商。",
|
|
})}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<ProviderForm
|
|
appType={appType}
|
|
submitLabel={t("common.save", { defaultValue: "保存" })}
|
|
onSubmit={handleSubmit}
|
|
onCancel={() => onOpenChange(false)}
|
|
initialData={{
|
|
name: provider.name,
|
|
websiteUrl: provider.websiteUrl,
|
|
settingsConfig: provider.settingsConfig,
|
|
}}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|