✨ Added window title bars for different operating systems

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;
 }