🐛 Fixed the bug of obtaining the operating system

frontend/src/components/titlebar/LinuxTitleBar.vue

@@ -111,11 +111,11 @@ onMounted(async () => {
     await checkMaximizedState();
   });
 
-  onUnmounted(() => {
-    runtime.Events.Off('window:maximised');
-    runtime.Events.Off('window:unmaximised');
-    runtime.Events.Off('window:focus');
-  });
+});
+onUnmounted(() => {
+  runtime.Events.Off('window:maximised');
+  runtime.Events.Off('window:unmaximised');
+  runtime.Events.Off('window:focus');
 });
 </script>
 

frontend/src/components/titlebar/MacOSTitleBar.vue

@@ -116,11 +116,11 @@ onMounted(async () => {
     await checkMaximizedState();
   });
 
-  onUnmounted(() => {
-    runtime.Events.Off('window:maximised');
-    runtime.Events.Off('window:unmaximised');
-    runtime.Events.Off('window:focus');
-  });
+});
+onUnmounted(() => {
+  runtime.Events.Off('window:maximised');
+  runtime.Events.Off('window:unmaximised');
+  runtime.Events.Off('window:focus');
 });
 </script>
 

frontend/src/components/titlebar/WindowTitleBar.vue

@@ -1,29 +1,16 @@
 <template>
-  <WindowsTitleBar v-if="isWindows" />
-  <MacOSTitleBar v-else-if="isMacOS" />
+  <WindowsTitleBar v-if="systemStore.isWindows" />
+  <MacOSTitleBar v-else-if="systemStore.isMacOS" />
   <LinuxTitleBar v-else />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-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 isWindows = ref(false);
-const isMacOS = ref(false);
-
-onMounted(async () => {
-  try {
-    isWindows.value = runtime.System.IsWindows();
-    isMacOS.value = runtime.System.IsMac();
-  } catch (error) {
-    // 默认使用 Windows 风格
-    isWindows.value = true;
-  }
-});
+const systemStore = useSystemStore();
 </script>
 
 <style scoped lang="scss">

frontend/src/components/titlebar/WindowsTitleBar.vue

@@ -1,33 +1,34 @@
 <template>
-  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
+  <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" />
+        <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')"
+      <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')"
+
+      <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')"
+
+      <button
+          class="titlebar-button close-button"
+          @click="closeWindow"
+          :title="t('titlebar.close')"
       >
         <span class="titlebar-icon">&#xE8BB;</span>
       </button>
@@ -36,11 +37,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import {computed, onMounted, onUnmounted, ref} from 'vue';
+import {useI18n} from 'vue-i18n';
 import * as runtime from '@wailsio/runtime';
 
-const { t } = useI18n();
+const {t} = useI18n();
 const isMaximized = ref(false);
 
 // 计算属性用于图标，减少重复渲染
@@ -59,14 +60,14 @@ const toggleMaximize = async () => {
     // 立即更新UI状态，提供即时反馈
     const newState = !isMaximized.value;
     isMaximized.value = newState;
-    
+
     // 然后执行实际操作
     if (newState) {
       await runtime.Window.Maximise();
     } else {
       await runtime.Window.UnMaximise();
     }
-    
+
     // 操作完成后再次确认状态（防止操作失败时状态不一致）
     setTimeout(async () => {
       await checkMaximizedState();
@@ -95,11 +96,11 @@ const checkMaximizedState = async () => {
 
 onMounted(async () => {
   await checkMaximizedState();
-  
+
   runtime.Events.On('window:maximised', () => {
     isMaximized.value = true;
   });
-  
+
   runtime.Events.On('window:unmaximised', () => {
     isMaximized.value = false;
   });
@@ -108,11 +109,12 @@ onMounted(async () => {
     await checkMaximizedState();
   });
 
-  onUnmounted(() => {
-    runtime.Events.Off('window:maximised');
-    runtime.Events.Off('window:unmaximised');
-    runtime.Events.Off('window:focus');
-  });
+});
+
+onUnmounted(() => {
+  runtime.Events.Off('window:maximised');
+  runtime.Events.Off('window:unmaximised');
+  runtime.Events.Off('window:focus');
 });
 </script>
 
@@ -130,7 +132,7 @@ onMounted(async () => {
   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;
@@ -146,7 +148,7 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 400;
   cursor: default;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -155,7 +157,7 @@ onMounted(async () => {
 .titlebar-content .titlebar-icon {
   width: 16px;
   height: 16px;
-  
+
   img {
     width: 100%;
     height: 100%;
@@ -171,7 +173,7 @@ onMounted(async () => {
 .titlebar-controls {
   display: flex;
   height: 100%;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -190,11 +192,11 @@ onMounted(async () => {
   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;
@@ -208,7 +210,7 @@ onMounted(async () => {
   display: inline-block;
   opacity: 0.9;
   transition: opacity 0.1s ease;
-  
+
   .titlebar-button:hover & {
     opacity: 1;
   }
@@ -228,7 +230,7 @@ onMounted(async () => {
 .close-button:hover {
   background: #c42b1c;
   color: #ffffff;
-  
+
   .titlebar-icon {
     opacity: 1;
   }
@@ -236,7 +238,7 @@ onMounted(async () => {
 
 .close-button:active {
   background: #a93226;
-  
+
   .titlebar-icon {
     opacity: 1;
   }