feat: add support for resetting configmap of plugin and theme (#777)

#### What type of PR is this?

/kind feature

#### What this PR does / why we need it:

支持重置主题和插件的设置选项。适配 halo-dev/halo#2964

#### Which issue(s) this PR fixes:

Fixes halo-dev/halo#2789

#### Screenshots:

<img width="366" alt="image" src="https://user-images.githubusercontent.com/21301288/208022668-288fb8c5-ddd1-456c-9633-ec8865f3b1ba.png">

#### Special notes for your reviewer:

测试方式：

1. 安装若干带有设置选项主题和插件。
2. 进入主题和插件设置，改变部分设置并保存。
3. 重置主题和插件的设置，然后进入设置表单，检查是否已经恢复为了默认。

#### Does this PR introduce a user-facing change?

```release-note
支持重置主题和插件的设置选项。
```

package.json

@@ -40,7 +40,7 @@
     "@formkit/themes": "^1.0.0-beta.12",
     "@formkit/utils": "^1.0.0-beta.12",
     "@formkit/vue": "^1.0.0-beta.12",
-    "@halo-dev/api-client": "^0.0.60",
+    "@halo-dev/api-client": "^0.0.62",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/console-shared": "workspace:*",
     "@halo-dev/richtext-editor": "^0.0.0-alpha.17",

src/modules/interface/themes/ThemeDetail.vue

@@ -2,6 +2,7 @@
 // core libs
 import { inject, ref } from "vue";
 import { RouterLink } from "vue-router";
+import { useThemeLifeCycle } from "./composables/use-theme";
 
 // components
 import {
@@ -16,15 +17,17 @@ import {
 import ThemeUploadModal from "./components/ThemeUploadModal.vue";
 
 // types
-import type { ComputedRef, Ref } from "vue";
+import type { Ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 
 import { apiClient } from "@/utils/api-client";
 
-const selectedTheme = inject<Ref<Theme | undefined>>("selectedTheme");
-const isActivated = inject<ComputedRef<boolean>>("isActivated");
+const selectedTheme = inject<Ref<Theme | undefined>>("selectedTheme", ref());
 const upgradeModal = ref(false);
 
+const { isActivated, handleResetSettingConfig } =
+  useThemeLifeCycle(selectedTheme);
+
 const handleReloadTheme = async () => {
   Dialog.warning({
     title: "确定要重载主题的所有配置吗？",
@@ -105,6 +108,14 @@ const onUpgradeModalClose = () => {
                   >
                     重载主题配置
                   </VButton>
+                  <VButton
+                    v-close-popper
+                    block
+                    type="danger"
+                    @click="handleResetSettingConfig"
+                  >
+                    重置
+                  </VButton>
                 </VSpace>
               </div>
             </template>

src/modules/interface/themes/components/components/ThemeListItem.vue

@@ -36,7 +36,8 @@ const emit = defineEmits<{
 
 const { theme } = toRefs(props);
 
-const { isActivated, handleActiveTheme } = useThemeLifeCycle(theme);
+const { isActivated, handleActiveTheme, handleResetSettingConfig } =
+  useThemeLifeCycle(theme);
 
 const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
   Dialog.warning({
@@ -201,6 +202,14 @@ const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
           </div>
         </template>
       </FloatingDropdown>
+      <VButton
+        v-close-popper
+        block
+        type="danger"
+        @click="handleResetSettingConfig"
+      >
+        重置
+      </VButton>
     </template>
   </VEntity>
 </template>

src/modules/interface/themes/composables/use-theme.ts

@@ -2,14 +2,15 @@ import type { ComputedRef, Ref } from "vue";
 import { computed, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
-import { Dialog } from "@halo-dev/components";
+import { Dialog, Toast } from "@halo-dev/components";
 import { useThemeStore } from "@/stores/theme";
 import { storeToRefs } from "pinia";
 
 interface useThemeLifeCycleReturn {
   loading: Ref<boolean>;
   isActivated: ComputedRef<boolean>;
   handleActiveTheme: () => void;
+  handleResetSettingConfig: () => void;
 }
 
 export function useThemeLifeCycle(
@@ -57,10 +58,34 @@ export function useThemeLifeCycle(
     });
   };
 
+  const handleResetSettingConfig = async () => {
+    Dialog.warning({
+      title: "确定要重置主题的所有配置吗？",
+      description: "该操作会删除已保存的配置，重置为默认配置。",
+      confirmType: "danger",
+      onConfirm: async () => {
+        try {
+          if (!theme?.value) {
+            return;
+          }
+
+          await apiClient.theme.resetThemeConfig({
+            name: theme.value.metadata.name as string,
+          });
+
+          Toast.success("重置配置成功");
+        } catch (e) {
+          console.error("Failed to reset theme setting config", e);
+        }
+      },
+    });
+  };
+
   return {
     loading,
     isActivated,
     handleActiveTheme,
+    handleResetSettingConfig,
   };
 }
 

src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { nextTick, onMounted, type ComputedRef, type Ref } from "vue";
+import { nextTick, onMounted, type Ref } from "vue";
 import { computed, provide, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
@@ -72,7 +72,6 @@ const { setting, handleFetchSettings } = useSettingForm(
 );
 
 provide<Ref<Theme | undefined>>("selectedTheme", selectedTheme);
-provide<ComputedRef<boolean>>("isActivated", isActivated);
 
 const route = useRoute();
 const router = useRouter();

src/modules/system/plugins/components/PluginListItem.vue

@@ -8,13 +8,16 @@ import {
   VEntity,
   VEntityField,
   VAvatar,
+  Dialog,
+  Toast,
 } from "@halo-dev/components";
 import PluginUploadModal from "./PluginUploadModal.vue";
 import { ref, toRefs } from "vue";
 import { usePluginLifeCycle } from "../composables/use-plugin";
 import type { Plugin } from "@halo-dev/api-client";
 import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
+import { apiClient } from "@/utils/api-client";
 
 const { currentUserHasPermission } = usePermission();
 
@@ -40,6 +43,29 @@ const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
 const onUpgradeModalClose = () => {
   emit("reload");
 };
+
+const handleResetSettingConfig = async () => {
+  Dialog.warning({
+    title: "确定要重置插件的所有配置吗？",
+    description: "该操作会删除已保存的配置，重置为默认配置。",
+    confirmType: "danger",
+    onConfirm: async () => {
+      try {
+        if (!plugin?.value) {
+          return;
+        }
+
+        await apiClient.plugin.resetPluginConfig({
+          name: plugin.value.metadata.name as string,
+        });
+
+        Toast.success("重置配置成功");
+      } catch (e) {
+        console.error("Failed to reset plugin setting config", e);
+      }
+    },
+  });
+};
 </script>
 <template>
   <PluginUploadModal
@@ -157,6 +183,14 @@ const onUpgradeModalClose = () => {
           </div>
         </template>
       </FloatingDropdown>
+      <VButton
+        v-close-popper
+        block
+        type="danger"
+        @click="handleResetSettingConfig"
+      >
+        重置
+      </VButton>
     </template>
   </VEntity>
 </template>