feat: add upgrade theme support (halo-dev/console#653)

#### What type of PR is this?

/kind feature
/milestone 2.0

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

支持升级主题。适配 https://github.com/halo-dev/halo/pull/2600

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

Fixes https://github.com/halo-dev/halo/issues/2550

#### Screenshots:

<img width="915" alt="image" src="https://user-images.githubusercontent.com/21301288/196875056-cb0fbb7d-1cfd-47c3-ae6a-5e76c642b51d.png">
<img width="915" alt="image" src="https://user-images.githubusercontent.com/21301288/196875083-39e3778c-4925-4cb9-befc-563f40c77d06.png">

#### Special notes for your reviewer:

测试方式：

1. Halo 需要切换到 https://github.com/halo-dev/halo/pull/2600
2. 需要 `pnpm install`
3. 测试更主题功能是否正常。

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

```release-note
支持升级主题。
```

src/modules/interface/themes/ThemeDetail.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { inject } from "vue";
+import { inject, ref } from "vue";
 import { RouterLink } from "vue-router";
 
 // components
@@ -12,6 +12,7 @@ import {
   VButton,
   Dialog,
 } from "@halo-dev/components";
+import ThemeUploadModal from "./components/ThemeUploadModal.vue";
 
 // types
 import type { ComputedRef, Ref } from "vue";
@@ -21,6 +22,7 @@ import { apiClient } from "@/utils/api-client";
 
 const selectedTheme = inject<Ref<Theme | undefined>>("selectedTheme");
 const isActivated = inject<ComputedRef<boolean>>("isActivated");
+const upgradeModal = ref(false);
 
 const handleReloadThemeSetting = async () => {
   Dialog.warning({
@@ -33,7 +35,7 @@ const handleReloadThemeSetting = async () => {
         }
 
         await apiClient.theme.reloadThemeSetting({
-          name: selectedTheme.value.metadata.name,
+          name: selectedTheme.value.metadata.name as string,
         });
 
         window.location.reload();
@@ -43,6 +45,12 @@ const handleReloadThemeSetting = async () => {
     },
   });
 };
+
+const onUpgradeModalClose = () => {
+  setTimeout(() => {
+    window.location.reload();
+  }, 200);
+};
 </script>
 
 <template>
@@ -86,6 +94,14 @@ const handleReloadThemeSetting = async () => {
                 v-close-popper
                 block
                 type="secondary"
+                @click="upgradeModal = true"
+              >
+                更新
+              </VButton>
+              <VButton
+                v-close-popper
+                block
+                type="default"
                 @click="handleReloadThemeSetting"
               >
                 刷新设置表单
@@ -206,4 +222,9 @@ const handleReloadThemeSetting = async () => {
       </div>
     </dl>
   </div>
+  <ThemeUploadModal
+    v-model:visible="upgradeModal"
+    :upgrade-theme="selectedTheme"
+    @close="onUpgradeModalClose"
+  />
 </template>

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

@@ -15,7 +15,7 @@ import {
   VTabs,
 } from "@halo-dev/components";
 import LazyImage from "@/components/image/LazyImage.vue";
-import ThemeInstallModal from "./ThemeInstallModal.vue";
+import ThemeUploadModal from "./ThemeUploadModal.vue";
 import { computed, ref, watch } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
@@ -437,7 +437,8 @@ defineExpose({
     </template>
   </VModal>
 
-  <ThemeInstallModal
+  <ThemeUploadModal
+    v-if="visible"
     v-model:visible="themeInstall"
     @close="handleFetchThemes"
   />

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

@@ -2,14 +2,17 @@
 import { VModal } from "@halo-dev/components";
 import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@/utils/api-client";
-import { computed, ref } from "vue";
+import { computed, mergeProps, ref } from "vue";
+import type { Theme } from "@halo-dev/api-client";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     visible: boolean;
+    upgradeTheme?: Theme;
   }>(),
   {
     visible: false,
+    upgradeTheme: undefined,
   }
 );
 
@@ -20,6 +23,12 @@ const emit = defineEmits<{
 
 const FilePondUploadRef = ref();
 
+const modalTitle = computed(() => {
+  return props.upgradeTheme
+    ? `升级主题（${props.upgradeTheme.spec.displayName}）`
+    : "安装主题";
+});
+
 const handleVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
@@ -29,6 +38,16 @@ const handleVisibleChange = (visible: boolean) => {
 };
 
 const uploadHandler = computed(() => {
+  if (props.upgradeTheme) {
+    return (file, config) =>
+      apiClient.theme.upgradeTheme(
+        {
+          name: props.upgradeTheme.metadata.name as string,
+          file: file,
+        },
+        config
+      );
+  }
   return (file, config) =>
     apiClient.theme.installTheme(
       {
@@ -42,10 +61,11 @@ const uploadHandler = computed(() => {
   <VModal
     :visible="visible"
     :width="500"
-    title="安装主题"
+    :title="modalTitle"
     @update:visible="handleVisibleChange"
   >
     <FilePondUpload
+      v-if="visible && uploadHandler"
       ref="FilePondUploadRef"
       :allow-multiple="false"
       :handler="uploadHandler"