feat: add supports for system restore by remote url (#4507)

#### What type of PR is this?

/area console
/kind feature
/milestone 2.9.x

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

系统恢复支持通过远程文件链接恢复

<img width="806" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/f9f2694d-b051-49c0-9f9f-695e04d4f13e">
<img width="1019" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/dc428f36-5620-4042-b7fc-cbcdb06db679">


#### Special notes for your reviewer:

测试远程恢复的功能是否正常即可。

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

```release-note
系统恢复功能支持通过远程文件链接恢复。
```

console/src/locales/en.yaml

@@ -1010,6 +1010,8 @@ core:
         description: After successful restore, you need to restart Halo to load the system resources normally. After clicking OK, we will automatically restart Halo.
       restart:
         toast_success: Requested to restart
+      remote_download:
+        button: Download and restore
     list:
       phases:
         pending: Pending
@@ -1025,6 +1027,13 @@ core:
         third: 3. After the restore is completed, you need to restart Halo to load the system resources normally.
         complete: Restore completed, waiting for restart...
       start: Start restore
+      tabs:
+        local:
+          label: Upload
+        remote:
+          label: Remote
+          fields:
+            url: Remote URL
   exception:
     not_found:
       message: Page not found

console/src/locales/zh-CN.yaml

@@ -1010,6 +1010,8 @@ core:
         description: 恢复成功之后，需要重启一下 Halo 才能够正常加载系统资源，点击确定之后我们会自动重启 Halo。
       restart:
         toast_success: 已请求重启
+      remote_download:
+        button: 下载并恢复
     list:
       phases:
         pending: 准备中
@@ -1025,6 +1027,13 @@ core:
         third: 3. 恢复完成之后需要重启 Halo 才能够正常加载系统资源。
         complete: 恢复完成，等待重启...
       start: 开始恢复
+      tabs:
+        local:
+          label: 上传
+        remote:
+          label: 远程恢复
+          fields:
+            url: 下载地址
   exception:
     not_found:
       message: 没有找到该页面

console/src/locales/zh-TW.yaml

@@ -1010,6 +1010,8 @@ core:
         description: 還原成功後，需要重新啟動 Halo 才能正常載入系統資源，點擊確定之後，我們會自動重啟 Halo。
       restart:
         toast_success: 已請求重啟
+      remote_download:
+        button: 下載並還原
     list:
       phases:
         pending: 準備中
@@ -1025,6 +1027,13 @@ core:
         third: 3. 還原完成後需要重新啟動 Halo 才能正常載入系統資源。
         complete: 恢復完成，等待重啟...
       start: 開始還原
+      tabs:
+        local:
+          label: 上傳
+        remote:
+          label: 遠程恢復
+          fields:
+            url: 下載地址
   exception:
     not_found:
       message: 沒有找到該頁面

console/src/modules/system/backup/tabs/Restore.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import UppyUpload from "@/components/upload/UppyUpload.vue";
-import { Dialog, Toast, VAlert, VButton, VLoading } from "@halo-dev/components";
-import { useQuery } from "@tanstack/vue-query";
+import { apiClient } from "@/utils/api-client";
+import {
+  Dialog,
+  Toast,
+  VAlert,
+  VButton,
+  VLoading,
+  VTabItem,
+  VTabs,
+} from "@halo-dev/components";
+import { useMutation, useQuery } from "@tanstack/vue-query";
 import axios from "axios";
 import { computed } from "vue";
 import { ref } from "vue";
@@ -11,8 +20,9 @@ const { t } = useI18n();
 
 const complete = ref(false);
 const showUploader = ref(false);
+const activeTabId = ref("local");
 
-const onUploaded = () => {
+const onProcessCompleted = () => {
   Dialog.success({
     title: t("core.backup.operations.restore.title"),
     description: t("core.backup.operations.restore.description"),
@@ -33,6 +43,21 @@ async function handleShutdown() {
   }, 1000);
 }
 
+// Remote download to restore
+const remoteDownloadUrl = ref("");
+const { isLoading: downloading, mutate: handleRemoteDownload } = useMutation({
+  mutationKey: ["remote-download-restore"],
+  mutationFn: async () => {
+    return await apiClient.migration.restoreBackup({
+      downloadUrl: remoteDownloadUrl.value,
+    });
+  },
+  retry: false,
+  onSuccess() {
+    onProcessCompleted();
+  },
+});
+
 useQuery({
   queryKey: ["check-health"],
   queryFn: async () => {
@@ -72,16 +97,52 @@ useQuery({
         </template>
       </VAlert>
     </div>
-    <div v-if="showUploader" class="flex items-center justify-center px-4 py-3">
-      <UppyUpload
-        :restrictions="{
-          maxNumberOfFiles: 1,
-          allowedFileTypes: ['.zip'],
-        }"
-        endpoint="/apis/api.console.migration.halo.run/v1alpha1/restorations"
-        width="100%"
-        @uploaded="onUploaded"
-      />
+    <div v-if="showUploader" class="flex flex-col px-4 pb-3">
+      <VTabs v-model:active-id="activeTabId" type="pills">
+        <VTabItem
+          id="local"
+          :label="$t('core.backup.restore.tabs.local.label')"
+        >
+          <UppyUpload
+            :restrictions="{
+              maxNumberOfFiles: 1,
+              allowedFileTypes: ['.zip'],
+            }"
+            endpoint="/apis/api.console.migration.halo.run/v1alpha1/restorations"
+            width="100%"
+            @uploaded="onProcessCompleted"
+          />
+        </VTabItem>
+        <VTabItem
+          id="remote"
+          :label="$t('core.backup.restore.tabs.remote.label')"
+        >
+          <FormKit
+            id="restore-remote-download-form"
+            name="restore-remote-download-form"
+            type="form"
+            :preserve="true"
+            @submit="handleRemoteDownload()"
+          >
+            <FormKit
+              v-model="remoteDownloadUrl"
+              :label="$t('core.backup.restore.tabs.remote.fields.url')"
+              type="text"
+              validation="required"
+            ></FormKit>
+          </FormKit>
+
+          <div class="pt-5">
+            <VButton
+              :loading="downloading"
+              type="secondary"
+              @click="$formkit.submit('restore-remote-download-form')"
+            >
+              {{ $t("core.backup.operations.remote_download.button") }}
+            </VButton>
+          </div>
+        </VTabItem>
+      </VTabs>
     </div>
   </div>