!416 (titleBar): 使用 Font Awesome 图标集替代字符形式窗口控制标识， 且状态由根组件维护

Merge pull request !416 from zinface/styles/window-title-bar

electron/main/index.ts

@@ -876,6 +876,14 @@ app.whenReady().then(() => {
   });
 });
 
+ipcMain.handle('window:state', () => {
+  const win = BrowserWindow.getFocusedWindow()
+  if (!win) return 'normal'
+  if (win.isMaximized()) return 'maximized'
+  if (win.isMinimized()) return 'minimized'
+  return 'normal'
+})
+
 // New window example arg: new windows url
 // ipcMain.handle('open-win', (_, arg) => {
 //   const childWindow = new BrowserWindow({

electron/preload/index.ts

@@ -51,6 +51,7 @@ type WindowControlBridge = {
   minimize: () => void;
   toggleMaximize: () => void;
   close: () => void;
+  state: () => Promise<| 'normal' | 'maximized' | 'minimized'>;
 };
 
 type UpdateCenterStateListener = (snapshot: UpdateCenterSnapshot) => void;
@@ -110,6 +111,7 @@ contextBridge.exposeInMainWorld("windowControls", {
   minimize: () => ipcRenderer.send("window-control-minimize"),
   toggleMaximize: () => ipcRenderer.send("window-control-toggle-maximize"),
   close: () => ipcRenderer.send("window-control-close"),
+  state: () => ipcRenderer.invoke("window:state"),
 } satisfies WindowControlBridge);
 
 contextBridge.exposeInMainWorld("updateCenter", {

src/App.vue

@@ -14,6 +14,7 @@
       @toggle-theme="toggleTheme"
       @toggle-sidebar="isSidebarOpen = !isSidebarOpen"
       @spk-link="handleSpkLink"
+      :is-maximized="isMaximized"
     />
 
     <div class="flex min-h-0 flex-1 flex-col lg:flex-row">
@@ -546,6 +547,11 @@ const isDarkTheme = computed(() => {
   return themeMode.value === "dark";
 });
 
+const isMaximized = ref(false)
+const updateIsMaximizedState = async () => {
+  const state = await window.windowControls.state()
+  isMaximized.value = state === 'maximized'
+}
 const isSubmitterView = ref(false);
 
 // 启动参数 --no-apm => 仅 Spark；--no-spark => 仅 APM；由主进程 IPC 提供
@@ -923,6 +929,8 @@ const handleWindowResize = () => {
   saveBoundsTimer = window.setTimeout(() => {
     void window.ipcRenderer.invoke("save-window-bounds");
   }, 400);
+
+  updateIsMaximizedState()
 };
 
 // —— 以下为可复用的事件/IPC 监听处理器（命名函数，便于 onUnmounted 统一移除）——

src/components/WindowTitleBar.vue

@@ -75,30 +75,28 @@
       <div class="mx-1 h-6 w-px bg-slate-300/70 dark:bg-slate-700/70"></div>
       <button
         type="button"
-        class="rounded-md px-3 py-1.5 text-base transition hover:bg-slate-200/80 dark:hover:bg-slate-800"
+        class="fas fa-window-minimize rounded-md px-3 py-1.5 text-base transition hover:bg-slate-200/80 dark:hover:bg-slate-800"
         aria-label="最小化"
         title="最小化"
         @click="minimize"
       >
-        −
       </button>
       <button
         type="button"
-        class="rounded-md px-3 py-1.5 text-base transition hover:bg-slate-200/80 dark:hover:bg-slate-800"
+        class="fas rounded-md px-3 py-1.5 text-base transition hover:bg-slate-200/80 dark:hover:bg-slate-800"
+        :class="isMaximized ? 'fa-window-restore' : 'fa-window-maximize'"
         aria-label="最大化或还原"
         title="最大化或还原"
         @click="toggleMaximize"
       >
-        □
       </button>
       <button
         type="button"
-        class="rounded-md px-3 py-1 text-sm transition hover:bg-red-500 hover:text-white"
+        class="fas fa-times rounded-md px-3 py-1.5 text-base transition hover:bg-red-500 hover:text-white"
         aria-label="关闭"
         title="关闭"
         @click="close"
       >
-        ×
       </button>
     </div>
   </header>
@@ -110,6 +108,7 @@ import ThemeToggle from "./ThemeToggle.vue";
 defineProps<{
   searchQuery: string;
   themeMode: "light" | "dark" | "auto";
+  isMaximized: boolean
 }>();
 
 const emit = defineEmits<{

src/vite-env.d.ts

@@ -39,6 +39,7 @@ interface WindowControlBridge {
   minimize: () => void;
   toggleMaximize: () => void;
   close: () => void;
+  state: () => Promise<| 'normal' | 'maximized' | 'minimized'>
 }
 
 // IPC channel type definitions