🐛 Fixed the bug of obtaining the operating system

frontend/src/App.vue

@@ -1,46 +1,31 @@
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
+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';
-import * as runtime from '@wailsio/runtime';
 
 const configStore = useConfigStore();
+const systemStore = useSystemStore();
 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 Promise.all([
+    configStore.initConfig(),
+    systemStore.initializeSystemInfo()
+  ]);
+  
   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" :style="{ marginTop: titleBarHeight }">
+    <div class="app-content" :style="{ marginTop: systemStore.titleBarHeight }">
       <router-view/>
     </div>
   </div>

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

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',

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