feat: improve system settings save workflow

src/composables/useSystemConfig.ts

@@ -18,39 +18,78 @@ type ConfigFlagKey = 'enableChunk' | 's3_proxy' | 'openUpload'
 export function useSystemConfig() {
   const alertStore = useAlertStore()
   const configStore = useConfigStore()
-  
+
   // 状态管理
   const config = ref<ConfigState>({ ...DEFAULT_CONFIG_STATE })
-  const isLoading = ref(false)
+  const isRefreshing = ref(false)
+  const isSaving = ref(false)
+  const savedPayloadSnapshot = ref('')
   const fileSize = ref(1)
   const sizeUnit = ref<FileSizeUnit>('MB')
   const saveTime = ref(1)
   const saveTimeUnit = ref<SaveTimeUnit>('天')
-  
+
+  const isLoading = computed(() => isRefreshing.value || isSaving.value)
+
+  const buildSubmitPayload = (): Partial<ConfigState> => {
+    const payload: Partial<ConfigState> = buildConfigSubmitPayload(
+      config.value,
+      { value: fileSize.value, unit: sizeUnit.value },
+      { value: saveTime.value, unit: saveTimeUnit.value }
+    )
+
+    if (!payload.admin_token) {
+      delete payload.admin_token
+    }
+
+    return payload
+  }
+
+  const snapshotPayload = (payload: Partial<ConfigState>) => JSON.stringify(payload)
+
+  const normalizeEditableConfig = (nextConfig: Partial<ConfigState>): ConfigState => ({
+    ...DEFAULT_CONFIG_STATE,
+    ...nextConfig,
+    admin_token: ''
+  })
+
+  const markConfigSaved = () => {
+    savedPayloadSnapshot.value = snapshotPayload(buildSubmitPayload())
+  }
+
+  const isDirty = computed(() => {
+    if (!savedPayloadSnapshot.value) {
+      return false
+    }
+
+    return snapshotPayload(buildSubmitPayload()) !== savedPayloadSnapshot.value
+  })
+
   // 从本地存储获取配置
   const getStoredConfig = (): ConfigState | null => {
-    return readStoredConfig<ConfigState>()
+    const storedConfig = readStoredConfig<Partial<ConfigState>>()
+    return storedConfig ? normalizeEditableConfig(storedConfig) : null
   }
-  
+
   // 保存配置到本地存储
   const saveConfigToStorage = (configData: ConfigState) => {
     configStore.updateConfig(configData)
   }
-  
+
   // 获取系统配置
   const fetchConfig = async (): Promise<ConfigState | null> => {
     try {
-      isLoading.value = true
-      
+      isRefreshing.value = true
+
       const response = await ConfigService.getConfig()
-      
+
       if (response.code === 200 && response.detail) {
-        config.value = { ...DEFAULT_CONFIG_STATE, ...response.detail }
+        config.value = normalizeEditableConfig(response.detail)
         const notifyMessage = configStore.applyRemoteConfig(config.value)
         if (notifyMessage) {
           alertStore.showAlert(notifyMessage, 'success')
         }
-        
+
         return config.value
       } else {
         throw new Error(response.message || '获取配置失败')
@@ -62,23 +101,25 @@ export function useSystemConfig() {
         config.value = storedConfig
         return config.value
       }
-      
+
       alertStore.showAlert(getErrorMessage(error, '获取配置失败'), 'error')
       return null
     } finally {
-      isLoading.value = false
+      isRefreshing.value = false
     }
   }
-  
+
   // 更新系统配置
   const updateConfig = async (newConfig: Partial<ConfigState>): Promise<boolean> => {
     try {
-      isLoading.value = true
-      
+      isSaving.value = true
+
       const response = await ConfigService.updateConfig(newConfig)
-      
+
       if (response.code === 200) {
-        config.value = { ...config.value, ...newConfig }
+        config.value = normalizeEditableConfig({ ...config.value, ...newConfig })
+        syncConfigForm(config.value)
+        markConfigSaved()
         saveConfigToStorage(config.value)
         alertStore.showAlert('配置更新成功！', 'success')
         return true
@@ -89,7 +130,7 @@ export function useSystemConfig() {
       alertStore.showAlert(getErrorMessage(error, '更新配置失败'), 'error')
       return false
     } finally {
-      isLoading.value = false
+      isSaving.value = false
     }
   }
 
@@ -111,52 +152,57 @@ export function useSystemConfig() {
     const latestConfig = await fetchConfig()
     if (latestConfig) {
       syncConfigForm(latestConfig)
+      markConfigSaved()
     }
   }
 
-  const submitConfig = () =>
-    updateConfig(
-      buildConfigSubmitPayload(
-        config.value,
-        { value: fileSize.value, unit: sizeUnit.value },
-        { value: saveTime.value, unit: saveTimeUnit.value }
-      )
-    )
-  
+  const submitConfig = () => {
+    if (!isDirty.value || isSaving.value) {
+      return Promise.resolve(false)
+    }
+
+    return updateConfig(buildSubmitPayload())
+  }
+
   // 初始化配置
   const initConfig = async () => {
     // 先尝试从本地存储加载
     const storedConfig = getStoredConfig()
     if (storedConfig) {
       config.value = storedConfig
+      syncConfigForm(storedConfig)
+      markConfigSaved()
     }
-    
+
     // 然后从服务器获取最新配置
-    await fetchConfig()
+    await refreshConfig()
   }
-  
+
   // 计算属性
   const maxFileSizeMB = computed(() => {
     return Math.round(config.value.uploadSize / 1024 / 1024)
   })
-  
+
   const isConfigLoaded = computed(() => {
     return config.value.name !== DEFAULT_CONFIG_STATE.name || !isLoading.value
   })
-  
+
   return {
     // 状态
     config,
     isLoading,
+    isRefreshing,
+    isSaving,
+    isDirty,
     fileSize,
     sizeUnit,
     saveTime,
     saveTimeUnit,
-    
+
     // 计算属性
     maxFileSizeMB,
     isConfigLoaded,
-    
+
     // 方法
     fetchConfig,
     updateConfig,