🐛 Fixed configuration issues

2025-06-03 00:59:31 +08:00
parent 81868e8d37
commit 5d7f6ec6a1
3 changed files with 129 additions and 33 deletions
--- a/frontend/src/stores/configStore.ts
+++ b/frontend/src/stores/configStore.ts
@@ -297,7 +297,10 @@ 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')
+        dataPath: (value: string) => safeCall(() => updateGeneralConfig('dataPath', 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')
    };

    return {
@@ -326,6 +329,7 @@ export const useConfigStore = defineStore('config', () => {
        
        // Tab操作
        toggleTabIndent: togglers.tabIndent,
+        setEnableTabIndent: (value: boolean) => safeCall(() => updateEditingConfig('enableTabIndent', value), 'config.saveFailed', 'config.saveSuccess'),
        ...adjusters.tabSize,
        increaseTabSize: adjusters.tabSize.increase,
        decreaseTabSize: adjusters.tabSize.decrease,
@@ -344,7 +348,10 @@ export const useConfigStore = defineStore('config', () => {

        // 路径操作
        setDataPath: setters.dataPath,
+
+        // 保存配置相关方法
+        setAutoSaveDelay: setters.autoSaveDelay,
+        setChangeThreshold: setters.changeThreshold,
+        setMinSaveInterval: setters.minSaveInterval
    };
-},{
-    persist: true,
 });
--- a/frontend/src/views/settings/pages/AppearancePage.vue
+++ b/frontend/src/views/settings/pages/AppearancePage.vue
@@ -46,7 +46,7 @@ const selectTheme = (themeId: string) => {
 <template>
  <div class="settings-page">
    <SettingSection :title="t('settings.language')">
-      <SettingItem :title="t('settings.language')" :description="t('settings.restartRequired')">
+      <SettingItem :title="t('settings.language')">
        <select class="select-input" :value="configStore.config.appearance.language" @change="updateLanguage">
          <option v-for="option in languageOptions" :key="option.value" :value="option.value">
            {{ option.label }}
--- a/frontend/src/views/settings/pages/EditingPage.vue
+++ b/frontend/src/views/settings/pages/EditingPage.vue
@@ -3,11 +3,11 @@ import { useConfigStore } from '@/stores/configStore';
 import { FONT_OPTIONS } from '@/stores/configStore';
 import { useErrorHandler } from '@/utils/errorHandler';
 import { useI18n } from 'vue-i18n';
-import { ref, computed, onMounted } from 'vue';
+import {computed, onMounted } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
 import ToggleSwitch from '../components/ToggleSwitch.vue';
-import { TabType } from '../../../../bindings/voidraft/internal/models/models';
+import { TabType } from '@/../bindings/voidraft/internal/models/';

 const { t } = useI18n();
 const configStore = useConfigStore();
@@ -113,19 +113,52 @@ const decreaseTabSize = async () => {
 };

 // Tab相关操作
-const handleToggleTabIndent = async () => {
-  await safeCall(
-    () => configStore.toggleTabIndent(),
-    'config.tabIndentToggleFailed'
-  );
-};
-
 const handleToggleTabType = async () => {
  await safeCall(
    () => configStore.toggleTabType(),
    'config.tabTypeToggleFailed'
  );
 };
+
+// 创建双向绑定的计算属性
+const enableTabIndent = computed({
+  get: () => configStore.config.editing.enableTabIndent,
+  set: (value: boolean) => configStore.setEnableTabIndent(value)
+});
+
+// 保存选项处理器
+const handleAutoSaveDelayChange = async (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = parseInt(target.value, 10);
+  if (!isNaN(value) && value >= 1000 && value <= 30000) {
+    await safeCall(
+      () => configStore.setAutoSaveDelay(value),
+      'config.autoSaveDelayUpdateFailed'
+    );
+  }
+};
+
+const handleChangeThresholdChange = async (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = parseInt(target.value, 10);
+  if (!isNaN(value) && value >= 10 && value <= 10000) {
+    await safeCall(
+      () => configStore.setChangeThreshold(value),
+      'config.changeThresholdUpdateFailed'
+    );
+  }
+};
+
+const handleMinSaveIntervalChange = async (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = parseInt(target.value, 10);
+  if (!isNaN(value) && value >= 100 && value <= 10000) {
+    await safeCall(
+      () => configStore.setMinSaveInterval(value),
+      'config.minSaveIntervalUpdateFailed'
+    );
+  }
+};
 </script>

 <template>
@@ -208,26 +241,38 @@ const handleToggleTabType = async () => {
    </SettingSection>
    
    <SettingSection :title="t('settings.tabSettings')">
-      <SettingItem :title="t('settings.tabSize')">
-        <div class="number-control">
-          <button @click="decreaseTabSize" class="control-button" :disabled="configStore.config.editing.tabSize <= configStore.tabSize.min">-</button>
+      <SettingItem :title="t('settings.enableTabIndent')">
+        <ToggleSwitch 
+          v-model="enableTabIndent"
+        />
+      </SettingItem>
+      
+      <SettingItem :title="t('settings.tabSize')" :class="{ 'disabled-setting': !enableTabIndent }">
+        <div class="number-control" :class="{ 'disabled': !enableTabIndent }">
+          <button 
+            @click="decreaseTabSize" 
+            class="control-button" 
+            :disabled="!enableTabIndent || configStore.config.editing.tabSize <= configStore.tabSize.min"
+          >-</button>
          <span>{{ configStore.config.editing.tabSize }}</span>
-          <button @click="increaseTabSize" class="control-button" :disabled="configStore.config.editing.tabSize >= configStore.tabSize.max">+</button>
+          <button 
+            @click="increaseTabSize" 
+            class="control-button" 
+            :disabled="!enableTabIndent || configStore.config.editing.tabSize >= configStore.tabSize.max"
+          >+</button>
        </div>
      </SettingItem>
      
-      <SettingItem :title="t('settings.tabType')">
-        <button class="tab-type-toggle" @click="handleToggleTabType">
+      <SettingItem :title="t('settings.tabType')" :class="{ 'disabled-setting': !enableTabIndent }">
+        <button 
+          class="tab-type-toggle" 
+          :class="{ 'disabled': !enableTabIndent }"
+          :disabled="!enableTabIndent"
+          @click="handleToggleTabType"
+        >
          {{ tabTypeText }}
        </button>
      </SettingItem>
-      
-      <SettingItem :title="t('settings.enableTabIndent')">
-        <ToggleSwitch 
-          v-model="configStore.config.editing.enableTabIndent" 
-          @update:modelValue="handleToggleTabIndent"
-        />
-      </SettingItem>
    </SettingSection>
    
    <SettingSection :title="t('settings.saveOptions')">
@@ -235,8 +280,8 @@ const handleToggleTabType = async () => {
        <input 
          type="number" 
          class="number-input" 
-          disabled
-          :value="5000"
+          :value="configStore.config.editing.autoSaveDelay"
+          @change="handleAutoSaveDelayChange"
        />
      </SettingItem>
      
@@ -244,8 +289,8 @@ const handleToggleTabType = async () => {
        <input 
          type="number" 
          class="number-input" 
-          disabled
-          :value="500"
+          :value="configStore.config.editing.changeThreshold"
+          @change="handleChangeThresholdChange"
        />
      </SettingItem>
      
@@ -253,8 +298,8 @@ const handleToggleTabType = async () => {
        <input 
          type="number" 
          class="number-input" 
-          disabled
-          :value="1000"
+          :value="configStore.config.editing.minSaveInterval"
+          @change="handleMinSaveIntervalChange"
        />
      </SettingItem>
    </SettingSection>
@@ -427,7 +472,7 @@ const handleToggleTabType = async () => {
  border: 1px solid #555555;
  border-radius: 4px;
  background-color: #3a3a3a;
-  color: #a0a0a0;
+  color: #e0e0e0;
  font-size: 13px;
  
  &:focus {
@@ -435,9 +480,53 @@ const handleToggleTabType = async () => {
    border-color: #4a9eff;
  }
  
+  &:hover {
+    border-color: #666666;
+  }
+  
  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
+    background-color: #2a2a2a;
+    color: #a0a0a0;
+  }
+}
+
+// 禁用状态样式
+.disabled-setting {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.number-control.disabled {
+  opacity: 0.5;
+  
+  .control-button {
+    cursor: not-allowed;
+    
+    &:hover {
+      background-color: #3a3a3a;
+      border-color: #555555;
+    }
+  }
+  
+  span {
+    opacity: 0.7;
+  }
+}
+
+.tab-type-toggle.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  
+  &:hover {
+    background-color: #3a3a3a;
+    border-color: #555555;
+    transform: none;
+  }
+  
+  &:active {
+    transform: none;
  }
 }
 </style>