feat: add theme install support (halo-dev/console#594)

Signed-off-by: Ryan Wang <i@ryanc.cc>

<!--  Thanks for sending a pull request!  Here are some tips for you:
1. 如果这是你的第一次，请阅读我们的贡献指南：<https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>。
1. If this is your first time, please read our contributor guidelines: <https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>.
2. 请根据你解决问题的类型为 Pull Request 添加合适的标签。
2. Please label this pull request according to what type of issue you are addressing, especially if this is a release targeted pull request.
3. 请确保你已经添加并运行了适当的测试。
3. Ensure you have added or ran the appropriate tests for your PR.
-->

#### What type of PR is this?

/kind feature
/milestone 2.0

<!--
添加其中一个类别：
Add one of the following kinds:

/kind bug
/kind cleanup
/kind documentation
/kind feature
/kind optimization

适当添加其中一个或多个类别（可选）：
Optionally add one or more of the following kinds if applicable:

/kind api-change
/kind deprecation
/kind failing-test
/kind flake
/kind regression
-->

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

新增主题上传支持，适配 https://github.com/halo-dev/halo/pull/2302

/hold until https://github.com/halo-dev/halo/pull/2302 merge

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

<!--
PR 合并时自动关闭 issue。
Automatically closes linked issue when PR is merged.

用法：`Fixes #<issue 号>`，或者 `Fixes (粘贴 issue 完整链接)`
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
-->
Fixes halo-dev/halo#2291

#### Screenshots:

<img width="1920" alt="image" src="https://user-images.githubusercontent.com/21301288/182769346-4445639c-dd82-496c-9a1b-e241098fb272.png">


<!--
如果此 PR 有 UI 的改动，最好截图说明这个 PR 的改动。
If there are UI changes to this PR, it is best to take a screenshot to illustrate the changes to this PR.

eg.

Before:

![screenshot-before](https://user-images.githubusercontent.com/screenshot.png)

After:

![screenshot-after](https://user-images.githubusercontent.com/screenshot.png)
-->

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-admin 

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

<!--
如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。
否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change），
Release Note 需要以 `action required` 开头。
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->

```release-note
None
```

package.json

@@ -34,7 +34,7 @@
     "@formkit/vue": "1.0.0-beta.10",
     "@halo-dev/admin-api": "^1.1.0",
     "@halo-dev/admin-shared": "workspace:*",
-    "@halo-dev/api-client": "^0.0.8",
+    "@halo-dev/api-client": "^0.0.9",
     "@halo-dev/components": "workspace:*",
     "@vueuse/components": "^8.9.4",
     "@vueuse/core": "^8.9.4",

packages/shared/package.json

@@ -36,7 +36,7 @@
   "homepage": "https://github.com/halo-dev/halo-admin/tree/next/shared/components#readme",
   "license": "MIT",
   "dependencies": {
-    "@halo-dev/api-client": "^0.0.8",
+    "@halo-dev/api-client": "^0.0.9",
     "@halo-dev/components": "workspace:*",
     "axios": "^0.27.2"
   },

packages/shared/src/utils/api-client.ts

@@ -10,6 +10,7 @@ import {
   V1alpha1SettingApi,
   V1alpha1UserApi,
   ThemeHaloRunV1alpha1ThemeApi,
+  ApiHaloRunV1alpha1ThemeApi,
 } from "@halo-dev/api-client";
 import type { AxiosInstance } from "axios";
 import axios from "axios";
@@ -67,6 +68,7 @@ function setupApiClient(axios: AxiosInstance) {
     },
     user: new ApiHaloRunV1alpha1UserApi(undefined, apiUrl, axios),
     plugin: new ApiHaloRunV1alpha1PluginApi(undefined, apiUrl, axios),
+    theme: new ApiHaloRunV1alpha1ThemeApi(undefined, apiUrl, axios),
   };
 }
 

pnpm-lock.yaml

@@ -14,7 +14,7 @@ importers:
       '@formkit/vue': 1.0.0-beta.10
       '@halo-dev/admin-api': ^1.1.0
       '@halo-dev/admin-shared': workspace:*
-      '@halo-dev/api-client': ^0.0.8
+      '@halo-dev/api-client': ^0.0.9
       '@halo-dev/components': workspace:*
       '@rushstack/eslint-patch': ^1.1.4
       '@tailwindcss/aspect-ratio': ^0.4.0
@@ -84,7 +84,7 @@ importers:
       '@formkit/vue': 1.0.0-beta.10_wwmyxdjqen5bmh3tr2meig5lki
       '@halo-dev/admin-api': 1.1.0
       '@halo-dev/admin-shared': link:packages/shared
-      '@halo-dev/api-client': 0.0.8
+      '@halo-dev/api-client': 0.0.9
       '@halo-dev/components': link:packages/components
       '@vueuse/components': 8.9.4_vue@3.2.37
       '@vueuse/core': 8.9.4_vue@3.2.37
@@ -174,12 +174,12 @@ importers:
 
   packages/shared:
     specifiers:
-      '@halo-dev/api-client': ^0.0.8
+      '@halo-dev/api-client': ^0.0.9
       '@halo-dev/components': workspace:*
       axios: ^0.27.2
       vite-plugin-dts: ^1.4.1
     dependencies:
-      '@halo-dev/api-client': 0.0.8
+      '@halo-dev/api-client': 0.0.9
       '@halo-dev/components': link:../components
       axios: 0.27.2
     devDependencies:
@@ -2114,8 +2114,8 @@ packages:
       - debug
     dev: false
 
-  /@halo-dev/api-client/0.0.8:
+  /@halo-dev/api-client/0.0.9:
-    resolution: {integrity: sha512-ANCJ9/O++FHyLfiREQQbNWHP0sj721VxoNqPgdG4ctDwbOdXpEyxgXKmOqGPadfThCtMolMS9XKDr6qG3q+xLQ==}
+    resolution: {integrity: sha512-GhDbgIASrvUwVE1/jadowPWZnQMASaOIF9mS7FKcC3/UjHZGBmxx03ECVLc7PH1hnHqsNTCbiLUDZtig6ZDuUw==}
     dev: false
 
   /@halo-dev/logger/1.1.0:

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

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { VModal } from "@halo-dev/components";
+import VueFilePond from "vue-filepond";
+import "filepond/dist/filepond.min.css";
+import { apiClient } from "@halo-dev/admin-shared";
+
+const FilePond = VueFilePond();
+
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:visible", "close"]);
+
+const handleVisibleChange = (visible: boolean) => {
+  emit("update:visible", visible);
+  if (!visible) {
+    emit("close");
+  }
+};
+
+const server = {
+  process: (fieldName, file, metadata, load) => {
+    const formData = new FormData();
+    formData.append(fieldName, file, file.name);
+
+    apiClient.theme.installTheme(file).then((response) => {
+      load(response);
+      handleVisibleChange(false);
+    });
+
+    return {};
+  },
+};
+</script>
+<template>
+  <VModal
+    :visible="visible"
+    :width="500"
+    title="安装主题"
+    @update:visible="handleVisibleChange"
+  >
+    <file-pond
+      ref="pond"
+      :allow-multiple="false"
+      :server="server"
+      label-idle="Drop ZIP file here..."
+      name="file"
+    />
+  </VModal>
+</template>

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

@@ -7,6 +7,7 @@ import {
   VSpace,
   VTag,
 } from "@halo-dev/components";
+import ThemeInstallModal from "./ThemeInstallModal.vue";
 import type { PropType } from "vue";
 import { onMounted, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
@@ -30,6 +31,7 @@ defineProps({
 const emit = defineEmits(["update:visible", "close", "update:selectedTheme"]);
 
 const themes = ref<Theme[]>([]);
+const themeInstall = ref(false);
 
 const handleFetchThemes = async () => {
   try {
@@ -137,7 +139,17 @@ defineExpose({
       </li>
     </ul>
     <template #footer>
-      <VButton @click="handleVisibleChange(false)">关闭</VButton>
+      <VSpace>
+        <VButton type="secondary" @click="themeInstall = true">
+          安装主题
+        </VButton>
+        <VButton @click="handleVisibleChange(false)">关闭</VButton>
+      </VSpace>
     </template>
   </VModal>
+
+  <ThemeInstallModal
+    v-model:visible="themeInstall"
+    @close="handleFetchThemes"
+  />
 </template>