🐛 Fixed the window toggle maximise issue

2025-08-17 14:51:39 +08:00
parent f37c659c89
commit 5b88efcfbe
34 changed files with 556 additions and 796 deletions
--- a/frontend/src/components/titlebar/LinuxTitleBar.vue
+++ b/frontend/src/components/titlebar/LinuxTitleBar.vue
@@ -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);
    }
--- a/frontend/src/components/titlebar/MacOSTitleBar.vue
+++ b/frontend/src/components/titlebar/MacOSTitleBar.vue
@@ -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>

--- a/frontend/src/components/titlebar/WindowsTitleBar.vue
+++ b/frontend/src/components/titlebar/WindowsTitleBar.vue
@@ -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>

--- a/frontend/src/components/toolbar/DocumentSelector.vue
+++ b/frontend/src/components/toolbar/DocumentSelector.vue
@@ -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) {
      // 设置错误状态并启动定时器