🚧 Refactor basic services

frontend/src/components/titlebar/LinuxTitleBar.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+    <div class="titlebar-content" @dblclick="handleToggleMaximize" @contextmenu.prevent>
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">
+        {{ titleText }}
+      </div>
       <!-- 标签页容器区域 -->
       <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
-        <TabContainer />
+        <TabContainer/>
       </div>
       <!-- 设置页面标题 -->
       <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
@@ -26,7 +28,7 @@
 
       <button
           class="titlebar-button maximize-button"
-          @click="toggleMaximize"
+          @click="handleToggleMaximize"
           :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
       >
         <svg width="16" height="16" viewBox="0 0 16 16" v-if="!isMaximized">
@@ -55,81 +57,43 @@
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {useRoute} from 'vue-router';
-import * as runtime from '@wailsio/runtime';
 import {useDocumentStore} from '@/stores/documentStore';
+import {useTabStore} from '@/stores/tabStore';
 import TabContainer from '@/components/tabs/TabContainer.vue';
-import {useTabStore} from "@/stores/tabStore";
+import {
+  minimizeWindow,
+  toggleMaximize,
+  closeWindow,
+  getMaximizedState,
+  generateTitleText,
+  generateFullTitleText
+} from './index';
 
-const tabStore = useTabStore();
 const {t} = useI18n();
 const route = useRoute();
-const isMaximized = ref(false);
+const tabStore = useTabStore();
 const documentStore = useDocumentStore();
 
-// 判断是否在设置页面
+const isMaximized = ref(false);
 const isInSettings = computed(() => route.path.startsWith('/settings'));
 
-// 计算标题文本
 const titleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  if (currentDoc) {
-    // 限制文档标题长度，避免标题栏换行
-    const maxTitleLength = 30;
-    const truncatedTitle = currentDoc.title.length > maxTitleLength 
-      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
-      : currentDoc.title;
-    return `voidraft - ${truncatedTitle}`;
-  }
-  return 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateTitleText(documentStore.currentDocument?.title);
 });
 
-// 计算完整标题文本（用于tooltip）
 const fullTitleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateFullTitleText(documentStore.currentDocument?.title);
 });
 
-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);
-  }
+const handleToggleMaximize = async () => {
+  await toggleMaximize();
+  isMaximized.value = await getMaximizedState();
 };
 
 onMounted(async () => {
-  await checkMaximizedState();
+  isMaximized.value = await getMaximizedState();
 });
 </script>
 
@@ -160,7 +124,7 @@ onMounted(async () => {
   font-size: 13px;
   font-weight: 500;
   cursor: default;
-  min-width: 0; /* 允许内容收缩 */
+  min-width: 0;
 
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -310,4 +274,4 @@ onMounted(async () => {
     }
   }
 }
-</style>
+</style>

frontend/src/components/titlebar/MacOSTitleBar.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="macos-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
     <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
-      <button 
-        class="titlebar-button close-button" 
-        @click="closeWindow"
-        :title="t('titlebar.close')"
+      <button
+          class="titlebar-button close-button"
+          @click="closeWindow"
+          :title="t('titlebar.close')"
       >
         <div class="button-icon">
           <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons">
@@ -12,11 +12,11 @@
           </svg>
         </div>
       </button>
-      
-      <button 
-        class="titlebar-button minimize-button" 
-        @click="minimizeWindow"
-        :title="t('titlebar.minimize')"
+
+      <button
+          class="titlebar-button minimize-button"
+          @click="minimizeWindow"
+          :title="t('titlebar.minimize')"
       >
         <div class="button-icon">
           <svg width="8" height="1" viewBox="0 0 8 1" v-show="showControlIcons">
@@ -24,11 +24,11 @@
           </svg>
         </div>
       </button>
-      
-      <button 
-        class="titlebar-button maximize-button" 
-        @click="toggleMaximize"
-        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+
+      <button
+          class="titlebar-button maximize-button"
+          @click="handleToggleMaximize"
+          :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
       >
         <div class="button-icon">
           <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && !isMaximized">
@@ -42,98 +42,61 @@
         </div>
       </button>
     </div>
-    
+
     <!-- 标签页容器区域 -->
     <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
-      <TabContainer />
+      <TabContainer/>
     </div>
-    
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent v-if="!tabStore.isTabsEnabled || isInSettings">
+
+    <div class="titlebar-content" @dblclick="handleToggleMaximize" @contextmenu.prevent
+         v-if="!tabStore.isTabsEnabled || isInSettings">
       <div class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import * as runtime from '@wailsio/runtime';
-import { useDocumentStore } from '@/stores/documentStore';
+import {computed, onMounted, ref} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useRoute} from 'vue-router';
+import {useDocumentStore} from '@/stores/documentStore';
+import {useTabStore} from '@/stores/tabStore';
 import TabContainer from '@/components/tabs/TabContainer.vue';
