From 565dc1cbc8a73fc09c5309f12e799c6d0e834209 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 26 Sep 2024 16:47:31 +0800
Subject: [PATCH] refactor: unified empty state UI action button styles (#6704)
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:

统一空状态界面中操作按钮的风格。

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

```release-note
统一空状态界面中操作按钮的风格。
```
---
 .../modules/contents/comments/CommentList.vue          |  8 +++-----
 .../modules/contents/pages/DeletedSinglePageList.vue   |  2 +-
 .../modules/contents/pages/SinglePageList.vue          |  2 +-
 .../modules/contents/posts/DeletedPostList.vue         |  2 +-
 ui/console-src/modules/contents/posts/PostList.vue     |  2 +-
 .../modules/contents/posts/categories/CategoryList.vue |  2 +-
 ui/console-src/modules/contents/posts/tags/TagList.vue |  2 +-
 ui/console-src/modules/interface/menus/Menus.vue       |  2 +-
 .../modules/interface/menus/components/MenuList.vue    |  9 +++------
 .../themes/components/list-tabs/InstalledThemes.vue    |  2 +-
 .../themes/components/list-tabs/NotInstalledThemes.vue | 10 ++++------
 .../modules/interface/themes/layouts/ThemeLayout.vue   |  2 +-
 ui/uc-src/modules/contents/posts/PostList.vue          |  2 +-
 .../modules/profile/tabs/PersonalAccessTokens.vue      |  2 +-
 14 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/ui/console-src/modules/contents/comments/CommentList.vue b/ui/console-src/modules/contents/comments/CommentList.vue
index 047be8216..74e54c55b 100644
--- a/ui/console-src/modules/contents/comments/CommentList.vue
+++ b/ui/console-src/modules/contents/comments/CommentList.vue
@@ -364,11 +364,9 @@ const handleApproveInBatch = async () => {
           :title="$t('core.comment.empty.title')"
         >
           <template #actions>
-            <VSpace>
-              <VButton @click="refetch">
-                {{ $t("core.common.buttons.refresh") }}
-              </VButton>
-            </VSpace>
+            <VButton @click="refetch">
+              {{ $t("core.common.buttons.refresh") }}
+            </VButton>
           </template>
         </VEmpty>
       </Transition>
diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 90a9a052e..2d5bd8b9d 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -281,7 +281,7 @@ watch(
               <VButton
                 v-permission="['system:singlepages:view']"
                 :route="{ name: 'SinglePages' }"
-                type="primary"
+                type="secondary"
               >
                 {{ $t("core.common.buttons.back") }}
               </VButton>
diff --git a/ui/console-src/modules/contents/pages/SinglePageList.vue b/ui/console-src/modules/contents/pages/SinglePageList.vue
index 77b25c0ae..f33e6f583 100644
--- a/ui/console-src/modules/contents/pages/SinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageList.vue
@@ -432,7 +432,7 @@ watch(selectedPageNames, (newValue) => {
               <VButton
                 v-permission="['system:singlepages:manage']"
                 :route="{ name: 'SinglePageEditor' }"
-                type="primary"
+                type="secondary"
               >
                 <template #icon>
                   <IconAddCircle class="h-full w-full" />
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index 29e50b2b1..85090a37b 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -280,7 +280,7 @@ watch(
               <VButton @click="refetch">
                 {{ $t("core.common.buttons.refresh") }}
               </VButton>
-              <VButton :route="{ name: 'Posts' }" type="primary">
+              <VButton :route="{ name: 'Posts' }" type="secondary">
                 {{ $t("core.common.buttons.back") }}
               </VButton>
             </VSpace>
diff --git a/ui/console-src/modules/contents/posts/PostList.vue b/ui/console-src/modules/contents/posts/PostList.vue
index 01c36facb..13a80bf1c 100644
--- a/ui/console-src/modules/contents/posts/PostList.vue
+++ b/ui/console-src/modules/contents/posts/PostList.vue
@@ -563,7 +563,7 @@ watch(
               <VButton
                 v-permission="['system:posts:manage']"
                 :route="{ name: 'PostEditor' }"
-                type="primary"
+                type="secondary"
               >
                 <template #icon>
                   <IconAddCircle class="h-full w-full" />
diff --git a/ui/console-src/modules/contents/posts/categories/CategoryList.vue b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
index 43ba0e83a..4acc22c86 100644
--- a/ui/console-src/modules/contents/posts/categories/CategoryList.vue
+++ b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
@@ -117,7 +117,7 @@ const handleUpdateInBatch = useDebounceFn(async () => {
               </VButton>
               <VButton
                 v-permission="['system:posts:manage']"
-                type="primary"
+                type="secondary"
                 @click="creationModal = true"
               >
                 <template #icon>
diff --git a/ui/console-src/modules/contents/posts/tags/TagList.vue b/ui/console-src/modules/contents/posts/tags/TagList.vue
index 639128635..528bcaac7 100644
--- a/ui/console-src/modules/contents/posts/tags/TagList.vue
+++ b/ui/console-src/modules/contents/posts/tags/TagList.vue
@@ -267,7 +267,7 @@ watch(selectedTagNames, (newVal) => {
               <VButton @click="() => handleFetchTags">
                 {{ $t("core.common.buttons.refresh") }}
               </VButton>
-              <VButton type="primary" @click="editingModal = true">
+              <VButton type="secondary" @click="editingModal = true">
                 <template #icon>
                   <IconAddCircle class="h-full w-full" />
                 </template>
diff --git a/ui/console-src/modules/interface/menus/Menus.vue b/ui/console-src/modules/interface/menus/Menus.vue
index 40e7b2a5b..9823031ca 100644
--- a/ui/console-src/modules/interface/menus/Menus.vue
+++ b/ui/console-src/modules/interface/menus/Menus.vue
@@ -259,7 +259,7 @@ const handleDelete = async (menuItem: MenuTreeItem) => {
                   </VButton>
                   <VButton
                     v-permission="['system:menus:manage']"
-                    type="primary"
+                    type="secondary"
                     @click="menuItemEditingModal = true"
                   >
                     <template #icon>
diff --git a/ui/console-src/modules/interface/menus/components/MenuList.vue b/ui/console-src/modules/interface/menus/components/MenuList.vue
index cd4fb1e1e..79925a01d 100644
--- a/ui/console-src/modules/interface/menus/components/MenuList.vue
+++ b/ui/console-src/modules/interface/menus/components/MenuList.vue
@@ -12,7 +12,6 @@ import {
   VEntity,
   VEntityField,
   VLoading,
-  VSpace,
   VStatusDot,
   VTag,
 } from "@halo-dev/components";
@@ -187,11 +186,9 @@ const handleSetPrimaryMenu = async (menu: Menu) => {
         :title="$t('core.menu.empty.title')"
       >
         <template #actions>
-          <VSpace>
-            <VButton size="sm" @click="refetch()">
-              {{ $t("core.common.buttons.refresh") }}
-            </VButton>
-          </VSpace>
+          <VButton size="sm" @click="refetch()">
+            {{ $t("core.common.buttons.refresh") }}
+          </VButton>
         </template>
       </VEmpty>
     </Transition>
diff --git a/ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue b/ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
index 401608f4f..d2524316a 100644
--- a/ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
+++ b/ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
@@ -81,7 +81,7 @@ const handleOpenPreview = (theme: Theme) => {
             </VButton>
             <VButton
               v-permission="['system:themes:manage']"
-              type="primary"
+              type="secondary"
               @click="activeTabId = 'local-upload'"
             >
               <template #icon>
diff --git a/ui/console-src/modules/interface/themes/components/list-tabs/NotInstalledThemes.vue b/ui/console-src/modules/interface/themes/components/list-tabs/NotInstalledThemes.vue
index 3a5e451cd..008f75a15 100644
--- a/ui/console-src/modules/interface/themes/components/list-tabs/NotInstalledThemes.vue
+++ b/ui/console-src/modules/interface/themes/components/list-tabs/NotInstalledThemes.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Theme } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
-import { VButton, VEmpty, VLoading, VSpace } from "@halo-dev/components";
+import { VButton, VEmpty, VLoading } from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import ThemeListItem from "../ThemeListItem.vue";
 
@@ -29,11 +29,9 @@ const {
     <Transition v-else-if="!themes?.length" appear name="fade">
       <VEmpty :title="$t('core.theme.list_modal.not_installed_empty.title')">
         <template #actions>
-          <VSpace>
-            <VButton :loading="isFetching" @click="refetch">
-              {{ $t("core.common.buttons.refresh") }}
-            </VButton>
-          </VSpace>
+          <VButton :loading="isFetching" @click="refetch">
+            {{ $t("core.common.buttons.refresh") }}
+          </VButton>
         </template>
       </VEmpty>
     </Transition>
diff --git a/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue b/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
index 98cb1fa4b..99ee219d6 100644
--- a/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
@@ -235,7 +235,7 @@ onMounted(() => {
             <VButton @click="themesModal = true">
               {{ $t("core.theme.common.buttons.install") }}
             </VButton>
-            <VButton type="primary" @click="themesModal = true">
+            <VButton type="secondary" @click="themesModal = true">
               <template #icon>
                 <IconExchange class="h-full w-full" />
               </template>
diff --git a/ui/uc-src/modules/contents/posts/PostList.vue b/ui/uc-src/modules/contents/posts/PostList.vue
index d059cc693..b62540782 100644
--- a/ui/uc-src/modules/contents/posts/PostList.vue
+++ b/ui/uc-src/modules/contents/posts/PostList.vue
@@ -175,7 +175,7 @@ const {
               <VButton
                 v-permission="['system:posts:manage']"
                 :route="{ name: 'PostEditor' }"
-                type="primary"
+                type="secondary"
               >
                 <template #icon>
                   <IconAddCircle class="h-full w-full" />
diff --git a/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue b/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
index 9d2bcba5f..b9cafddfd 100644
--- a/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
+++ b/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
@@ -56,7 +56,7 @@ const creationModal = ref(false);
           <VButton @click="refetch">
             {{ $t("core.common.buttons.refresh") }}
           </VButton>
-          <VButton type="primary" @click="creationModal = true">
+          <VButton type="secondary" @click="creationModal = true">
             <template #icon>
               <IconAddCircle class="h-full w-full" />
             </template>