Files
CC-Switch/src/components/providers/EditProviderDialog.tsx
T
Jason 5f2bede5c4 style: restore original color scheme to shadcn/ui components
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.
2025-10-16 15:32:26 +08:00

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>
);
}