feat: add empty state for restore by backups (#7078)

#### 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 为通过备份文件恢复的界面添加空状态提示。 ```
halo-dev · Nov 25, 2024 · 2ed3bb6 · 2ed3bb6
1 parent e5be856
commit 2ed3bb6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -1360,6 +1360,9 @@ core:
             url: 下載地址
         backup:
           label: 從備份檔案恢復
+          empty:
+            title: 沒有備份文件
+            message: 目前沒有掃描到備份文件，你可以手動將備份文件上傳到 Halo 工作目錄的 backups 目錄。
   exception:
     not_found:
       message: 沒有找到該頁面