From 5203784b6395a36873a471445f2770740537a303 Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Mon, 9 Jun 2025 03:02:07 +0800
Subject: [PATCH] :sparkles: Added window title bars for different operating
 systems

---
 frontend/components.d.ts                      |   3 +
 frontend/src/App.vue                          |  29 +-
 .../src/components/titlebar/LinuxTitleBar.vue | 292 ++++++++++++++++++
 .../src/components/titlebar/MacOSTitleBar.vue | 266 ++++++++++++++++
 .../components/titlebar/WindowTitleBar.vue    | 254 +--------------
 .../components/titlebar/WindowsTitleBar.vue   | 244 +++++++++++++++
 6 files changed, 847 insertions(+), 241 deletions(-)
 create mode 100644 frontend/src/components/titlebar/LinuxTitleBar.vue
 create mode 100644 frontend/src/components/titlebar/MacOSTitleBar.vue
 create mode 100644 frontend/src/components/titlebar/WindowsTitleBar.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 8c8d363..3baa618 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,10 +8,13 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    LinuxTitleBar: typeof import('./src/components/titlebar/LinuxTitleBar.vue')['default']
+    MacOSTitleBar: typeof import('./src/components/titlebar/MacOSTitleBar.vue')['default']
     MemoryMonitor: typeof import('./src/components/monitor/MemoryMonitor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Toolbar: typeof import('./src/components/toolbar/Toolbar.vue')['default']
+    WindowsTitleBar: typeof import('./src/components/titlebar/WindowsTitleBar.vue')['default']
     WindowTitleBar: typeof import('./src/components/titlebar/WindowTitleBar.vue')['default']
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7f65515..bab6014 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,24 +1,46 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useConfigStore } from '@/stores/configStore';
 import { useSystemTheme } from '@/composables/useSystemTheme';
 import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
+import * as runtime from '@wailsio/runtime';
 
 const configStore = useConfigStore();
 const { setTheme } = useSystemTheme();
 
-// 应用启动时加载配置
+// 操作系统检测
+const isWindows = ref(false);
+const isMacOS = ref(false);
+
+// 根据操作系统计算标题栏高度
+const titleBarHeight = computed(() => {
+  if (isWindows.value) return '32px';
+  if (isMacOS.value) return '28px';
+  return '34px'; // Linux 默认
+});
+
+// 应用启动时加载配置和检测操作系统
 onMounted(async () => {
   await configStore.initConfig();
   await configStore.initializeLanguage();
   setTheme(configStore.config.appearance.systemTheme);
+  
+  // 检测操作系统
+  try {
+    isWindows.value = runtime.System.IsWindows();
+    isMacOS.value = runtime.System.IsMac();
+  } catch (error) {
+    console.error('检测操作系统失败:', error);
+    // 默认使用 Windows
+    isWindows.value = true;
+  }
 });
 </script>
 
 <template>
   <div class="app-container">
     <WindowTitleBar />
-    <div class="app-content">
+    <div class="app-content" :style="{ marginTop: titleBarHeight }">
       <router-view/>
     </div>
   </div>