-import { useTabStore } from "@/stores/tabStore";
+import {
+  minimizeWindow,
+  toggleMaximize,
+  closeWindow,
+  getMaximizedState,
+  generateTitleText,
+  generateFullTitleText
+} from './index';
 
-const tabStore = useTabStore();
-const { t } = useI18n();
+const {t} = useI18n();
 const route = useRoute();
-const isMaximized = ref(false);
-const showControlIcons = ref(false);
+const tabStore = useTabStore();
 const documentStore = useDocumentStore();
 
-// 判断是否在设置页面
+const isMaximized = ref(false);
+const showControlIcons = ref(false);
 const isInSettings = computed(() => route.path.startsWith('/settings'));
 
-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);
-  }
-};
-
-// 计算标题文本
 const titleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  if (currentDoc) {
-    // 限制文档标题长度，避免标题栏换行
-    const maxTitleLength = 30;
-    const truncatedTitle = currentDoc.title.length > maxTitleLength 
-      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
-      : currentDoc.title;
-    return `voidraft - ${truncatedTitle}`;
-  }
-  return 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateTitleText(documentStore.currentDocument?.title);
 });
 
-// 计算完整标题文本（用于tooltip）
 const fullTitleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateFullTitleText(documentStore.currentDocument?.title);
 });
 
+const handleToggleMaximize = async () => {
+  await toggleMaximize();
+  isMaximized.value = await getMaximizedState();
+};
+
 onMounted(async () => {
-  await checkMaximizedState();
+  isMaximized.value = await getMaximizedState();
 });
 </script>
 
