From d39a571e4695b090d31c6bf2d0378b594126b022 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 13 Jun 2025 14:06:42 +0800
Subject: [PATCH] refactor: adapt page header styles for responsive design
 (#7544)
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.21.x

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

Adapt page header styles for responsive design

before:

<img width="415" alt="image" src="https://github.com/user-attachments/assets/feee6f09-9a77-4bbf-94c2-77725c9ce76b" />

after:

<img width="416" alt="image" src="https://github.com/user-attachments/assets/60bb07a3-5d34-4cf6-b103-5d1f2206d62d" />

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

Fixes https://github.com/halo-dev/halo/issues/6425

#### Special notes for your reviewer:

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

```release-note
优化移动端下文章编辑页面的样式
```
---
 .../contents/attachments/AttachmentList.vue   |  44 +++---
 .../modules/contents/comments/CommentList.vue |   2 +-
 .../contents/pages/DeletedSinglePageList.vue  |  30 ++---
 .../contents/pages/SinglePageEditor.vue       | 125 +++++++++---------
 .../modules/contents/pages/SinglePageList.vue |  38 +++---
 .../contents/pages/SinglePageSnapshots.vue    |  17 +--
 .../contents/posts/DeletedPostList.vue        |  30 ++---
 .../modules/contents/posts/PostEditor.vue     | 117 ++++++++--------
 .../modules/contents/posts/PostList.vue       |  42 +++---
 .../modules/contents/posts/PostSnapshots.vue  |  17 +--
 .../posts/categories/CategoryList.vue         |   2 +-
 .../modules/contents/posts/tags/TagList.vue   |   2 +-
 .../modules/dashboard/Dashboard.vue           |   2 +-
 .../modules/dashboard/DashboardDesigner.vue   |  15 +--
 .../modules/interface/menus/Menus.vue         |   2 +-
 .../interface/themes/layouts/ThemeLayout.vue  |  46 +++----
 .../auth-providers/AuthProviderDetail.vue     |   1 -
 .../system/auth-providers/AuthProviders.vue   |   2 +-
 .../modules/system/backup/Backups.vue         |   2 +-
 .../modules/system/overview/Overview.vue      |   2 +-
 .../modules/system/plugins/PluginDetail.vue   |   1 -
 .../plugins/PluginExtensionPointSettings.vue  |   2 +-
 .../modules/system/plugins/PluginList.vue     |  38 +++---
 .../modules/system/roles/RoleDetail.vue       |   2 +-
 .../modules/system/roles/RoleList.vue         |   2 +-
 .../system/settings/SystemSettings.vue        |   2 +-
 ui/console-src/modules/system/tools/Tools.vue |   2 +-
 .../modules/system/users/UserList.vue         |  56 ++++----
 .../src/components/header/PageHeader.vue      |  54 ++++++--
 .../EditorProviderSelector.vue                |   4 +-
 .../modules/contents/posts/PostEditor.vue     |  75 +++++------
 ui/uc-src/modules/contents/posts/PostList.vue |   2 +-
 .../modules/notifications/Notifications.vue   |   2 +-
 33 files changed, 392 insertions(+), 388 deletions(-)

diff --git a/ui/console-src/modules/contents/attachments/AttachmentList.vue b/ui/console-src/modules/contents/attachments/AttachmentList.vue
index baf6432be..40ccb9694 100644
--- a/ui/console-src/modules/contents/attachments/AttachmentList.vue
+++ b/ui/console-src/modules/contents/attachments/AttachmentList.vue
@@ -250,31 +250,29 @@ watch(
   />
   <VPageHeader :title="$t('core.attachment.title')">
     <template #icon>
-      <IconFolder class="mr-2 self-center" />
+      <IconFolder />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton
-          v-permission="['system:attachments:manage']"
-          size="sm"
-          @click="policyVisible = true"
-        >
-          <template #icon>
-            <IconDatabase2Line />
-          </template>
-          {{ $t("core.attachment.actions.storage_policies") }}
-        </VButton>
-        <VButton
-          v-permission="['system:attachments:manage']"
-          type="secondary"
-          @click="uploadVisible = true"
-        >
-          <template #icon>
-            <IconUpload />
-          </template>
-          {{ $t("core.common.buttons.upload") }}
-        </VButton>
-      </VSpace>
+      <VButton
+        v-permission="['system:attachments:manage']"
+        size="sm"
+        @click="policyVisible = true"
+      >
+        <template #icon>
+          <IconDatabase2Line />
+        </template>
+        {{ $t("core.attachment.actions.storage_policies") }}
+      </VButton>
+      <VButton
+        v-permission="['system:attachments:manage']"
+        type="secondary"
+        @click="uploadVisible = true"
+      >
+        <template #icon>
+          <IconUpload />
+        </template>
+        {{ $t("core.common.buttons.upload") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/contents/comments/CommentList.vue b/ui/console-src/modules/contents/comments/CommentList.vue
index 094ddd421..dffc1c70e 100644
--- a/ui/console-src/modules/contents/comments/CommentList.vue
+++ b/ui/console-src/modules/contents/comments/CommentList.vue
@@ -243,7 +243,7 @@ const handleApproveInBatch = async () => {
 <template>
   <VPageHeader :title="$t('core.comment.title')">
     <template #icon>
-      <IconMessage class="mr-2 self-center" />
+      <IconMessage />
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 6df64f7bc..36f22cb28 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -204,24 +204,22 @@ watch(
 <template>
   <VPageHeader :title="$t('core.deleted_page.title')">
     <template #icon>
-      <IconDeleteBin class="mr-2 self-center text-green-600" />
+      <IconDeleteBin class="text-green-600" />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton :route="{ name: 'SinglePages' }" size="sm">
-          {{ $t("core.common.buttons.back") }}
-        </VButton>
-        <VButton
-          v-permission="['system:singlepages:manage']"
-          :route="{ name: 'SinglePageEditor' }"
-          type="secondary"
-        >
-          <template #icon>
-            <IconAddCircle />
-          </template>
-          {{ $t("core.common.buttons.new") }}
-        </VButton>
-      </VSpace>
+      <VButton :route="{ name: 'SinglePages' }" size="sm">
+        {{ $t("core.common.buttons.back") }}
+      </VButton>
+      <VButton
+        v-permission="['system:singlepages:manage']"
+        :route="{ name: 'SinglePageEditor' }"
+        type="secondary"
+      >
+        <template #icon>
+          <IconAddCircle />
+        </template>
+        {{ $t("core.common.buttons.new") }}
+      </VButton>
     </template>
   </VPageHeader>
   <div class="m-0 md:m-4">
diff --git a/ui/console-src/modules/contents/pages/SinglePageEditor.vue b/ui/console-src/modules/contents/pages/SinglePageEditor.vue
index ef902d790..b177208d9 100644
--- a/ui/console-src/modules/contents/pages/SinglePageEditor.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageEditor.vue
@@ -27,7 +27,6 @@ import {
   Toast,
   VButton,
   VPageHeader,
-  VSpace,
 } from "@halo-dev/components";
 import type { EditorProvider } from "@halo-dev/console-shared";
 import { useLocalStorage } from "@vueuse/core";
@@ -464,71 +463,69 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
 
   <VPageHeader :title="$t('core.page.title')">
     <template #icon>
-      <IconPages class="mr-2 self-center" />
+      <IconPages />
     </template>
     <template #actions>
-      <VSpace>
-        <EditorProviderSelector
-          v-if="editorProviders.length > 1"
-          :provider="currentEditorProvider"
-          :allow-forced-select="!isUpdateMode"
-          @select="handleChangeEditorProvider"
-        />
-        <VButton
-          v-if="isUpdateMode"
-          size="sm"
-          type="default"
-          @click="
-            $router.push({
-              name: 'SinglePageSnapshots',
-              query: { name: routeQueryName },
-            })
-          "
-        >
-          <template #icon>
-            <IconHistoryLine />
-          </template>
-          {{ $t("core.page_editor.actions.snapshots") }}
-        </VButton>
-        <VButton
-          size="sm"
-          type="default"
-          :loading="previewPending"
-          @click="handlePreview"
-        >
-          <template #icon>
-            <IconEye />
-          </template>
-          {{ $t("core.common.buttons.preview") }}
-        </VButton>
-        <VButton :loading="saving" size="sm" type="default" @click="handleSave">
-          <template #icon>
-            <IconSave />
-          </template>
-          {{ $t("core.common.buttons.save") }}
-        </VButton>
-        <VButton
-          v-if="isUpdateMode"
-          size="sm"
-          type="default"
-          @click="handleOpenSettingModal"
-        >
-          <template #icon>
-            <IconSettings />
-          </template>
-          {{ $t("core.common.buttons.setting") }}
-        </VButton>
-        <VButton
-          type="secondary"
-          :loading="publishing"
-          @click="handlePublishClick"
-        >
-          <template #icon>
-            <IconSendPlaneFill />
-          </template>
-          {{ $t("core.common.buttons.publish") }}
-        </VButton>
-      </VSpace>
+      <EditorProviderSelector
+        v-if="editorProviders.length > 1"
+        :provider="currentEditorProvider"
+        :allow-forced-select="!isUpdateMode"
+        @select="handleChangeEditorProvider"
+      />
+      <VButton
+        v-if="isUpdateMode"
+        size="sm"
+        type="default"
+        @click="
+          $router.push({
+            name: 'SinglePageSnapshots',
+            query: { name: routeQueryName },
+          })
+        "
+      >
+        <template #icon>
+          <IconHistoryLine />
+        </template>
+        {{ $t("core.page_editor.actions.snapshots") }}
+      </VButton>
+      <VButton
+        size="sm"
+        type="default"
+        :loading="previewPending"
+        @click="handlePreview"
+      >
+        <template #icon>
+          <IconEye />
+        </template>
+        {{ $t("core.common.buttons.preview") }}
+      </VButton>
+      <VButton :loading="saving" size="sm" type="default" @click="handleSave">
+        <template #icon>
+          <IconSave />
+        </template>
+        {{ $t("core.common.buttons.save") }}
+      </VButton>
+      <VButton
+        v-if="isUpdateMode"
+        size="sm"
+        type="default"
+        @click="handleOpenSettingModal"
+      >
+        <template #icon>
+          <IconSettings />
+        </template>
+        {{ $t("core.common.buttons.setting") }}
+      </VButton>
+      <VButton
+        type="secondary"
+        :loading="publishing"
+        @click="handlePublishClick"
+      >
+        <template #icon>
+          <IconSendPlaneFill />
+        </template>
+        {{ $t("core.common.buttons.publish") }}
+      </VButton>
     </template>
   </VPageHeader>
   <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
diff --git a/ui/console-src/modules/contents/pages/SinglePageList.vue b/ui/console-src/modules/contents/pages/SinglePageList.vue
index 429fb53c6..820550cbe 100644
--- a/ui/console-src/modules/contents/pages/SinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageList.vue
@@ -281,28 +281,26 @@ watch(selectedPageNames, (newValue) => {
 
   <VPageHeader :title="$t('core.page.title')">
     <template #icon>
-      <IconPages class="mr-2 self-center" />
+      <IconPages />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton
-          v-permission="['system:singlepages:view']"
-          :route="{ name: 'DeletedSinglePages' }"
-          size="sm"
-        >
-          {{ $t("core.page.actions.recycle_bin") }}
-        </VButton>
-        <VButton
-          v-permission="['system:singlepages:manage']"
-          :route="{ name: 'SinglePageEditor' }"
-          type="secondary"
-        >
-          <template #icon>
-            <IconAddCircle />
-          </template>
-          {{ $t("core.common.buttons.new") }}
-        </VButton>
-      </VSpace>
+      <VButton
+        v-permission="['system:singlepages:view']"
+        :route="{ name: 'DeletedSinglePages' }"
+        size="sm"
+      >
+        {{ $t("core.page.actions.recycle_bin") }}
+      </VButton>
+      <VButton
+        v-permission="['system:singlepages:manage']"
+        :route="{ name: 'SinglePageEditor' }"
+        type="secondary"
+      >
+        <template #icon>
+          <IconAddCircle />
+        </template>
+        {{ $t("core.common.buttons.new") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/contents/pages/SinglePageSnapshots.vue b/ui/console-src/modules/contents/pages/SinglePageSnapshots.vue
index 3db7fd4f8..d52c8521a 100644
--- a/ui/console-src/modules/contents/pages/SinglePageSnapshots.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageSnapshots.vue
@@ -8,7 +8,6 @@ import {
   VCard,
   VLoading,
   VPageHeader,
-  VSpace,
 } from "@halo-dev/components";
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useRouteQuery } from "@vueuse/router";
@@ -118,17 +117,15 @@ function handleCleanup() {
 <template>
   <VPageHeader :title="singlePage?.spec.title">
     <template #icon>
-      <IconHistoryLine class="mr-2 self-center" />
+      <IconHistoryLine />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton size="sm" @click="$router.back()">
-          {{ $t("core.common.buttons.back") }}
-        </VButton>
-        <VButton size="sm" type="danger" @click="handleCleanup">
-          {{ $t("core.page_snapshots.operations.cleanup.button") }}
-        </VButton>
-      </VSpace>
+      <VButton size="sm" @click="$router.back()">
+        {{ $t("core.common.buttons.back") }}
+      </VButton>
+      <VButton size="sm" type="danger" @click="handleCleanup">
+        {{ $t("core.page_snapshots.operations.cleanup.button") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index 49d71c642..4fdc4ddcb 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -214,24 +214,22 @@ watch(
 <template>
   <VPageHeader :title="$t('core.deleted_post.title')">
     <template #icon>
-      <IconDeleteBin class="mr-2 self-center text-green-600" />
+      <IconDeleteBin class="text-green-600" />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton :route="{ name: 'Posts' }" size="sm">
-          {{ $t("core.common.buttons.back") }}
-        </VButton>
-        <VButton
-          v-permission="['system:posts:manage']"
-          :route="{ name: 'PostEditor' }"
-          type="secondary"
-        >
-          <template #icon>
-            <IconAddCircle />
-          </template>
-          {{ $t("core.common.buttons.new") }}
-        </VButton>
-      </VSpace>
+      <VButton :route="{ name: 'Posts' }" size="sm">
+        {{ $t("core.common.buttons.back") }}
+      </VButton>
+      <VButton
+        v-permission="['system:posts:manage']"
+        :route="{ name: 'PostEditor' }"
+        type="secondary"
+      >
+        <template #icon>
+          <IconAddCircle />
+        </template>
+        {{ $t("core.common.buttons.new") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/contents/posts/PostEditor.vue b/ui/console-src/modules/contents/posts/PostEditor.vue
index c41d6936d..41fa1fc08 100644
--- a/ui/console-src/modules/contents/posts/PostEditor.vue
+++ b/ui/console-src/modules/contents/posts/PostEditor.vue
@@ -29,7 +29,6 @@ import {
   Toast,
   VButton,
   VPageHeader,
-  VSpace,
 } from "@halo-dev/components";
 import type { EditorProvider } from "@halo-dev/console-shared";
 import { useLocalStorage } from "@vueuse/core";
@@ -503,68 +502,64 @@ useSlugify(
 
   <VPageHeader :title="$t('core.post.title')">
     <template #icon>
-      <IconBookRead class="mr-2 self-center" />
+      <IconBookRead />
     </template>
     <template #actions>
-      <VSpace>
-        <EditorProviderSelector
-          v-if="editorProviders.length > 1"
-          :provider="currentEditorProvider"
-          :allow-forced-select="!isUpdateMode"
-          @select="handleChangeEditorProvider"
-        />
-        <VButton
-          v-if="isUpdateMode"
-          size="sm"
-          type="default"
-          @click="
-            $router.push({ name: 'PostSnapshots', query: { name: name } })
-          "
-        >
-          <template #icon>
-            <IconHistoryLine />
-          </template>
-          {{ $t("core.post_editor.actions.snapshots") }}
-        </VButton>
-        <VButton
-          size="sm"
-          type="default"
-          :loading="previewPending"
-          @click="handlePreview"
-        >
-          <template #icon>
-            <IconEye />
-          </template>
-          {{ $t("core.common.buttons.preview") }}
-        </VButton>
-        <VButton :loading="saving" size="sm" type="default" @click="handleSave">
-          <template #icon>
-            <IconSave />
-          </template>
-          {{ $t("core.common.buttons.save") }}
-        </VButton>
-        <VButton
-          v-if="isUpdateMode"
-          size="sm"
-          type="default"
-          @click="handleOpenSettingModal"
-        >
-          <template #icon>
-            <IconSettings />
-          </template>
-          {{ $t("core.common.buttons.setting") }}
-        </VButton>
-        <VButton
-          type="secondary"
-          :loading="publishing"
-          @click="handlePublishClick"
-        >
-          <template #icon>
-            <IconSendPlaneFill />
-          </template>
-          {{ $t("core.common.buttons.publish") }}
-        </VButton>
-      </VSpace>
+      <EditorProviderSelector
+        v-if="editorProviders.length > 1"
+        :provider="currentEditorProvider"
+        :allow-forced-select="!isUpdateMode"
+        @select="handleChangeEditorProvider"
+      />
+      <VButton
+        v-if="isUpdateMode"
+        size="sm"
+        type="default"
+        @click="$router.push({ name: 'PostSnapshots', query: { name: name } })"
+      >
+        <template #icon>
+          <IconHistoryLine />
+        </template>
+        {{ $t("core.post_editor.actions.snapshots") }}
+      </VButton>
+      <VButton
+        size="sm"
+        type="default"
+        :loading="previewPending"
+        @click="handlePreview"
+      >
+        <template #icon>
+          <IconEye />
+        </template>
+        {{ $t("core.common.buttons.preview") }}
+      </VButton>
+      <VButton :loading="saving" size="sm" type="default" @click="handleSave">
+        <template #icon>
+          <IconSave />
+        </template>
+        {{ $t("core.common.buttons.save") }}
+      </VButton>
+      <VButton
+        v-if="isUpdateMode"
+        size="sm"
+        type="default"
+        @click="handleOpenSettingModal"
+      >
+        <template #icon>
+          <IconSettings />
+        </template>
+        {{ $t("core.common.buttons.setting") }}
+      </VButton>
+      <VButton
+        type="secondary"
+        :loading="publishing"
+        @click="handlePublishClick"
+      >
+        <template #icon>
+          <IconSendPlaneFill />
+        </template>
+        {{ $t("core.common.buttons.publish") }}
+      </VButton>
     </template>
   </VPageHeader>
   <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
diff --git a/ui/console-src/modules/contents/posts/PostList.vue b/ui/console-src/modules/contents/posts/PostList.vue
index 2f2b6c110..96f4d7fa2 100644
--- a/ui/console-src/modules/contents/posts/PostList.vue
+++ b/ui/console-src/modules/contents/posts/PostList.vue
@@ -384,31 +384,29 @@ watch(
   />
   <VPageHeader :title="$t('core.post.title')">
     <template #icon>
-      <IconBookRead class="mr-2 self-center" />
+      <IconBookRead />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton :route="{ name: 'Categories' }" size="sm">
-          {{ $t("core.post.actions.categories") }}
-        </VButton>
-        <VButton :route="{ name: 'Tags' }" size="sm">
-          {{ $t("core.post.actions.tags") }}
-        </VButton>
-        <VButton :route="{ name: 'DeletedPosts' }" size="sm">
-          {{ $t("core.post.actions.recycle_bin") }}
-        </VButton>
+      <VButton :route="{ name: 'Categories' }" size="sm">
+        {{ $t("core.post.actions.categories") }}
+      </VButton>
+      <VButton :route="{ name: 'Tags' }" size="sm">
+        {{ $t("core.post.actions.tags") }}
+      </VButton>
+      <VButton :route="{ name: 'DeletedPosts' }" size="sm">
+        {{ $t("core.post.actions.recycle_bin") }}
+      </VButton>
 
-        <VButton
-          v-permission="['system:posts:manage']"
-          :route="{ name: 'PostEditor' }"
-          type="secondary"
-        >
-          <template #icon>
-            <IconAddCircle />
-          </template>
-          {{ $t("core.common.buttons.new") }}
-        </VButton>
-      </VSpace>
+      <VButton
+        v-permission="['system:posts:manage']"
+        :route="{ name: 'PostEditor' }"
+        type="secondary"
+      >
+        <template #icon>
+          <IconAddCircle />
+        </template>
+        {{ $t("core.common.buttons.new") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/contents/posts/PostSnapshots.vue b/ui/console-src/modules/contents/posts/PostSnapshots.vue
index c6478bfeb..ba10e13e5 100644
--- a/ui/console-src/modules/contents/posts/PostSnapshots.vue
+++ b/ui/console-src/modules/contents/posts/PostSnapshots.vue
@@ -10,7 +10,6 @@ import {
   VCard,
   VLoading,
   VPageHeader,
-  VSpace,
 } from "@halo-dev/components";
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useRouteQuery } from "@vueuse/router";
@@ -117,17 +116,15 @@ function handleCleanup() {
 <template>
   <VPageHeader :title="post?.spec.title">
     <template #icon>
-      <IconHistoryLine class="mr-2 self-center" />
+      <IconHistoryLine />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton size="sm" @click="$router.back()">
-          {{ $t("core.common.buttons.back") }}
-        </VButton>
-        <VButton size="sm" type="danger" @click="handleCleanup">
-          {{ $t("core.post_snapshots.operations.cleanup.button") }}
-        </VButton>
-      </VSpace>
+      <VButton size="sm" @click="$router.back()">
+        {{ $t("core.common.buttons.back") }}
+      </VButton>
+      <VButton size="sm" type="danger" @click="handleCleanup">
+        {{ $t("core.post_snapshots.operations.cleanup.button") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/contents/posts/categories/CategoryList.vue b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
index 772f1a625..4ae231b63 100644
--- a/ui/console-src/modules/contents/posts/categories/CategoryList.vue
+++ b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
@@ -64,7 +64,7 @@ async function handleUpdateInBatch() {
   <CategoryEditingModal v-if="creationModal" @close="creationModal = false" />
   <VPageHeader :title="$t('core.post_category.title')">
     <template #icon>
-      <IconBookRead class="mr-2 self-center" />
+      <IconBookRead />
     </template>
 
     <template #actions>
diff --git a/ui/console-src/modules/contents/posts/tags/TagList.vue b/ui/console-src/modules/contents/posts/tags/TagList.vue
index 6c28d52aa..7bfedbbd5 100644
--- a/ui/console-src/modules/contents/posts/tags/TagList.vue
+++ b/ui/console-src/modules/contents/posts/tags/TagList.vue
@@ -164,7 +164,7 @@ watch(selectedTagNames, (newVal) => {
   />
   <VPageHeader :title="$t('core.post_tag.title')">
     <template #icon>
-      <IconBookRead class="mr-2 self-center" />
+      <IconBookRead />
     </template>
     <template #actions>
       <VButton
diff --git a/ui/console-src/modules/dashboard/Dashboard.vue b/ui/console-src/modules/dashboard/Dashboard.vue
index fd6087b91..4257016fc 100644
--- a/ui/console-src/modules/dashboard/Dashboard.vue
+++ b/ui/console-src/modules/dashboard/Dashboard.vue
@@ -35,7 +35,7 @@ provide<ComputedRef<DashboardWidgetDefinition[]>>(
 <template>
   <VPageHeader :title="$t('core.dashboard.title')">
     <template #icon>
-      <IconDashboard class="mr-2 self-center" />
+      <IconDashboard />
     </template>
     <template #actions>
       <VButton
diff --git a/ui/console-src/modules/dashboard/DashboardDesigner.vue b/ui/console-src/modules/dashboard/DashboardDesigner.vue
index b9b5e21d2..4d2f9ffab 100644
--- a/ui/console-src/modules/dashboard/DashboardDesigner.vue
+++ b/ui/console-src/modules/dashboard/DashboardDesigner.vue
@@ -13,7 +13,6 @@ import {
   VButton,
   VDropdown,
   VDropdownItem,
-  VSpace,
   VTabbar,
 } from "@halo-dev/components";
 import type {
@@ -321,12 +320,12 @@ function handleCopyFromLayout(breakpoint: string) {
 }
 </script>
 <template>
-  <div
-    class="flex items-center justify-between bg-white px-4 py-1.5 gap-5 flex-wrap sticky top-0 z-10"
-  >
-    <h2 class="flex items-center truncate text-xl font-bold text-gray-800">
+  <div class="page-header py-1.5">
+    <h2 class="page-header__title">
       <IconDashboard class="mr-2 self-center" />
-      <span>{{ $t("core.dashboard_designer.title") }}</span>
+      <span class="page-header__title-text">
+        {{ $t("core.dashboard_designer.title") }}
+      </span>
     </h2>
     <div
       class="hidden sm:block"
@@ -339,7 +338,7 @@ function handleCopyFromLayout(breakpoint: string) {
         @change="handleBreakpointChange"
       ></VTabbar>
     </div>
-    <VSpace>
+    <div class="page-header__actions">
       <VButton ghost @click="handleBack">
         {{ $t("core.common.buttons.back") }}
       </VButton>
@@ -398,7 +397,7 @@ function handleCopyFromLayout(breakpoint: string) {
         </template>
         {{ $t("core.common.buttons.save") }}
       </VButton>
-    </VSpace>
+    </div>
   </div>
 
   <div class="dashboard m-4 transition-all" :style="designContainerStyles">
diff --git a/ui/console-src/modules/interface/menus/Menus.vue b/ui/console-src/modules/interface/menus/Menus.vue
index 89eaa51df..ea4bb45b7 100644
--- a/ui/console-src/modules/interface/menus/Menus.vue
+++ b/ui/console-src/modules/interface/menus/Menus.vue
@@ -246,7 +246,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
   />
   <VPageHeader :title="$t('core.menu.title')">
     <template #icon>
-      <IconListSettings class="mr-2 self-center" />
+      <IconListSettings />
     </template>
   </VPageHeader>
   <div class="m-0 md:m-4">
diff --git a/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue b/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
index 45155ba41..ba4cbd87f 100644
--- a/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
@@ -195,32 +195,30 @@ onMounted(() => {
   <BasicLayout>
     <VPageHeader :title="selectedTheme?.spec.displayName">
       <template #icon>
-        <IconPalette class="mr-2 self-center" />
+        <IconPalette />
       </template>
       <template #actions>
-        <VSpace>
-          <VButton
-            v-show="!isActivated"
-            v-permission="['system:themes:manage']"
-            size="sm"
-            type="primary"
-            @click="handleActiveTheme()"
-          >
-            {{ $t("core.common.buttons.activate") }}
-          </VButton>
-          <VButton type="default" size="sm" @click="previewModal = true">
-            <template #icon>
-              <IconEye />
-            </template>
-            {{ $t("core.common.buttons.preview") }}
-          </VButton>
-          <VButton type="secondary" @click="themesModal = true">
-            <template #icon>
-              <IconListSettings />
-            </template>
-            {{ $t("core.theme.actions.management") }}
-          </VButton>
-        </VSpace>
+        <VButton
+          v-show="!isActivated"
+          v-permission="['system:themes:manage']"
+          size="sm"
+          type="primary"
+          @click="handleActiveTheme()"
+        >
+          {{ $t("core.common.buttons.activate") }}
+        </VButton>
+        <VButton type="default" size="sm" @click="previewModal = true">
+          <template #icon>
+            <IconEye />
+          </template>
+          {{ $t("core.common.buttons.preview") }}
+        </VButton>
+        <VButton type="secondary" @click="themesModal = true">
+          <template #icon>
+            <IconListSettings />
+          </template>
+          {{ $t("core.theme.actions.management") }}
+        </VButton>
       </template>
     </VPageHeader>
 
diff --git a/ui/console-src/modules/system/auth-providers/AuthProviderDetail.vue b/ui/console-src/modules/system/auth-providers/AuthProviderDetail.vue
index e12214d19..5b0045974 100644
--- a/ui/console-src/modules/system/auth-providers/AuthProviderDetail.vue
+++ b/ui/console-src/modules/system/auth-providers/AuthProviderDetail.vue
@@ -166,7 +166,6 @@ const description = computed(() => {
       <VAvatar
         :src="authProvider?.spec.logo"
         :alt="authProvider?.spec.displayName"
-        class="mr-2"
         size="sm"
       />
     </template>
diff --git a/ui/console-src/modules/system/auth-providers/AuthProviders.vue b/ui/console-src/modules/system/auth-providers/AuthProviders.vue
index 050f80515..69c09504d 100644
--- a/ui/console-src/modules/system/auth-providers/AuthProviders.vue
+++ b/ui/console-src/modules/system/auth-providers/AuthProviders.vue
@@ -71,7 +71,7 @@ async function onSortUpdate() {
 <template>
   <VPageHeader :title="$t('core.identity_authentication.title')">
     <template #icon>
-      <IconLockPasswordLine class="mr-2 self-center" />
+      <IconLockPasswordLine />
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/system/backup/Backups.vue b/ui/console-src/modules/system/backup/Backups.vue
index 0eb609bb8..217a03278 100644
--- a/ui/console-src/modules/system/backup/Backups.vue
+++ b/ui/console-src/modules/system/backup/Backups.vue
@@ -63,7 +63,7 @@ onMounted(async () => {
 <template>
   <VPageHeader :title="$t('core.backup.title')">
     <template #icon>
-      <IconServerLine class="mr-2 self-center" />
+      <IconServerLine />
     </template>
     <template #actions>
       <VButton type="secondary" @click="handleCreate">
diff --git a/ui/console-src/modules/system/overview/Overview.vue b/ui/console-src/modules/system/overview/Overview.vue
index d8d0166af..6e28167e6 100644
--- a/ui/console-src/modules/system/overview/Overview.vue
+++ b/ui/console-src/modules/system/overview/Overview.vue
@@ -195,7 +195,7 @@ const handleDownloadLogfile = () => {
 <template>
   <VPageHeader :title="$t('core.overview.title')">
     <template #icon>
-      <IconTerminalBoxLine class="mr-2 self-center" />
+      <IconTerminalBoxLine />
     </template>
     <template #actions>
       <VButton size="sm" @click="handleCopy">
diff --git a/ui/console-src/modules/system/plugins/PluginDetail.vue b/ui/console-src/modules/system/plugins/PluginDetail.vue
index c12735fed..e784cf117 100644
--- a/ui/console-src/modules/system/plugins/PluginDetail.vue
+++ b/ui/console-src/modules/system/plugins/PluginDetail.vue
@@ -26,7 +26,6 @@ provide<Ref<Setting | undefined>>("setting", setting);
         v-if="plugin"
         :src="plugin.status?.logo"
         :alt="plugin.spec.displayName"
-        class="mr-2"
         size="sm"
       />
     </template>
diff --git a/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue b/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue
index 8d460a453..a79e65bda 100644
--- a/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue
+++ b/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue
@@ -48,7 +48,7 @@ watch(
 <template>
   <VPageHeader :title="$t('core.plugin.extension-settings.title')">
     <template #icon>
-      <IconSettings class="mr-2 self-center" />
+      <IconSettings />
     </template>
     <template #actions>
       <VButton size="sm" @click="$router.back()">
diff --git a/ui/console-src/modules/system/plugins/PluginList.vue b/ui/console-src/modules/system/plugins/PluginList.vue
index ebbbc5255..8a7d295e1 100644
--- a/ui/console-src/modules/system/plugins/PluginList.vue
+++ b/ui/console-src/modules/system/plugins/PluginList.vue
@@ -159,33 +159,31 @@ onMounted(() => {
 
   <VPageHeader :title="$t('core.plugin.title')">
     <template #icon>
-      <IconPlug class="mr-2 self-center" />
+      <IconPlug />
     </template>
     <template #actions>
-      <VSpace>
-        <HasPermission :permissions="['*']">
-          <VButton
-            size="sm"
-            @click="$router.push({ name: 'PluginExtensionPointSettings' })"
-          >
-            <template #icon>
-              <IconSettings />
-            </template>
-            {{ $t("core.plugin.actions.extension-point-settings") }}
-          </VButton>
-        </HasPermission>
-
+      <HasPermission :permissions="['*']">
         <VButton
-          v-permission="['system:plugins:manage']"
-          type="secondary"
-          @click="pluginInstallationModalVisible = true"
+          size="sm"
+          @click="$router.push({ name: 'PluginExtensionPointSettings' })"
         >
           <template #icon>
-            <IconAddCircle />
+            <IconSettings />
           </template>
-          {{ $t("core.common.buttons.install") }}
+          {{ $t("core.plugin.actions.extension-point-settings") }}
         </VButton>
-      </VSpace>
+      </HasPermission>
+
+      <VButton
+        v-permission="['system:plugins:manage']"
+        type="secondary"
+        @click="pluginInstallationModalVisible = true"
+      >
+        <template #icon>
+          <IconAddCircle />
+        </template>
+        {{ $t("core.common.buttons.install") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/system/roles/RoleDetail.vue b/ui/console-src/modules/system/roles/RoleDetail.vue
index 1cc46b693..8c00b83e9 100644
--- a/ui/console-src/modules/system/roles/RoleDetail.vue
+++ b/ui/console-src/modules/system/roles/RoleDetail.vue
@@ -104,7 +104,7 @@ const handleUpdateRole = async () => {
 <template>
   <VPageHeader :title="$t('core.role.detail.title')">
     <template #icon>
-      <IconShieldUser class="mr-2 self-center" />
+      <IconShieldUser />
     </template>
   </VPageHeader>
   <div class="m-0 md:m-4">
diff --git a/ui/console-src/modules/system/roles/RoleList.vue b/ui/console-src/modules/system/roles/RoleList.vue
index 5ed8edf73..2835b4f97 100644
--- a/ui/console-src/modules/system/roles/RoleList.vue
+++ b/ui/console-src/modules/system/roles/RoleList.vue
@@ -207,7 +207,7 @@ const handleDelete = async (role: Role) => {
 
   <VPageHeader :title="$t('core.role.title')">
     <template #icon>
-      <IconShieldUser class="mr-2 self-center" />
+      <IconShieldUser />
     </template>
     <template #actions>
       <VButton
diff --git a/ui/console-src/modules/system/settings/SystemSettings.vue b/ui/console-src/modules/system/settings/SystemSettings.vue
index ea4f6df81..5ad417e0a 100644
--- a/ui/console-src/modules/system/settings/SystemSettings.vue
+++ b/ui/console-src/modules/system/settings/SystemSettings.vue
@@ -80,7 +80,7 @@ provide<Ref<Setting | undefined>>("setting", setting);
 <template>
   <VPageHeader :title="$t('core.setting.title')">
     <template #icon>
-      <IconSettings class="mr-2 self-center" />
+      <IconSettings />
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/system/tools/Tools.vue b/ui/console-src/modules/system/tools/Tools.vue
index 08ac6c199..20390f42a 100644
--- a/ui/console-src/modules/system/tools/Tools.vue
+++ b/ui/console-src/modules/system/tools/Tools.vue
@@ -43,7 +43,7 @@ const routes = computed(() => {
 <template>
   <VPageHeader :title="$t('core.tool.title')">
     <template #icon>
-      <IconToolsFill class="mr-2 self-center" />
+      <IconToolsFill />
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/system/users/UserList.vue b/ui/console-src/modules/system/users/UserList.vue
index b4efac478..6e930ce2d 100644
--- a/ui/console-src/modules/system/users/UserList.vue
+++ b/ui/console-src/modules/system/users/UserList.vue
@@ -187,40 +187,38 @@ function onCreationModalClose() {
 
   <VPageHeader :title="$t('core.user.title')">
     <template #icon>
-      <IconUserSettings class="mr-2 self-center" />
+      <IconUserSettings />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton
-          v-permission="['system:roles:view']"
-          :route="{ name: 'Roles' }"
-          size="sm"
-          type="default"
-        >
+      <VButton
+        v-permission="['system:roles:view']"
+        :route="{ name: 'Roles' }"
+        size="sm"
+        type="default"
+      >
+        <template #icon>
+          <IconShieldUser />
+        </template>
+        {{ $t("core.user.actions.roles") }}
+      </VButton>
+      <HasPermission :permissions="['*']">
+        <VButton :route="{ name: 'AuthProviders' }" size="sm" type="default">
           <template #icon>
-            <IconShieldUser />
+            <IconLockPasswordLine />
           </template>
-          {{ $t("core.user.actions.roles") }}
+          {{ $t("core.user.actions.identity_authentication") }}
         </VButton>
-        <HasPermission :permissions="['*']">
-          <VButton :route="{ name: 'AuthProviders' }" size="sm" type="default">
-            <template #icon>
-              <IconLockPasswordLine />
-            </template>
-            {{ $t("core.user.actions.identity_authentication") }}
-          </VButton>
-        </HasPermission>
-        <VButton
-          v-permission="['system:users:manage']"
-          type="secondary"
-          @click="creationModal = true"
-        >
-          <template #icon>
-            <IconAddCircle />
-          </template>
-          {{ $t("core.common.buttons.new") }}
-        </VButton>
-      </VSpace>
+      </HasPermission>
+      <VButton
+        v-permission="['system:users:manage']"
+        type="secondary"
+        @click="creationModal = true"
+      >
+        <template #icon>
+          <IconAddCircle />
+        </template>
+        {{ $t("core.common.buttons.new") }}
+      </VButton>
     </template>
   </VPageHeader>
 
diff --git a/ui/packages/components/src/components/header/PageHeader.vue b/ui/packages/components/src/components/header/PageHeader.vue
index 1af92fd3f..e58a092b4 100644
--- a/ui/packages/components/src/components/header/PageHeader.vue
+++ b/ui/packages/components/src/components/header/PageHeader.vue
@@ -4,15 +4,53 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="flex items-center justify-between bg-white p-4 h-14">
-    <div class="min-w-0 flex-1 self-center">
-      <h2 class="flex items-center truncate text-xl font-bold text-gray-800">
-        <slot name="icon" />
-        <span>{{ title }}</span>
-      </h2>
-    </div>
-    <div class="self-center">
+  <div class="page-header">
+    <h2 class="page-header__title">
+      <slot name="icon" />
+      <span class="page-header__title-text">{{ title }}</span>
+    </h2>
+    <div class="page-header__actions">
       <slot name="actions" />
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 3.5rem;
+  background-color: theme("colors.white");
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  flex-wrap: wrap;
+  gap: theme("spacing.2");
+
+  &__title {
+    display: flex;
+    align-items: center;
+    text-overflow: truncate;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: theme("colors.gray.800");
+    gap: theme("spacing.2");
+  }
+
+  &__title-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: theme("spacing.2");
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/ui/src/components/dropdown-selector/EditorProviderSelector.vue b/ui/src/components/dropdown-selector/EditorProviderSelector.vue
index 35e6afd63..222a698f7 100644
--- a/ui/src/components/dropdown-selector/EditorProviderSelector.vue
+++ b/ui/src/components/dropdown-selector/EditorProviderSelector.vue
@@ -34,7 +34,9 @@ fetchEditorProviders();
       class="group flex w-full cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
     >
       <VAvatar v-if="provider?.logo" :src="provider.logo" size="xs"></VAvatar>
-      <div class="select-none text-sm text-gray-600 group-hover:text-gray-900">
+      <div
+        class="select-none text-sm text-gray-600 group-hover:text-gray-900 whitespace-nowrap"
+      >
         {{ provider?.displayName }}
       </div>
       <IconExchange class="h-4 w-4 text-gray-600 group-hover:text-gray-900" />
diff --git a/ui/uc-src/modules/contents/posts/PostEditor.vue b/ui/uc-src/modules/contents/posts/PostEditor.vue
index c8253c617..1b51ec530 100644
--- a/ui/uc-src/modules/contents/posts/PostEditor.vue
+++ b/ui/uc-src/modules/contents/posts/PostEditor.vue
@@ -22,7 +22,6 @@ import {
   Toast,
   VButton,
   VPageHeader,
-  VSpace,
 } from "@halo-dev/components";
 import type { EditorProvider } from "@halo-dev/console-shared";
 import { useMutation } from "@tanstack/vue-query";
@@ -467,51 +466,49 @@ useSlugify(
 <template>
   <VPageHeader :title="$t('core.post.title')">
     <template #icon>
-      <IconBookRead class="mr-2 self-center" />
+      <IconBookRead />
     </template>
     <template #actions>
-      <VSpace>
-        <EditorProviderSelector
-          v-if="editorProviders.length > 1"
-          :provider="currentEditorProvider"
-          :allow-forced-select="!isUpdateMode"
-          @select="handleChangeEditorProvider"
-        />
+      <EditorProviderSelector
+        v-if="editorProviders.length > 1"
+        :provider="currentEditorProvider"
+        :allow-forced-select="!isUpdateMode"
+        @select="handleChangeEditorProvider"
+      />
+      <VButton
+        size="sm"
+        type="default"
+        :loading="isSaving && !isPublishing"
+        @click="handleSaveClick"
+      >
+        <template #icon>
+          <IconSave />
+        </template>
+        {{ $t("core.common.buttons.save") }}
+      </VButton>
+      <VButton
+        v-if="isUpdateMode"
+        size="sm"
+        type="default"
+        @click="handleOpenPostSettingEditModal"
+      >
+        <template #icon>
+          <IconSettings />
+        </template>
+        {{ $t("core.common.buttons.setting") }}
+      </VButton>
+      <HasPermission :permissions="['uc:posts:publish']">
         <VButton
-          size="sm"
-          type="default"
-          :loading="isSaving && !isPublishing"
-          @click="handleSaveClick"
+          :loading="isPublishing"
+          type="secondary"
+          @click="handlePublishClick"
         >
           <template #icon>
-            <IconSave />
+            <IconSendPlaneFill />
           </template>
-          {{ $t("core.common.buttons.save") }}
+          {{ $t("core.common.buttons.publish") }}
         </VButton>
-        <VButton
-          v-if="isUpdateMode"
-          size="sm"
-          type="default"
-          @click="handleOpenPostSettingEditModal"
-        >
-          <template #icon>
-            <IconSettings />
-          </template>
-          {{ $t("core.common.buttons.setting") }}
-        </VButton>
-        <HasPermission :permissions="['uc:posts:publish']">
-          <VButton
-            :loading="isPublishing"
-            type="secondary"
-            @click="handlePublishClick"
-          >
-            <template #icon>
-              <IconSendPlaneFill />
-            </template>
-            {{ $t("core.common.buttons.publish") }}
-          </VButton>
-        </HasPermission>
-      </VSpace>
+      </HasPermission>
     </template>
   </VPageHeader>
   <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
diff --git a/ui/uc-src/modules/contents/posts/PostList.vue b/ui/uc-src/modules/contents/posts/PostList.vue
index c23c74062..a5b54dbd3 100644
--- a/ui/uc-src/modules/contents/posts/PostList.vue
+++ b/ui/uc-src/modules/contents/posts/PostList.vue
@@ -104,7 +104,7 @@ const {
 <template>
   <VPageHeader :title="$t('core.uc_post.title')">
     <template #icon>
-      <IconBookRead class="mr-2 self-center" />
+      <IconBookRead />
     </template>
     <template #actions>
       <VButton :route="{ name: 'PostEditor' }" type="secondary">
diff --git a/ui/uc-src/modules/notifications/Notifications.vue b/ui/uc-src/modules/notifications/Notifications.vue
index 3924a928a..55a722342 100644
--- a/ui/uc-src/modules/notifications/Notifications.vue
+++ b/ui/uc-src/modules/notifications/Notifications.vue
@@ -131,7 +131,7 @@ function handleMarkAllAsRead() {
 <template>
   <VPageHeader :title="$t('core.uc_notification.title')">
     <template #icon>
-      <IconNotificationBadgeLine class="mr-2 self-center" />
+      <IconNotificationBadgeLine />
     </template>
   </VPageHeader>
   <div class="m-0 md:m-4">