From 2ed3bb6838496c5f609f0cf2de51417a4d9205d1 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 25 Nov 2024 17:30:25 +0800
Subject: [PATCH] feat: add empty state for restore by backups (#7078)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.20.x

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

为通过备份文件恢复的界面添加空状态提示。

<img width="1192" alt="image" src="https://github.com/user-attachments/assets/2267e61d-9886-408a-a13f-e986f2172203">

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

```release-note
为通过备份文件恢复的界面添加空状态提示。
```
---
 .../modules/system/backup/tabs/Restore.vue    | 25 ++++++++++++++++++-
 ui/src/locales/en.yaml                        |  6 +++++
 ui/src/locales/zh-CN.yaml                     |  3 +++
 ui/src/locales/zh-TW.yaml                     |  3 +++
 4 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/ui/console-src/modules/system/backup/tabs/Restore.vue b/ui/console-src/modules/system/backup/tabs/Restore.vue
index a071a62a1..067887391 100644
--- a/ui/console-src/modules/system/backup/tabs/Restore.vue
+++ b/ui/console-src/modules/system/backup/tabs/Restore.vue
@@ -7,6 +7,7 @@ import {
   Toast,
   VAlert,
   VButton,
+  VEmpty,
   VEntity,
   VEntityField,
   VLoading,
@@ -61,7 +62,12 @@ const { isLoading: downloading, mutate: handleRemoteDownload } = useMutation({
   },
 });
 
-const { data: backupFiles } = useQuery({
+const {
+  data: backupFiles,
+  refetch: refetchBackupFiles,
+  isLoading: isLoadingBackupFiles,
+  isFetching: isFetchingBackupFiles,
+} = useQuery({
   queryKey: ["backup-files", activeTabId],
   queryFn: async () => {
     const { data } = await consoleApiClient.migration.getBackupFiles();
@@ -179,7 +185,9 @@ useQuery({
           id="backups"
           :label="$t('core.backup.restore.tabs.backup.label')"
         >
+          <VLoading v-if="isLoadingBackupFiles" />
           <ul
+            v-else-if="backupFiles?.length"
             class="box-border h-full w-full divide-y divide-gray-100 overflow-hidden rounded-base border"
             role="list"
           >
@@ -216,6 +224,21 @@ useQuery({
               </VEntity>
             </li>
           </ul>
+
+          <VEmpty
+            v-else
+            :title="$t('core.backup.restore.tabs.backup.empty.title')"
+            :message="$t('core.backup.restore.tabs.backup.empty.message')"
+          >
+            <template #actions>
+              <VButton
+                :loading="isFetchingBackupFiles"
+                @click="refetchBackupFiles"
+              >
+                {{ $t("core.common.buttons.refresh") }}
+              </VButton>
+            </template>
+          </VEmpty>
         </VTabItem>
       </VTabs>
     </div>
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 7f5de55ff..3ffc71bdd 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -1489,6 +1489,12 @@ core:
             url: Remote URL
         backup:
           label: Restore from backup files
+          empty:
+            title: No backup files
+            message: >-
+              Currently no backup files are scanned. You can manually upload the
+              backup files to the backups directory of the Halo working
+              directory.
   exception:
     not_found:
       message: Page not found
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index ec1985682..3f0263752 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -1384,6 +1384,9 @@ core:
             url: 下载地址
         backup:
           label: 从备份文件恢复
+          empty:
+            title: 没有备份文件
+            message: 当前没有扫描到备份文件，你可以手动将备份文件上传到 Halo 工作目录的 backups 目录。
   exception:
     not_found:
       message: 没有找到该页面
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 7f27785e0..683e4a892 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -1360,6 +1360,9 @@ core:
             url: 下載地址
         backup:
           label: 從備份檔案恢復
+          empty:
+            title: 沒有備份文件
+            message: 目前沒有掃描到備份文件，你可以手動將備份文件上傳到 Halo 工作目錄的 backups 目錄。
   exception:
     not_found:
       message: 沒有找到該頁面