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
parent bb48f4f6af
commit 5f2bede5c4
8 changed files with 102 additions and 38 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -249,7 +249,11 @@ function App() {

          <div className="flex flex-wrap items-center gap-3">
            <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
-            <Button variant="outline" onClick={() => setIsMcpOpen(true)}>
+            <Button
+              variant="mcp"
+              onClick={() => setIsMcpOpen(true)}
+              className="min-w-[80px]"
+            >
              MCP
            </Button>
            <Button onClick={() => setIsAddOpen(true)}>
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -196,12 +196,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
          </h3>

          <div className="flex items-center gap-3">
-            <Button
-              type="button"
-              size="sm"
-              onClick={handleAdd}
-              className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
-            >
+            <Button type="button" variant="mcp" size="sm" onClick={handleAdd}>
              <Plus size={16} />
              {t("mcp.add")}
            </Button>
@@ -270,12 +265,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {

        {/* Footer */}
        <div className="flex-shrink-0 flex items-center justify-end p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
-          <Button
-            type="button"
-            size="sm"
-            onClick={onClose}
-            className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
-          >
+          <Button type="button" variant="mcp" size="sm" onClick={onClose}>
            <Check size={16} />
            {t("common.done")}
          </Button>
--- a/src/components/providers/EditProviderDialog.tsx
+++ b/src/components/providers/EditProviderDialog.tsx
@@ -45,9 +45,7 @@ export function EditProviderDialog({
        name: values.name.trim(),
        websiteUrl: values.websiteUrl?.trim() || undefined,
        settingsConfig: parsedConfig,
-        ...(values.presetCategory
-          ? { category: values.presetCategory }
-          : {}),
+        ...(values.presetCategory ? { category: values.presetCategory } : {}),
      };

      await onSubmit(updatedProvider);
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -64,8 +64,9 @@ export function ProviderActions({
        onClick={onDelete}
        disabled={isCurrent}
        className={cn(
-          "text-destructive hover:text-destructive",
-          isCurrent && "text-muted-foreground hover:text-muted-foreground",
+          "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" />
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -117,7 +117,7 @@ export function ProviderCard({
                {provider.name}
              </h3>
              {isCurrent && (
-                <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-500 dark:text-green-400">
                  {t("provider.currentlyUsing", { defaultValue: "当前使用" })}
                </span>
              )}
--- a/src/components/providers/forms/ProviderForm.tsx
+++ b/src/components/providers/forms/ProviderForm.tsx
@@ -26,10 +26,7 @@ import JsonEditor from "@/components/JsonEditor";
 import { providerSchema, type ProviderFormData } from "@/lib/schemas/provider";
 import type { AppType } from "@/lib/api";
 import type { ProviderCategory } from "@/types";
-import {
-  providerPresets,
-  type ProviderPreset,
-} from "@/config/providerPresets";
+import { providerPresets, type ProviderPreset } from "@/config/providerPresets";
 import {
  codexProviderPresets,
  type CodexProviderPreset,
@@ -37,11 +34,7 @@ import {
 import { applyTemplateValues } from "@/utils/providerConfigUtils";

 const CLAUDE_DEFAULT_CONFIG = JSON.stringify({ env: {}, config: {} }, null, 2);
-const CODEX_DEFAULT_CONFIG = JSON.stringify(
-  { auth: {}, config: "" },
-  null,
-  2,
-);
+const CODEX_DEFAULT_CONFIG = JSON.stringify({ auth: {}, config: "" }, null, 2);

 type PresetEntry = {
  id: string;
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -4,26 +4,35 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
+        // 主按钮：蓝底白字（对应旧版 primary）
        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+        // 危险按钮：红底白字（对应旧版 danger）
        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700",
+        // 轮廓按钮
        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-gray-200 bg-background hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+        // 次按钮：灰色（对应旧版 secondary）
        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+        // 幽灵按钮（对应旧版 ghost）
+        ghost:
+          "text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800",
+        // MCP 专属按钮：祖母绿
+        mcp: "bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
+        // 链接按钮
+        link: "text-blue-500 underline-offset-4 hover:underline dark:text-blue-400",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        icon: "h-9 w-9 p-1.5",
      },
    },
    defaultVariants: {
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,79 @@
 /* 引入 Tailwind v4 内建样式与工具 */
@import "tailwindcss";

-/* 覆盖 Tailwind v4 默认的 dark 变体为“类选择器”模式 */
+/* 覆盖 Tailwind v4 默认的 dark 变体为"类选择器"模式 */
@custom-variant dark (&:where(.dark, .dark *));

+/* shadcn/ui 主题变量 - 蓝色主题 */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    /* 主色调：蓝色 (bg-blue-500) */
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+
+    /* 次要色：淡蓝灰 */
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    /* 强调色 */
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    /* 危险色：红色 */
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    /* 边框和输入框 */
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 217 91% 60%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    /* 暗色模式主色调：稍深的蓝色 (bg-blue-600) */
+    --primary: 217 91% 55%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    /* 暗色模式危险色 */
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 217 91% 55%;
+  }
+}
+
 /* 全局基础样式 */
 * {
  box-sizing: border-box;
+  border-color: hsl(var(--border));
 }

 html {
@@ -17,7 +84,9 @@ html {
 }

 body {
-  @apply m-0 p-0 bg-gray-50 text-gray-900 text-sm dark:bg-gray-950 dark:text-gray-100;
+  @apply m-0 p-0 text-sm;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
 }

 /* 暗色模式下启用暗色原生控件/滚动条配色 */