🐛 Fixed the bug of obtaining the operating system

✨ Added window title bars for different operating systems
2025-06-09 14:18:25 +08:00 · 2025-06-09 03:02:07 +08:00
10 changed files with 931 additions and 247 deletions
--- 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']
  }
 }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useConfigStore } from '@/stores/configStore';
+import { useSystemStore } from '@/stores/systemStore';
 import { useSystemTheme } from '@/composables/useSystemTheme';
 import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';

 const configStore = useConfigStore();
+const systemStore = useSystemStore();
 const { setTheme } = useSystemTheme();

-// 应用启动时加载配置
+// 应用启动时加载配置和初始化系统信息
 onMounted(async () => {
-  await configStore.initConfig();
+  // 并行初始化配置和系统信息
+  await Promise.all([
+    configStore.initConfig(),
+    systemStore.initializeSystemInfo()
+  ]);
+  
  await configStore.initializeLanguage();
  setTheme(configStore.config.appearance.systemTheme);
 });
@@ -18,7 +25,7 @@ onMounted(async () => {
 <template>
  <div class="app-container">
    <WindowTitleBar />
-    <div class="app-content">
+    <div class="app-content" :style="{ marginTop: systemStore.titleBarHeight }">
      <router-view/>
    </div>
  </div>
@@ -36,7 +43,6 @@ onMounted(async () => {

 .app-content {
  flex: 1;
-  margin-top: 32px;
  overflow: hidden;
  position: relative;
 }
--- a/frontend/src/components/titlebar/LinuxTitleBar.vue
+++ 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> 
--- a/frontend/src/components/titlebar/MacOSTitleBar.vue
+++ 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> 
--- a/frontend/src/components/titlebar/WindowTitleBar.vue
+++ b/frontend/src/components/titlebar/WindowTitleBar.vue
@@ -1,250 +1,17 @@
 <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="systemStore.isWindows" />
+  <MacOSTitleBar v-else-if="systemStore.isMacOS" />
+  <LinuxTitleBar v-else />
 </template>

 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import * as runtime from '@wailsio/runtime';
+import { useSystemStore } from '@/stores/systemStore';
+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) {
-  }
-};
-
-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');
-  });
-});
+const systemStore = useSystemStore();
 </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> 
--- a/frontend/src/components/titlebar/WindowsTitleBar.vue
+++ b/frontend/src/components/titlebar/WindowsTitleBar.vue
@@ -0,0 +1,246 @@
+<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 {computed, onMounted, onUnmounted, ref} 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> 
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -3,7 +3,8 @@ import messages from './locales';

 // 创建i18n实例
 const i18n = createI18n({
-    compositionOnly: false,
+    legacy: false,
+    compositionOnly: true,
    globalInjection: true,
    silentTranslationWarn: true,
    locale: 'zh-CN',
--- a/frontend/src/stores/systemStore.ts
+++ b/frontend/src/stores/systemStore.ts
@@ -0,0 +1,101 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import * as runtime from '@wailsio/runtime';
+
+export interface SystemEnvironment {
+  OS: string;
+  Arch: string;
+  Debug: boolean;
+  OSInfo: {
+    Name: string;
+    Branding: string;
+    Version: string;
+    ID: string;
+  };
+  PlatformInfo?: Record<string, string>;
+}
+
+export const useSystemStore = defineStore('system', () => {
+  // 状态
+  const environment = ref<SystemEnvironment | null>(null);
+  const isLoading = ref(false);
+  const error = ref<string | null>(null);
+
+  // 计算属性
+  const isWindows = computed(() => environment.value?.OS === 'windows');
+  const isMacOS = computed(() => environment.value?.OS === 'darwin');
+  const isLinux = computed(() => environment.value?.OS === 'linux');
+  
+  // 获取操作系统名称
+  const osName = computed(() => {
+    if (!environment.value) return 'Unknown';
+    return environment.value.OSInfo?.Name || environment.value.OS || 'Unknown';
+  });
+
+  // 获取架构信息
+  const architecture = computed(() => environment.value?.Arch || 'Unknown');
+
+  // 获取标题栏高度
+  const titleBarHeight = computed(() => {
+    if (isWindows.value) return '32px';
+    if (isMacOS.value) return '28px';
+    return '34px'; // Linux 默认
+  });
+
+  // 初始化系统信息
+  const initializeSystemInfo = async (): Promise<void> => {
+    if (isLoading.value) return;
+
+    isLoading.value = true;
+    error.value = null;
+
+    try {
+      const env = await runtime.System.Environment();
+      environment.value = env;
+    } catch (err) {
+      error.value = 'Failed to get system environment';
+      environment.value = null;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  // 获取平台特定信息
+  const getPlatformInfo = () => {
+    return environment.value?.PlatformInfo || {};
+  };
+
+  // 检查是否支持某项功能（基于操作系统）
+  const supportsFeature = (feature: string): boolean => {
+    switch (feature) {
+      case 'systemTray':
+        return true; // 所有平台都支持
+      case 'globalHotkeys':
+        return !isLinux.value; // Linux 支持可能有限
+      case 'transparency':
+        return isWindows.value || isMacOS.value;
+      default:
+        return false;
+    }
+  };
+
+  return {
+    // 状态
+    environment,
+    isLoading,
+    error,
+
+    // 计算属性
+    isWindows,
+    isMacOS,
+    isLinux,
+    osName,
+    architecture,
+    titleBarHeight,
+
+    // 方法
+    initializeSystemInfo,
+    getPlatformInfo,
+    supportsFeature
+  };
+}); 
--- a/go.mod
+++ b/go.mod
@@ -51,6 +51,7 @@ require (
 	github.com/leaanthony/u v1.1.1 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/lmittmann/tint v1.1.1 // indirect
+	github.com/matryer/is v1.4.1 // indirect
 	github.com/mattn/go-colorable v0.1.14 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
--- a/go.sum
+++ b/go.sum
@@ -110,8 +110,9 @@ github.com/lmittmann/tint v1.1.1 h1:xmmGuinUsCSxWdwH1OqMUQ4tzQsq3BdjJLAAmVKJ9Dw=
 github.com/lmittmann/tint v1.1.1/go.mod h1:HIS3gSy7qNwGCj+5oRjAutErFBl4BzdQP6cJZ0NfMwE=
 github.com/lxzan/gws v1.8.9 h1:VU3SGUeWlQrEwfUSfokcZep8mdg/BrUF+y73YYshdBM=
 github.com/lxzan/gws v1.8.9/go.mod h1:d9yHaR1eDTBHagQC6KY7ycUOaz5KWeqQtP3xu7aMK8Y=
-github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
 github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
+github.com/matryer/is v1.4.1 h1:55ehd8zaGABKLXQUe2awZ99BD/PTc2ls+KV/dXphgEQ=
+github.com/matryer/is v1.4.1/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
 github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHPsaIE=
 github.com/mattn/go-colorable v0.1.14/go.mod h1:6LmQG8QLFO4G5z1gPvYEzlUgJ2wF+stgPZH1UqBm1s8=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
Author	SHA1	Message	Date
landaiqing	ceb177114d	🐛 Fixed the bug of obtaining the operating system	2025-06-09 14:18:25 +08:00
landaiqing	5203784b63	✨ Added window title bars for different operating systems	2025-06-09 03:02:07 +08:00