feat: 系统托盘 (#12)

* feat: 系统托盘

1. 添加系统托盘
2. 托盘添加切换供应商功能
3. 整理组件目录

* feat: 优化系统托盘菜单结构

- 扁平化Claude和Codex的菜单结构，直接将所有供应商添加到主菜单，简化用户交互。
- 添加无供应商时的提示信息，提升用户体验。
- 更新分隔符文本以增强可读性。

* feat: integrate Tailwind CSS and Lucide icons

- Added Tailwind CSS for styling and layout improvements.
- Integrated Lucide icons for enhanced UI elements.
- Updated project structure by removing unused CSS files and components.
- Refactored configuration files to support new styling and component structure.
- Introduced new components for managing providers with improved UI interactions.   

* fix: 修复类型声明和分隔符实现问题

- 修复 updateTrayMenu 返回类型不一致（Promise<void> -> Promise<boolean>）
- 添加缺失的 UnlistenFn 类型导入
- 使用 MenuBuilder.separator() 替代文本分隔符

---------

Co-authored-by: farion1231 <farion1231@gmail.c

src/App.tsx

@@ -6,7 +6,7 @@ import AddProviderModal from "./components/AddProviderModal";
 import EditProviderModal from "./components/EditProviderModal";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { AppSwitcher } from "./components/AppSwitcher";
-import "./App.css";
+import { Plus } from "lucide-react";
 
 function App() {
   const [activeApp, setActiveApp] = useState<AppType>("claude");
@@ -18,7 +18,7 @@ function App() {
     path: string;
   } | null>(null);
   const [editingProviderId, setEditingProviderId] = useState<string | null>(
-    null,
+    null
   );
   const [notification, setNotification] = useState<{
     message: string;
@@ -37,7 +37,7 @@ function App() {
   const showNotification = (
     message: string,
     type: "success" | "error",
-    duration = 3000,
+    duration = 3000
   ) => {
     // 清除之前的定时器
     if (timeoutRef.current) {
@@ -74,6 +74,35 @@ function App() {
     };
   }, []);
 
+  // 监听托盘切换事件
+  useEffect(() => {
+    let unlisten: (() => void) | null = null;
+
+    const setupListener = async () => {
+      try {
+        unlisten = await window.api.onProviderSwitched(async (data) => {
+          console.log("收到供应商切换事件:", data);
+
+          // 如果当前应用类型匹配，则重新加载数据
+          if (data.appType === activeApp) {
+            await loadProviders();
+          }
+        });
+      } catch (error) {
+        console.error("设置供应商切换监听器失败:", error);
+      }
+    };
+
+    setupListener();
+
+    // 清理监听器
+    return () => {
+      if (unlisten) {
+        unlisten();
+      }
+    };
+  }, [activeApp]); // 依赖activeApp，切换应用时重新设置监听器
+
   const loadProviders = async () => {
     const loadedProviders = await window.api.getProviders(activeApp);
     const currentId = await window.api.getCurrentProvider(activeApp);
@@ -107,6 +136,8 @@ function App() {
     await window.api.addProvider(newProvider, activeApp);
     await loadProviders();
     setIsAddModalOpen(false);
+    // 更新托盘菜单
+    await window.api.updateTrayMenu();
   };
 
   const handleEditProvider = async (provider: Provider) => {
@@ -116,6 +147,8 @@ function App() {
       setEditingProviderId(null);
       // 显示编辑成功提示
       showNotification("供应商配置已保存", "success", 2000);
+      // 更新托盘菜单
+      await window.api.updateTrayMenu();
     } catch (error) {
       console.error("更新供应商失败:", error);
       setEditingProviderId(null);
@@ -134,6 +167,8 @@ function App() {
         await loadProviders();
         setConfirmDialog(null);
         showNotification("供应商删除成功", "success");
+        // 更新托盘菜单
+        await window.api.updateTrayMenu();
       },
     });
   };
@@ -147,8 +182,10 @@ function App() {
       showNotification(
         `切换成功！请重启 ${appName} 终端以生效`,
         "success",
-        2000,
+        2000
       );
+      // 更新托盘菜单
+      await window.api.updateTrayMenu();
     } else {
       showNotification("切换失败，请检查配置", "error");
     }
@@ -162,6 +199,8 @@ function App() {
       if (result.success) {
         await loadProviders();
         showNotification("已从现有配置创建默认供应商", "success", 3000);
+        // 更新托盘菜单
+        await window.api.updateTrayMenu();
       }
       // 如果导入失败（比如没有现有配置），静默处理，不显示错误
     } catch (error) {
@@ -175,29 +214,39 @@ function App() {
   };
 
   return (
-    <div className="app">
-      <header className="app-header">
-        <h1>CC Switch</h1>
-        <div className="app-tabs">
-          <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
-        </div>
-        <div className="header-actions">
-          <button className="add-btn" onClick={() => setIsAddModalOpen(true)}>
-            添加供应商
-          </button>
+    <div className="min-h-screen flex flex-col bg-[var(--color-bg-primary)]">
+      {/* Linear 风格的顶部导航 */}
+      <header className="bg-white border-b border-[var(--color-border)] px-6 py-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold text-[var(--color-text-primary)]">
+            CC Switch
+          </h1>
+
+          <div className="flex items-center gap-4">
+            <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
+
+            <button
+              onClick={() => setIsAddModalOpen(true)}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition-colors text-sm font-medium"
+            >
+              <Plus size={16} />
+              添加供应商
+            </button>
+          </div>
         </div>
       </header>
 
-      <main className="app-main">
-        <div className="provider-section">
-          {/* 浮动通知组件 */}
+      {/* 主内容区域 */}
+      <main className="flex-1 p-6">
+        <div className="max-w-4xl mx-auto">
+          {/* 通知组件 */}
           {notification && (
             <div
-              className={`notification-floating ${
+              className={`fixed top-6 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
                 notification.type === "error"
-                  ? "notification-error"
-                  : "notification-success"
-              } ${isNotificationVisible ? "fade-in" : "fade-out"}`}
+                  ? "bg-[var(--color-error)] text-white"
+                  : "bg-[var(--color-success)] text-white"
+              } ${isNotificationVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`}
             >
               {notification.message}
             </div>
@@ -210,23 +259,36 @@ function App() {
             onDelete={handleDeleteProvider}
             onEdit={setEditingProviderId}
           />
-        </div>
 
-        {configStatus && (
-          <div className="config-path">
-            <span>
-              配置文件位置: {configStatus.path}
-              {!configStatus.exists ? "（未创建，切换或保存时会自动创建）" : ""}
-            </span>
-            <button
-              className="browse-btn"
-              onClick={handleOpenConfigFolder}
-              title="打开配置文件夹"
-            >
-              打开
-            </button>
-          </div>
-        )}
+          {/* 配置文件路径信息 */}
+          {configStatus && (
+            <div className="mt-8 p-4 bg-white rounded-lg border border-[var(--color-border)]">
+              <div className="flex items-center justify-between">
+                <div className="text-sm text-[var(--color-text-secondary)]">
+                  <span className="font-medium">
+                    {activeApp === "claude" ? "Claude Code" : "Codex"}{" "}
+                    配置文件位置:
+                  </span>
+                  <span className="ml-2 font-mono text-xs">
+                    {configStatus.path}
+                  </span>
+                  {!configStatus.exists && (
+                    <span className="ml-2 text-[var(--color-warning)]">
+                      （未创建，切换或保存时会自动创建）
+                    </span>
+                  )}
+                </div>
+                <button
+                  onClick={handleOpenConfigFolder}
+                  className="px-3 py-1.5 text-sm font-medium text-[var(--color-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors"
+                  title="打开配置文件夹"
+                >
+                  打开文件夹
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
       </main>
 
       {isAddModalOpen && (