feat: 增加修改配置状态

Author: qianmoQ

src/components/setting/Language.vue

@@ -21,10 +21,19 @@
         </div>
       </template>
       <template #[activePlugin]="{ tab }">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center space-x-2">
-          <img :src="`/icons/${activePlugin.replace(/\d+$/, '')}.svg`" class="w-6 h-6" :alt="tab.label"/>
-          <span>{{ `语言 [ ${tab.label} ] 配置` }}</span>
-        </h3>
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
+            <img :src="`/icons/${activePlugin.replace(/\d+$/, '')}.svg`" class="w-6 h-6" :alt="tab.label"/>
+            <span>{{ `语言 [ ${tab.label} ] 配置` }}</span>
+          </h3>
+          <div v-if="isSaving" class="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400">
+            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span>保存中...</span>
+          </div>
+        </div>
 
         <Tabs v-model="activeTab"
               type="card"
@@ -136,6 +145,7 @@ const {
   tabsPluginData,
   pluginConfig,
   pluginEnabledStates,
+  isSaving,
   handleTabChange,
   handlePluginToggle,
   selectExecuteHome,

src/composables/useLanguageSettings.ts

@@ -38,6 +38,7 @@ export function useLanguageSettings(emit: any)
         tabsPluginData,
         pluginConfig,
         globalConfig,
+        isSaving,
         handleTabChange,
         selectExecuteHome,
         updateGlobalConfig,
@@ -168,6 +169,7 @@ export function useLanguageSettings(emit: any)
         tabsPluginData,
         pluginConfig,
         pluginEnabledStates,
+        isSaving,
         handleTabChange,
         handlePluginToggle,
         selectExecuteHome,

src/composables/usePluginConfig.ts

@@ -28,6 +28,7 @@ export function usePluginConfig(emit?: any)
     const tabsPluginData = ref<TabData[]>([])
     const globalConfig = ref<any>(null)
     const isInitialLoad = ref(true)
+    const isSaving = ref(false)
 
     const pluginConfig = ref<PluginConfig>({
         enabled: true,
@@ -144,6 +145,8 @@ export function usePluginConfig(emit?: any)
         }
 
         try {
+            isSaving.value = true
+
             const pluginIndex = globalConfig.value.plugins.findIndex(
                 (plugin: any) => plugin.language === updatedPlugin.language
             )
@@ -179,6 +182,9 @@ export function usePluginConfig(emit?: any)
                 emit('error', '保存配置失败')
             }
         }
+        finally {
+            isSaving.value = false
+        }
     }
 
     // 防抖更新
@@ -269,6 +275,7 @@ export function usePluginConfig(emit?: any)
         tabsPluginData,
         globalConfig,
         pluginConfig,
+        isSaving,
 
         // 方法
         getSupportedLanguages,