✨ Added configuration change notification service

2025-06-04 02:34:05 +08:00
parent 5381e4ba17
commit d9745ac7d1
21 changed files with 1579 additions and 406 deletions
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -27,6 +27,7 @@ export default {
    tabSizeFixed: 'Tab size ({value}) has been corrected to {fixed}',
    tabTypeFixed: 'Tab type ({value}) is invalid, corrected to spaces',
    alwaysOnTopFailed: 'Failed to set window always on top',
+    alwaysOnTopSuccess: 'Window always on top status updated',
    languageChanged: 'Language setting updated',
    languageChangeFailed: 'Failed to update language setting'
  },
@@ -67,9 +68,15 @@ export default {
    window: 'Window/Application',
    showInSystemTray: 'Show in System Tray',
    alwaysOnTop: 'Always on Top',
+    dataStorage: 'Data Storage',
+    useCustomDataPath: 'Use custom data storage path',
+    selectDirectory: 'Select Directory',
+    selectDataDirectory: 'Select Data Storage Directory',
+    defaultDataPath: 'Default data storage path',
+    enterCustomPath: 'Enter custom data storage path',
+    pathHint: 'Example: C:\\MyData or /home/user/data or relative path ./data',
    bufferFiles: 'Buffer Files Path',
    useCustomLocation: 'Use custom location for buffer files',
-    selectDirectory: 'Select Directory',
    fontSize: 'Font Size',
    fontSizeDescription: 'Editor font size',
    fontSettings: 'Font Settings',
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -27,6 +27,7 @@ export default {
    tabSizeFixed: 'Tab大小值({value})已被修正为{fixed}',
    tabTypeFixed: 'Tab类型({value})不合法，已修正为空格',
    alwaysOnTopFailed: '无法设置窗口置顶状态',
+    alwaysOnTopSuccess: '窗口置顶状态已更新',
    languageChanged: '语言设置已更新',
    languageChangeFailed: '语言设置更新失败'
  },
@@ -67,9 +68,15 @@ export default {
    window: '窗口/应用程序',
    showInSystemTray: '在系统托盘中显示',
    alwaysOnTop: '窗口始终置顶',
+    dataStorage: '数据存储',
+    useCustomDataPath: '使用自定义数据存储路径',
+    selectDirectory: '选择目录',
+    selectDataDirectory: '选择数据存储目录',
+    defaultDataPath: '默认数据存储路径',
+    enterCustomPath: '请输入自定义数据存储路径',
+    pathHint: '例如: C:\\MyData 或 /home/user/data 或相对路径 ./data',
    bufferFiles: '缓冲文件路径',
    useCustomLocation: '使用自定义位置存储缓冲文件',
-    selectDirectory: '选择目录',
    fontSize: '字体大小',
    fontSizeDescription: '编辑器字体大小',
    fontSettings: '字体设置',
--- a/frontend/src/stores/configStore.ts
+++ b/frontend/src/stores/configStore.ts
@@ -13,6 +13,7 @@ import {useI18n} from 'vue-i18n';
 import {useErrorHandler} from '@/utils/errorHandler';
 import {ConfigUtils} from '@/utils/configUtils';
 import {WindowController} from '@/utils/windowController';
+import * as runtime from '@wailsio/runtime';
 // 国际化相关导入
 export type SupportedLocaleType = 'zh-CN' | 'en-US';

@@ -46,7 +47,9 @@ type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
 // 配置键映射
 const GENERAL_CONFIG_KEY_MAP: GeneralConfigKeyMap = {
    alwaysOnTop: 'general.always_on_top',
-    dataPath: 'general.data_path',
+    defaultDataPath: 'general.default_data_path',
+    useCustomDataPath: 'general.use_custom_data_path',
+    customDataPath: 'general.custom_data_path',
    enableGlobalHotkey: 'general.enable_global_hotkey',
    globalHotkey: 'general.global_hotkey'
 } as const;
@@ -114,7 +117,9 @@ const getBrowserLanguage = (): SupportedLocaleType => {
 const DEFAULT_CONFIG: AppConfig = {
    general: {
        alwaysOnTop: false,
-        dataPath: './data',
+        defaultDataPath: './data',
+        useCustomDataPath: false,
+        customDataPath: '',
        enableGlobalHotkey: false,
        globalHotkey: {
            ctrl: false,
@@ -318,7 +323,13 @@ export const useConfigStore = defineStore('config', () => {
    // 创建切换器实例
    const togglers = {
        tabIndent: createEditingToggler('enableTabIndent'),
-        alwaysOnTop: createGeneralToggler('alwaysOnTop'),
+        alwaysOnTop: async () => {
+            await safeCall(async () => {
+                await updateGeneralConfig('alwaysOnTop', !state.config.general.alwaysOnTop);
+                // 立即应用窗口置顶状态
+                await runtime.Window.SetAlwaysOnTop(state.config.general.alwaysOnTop);
+            }, 'config.alwaysOnTopFailed', 'config.alwaysOnTopSuccess');
+        },
        tabType: createEnumToggler('tabType', CONFIG_LIMITS.tabType.values)
    };

@@ -326,7 +337,7 @@ export const useConfigStore = defineStore('config', () => {
    const setters = {
        fontFamily: (value: string) => safeCall(() => updateEditingConfig('fontFamily', value), 'config.saveFailed', 'config.saveSuccess'),
        fontWeight: (value: string) => safeCall(() => updateEditingConfig('fontWeight', value), 'config.saveFailed', 'config.saveSuccess'),
-        dataPath: (value: string) => safeCall(() => updateGeneralConfig('dataPath', value), 'config.saveFailed', 'config.saveSuccess'),
+        defaultDataPath: (value: string) => safeCall(() => updateGeneralConfig('defaultDataPath', value), 'config.saveFailed', 'config.saveSuccess'),
        autoSaveDelay: (value: number) => safeCall(() => updateEditingConfig('autoSaveDelay', value), 'config.saveFailed', 'config.saveSuccess'),
        changeThreshold: (value: number) => safeCall(() => updateEditingConfig('changeThreshold', value), 'config.saveFailed', 'config.saveSuccess'),
        minSaveInterval: (value: number) => safeCall(() => updateEditingConfig('minSaveInterval', value), 'config.saveFailed', 'config.saveSuccess')
@@ -370,13 +381,16 @@ export const useConfigStore = defineStore('config', () => {

        // 窗口操作
        toggleAlwaysOnTop: togglers.alwaysOnTop,
+        setAlwaysOnTop: (value: boolean) => safeCall(() => updateGeneralConfig('alwaysOnTop', value), 'config.saveFailed', 'config.saveSuccess'),

        // 字体操作
        setFontFamily: setters.fontFamily,
        setFontWeight: setters.fontWeight,

        // 路径操作
-        setDataPath: setters.dataPath,
+        setDefaultDataPath: setters.defaultDataPath,
+        setUseCustomDataPath: (value: boolean) => safeCall(() => updateGeneralConfig('useCustomDataPath', value), 'config.saveFailed', 'config.saveSuccess'),
+        setCustomDataPath: (value: string) =>  safeCall(() => updateGeneralConfig('customDataPath', value), 'config.saveFailed', 'config.saveSuccess'),

        // 保存配置相关方法
        setAutoSaveDelay: setters.autoSaveDelay,
--- a/frontend/src/views/settings/pages/GeneralPage.vue
+++ b/frontend/src/views/settings/pages/GeneralPage.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { useConfigStore } from '@/stores/configStore';
 import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
 import ToggleSwitch from '../components/ToggleSwitch.vue';
 import { useErrorHandler } from '@/utils/errorHandler';
+import * as runtime from '@wailsio/runtime';

 const { t } = useI18n();
 const configStore = useConfigStore();
@@ -25,6 +26,19 @@ const enableGlobalHotkey = computed({
  set: (value: boolean) => configStore.setEnableGlobalHotkey(value)
 });

+// 计算属性 - 窗口始终置顶
+const alwaysOnTop = computed({
+  get: () => configStore.config.general.alwaysOnTop,
+  set: async (value: boolean) => {
+    await safeCall(async () => {
+      // 先更新配置
+      await configStore.setAlwaysOnTop(value);
+      // 然后立即应用窗口置顶状态
+      await runtime.Window.SetAlwaysOnTop(value);
+    }, 'config.alwaysOnTopFailed', 'config.alwaysOnTopSuccess');
+  }
+});
+
 // 修饰键配置 - 只读计算属性
 const modifierKeys = computed(() => ({
  ctrl: configStore.config.general.globalHotkey.ctrl,
@@ -71,6 +85,34 @@ const hotkeyPreview = computed(() => {
  
  return parts.join(' + ');
 });
+
+// 数据存储路径配置
+const useCustomDataPath = computed({
+  get: () => configStore.config.general.useCustomDataPath,
+  set: (value: boolean) => configStore.setUseCustomDataPath(value)
+});
+
+// 自定义路径输入
+const customPathInput = ref('');
+
+// 监听自定义路径的变化，同步到配置
+const updateCustomPath = () => {
+  configStore.setCustomDataPath(customPathInput.value.trim());
+};
+
+// 当启用自定义路径时，初始化输入框的值
+const initCustomPath = () => {
+  if (useCustomDataPath.value) {
+    customPathInput.value = configStore.config.general.customDataPath || '';
+  }
+};
+
+// 监听useCustomDataPath的变化
+watch(() => useCustomDataPath.value, (newVal) => {
+  if (newVal) {
+    initCustomPath();
+  }
+}, { immediate: true });
 </script>

 <template>
@@ -112,21 +154,29 @@ const hotkeyPreview = computed(() => {
    </SettingSection>
    
    <SettingSection :title="t('settings.window')">
-      <SettingItem :title="t('settings.showInSystemTray')">
-        <ToggleSwitch v-model="configStore.config.general.alwaysOnTop" />  <!-- 需要后端实现 -->
-      </SettingItem>
      <SettingItem :title="t('settings.alwaysOnTop')">
-        <ToggleSwitch v-model="configStore.config.general.alwaysOnTop" @update:modelValue="configStore.toggleAlwaysOnTop" />
+        <ToggleSwitch v-model="alwaysOnTop" />
      </SettingItem>
    </SettingSection>
    
-    <SettingSection :title="t('settings.bufferFiles')">
-      <SettingItem :title="t('settings.useCustomLocation')">
-        <ToggleSwitch v-model="configStore.config.general.alwaysOnTop" /> <!-- 需要后端实现 -->
+    <SettingSection :title="t('settings.dataStorage')">
+      <SettingItem :title="t('settings.useCustomDataPath')">
+        <ToggleSwitch v-model="useCustomDataPath" />
      </SettingItem>
-      <div class="directory-selector">
-        <div class="path-display">{{ configStore.config.general.alwaysOnTop ? 'C:/Custom/Path' : 'Default Location' }}</div>
-        <button class="select-button">{{ t('settings.selectDirectory') }}</button>
+      <div class="path-input-section" v-if="useCustomDataPath">
+        <input 
+          type="text" 
+          v-model="customPathInput" 
+          @blur="updateCustomPath"
+          @keyup.enter="updateCustomPath"
+          :placeholder="t('settings.enterCustomPath')" 
+          class="path-input"
+        />
+        <div class="path-hint">{{ t('settings.pathHint') }}</div>
+      </div>
+      <div class="default-path-info" v-else>
+        <div class="path-display default">{{ configStore.config.general.defaultDataPath }}</div>
+        <span class="path-label">{{ t('settings.defaultDataPath') }}</span>
      </div>
    </SettingSection>
    
@@ -255,46 +305,70 @@ const hotkeyPreview = computed(() => {
  }
 }

-.directory-selector {
+.path-input-section {
  margin-top: 10px;
  padding-left: 20px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+  padding-right: 20px;
  
-  .path-display {
-    flex: 1;
-    padding: 8px 12px;
-    background-color: #3a3a3a;
-    border: 1px solid #555555;
-    border-radius: 4px;
-    color: #b0b0b0;
-    font-size: 13px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  .select-button {
+  .path-input {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
    padding: 8px 12px;
    background-color: #3a3a3a;
    border: 1px solid #555555;
    border-radius: 4px;
    color: #e0e0e0;
-    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
+    
+    &:focus {
+      outline: none;
+      border-color: #4a9eff;
+      background-color: #404040;
+    }
+    
+    &::placeholder {
+      color: #888888;
+    }
+  }
+  
+  .path-hint {
+    margin-top: 5px;
+    color: #888888;
+    font-size: 12px;
+    line-height: 1.4;
+  }
+}
+
+.default-path-info {
+  margin-top: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+  
+  .path-display {
+    padding: 8px 12px;
+    background-color: #2a2a2a;
+    border: 1px solid #444444;
+    border-radius: 4px;
+    color: #888888;
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
    white-space: nowrap;
+    box-sizing: border-box;
    
-    &:hover {
-      background-color: #444444;
-      border-color: #666666;
-    }
-    
-    &:active {
-      transform: translateY(1px);
+    &.default {
+      font-style: italic;
    }
  }
+  
+  .path-label {
+    display: block;
+    margin-top: 4px;
+    color: #666666;
+    font-size: 12px;
+  }
 }

 .danger-zone {