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

🐛 Fixed the window toggle maximise issue

Browse Source
This commit is contained in:
landaiqing
2025-08-17 14:51:39 +08:00
parent f37c659c89
commit 5b88efcfbe
34 changed files with 556 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

749
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

36
frontend/package.json
View File

@@ -24,18 +24,18 @@
"@codemirror/lang-json": "^6.0.2",
"@codemirror/lang-less": "^6.0.2",
"@codemirror/lang-lezer": "^6.0.2",
"@codemirror/lang-liquid": "^6.2.3",
"@codemirror/lang-markdown": "^6.3.3",
"@codemirror/lang-liquid": "^6.3.0",
"@codemirror/lang-markdown": "^6.3.4",
"@codemirror/lang-php": "^6.0.2",
"@codemirror/lang-python": "^6.2.1",
"@codemirror/lang-rust": "^6.0.2",
"@codemirror/lang-sass": "^6.0.2",
"@codemirror/lang-sql": "^6.9.0",
"@codemirror/lang-sql": "^6.9.1",
"@codemirror/lang-vue": "^0.1.3",
"@codemirror/lang-wast": "^6.0.2",
"@codemirror/lang-xml": "^6.1.0",
"@codemirror/lang-yaml": "^6.1.2",
"@codemirror/language": "^6.11.2",
"@codemirror/language": "^6.11.3",
"@codemirror/language-data": "^6.5.1",
"@codemirror/legacy-modes": "^6.5.1",
"@codemirror/lint": "^6.8.5",
@@ -52,30 +52,30 @@
"hsl-matcher": "^1.2.4",
"lezer": "^0.13.5",
"pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.4.1",
"pinia-plugin-persistedstate": "^4.5.0",
"prettier": "^3.6.2",
"remarkable": "^2.0.1",
"sass": "^1.89.2",
"vue": "^3.5.17",
"vue-i18n": "^11.1.10",
"sass": "^1.90.0",
"vue": "^3.5.18",
"vue-i18n": "^11.1.11",
"vue-pick-colors": "^1.8.0",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@eslint/js": "^9.31.0",
"@eslint/js": "^9.33.0",
"@lezer/generator": "^1.8.0",
"@types/node": "^24.0.14",
"@types/node": "^24.3.0",
"@types/remarkable": "^2.0.8",
"@vitejs/plugin-vue": "^6.0.0",
"@vitejs/plugin-vue": "^6.0.1",
"@wailsio/runtime": "latest",
"eslint": "^9.31.0",
"eslint-plugin-vue": "^10.3.0",
"eslint": "^9.33.0",
"eslint-plugin-vue": "^10.4.0",
"globals": "^16.3.0",
"typescript": "^5.8.3",
"typescript-eslint": "^8.37.0",
"unplugin-vue-components": "^28.8.0",
"vite": "^7.0.4",
"typescript": "^5.9.2",
"typescript-eslint": "^8.39.1",
"unplugin-vue-components": "^29.0.0",
"vite": "^7.1.2",
"vue-eslint-parser": "^10.2.0",
"vue-tsc": "^3.0.1"
"vue-tsc": "^3.0.5"
}
}

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