@@ -36,7 +58,6 @@ onMounted(async () => {
 
 .app-content {
   flex: 1;
-  margin-top: 32px;
   overflow: hidden;
   position: relative;
 }
diff --git a/frontend/src/components/titlebar/LinuxTitleBar.vue b/frontend/src/components/titlebar/LinuxTitleBar.vue
new file mode 100644
index 0000000..32b79ab
--- /dev/null
+++ b/frontend/src/components/titlebar/LinuxTitleBar.vue
@@ -0,0 +1,292 @@
+<template>
+  <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
+    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+      <div class="titlebar-icon">
+        <img src="/appicon.png" alt="voidraft" />
+      </div>
+      <div class="titlebar-title">voidraft</div>
+    </div>
+    
+    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
+      <button 
+        class="titlebar-button minimize-button" 
+        @click="minimizeWindow"
+        :title="t('titlebar.minimize')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+      
+      <button 
+        class="titlebar-button maximize-button" 
+        @click="toggleMaximize"
+        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" v-if="!isMaximized">
+          <rect x="4" y="4" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        <svg width="16" height="16" viewBox="0 0 16 16" v-else>
+          <rect x="3" y="5" width="6" height="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
+          <rect x="7" y="3" width="6" height="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
+        </svg>
+      </button>
+      
+      <button 
+        class="titlebar-button close-button" 
+        @click="closeWindow"
+        :title="t('titlebar.close')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path d="M4 4l8 8m0-8L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import * as runtime from '@wailsio/runtime';
+
+const { t } = useI18n();
+const isMaximized = ref(false);
+
+const minimizeWindow = async () => {
+  try {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    const newState = !isMaximized.value;
+    isMaximized.value = newState;
+    
+    if (newState) {
+      await runtime.Window.Maximise();
+    } else {
+      await runtime.Window.UnMaximise();
+    }
+    
+    setTimeout(async () => {
+      await checkMaximizedState();
+    }, 100);
+  } catch (error) {
+    isMaximized.value = !isMaximized.value;
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+onMounted(async () => {
+  await checkMaximizedState();
+  
+  runtime.Events.On('window:maximised', () => {
+    isMaximized.value = true;
+  });
+  
+  runtime.Events.On('window:unmaximised', () => {
+    isMaximized.value = false;
+  });
+
+  runtime.Events.On('window:focus', async () => {
+    await checkMaximizedState();
+  });
+
+  onUnmounted(() => {
+    runtime.Events.Off('window:maximised');
+    runtime.Events.Off('window:unmaximised');
+    runtime.Events.Off('window:focus');
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.linux-titlebar {
+  display: flex;
+  height: 34px;
+  background: var(--toolbar-bg, linear-gradient(to bottom, #f6f6f6, #e8e8e8));
+  border-bottom: 1px solid var(--toolbar-border, #d0d0d0);
+  user-select: none;
+  -webkit-user-select: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  font-family: 'Ubuntu', 'Cantarell', 'DejaVu Sans', system-ui, sans-serif;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding-left: 12px;
+  gap: 8px;
+  color: var(--toolbar-text, #333);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: default;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content .titlebar-icon {
+  width: 16px;
+  height: 16px;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.titlebar-title {
+  font-size: 13px;
+  color: var(--toolbar-text, #333);
+  font-weight: 500;
+}
+
+.titlebar-controls {
+  display: flex;
+  height: 100%;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-button {
+  width: 36px;
+  height: 34px;
+  border: none;
+  background: transparent;
+  color: var(--toolbar-text, #555);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    opacity: 0.8;
+    transition: opacity 0.15s ease;
+  }
+  
+  &:hover {
+    background: var(--toolbar-button-hover, rgba(0, 0, 0, 0.1));
+    
+    svg {
+      opacity: 1;
+    }
+  }
+  
+  &:active {
+    background: var(--toolbar-button-active, rgba(0, 0, 0, 0.15));
+  }
+}
+
+.close-button {
+  &:hover {
+    background: #e74c3c;
+    color: #ffffff;
+    
+    svg {
+      opacity: 1;
+    }
+  }
+  
+  &:active {
+    background: #c0392b;
+  }
+}
+
+// Dark theme support
+@media (prefers-color-scheme: dark) {
+  .linux-titlebar {
+    background: var(--toolbar-bg, linear-gradient(to bottom, #3c3c3c, #2e2e2e));
+    border-bottom-color: var(--toolbar-border, #1e1e1e);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  
+  .titlebar-content,
+  .titlebar-title {
+    color: var(--toolbar-text, #f0f0f0);
+  }
+  
+  .titlebar-button {
+    color: var(--toolbar-text, #ccc);
+    
+    &:hover {
+      background: var(--toolbar-button-hover, rgba(255, 255, 255, 0.1));
+    }
+    
+    &:active {
+      background: var(--toolbar-button-active, rgba(255, 255, 255, 0.15));
+    }
+  }
+}
+
+// GNOME-like styling variant
+.linux-titlebar.gnome-style {
+  height: 38px;
+  border-radius: 12px 12px 0 0;
+  
+  .titlebar-button {
+    height: 38px;
+    width: 32px;
+    border-radius: 6px;
+    margin: 3px 2px;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+// KDE-like styling variant
+.linux-titlebar.kde-style {
+  background: var(--toolbar-bg, #eff0f1);
+  border-bottom: 1px solid var(--toolbar-border, #bdc3c7);
+  
+  .titlebar-button {
+    border-radius: 4px;
+    margin: 2px 1px;
+    
+    &:hover {
+      background: rgba(61, 174, 233, 0.2);
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/components/titlebar/MacOSTitleBar.vue b/frontend/src/components/titlebar/MacOSTitleBar.vue
new file mode 100644
index 0000000..bd7a74b
--- /dev/null
+++ b/frontend/src/components/titlebar/MacOSTitleBar.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="macos-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
+    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
+      <button 
+        class="titlebar-button close-button" 
+        @click="closeWindow"
+        :title="t('titlebar.close')"
+      >
+        <div class="button-icon">
+          <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons">
+            <path d="M1 1l4 4m0-4L1 5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </button>
+      
+      <button 
+        class="titlebar-button minimize-button" 
+        @click="minimizeWindow"
+        :title="t('titlebar.minimize')"
+      >
+        <div class="button-icon">
+          <svg width="8" height="1" viewBox="0 0 8 1" v-show="showControlIcons">
+            <path d="M0 0h8" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </button>
+      
+      <button 
+        class="titlebar-button maximize-button" 
+        @click="toggleMaximize"
+        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+      >
+        <div class="button-icon">
+          <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && !isMaximized">
+            <path d="M1 1l4 0 0 4-4 0z" fill="none" stroke="currentColor" stroke-width="1"/>
+            <path d="M2 2l2 0 0 2" fill="none" stroke="currentColor" stroke-width="1"/>
+          </svg>
+          <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && isMaximized">
+            <path d="M1 2l4 0 0 3-4 0z" fill="none" stroke="currentColor" stroke-width="1"/>
+            <path d="M2 1l3 0 0 3" fill="none" stroke="currentColor" stroke-width="1"/>
+          </svg>
+        </div>
+      </button>
+    </div>
+    
+    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+      <div class="titlebar-title">voidraft</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import * as runtime from '@wailsio/runtime';
+
+const { t } = useI18n();
+const isMaximized = ref(false);
+const showControlIcons = ref(false);
+
+const minimizeWindow = async () => {
+  try {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    const newState = !isMaximized.value;
+    isMaximized.value = newState;
+    
+    if (newState) {
+      await runtime.Window.Maximise();
+    } else {
+      await runtime.Window.UnMaximise();
+    }
+    
+    setTimeout(async () => {
+      await checkMaximizedState();
+    }, 100);
+  } catch (error) {
+    isMaximized.value = !isMaximized.value;
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+onMounted(async () => {
+  await checkMaximizedState();
+  
+  runtime.Events.On('window:maximised', () => {
+    isMaximized.value = true;
+  });
+  
+  runtime.Events.On('window:unmaximised', () => {
+    isMaximized.value = false;
+  });
+
+  runtime.Events.On('window:focus', async () => {
+    await checkMaximizedState();
+  });
+
+  onUnmounted(() => {
+    runtime.Events.Off('window:maximised');
+    runtime.Events.Off('window:unmaximised');
+    runtime.Events.Off('window:focus');
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.macos-titlebar {
+  display: flex;
+  height: 28px;
+  background: var(--toolbar-bg, #ececec);
+  border-bottom: 1px solid var(--toolbar-border, rgba(0, 0, 0, 0.1));
+  user-select: none;
+  -webkit-user-select: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+  
+  &:hover {
+    .titlebar-button {
+      .button-icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.titlebar-controls {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-left: 8px;
+  gap: 8px;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-button {
+  width: 12px;
+  height: 12px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  
+  .button-icon {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: rgba(0, 0, 0, 0.7);
+  }
+  
+  &:hover .button-icon {
+    opacity: 1;
+  }
+}
+
+.close-button {
+  background: #ff5f57;
+  
+  &:hover {
+    background: #ff453a;
+  }
+  
+  &:active {
+    background: #d7463f;
+  }
+}
+
+.minimize-button {
+  background: #ffbd2e;
+  
+  &:hover {
+    background: #ffb524;
+  }
+  
+  &:active {
+    background: #e6a220;
+  }
+}
+
+.maximize-button {
+  background: #28ca42;
+  
+  &:hover {
+    background: #1ebe36;
+  }
+  
+  &:active {
+    background: #1ba932;
+  }
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  cursor: default;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--toolbar-text, #333);
+  text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .macos-titlebar {
+    background: var(--toolbar-bg, #2d2d2d);
+    border-bottom-color: var(--toolbar-border, rgba(255, 255, 255, 0.1));
+  }
+  
+  .titlebar-title {
+    color: var(--toolbar-text, #fff);
+  }
+  
+  .titlebar-button .button-icon {
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/components/titlebar/WindowTitleBar.vue b/frontend/src/components/titlebar/WindowTitleBar.vue
index cf1a417..7d7204d 100644
--- a/frontend/src/components/titlebar/WindowTitleBar.vue
+++ b/frontend/src/components/titlebar/WindowTitleBar.vue
@@ -1,250 +1,30 @@
 <template>
-  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
-      <div class="titlebar-icon">
-        <img src="/appicon.png" alt="voidraft" />
-      </div>
-      <div class="titlebar-title">voidraft</div>
-    </div>
-    
-    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
-      <button 
-        class="titlebar-button minimize-button" 
-        @click="minimizeWindow"
-        :title="t('titlebar.minimize')"
-      >
-        <span class="titlebar-icon">&#xE921;</span>
-      </button>
-      
-      <button 
-        class="titlebar-button maximize-button" 
-        @click="toggleMaximize"
-        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
-      >
-        <span class="titlebar-icon" v-html="maximizeIcon"></span>
-      </button>
-      
-      <button 
-        class="titlebar-button close-button" 
-        @click="closeWindow"
-        :title="t('titlebar.close')"
-      >
-        <span class="titlebar-icon">&#xE8BB;</span>
-      </button>
-    </div>
-  </div>
+  <WindowsTitleBar v-if="isWindows" />
+  <MacOSTitleBar v-else-if="isMacOS" />
+  <LinuxTitleBar v-else />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { ref, onMounted } from 'vue';
 import * as runtime from '@wailsio/runtime';
+import WindowsTitleBar from './WindowsTitleBar.vue';
+import MacOSTitleBar from './MacOSTitleBar.vue';
+import LinuxTitleBar from './LinuxTitleBar.vue';
 
-const { t } = useI18n();
-const isMaximized = ref(false);
-
-// 计算属性用于图标，减少重复渲染
-const maximizeIcon = computed(() => isMaximized.value ? '&#xE923;' : '&#xE922;');
-
-const minimizeWindow = async () => {
-  try {
-    await runtime.Window.Minimise();
-  } catch (error) {
- 
-  }
-};
-
-const toggleMaximize = async () => {
-  try {
-    // 立即更新UI状态，提供即时反馈
-    const newState = !isMaximized.value;
-    isMaximized.value = newState;
-    
-    // 然后执行实际操作
-    if (newState) {
-      await runtime.Window.Maximise();
-    } else {
-      await runtime.Window.UnMaximise();
-    }
-    
-    // 操作完成后再次确认状态（防止操作失败时状态不一致）
-    setTimeout(async () => {
-      await checkMaximizedState();
-    }, 100);
-  } catch (error) {
-    // 如果操作失败，恢复原状态
-    isMaximized.value = !isMaximized.value;
-  }
-};
-
-const closeWindow = async () => {
-  try {
-    // 使用Window的Close方法，会触发窗口关闭事件
-    await runtime.Window.Close();
-  } catch (error) {
-  }
-};
-
-const checkMaximizedState = async () => {
-  try {
-    isMaximized.value = await runtime.Window.IsMaximised();
-  } catch (error) {
-  }
-};
+// 操作系统检测
+const isWindows = ref(false);
+const isMacOS = ref(false);
 
 onMounted(async () => {
-  // 检查初始最大化状态
-  await checkMaximizedState();
-  
-  // 监听窗口状态变化事件
-  runtime.Events.On('window:maximised', () => {
-    isMaximized.value = true;
-  });
-  
-  runtime.Events.On('window:unmaximised', () => {
-    isMaximized.value = false;
-  });
-
-  // 监听窗口焦点事件，确保状态同步
-  runtime.Events.On('window:focus', async () => {
-    await checkMaximizedState();
-  });
-
-  onUnmounted(() => {
-    // 清理事件监听器
-    runtime.Events.Off('window:maximised');
-    runtime.Events.Off('window:unmaximised');
-    runtime.Events.Off('window:focus');
-  });
+  try {
+    isWindows.value = runtime.System.IsWindows();
+    isMacOS.value = runtime.System.IsMac();
+  } catch (error) {
+    // 默认使用 Windows 风格
+    isWindows.value = true;
+  }
 });
 </script>
 
 <style scoped lang="scss">
-.windows-titlebar {
-  display: flex;
-  height: 32px;
-  background: var(--toolbar-bg);
-  border-bottom: 1px solid var(--toolbar-border);
-  user-select: none;
-  -webkit-user-select: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-  
-  /* 禁用右键菜单 */
-  -webkit-context-menu: none;
-  -moz-context-menu: none;
-  context-menu: none;
-}
-
-.titlebar-content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  padding-left: 8px;
-  gap: 8px;
-  color: var(--toolbar-text);
-  font-size: 12px;
-  font-weight: 400;
-  cursor: default;
-  
-  /* 禁用右键菜单 */
-  -webkit-context-menu: none;
-  -moz-context-menu: none;
-  context-menu: none;
-}
-
-.titlebar-content .titlebar-icon {
-  width: 16px;
-  height: 16px;
-  
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-}
-
-.titlebar-title {
-  font-size: 12px;
-  color: var(--toolbar-text);
-}
-
-.titlebar-controls {
-  display: flex;
-  height: 100%;
-  
-  /* 禁用右键菜单 */
-  -webkit-context-menu: none;
-  -moz-context-menu: none;
-  context-menu: none;
-}
-
-.titlebar-button {
-  width: 46px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  color: var(--toolbar-text);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.1s ease;
-  padding: 0;
-  margin: 0;
-  
-  &:hover {
-    background: var(--toolbar-button-hover);
-  }
-  
-  &:active {
-    background: var(--toolbar-button-hover);
-    opacity: 0.8;
-  }
-}
-
-.titlebar-button .titlebar-icon {
-  font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', 'Segoe UI', system-ui;
-  font-size: 9px;
-  line-height: 1;
-  display: inline-block;
-  opacity: 0.9;
-  transition: opacity 0.1s ease;
-  
-  .titlebar-button:hover & {
-    opacity: 1;
-  }
-}
-
-.minimize-button:hover,
-.maximize-button:hover {
-  background: var(--toolbar-button-hover);
-}
-
-.minimize-button:active,
-.maximize-button:active {
-  background: var(--toolbar-button-hover);
-  opacity: 0.8;
-}
-
-.close-button:hover {
-  background: #c42b1c;
-  color: #ffffff;
-  
-  .titlebar-icon {
-    opacity: 1;
-  }
-}
-
-.close-button:active {
-  background: #a93226;
-  
-  .titlebar-icon {
-    opacity: 1;
-  }
-}
 </style> 
\ No newline at end of file
diff --git a/frontend/src/components/titlebar/WindowsTitleBar.vue b/frontend/src/components/titlebar/WindowsTitleBar.vue
new file mode 100644
index 0000000..8ea96ac
--- /dev/null
+++ b/frontend/src/components/titlebar/WindowsTitleBar.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
+    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+      <div class="titlebar-icon">
+        <img src="/appicon.png" alt="voidraft" />
+      </div>
+      <div class="titlebar-title">voidraft</div>
+    </div>
+    
+    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
+      <button 
+        class="titlebar-button minimize-button" 
+        @click="minimizeWindow"
+        :title="t('titlebar.minimize')"
+      >
+        <span class="titlebar-icon">&#xE921;</span>
+      </button>
+      
+      <button 
+        class="titlebar-button maximize-button" 
+        @click="toggleMaximize"
+        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+      >
+        <span class="titlebar-icon" v-html="maximizeIcon"></span>
+      </button>
+      
+      <button 
+        class="titlebar-button close-button" 
+        @click="closeWindow"
+        :title="t('titlebar.close')"
+      >
+        <span class="titlebar-icon">&#xE8BB;</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import * as runtime from '@wailsio/runtime';
+
+const { t } = useI18n();
+const isMaximized = ref(false);
+
+// 计算属性用于图标，减少重复渲染
+const maximizeIcon = computed(() => isMaximized.value ? '&#xE923;' : '&#xE922;');
+
+const minimizeWindow = async () => {
+  try {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    // 立即更新UI状态，提供即时反馈
+    const newState = !isMaximized.value;
+    isMaximized.value = newState;
+    
+    // 然后执行实际操作
+    if (newState) {
+      await runtime.Window.Maximise();
+    } else {
+      await runtime.Window.UnMaximise();
+    }
+    
+    // 操作完成后再次确认状态（防止操作失败时状态不一致）
+    setTimeout(async () => {
+      await checkMaximizedState();
+    }, 100);
+  } catch (error) {
+    // 如果操作失败，恢复原状态
+    isMaximized.value = !isMaximized.value;
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+onMounted(async () => {
+  await checkMaximizedState();
+  
+  runtime.Events.On('window:maximised', () => {
+    isMaximized.value = true;
+  });
+  
+  runtime.Events.On('window:unmaximised', () => {
+    isMaximized.value = false;
+  });
+
+  runtime.Events.On('window:focus', async () => {
+    await checkMaximizedState();
+  });
+
+  onUnmounted(() => {
+    runtime.Events.Off('window:maximised');
+    runtime.Events.Off('window:unmaximised');
+    runtime.Events.Off('window:focus');
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.windows-titlebar {
+  display: flex;
+  height: 32px;
+  background: var(--toolbar-bg);
+  border-bottom: 1px solid var(--toolbar-border);
+  user-select: none;
+  -webkit-user-select: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding-left: 8px;
+  gap: 8px;
+  color: var(--toolbar-text);
+  font-size: 12px;
+  font-weight: 400;
+  cursor: default;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content .titlebar-icon {
+  width: 16px;
+  height: 16px;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.titlebar-title {
+  font-size: 12px;
+  color: var(--toolbar-text);
+}
+
+.titlebar-controls {
+  display: flex;
+  height: 100%;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-button {
+  width: 46px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--toolbar-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.1s ease;
+  padding: 0;
+  margin: 0;
+  
+  &:hover {
+    background: var(--toolbar-button-hover);
+  }
+  
+  &:active {
+    background: var(--toolbar-button-hover);
+    opacity: 0.8;
+  }
+}
+
+.titlebar-button .titlebar-icon {
+  font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', 'Segoe UI', system-ui;
+  font-size: 9px;
+  line-height: 1;
+  display: inline-block;
+  opacity: 0.9;
+  transition: opacity 0.1s ease;
+  
+  .titlebar-button:hover & {
+    opacity: 1;
+  }
+}
+
+.minimize-button:hover,
+.maximize-button:hover {
+  background: var(--toolbar-button-hover);
+}
+
+.minimize-button:active,
+.maximize-button:active {
+  background: var(--toolbar-button-hover);
+  opacity: 0.8;
+}
+
+.close-button:hover {
+  background: #c42b1c;
+  color: #ffffff;
+  
+  .titlebar-icon {
+    opacity: 1;
+  }
+}
+
+.close-button:active {
+  background: #a93226;
+  
+  .titlebar-icon {
+    opacity: 1;
+  }
+}
+</style> 
\ No newline at end of file