landaiqing/voidraft
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

🐛 Fixed the bug of obtaining the operating system

Browse Source
This commit is contained in:
landaiqing
2025-06-09 14:18:25 +08:00
parent 5203784b63
commit ceb177114d
9 changed files with 171 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/App.vue
View File

@@ -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>

10
frontend/src/components/titlebar/LinuxTitleBar.vue
View File

@@ -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>

10
frontend/src/components/titlebar/MacOSTitleBar.vue
View File

@@ -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>

21
frontend/src/components/titlebar/WindowTitleBar.vue
View File

@@ -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">

78
frontend/src/components/titlebar/WindowsTitleBar.vue
View File

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

3
frontend/src/i18n/index.ts
View File

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

101
frontend/src/stores/systemStore.ts Normal file
View File

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

1
go.mod
View File

@@ -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

3
go.sum
View File

@@ -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=