@@ -2,26 +2,26 @@
<div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
<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">{{ titleText }}</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')"
>
<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')"
<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"/>
@@ -31,11 +31,11 @@
<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')"
<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"/>
@@ -46,85 +46,56 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import {computed, onMounted, ref} from 'vue';
import {useI18n} from 'vue-i18n';
import * as runtime from '@wailsio/runtime';
import { useWindowStore } from '@/stores/windowStore';
import { useDocumentStore } from '@/stores/documentStore';
import {useDocumentStore} from '@/stores/documentStore';
const { t } = useI18n();
const {t} = useI18n();
const isMaximized = ref(false);
const documentStore = useDocumentStore();
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
}
};
// 计算标题文本
const titleText = computed(() => {
const currentDoc = documentStore.currentDocument;
return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
});
const minimizeWindow = async () => {
try {
await runtime.Window.Minimise();
} catch (error) {
console.error(error);
}
};
const toggleMaximize = async () => {
try {
await runtime.Window.ToggleMaximise();
await checkMaximizedState();
} catch (error) {
console.error(error);
}
};
const closeWindow = async () => {
try {
await runtime.Window.Close();
} catch (error) {
console.error(error);
}
};
const checkMaximizedState = async () => {
try {
isMaximized.value = await runtime.Window.IsMaximised();
} catch (error) {
console.error(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');
});
</script>
@@ -139,7 +110,7 @@ onUnmounted(() => {
width: 100%;
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;
@@ -155,7 +126,7 @@ onUnmounted(() => {
font-size: 13px;
font-weight: 500;
cursor: default;
-webkit-context-menu: none;
-moz-context-menu: none;
context-menu: none;
@@ -164,7 +135,7 @@ onUnmounted(() => {
.titlebar-content .titlebar-icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
@@ -181,7 +152,7 @@ onUnmounted(() => {
.titlebar-controls {
display: flex;
height: 100%;
-webkit-context-menu: none;
-moz-context-menu: none;
context-menu: none;
@@ -201,22 +172,22 @@ onUnmounted(() => {
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));
}
@@ -226,12 +197,12 @@ onUnmounted(() => {
&:hover {
background: #e74c3c;
color: #ffffff;
svg {
opacity: 1;
}
}
&:active {
background: #c0392b;
}
@@ -244,19 +215,19 @@ onUnmounted(() => {
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));
}
@@ -267,13 +238,13 @@ onUnmounted(() => {
.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);
}
@@ -284,11 +255,11 @@ onUnmounted(() => {
.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);
}

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

@@ -53,7 +53,6 @@
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import * as runtime from '@wailsio/runtime';
import { useWindowStore } from '@/stores/windowStore';
import { useDocumentStore } from '@/stores/documentStore';
const { t } = useI18n();
@@ -65,26 +64,16 @@ const minimizeWindow = async () => {
try {
await runtime.Window.Minimise();
} catch (error) {
// Error handling
console.error(error)
}
};
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);
await runtime.Window.ToggleMaximise();
await checkMaximizedState();
} catch (error) {
isMaximized.value = !isMaximized.value;
console.error(error)
}
};
@@ -92,7 +81,7 @@ const closeWindow = async () => {
try {
await runtime.Window.Close();
} catch (error) {
// Error handling
console.error(error)
}
};
@@ -100,7 +89,7 @@ const checkMaximizedState = async () => {
try {
isMaximized.value = await runtime.Window.IsMaximised();
} catch (error) {
// Error handling
console.error(error)
}
};
@@ -112,24 +101,6 @@ const titleText = computed(() => {
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>

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

@@ -1,5 +1,5 @@
<template>
<div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
<div class="windows-titlebar" style="--wails-draggable:drag">
<div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
<div class="titlebar-icon">
<img src="/appicon.png" alt="voidraft"/>
@@ -36,11 +36,10 @@
</template>
<script setup lang="ts">
import {computed, onMounted, onUnmounted, ref} from 'vue';
import {computed, onMounted, ref} from 'vue';
import {useI18n} from 'vue-i18n';
import * as runtime from '@wailsio/runtime';
import { useWindowStore } from '@/stores/windowStore';
import { useDocumentStore } from '@/stores/documentStore';
import {useDocumentStore} from '@/stores/documentStore';
const {t} = useI18n();
const isMaximized = ref(false);
@@ -59,30 +58,16 @@ const minimizeWindow = async () => {
try {
await runtime.Window.Minimise();
} catch (error) {
// Error handling
console.error(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);
await runtime.Window.ToggleMaximise();
await checkMaximizedState();
} catch (error) {
// 如果操作失败，恢复原状态
isMaximized.value = !isMaximized.value;
console.error(error);
}
};
@@ -90,7 +75,7 @@ const closeWindow = async () => {
try {
await runtime.Window.Close();
} catch (error) {
// Error handling
console.error(error);
}
};
@@ -98,31 +83,12 @@ const checkMaximizedState = async () => {
try {
isMaximized.value = await runtime.Window.IsMaximised();
} catch (error) {
// Error handling
console.error(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');
});
</script>

6
frontend/src/components/toolbar/DocumentSelector.vue
View File

@@ -107,6 +107,12 @@ const selectItem = async (item: any) => {
// 选择文档
const selectDoc = async (doc: Document) => {
try {
// 如果选择的就是当前文档，直接关闭菜单
if (documentStore.currentDocument?.id === doc.id) {
closeMenu();
return;
}
const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
if (hasOpen) {
// 设置错误状态并启动定时器

5
frontend/src/stores/configStore.ts
View File

@@ -16,9 +16,7 @@ import {
} from '@/../bindings/voidraft/internal/models/models';
import {useI18n} from 'vue-i18n';
import {ConfigUtils} from '@/utils/configUtils';
import {WindowController} from '@/utils/windowController';
import * as runtime from '@wailsio/runtime';
import {useBackupStore} from '@/stores/backupStore';
// 国际化相关导入
export type SupportedLocaleType = 'zh-CN' | 'en-US';
@@ -416,9 +414,6 @@ export const useConfigStore = defineStore('config', () => {
state.configLoaded = true;
// 初始化热键监听器
const windowController = WindowController.getInstance();
await windowController.initializeHotkeyListener();
} finally {
state.isLoading = false;
}

105
frontend/src/utils/windowController.ts
View File

@@ -1,105 +0,0 @@
import * as wails from '@wailsio/runtime'
// 窗口控制工具类
export class WindowController {
private static instance: WindowController;
private currentWindow = wails.Window;
private isWindowVisible: boolean = true; // 跟踪窗口可见状态
private isInitialized: boolean = false; // 跟踪是否已初始化
private isToggling: boolean = false; // 防止重复切换
private lastToggleTime: number = 0; // 上次切换时间
private readonly TOGGLE_COOLDOWN = 500; // 切换冷却时间（毫秒）
static getInstance(): WindowController {
if (!WindowController.instance) {
WindowController.instance = new WindowController();
}
return WindowController.instance;
}
async toggleWindow(): Promise<void> {
const now = Date.now();
// 防抖检查
if (this.isToggling || (now - this.lastToggleTime) < this.TOGGLE_COOLDOWN) {
return;
}
this.isToggling = true;
this.lastToggleTime = now;
try {
// 如果还没初始化，先初始化状态
if (!this.isInitialized) {
await this.syncWindowState();
}
if (!this.isWindowVisible) {
// 窗口当前隐藏，显示它
await this.currentWindow.Show();
await this.currentWindow.UnMinimise(); // 修正API名称
await this.currentWindow.Focus();
this.isWindowVisible = true;
} else {
// 窗口当前可见，隐藏它
await this.currentWindow.Hide();
this.isWindowVisible = false;
}
} catch (error) {
console.error(error);
} finally {
// 延迟重置切换状态，确保操作完成
setTimeout(() => {
this.isToggling = false;
}, 100);
}
}
// 同步窗口状态
private async syncWindowState(): Promise<void> {
try {
// 检查窗口是否最小化
const isMinimised = await this.currentWindow.IsMinimised();
// 简化状态判断：只要不是最小化状态就认为是可见的
this.isWindowVisible = !isMinimised;
this.isInitialized = true;
} catch (error) {
// 如果检查失败，保持默认状态
this.isWindowVisible = true;
this.isInitialized = true;
}
}
// 当窗口被系统事件隐藏时调用（比如点击关闭/最小化按钮）
onWindowHidden(): void {
this.isWindowVisible = false;
}
// 当窗口被系统事件显示时调用（比如点击托盘图标）
onWindowShown(): void {
this.isWindowVisible = true;
}
async initializeHotkeyListener(): Promise<void> {
// 初始化时同步窗口状态
await this.syncWindowState();
// 监听后端发送的热键事件
wails.Events.On('hotkey:toggle-window', () => {
this.toggleWindow();
});
// 监听窗口显示/隐藏事件以同步状态
wails.Events.On('window:shown', () => {
this.onWindowShown();
});
wails.Events.On('window:hidden', () => {
this.onWindowHidden();
});
}
}