From 325c6a5f21fe955d2e451080cecd2df32b60d792 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Fri, 21 Nov 2025 23:28:48 +0800
Subject: [PATCH] style(ui): refine header layout and AppSwitcher color scheme

Improve application header and component styling:

## App.tsx Header Layout
- Wrap title and settings button in flex container with gap
- Add vertical divider between title and settings icon
- Apply responsive padding (pl-1 sm:pl-2)
- Reformat JSX for better readability (prettier)
- Fix string template formatting in className

## AppSwitcher Color Update
- Change Claude tab gradient from orange/amber to teal/emerald/green
- Update shadow color to match new teal theme
- Change hover color from orange-500 to teal-500
- Align visual style with emerald/teal brand colors

## Dialog Component Cleanup
- Remove default close button (X icon) from DialogContent
- Allow parent components to control close button placement
- Remove unused lucide-react X import

## index.css Header Border
- Add top border (2px solid) to glass-header
- Apply to both light and dark mode variants
- Improve visual separation of header area

These changes enhance visual consistency and modernize the UI
appearance with a cohesive teal color scheme.
---
 src/App.tsx                    | 46 ++++++++++++++++++----------------
 src/components/AppSwitcher.tsx |  6 ++---
 src/components/ui/dialog.tsx   |  5 ----
 src/index.css                  |  2 ++
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b32a9ec..d2179ca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -375,23 +375,26 @@ function App() {
               </div>
             ) : (
               <>
-                <a
-                  href="https://github.com/farion1231/cc-switch"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-xl font-semibold text-blue-500 transition-colors hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
-                >
-                  CC Switch
-                </a>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setCurrentView("settings")}
-                  title={t("common.settings")}
-                  className="ml-2 hover:bg-black/5 dark:hover:bg-white/5"
-                >
-                  <Settings className="h-4 w-4" />
-                </Button>
+                <div className="flex items-center gap-2 pl-1 sm:pl-2">
+                  <a
+                    href="https://github.com/farion1231/cc-switch"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xl font-semibold text-blue-500 transition-colors hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
+                  >
+                    CC Switch
+                  </a>
+                  <div className="h-5 w-[1px] bg-black/10 dark:bg-white/15" />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setCurrentView("settings")}
+                    title={t("common.settings")}
+                    className="hover:bg-black/5 dark:hover:bg-white/5"
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
                 <UpdateBadge onClick={() => setCurrentView("settings")} />
               </>
             )}
@@ -506,8 +509,9 @@ function App() {
       </header>
 
       <main
-        className={`flex-1 overflow-y-auto pb-12 px-6 animate-fade-in scroll-overlay ${currentView === "providers" ? "pt-24" : "pt-20"
-          }`}
+        className={`flex-1 overflow-y-auto pb-12 px-6 animate-fade-in scroll-overlay ${
+          currentView === "providers" ? "pt-24" : "pt-20"
+        }`}
         style={{ overflowX: "hidden" }}
       >
         {renderContent()}
@@ -550,8 +554,8 @@ function App() {
         message={
           confirmDelete
             ? t("confirm.deleteProviderMessage", {
-              name: confirmDelete.name,
-            })
+                name: confirmDelete.name,
+              })
             : ""
         }
         onConfirm={() => void handleConfirmDelete()}
diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index 10ec9df..9510811 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -19,12 +19,12 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
         onClick={() => handleSwitch("claude")}
         className={`group relative flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-semibold overflow-hidden transition-all duration-300 ease-out ${
           activeApp === "claude"
-            ? "text-white scale-[1.02] shadow-[0_12px_35px_-15px_rgba(249,115,22,0.8)] ring-1 ring-white/10"
+            ? "text-white scale-[1.02] shadow-[0_12px_35px_-15px_rgba(20,184,166,0.6)] ring-1 ring-white/10"
             : "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
         }`}
       >
         {activeApp === "claude" && (
-          <div className="absolute inset-0 bg-gradient-to-r from-orange-500 via-amber-500 to-red-600 rounded-full opacity-90 blur-[1px] transition-all duration-500 -z-10 scale-100" />
+          <div className="absolute inset-0 bg-gradient-to-r from-teal-500 via-emerald-500 to-green-600 rounded-full opacity-90 blur-[1px] transition-all duration-500 -z-10 scale-100" />
         )}
         {activeApp !== "claude" && (
           <div className="absolute inset-0 rounded-full bg-white/0 transition-all duration-300 -z-10" />
@@ -34,7 +34,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
           className={
             activeApp === "claude"
               ? "text-white"
-              : "text-muted-foreground group-hover:text-orange-500 transition-colors"
+              : "text-muted-foreground group-hover:text-teal-500 transition-colors"
           }
         />
         <span>Claude</span>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 776e01a..52a5a69 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const Dialog = DialogPrimitive.Root;
@@ -84,10 +83,6 @@ const DialogContent = React.forwardRef<
           {...props}
         >
           {children}
-          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-            <X className="h-4 w-4" />
-            <span className="sr-only">关闭</span>
-          </DialogPrimitive.Close>
         </DialogPrimitive.Content>
       </DialogPortal>
     );
diff --git a/src/index.css b/src/index.css
index e32e636..d3e6bd2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -110,11 +110,13 @@
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   border: none;
+  border-top: 2px solid hsl(var(--border));
 }
 
 .dark .glass-header {
   background: hsl(var(--background));
   border: none;
+  border-top: 2px solid hsl(var(--border));
 }
 
 /* Tauri 拖拽区域 */