perf: add a button to save the settings in the actions area of the theme settings page (#549)

* feature- The Save button in the theme setting page is placed at the top

* perf:The Save button in the theme setting page is placed at the top

* perf: add a button to save the settings in the actions area of the theme settings page

* add icon

src/views/dashboard/Dashboard.vue

@@ -62,7 +62,11 @@
                           {{ item.title }}
                         </a>
 
-                        <a herf="javascript:void(0)" v-else-if="item.status === 'DRAFT'" @click="handlePostPreview(item.id)">
+                        <a
+                          herf="javascript:void(0)"
+                          v-else-if="item.status === 'DRAFT'"
+                          @click="handlePostPreview(item.id)"
+                        >
                           {{ item.title }}
                         </a>
 

src/views/interface/ThemeSetting.vue

@@ -1,6 +1,17 @@
 <template>
   <page-view :sub-title="theme.current.version || '-'" :title="theme.current.name || '-'" affix>
     <template slot="extra">
+      <ReactiveButton
+        :errored="form.saveErrored"
+        :loading="form.saving"
+        erroredText="保存失败"
+        loadedText="保存成功"
+        icon="save"
+        text="保存设置"
+        type="primary"
+        @callback="handleSaveSettingsCallback"
+        @click="handleSaveSettings"
+      ></ReactiveButton>
       <a-dropdown>
         <a-menu slot="overlay">
           <a-menu-item key="1" @click="handleRemoteUpdate">
@@ -46,7 +57,7 @@
     </template>
 
     <a-spin :spinning="theme.loading">
-      <ThemeSettingForm :theme="theme.current" />
+      <ThemeSettingForm :theme="theme.current" ref="themeSettingForm" />
     </a-spin>
 
     <ThemeDeleteConfirmModal
@@ -91,6 +102,10 @@ export default {
       },
       localUpgradeModel: {
         visible: false
+      },
+      form: {
+        saving: false,
+        saveErrored: false
       }
     }
   },
@@ -159,6 +174,23 @@ export default {
           }
         }
       })
+    },
+    async handleSaveSettings() {
+      try {
+        this.form.saving = true
+        await this.$refs.themeSettingForm.handleSaveSettings(false)
+      } catch {
+        this.form.saveErrored = true
+      } finally {
+        setTimeout(() => {
+          this.form.saving = false
+        }, 400)
+      }
+    },
+    handleSaveSettingsCallback() {
+      if (this.form.saveErrored) {
+        this.form.saveErrored = false
+      }
     }
   }
 }

src/views/interface/components/ThemeSettingForm.vue

@@ -187,13 +187,16 @@ export default {
         this.$log.error(error)
       }
     },
-    async handleSaveSettings() {
+    async handleSaveSettings(enableLoading = true) {
       try {
-        this.form.saving = true
+        if (enableLoading) {
+          this.form.saving = true
+        }
         await apiClient.theme.saveSettings(this.theme.id, this.form.settings)
       } catch (error) {
         this.$log.error(error)
         this.form.saveErrored = true
+        throw new Error(error)
       } finally {
         setTimeout(() => {
           this.form.saving = false