@@ -147,11 +110,11 @@ onMounted(async () => {
   -webkit-user-select: none;
   width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
-  
+
   &:hover {
     .titlebar-button {
       .button-icon {
@@ -168,7 +131,7 @@ onMounted(async () => {
   padding-left: 8px;
   gap: 8px;
   flex-shrink: 0;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -187,7 +150,7 @@ onMounted(async () => {
   padding: 0;
   margin: 0;
   position: relative;
-  
+
   .button-icon {
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -198,7 +161,7 @@ onMounted(async () => {
     height: 100%;
     color: rgba(0, 0, 0, 0.7);
   }
-  
+
   &:hover .button-icon {
     opacity: 1;
   }
@@ -206,11 +169,11 @@ onMounted(async () => {
 
 .close-button {
   background: #ff5f57;
-  
+
   &:hover {
     background: #ff453a;
   }
-  
+
   &:active {
     background: #d7463f;
   }
@@ -218,11 +181,11 @@ onMounted(async () => {
 
 .minimize-button {
   background: #ffbd2e;
-  
+
   &:hover {
     background: #ffb524;
   }
-  
+
   &:active {
     background: #e6a220;
   }
@@ -230,11 +193,11 @@ onMounted(async () => {
 
 .maximize-button {
   background: #28ca42;
-  
+
   &:hover {
     background: #1ebe36;
   }
-  
+
   &:active {
     background: #1ba932;
   }
@@ -247,7 +210,7 @@ onMounted(async () => {
   flex: 1;
   cursor: default;
   min-width: 0;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -261,34 +224,32 @@ onMounted(async () => {
   margin-left: 8px;
   margin-right: 8px;
   min-width: 0;
-  overflow: visible; /* 允许TabContainer内部处理滚动 */
-  
-  /* 确保TabContainer能够正确处理滚动 */
+  overflow: visible;
+
   :deep(.tab-container) {
     width: 100%;
     height: 100%;
   }
-  
+
   :deep(.tab-bar) {
     width: 100%;
     height: 100%;
   }
-  
+
   :deep(.tab-scroll-wrapper) {
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
-  
-  /* 确保底部线条能够正确显示 */
+
   :deep(.tab-item) {
     position: relative;
-    
+
     &::after {
       content: '';
       position: absolute;
@@ -319,13 +280,13 @@ onMounted(async () => {
     background: var(--toolbar-bg, #2d2d2d);
     border-bottom-color: var(--toolbar-border, rgba(255, 255, 255, 0.1));
   }
-  
+
   .titlebar-title {
     color: var(--toolbar-text, #fff);
   }
-  
+
   .titlebar-button .button-icon {
     color: rgba(255, 255, 255, 0.8);
   }
 }
-</style>
+</style>

frontend/src/components/titlebar/WindowsTitleBar.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="windows-titlebar" style="--wails-draggable:drag">
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+    <div class="titlebar-content" @dblclick="handleToggleMaximize" @contextmenu.prevent>
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">
+        {{ titleText }}
+      </div>
       <!-- 标签页容器区域 -->
       <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
-        <TabContainer />
+        <TabContainer/>
       </div>
       <!-- 设置页面标题 -->
       <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
@@ -24,7 +26,7 @@
 
       <button
           class="titlebar-button maximize-button"
-          @click="toggleMaximize"
+          @click="handleToggleMaximize"
           :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
       >
         <span class="titlebar-icon" v-html="maximizeIcon"></span>
@@ -45,84 +47,44 @@
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {useRoute} from 'vue-router';
-import * as runtime from '@wailsio/runtime';
 import {useDocumentStore} from '@/stores/documentStore';
+import {useTabStore} from '@/stores/tabStore';
 import TabContainer from '@/components/tabs/TabContainer.vue';
-import {useTabStore} from "@/stores/tabStore";
+import {
+  minimizeWindow,
+  toggleMaximize,
+  closeWindow,
+  getMaximizedState,
+  generateTitleText,
+  generateFullTitleText
+} from './index';
 
-const tabStore = useTabStore();
 const {t} = useI18n();
 const route = useRoute();
-const isMaximized = ref(false);
+const tabStore = useTabStore();
 const documentStore = useDocumentStore();
 
-// 计算属性用于图标，减少重复渲染
+const isMaximized = ref(false);
 const maximizeIcon = computed(() => isMaximized.value ? '&#xE923;' : '&#xE922;');
-
-// 判断是否在设置页面
 const isInSettings = computed(() => route.path.startsWith('/settings'));
 
-// 计算标题文本
 const titleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  if (currentDoc) {
-    // 限制文档标题长度，避免标题栏换行
-    const maxTitleLength = 30;
-    const truncatedTitle = currentDoc.title.length > maxTitleLength 
-      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
-      : currentDoc.title;
-    return `voidraft - ${truncatedTitle}`;
-  }
-  return 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateTitleText(documentStore.currentDocument?.title);
 });
 
-// 计算完整标题文本（用于tooltip）
 const fullTitleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateFullTitleText(documentStore.currentDocument?.title);
 });
 
-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);
-  }
+const handleToggleMaximize = async () => {
+  await toggleMaximize();
+  isMaximized.value = await getMaximizedState();
 };
 
 onMounted(async () => {
-  await checkMaximizedState();
+  isMaximized.value = await getMaximizedState();
 });
 </script>
 
@@ -152,7 +114,7 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 400;
   cursor: default;
-  min-width: 0; /* 允许内容收缩 */
+  min-width: 0;
 
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -178,7 +140,6 @@ onMounted(async () => {
   overflow: hidden;
   margin-left: 8px;
   min-width: 0;
-  //margin-right: 8px;
 }
 
 .titlebar-controls {
@@ -254,4 +215,4 @@ onMounted(async () => {
     opacity: 1;
   }
 }
-</style>
+</style>

frontend/src/components/titlebar/index.ts

@@ -0,0 +1,60 @@
+import * as runtime from '@wailsio/runtime';
+
+/**
+ * Titlebar utility functions
+ */
+
+// Window control functions
+export const minimizeWindow = async () => {
+  try {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    console.error('Failed to minimize window:', error);
+  }
+};
+
+export const toggleMaximize = async () => {
+  try {
+    await runtime.Window.ToggleMaximise();
+  } catch (error) {
+    console.error('Failed to toggle maximize:', error);
+  }
+};
+
+export const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    console.error('Failed to close window:', error);
+  }
+};
+
+export const getMaximizedState = async (): Promise<boolean> => {
+  try {
+    return await runtime.Window.IsMaximised();
+  } catch (error) {
+    console.error('Failed to check maximized state:', error);
+    return false;
+  }
+};
+
+/**
+ * Generate title text with optional truncation
+ */
+export const generateTitleText = (
+  title: string | undefined,
+  maxLength: number = 30
+): string => {
+  if (!title) return 'voidraft';
+  const truncated = title.length > maxLength
+    ? title.substring(0, maxLength) + '...'
+    : title;
+  return `voidraft - ${truncated}`;
+};
+
+/**
+ * Generate full title text (no truncation)
+ */
+export const generateFullTitleText = (title: string | undefined): string => {
+  return title ? `voidraft - ${title}` : 'voidraft';
+};