feat: prompt to upgrade plugin when installing existing plugin (halo-…

…dev/console#871)

#### What type of PR is this?

/kind feature

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

安装已存在插件时，支持提示和升级插件。

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

Fixes halo-dev#3164

#### Screenshots:

<img width="1411" alt="image" src="https://user-images.githubusercontent.com/21301288/220118697-12fbd7a7-57e6-47bb-a03b-b9c280571687.png">

#### Special notes for your reviewer:

测试方式：

1. Halo 需要切换到 halo-dev#3350 分支。
2. 在插件为 deployment 模式下启动 Halo。
3. 安装任意一个插件，然后继续上传安装相同插件。
4. 观察是否提示升级此插件。

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

```release-note
Console 端安装已存在插件时，支持提示并升级插件。
```

src/components/upload/UppyUpload.vue

@@ -36,6 +36,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (event: "uploaded", response: SuccessResponse): void;
+  (event: "error", file, response): void;
 }>();
 
 const uppy = computed(() => {
@@ -72,6 +73,10 @@ uppy.value.on("upload-success", (_, response: SuccessResponse) => {
   emit("uploaded", response);
 });
 
+uppy.value.on("upload-error", (file, _, response) => {
+  emit("error", file, response);
+});
+
 onUnmounted(() => {
   uppy.value.close({ reason: "unmount" });
 });

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

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { VModal, Dialog } from "@halo-dev/components";
+import { VModal, Dialog, Toast } from "@halo-dev/components";
 import UppyUpload from "@/components/upload/UppyUpload.vue";
 import { apiClient } from "@/utils/api-client";
 import type { Plugin } from "@halo-dev/api-client";
 import { computed, ref, watch } from "vue";
-import type { SuccessResponse } from "@uppy/core";
+import type { SuccessResponse, ErrorResponse } from "@uppy/core";
+import type { UppyFile } from "@uppy/utils";
 
 const props = withDefaults(
   defineProps<{
@@ -76,6 +77,40 @@ const onUploaded = async (response: SuccessResponse) => {
   });
 };
 
+interface PluginInstallationErrorResponse {
+  detail: string;
+  instance: string;
+  pluginName: string;
+  requestId: string;
+  status: number;
+  timestamp: string;
+  title: string;
+  type: string;
+}
+
+const PLUGIN_ALREADY_EXISTS_TYPE =
+  "https://halo.run/probs/plugin-alreay-exists";
+
+const onError = (file: UppyFile<unknown>, response: ErrorResponse) => {
+  const body = response.body as PluginInstallationErrorResponse;
+  if (body.type === PLUGIN_ALREADY_EXISTS_TYPE) {
+    Dialog.info({
+      title: "插件已存在",
+      description: "当前安装的插件已存在，是否升级？",
+      onConfirm: async () => {
+        await apiClient.plugin.upgradePlugin({
+          name: body.pluginName,
+          file: file.data as File,
+        });
+
+        Toast.success("升级成功");
+
+        window.location.reload();
+      },
+    });
+  }
+};
+
 watch(
   () => props.visible,
   (newValue) => {
@@ -106,6 +141,7 @@ watch(
       :endpoint="endpoint"
       auto-proceed
       @uploaded="onUploaded"
+      @error="onError"
     />
   </VModal>
 </template>