refactor: adapt page header styles for responsive design (#7544)

#### 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 优化移动端下文章编辑页面的样式 ```
2025-06-13 14:06:42 +08:00 · 2025-06-13 14:06:42 +08:00 · d39a571e46
parent 016d4cd94b
commit d39a571e46
33 changed files with 392 additions and 388 deletions
--- a/ui/console-src/modules/contents/attachments/AttachmentList.vue
+++ b/ui/console-src/modules/contents/attachments/AttachmentList.vue
@ -250,10 +250,9 @@ 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"
@ -274,7 +273,6 @@ watch(
        </template>
        {{ $t("core.common.buttons.upload") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>

--- 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>

--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@ -204,10 +204,9 @@ 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>
@ -221,7 +220,6 @@ watch(
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>
  <div class="m-0 md:m-4">
--- 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,10 +463,9 @@ 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"
@ -528,7 +526,6 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
        </template>
        {{ $t("core.common.buttons.publish") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>
  <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
--- a/ui/console-src/modules/contents/pages/SinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageList.vue
@ -281,10 +281,9 @@ 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' }"
@ -302,7 +301,6 @@ watch(selectedPageNames, (newValue) => {
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>

--- 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>
    </template>
  </VPageHeader>

--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@ -214,10 +214,9 @@ 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>
@ -231,7 +230,6 @@ watch(
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>

--- 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,10 +502,9 @@ 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"
@ -517,9 +515,7 @@ useSlugify(
        v-if="isUpdateMode"
        size="sm"
        type="default"
-          @click="
-            $router.push({ name: 'PostSnapshots', query: { name: name } })
-          "
+        @click="$router.push({ name: 'PostSnapshots', query: { name: name } })"
      >
        <template #icon>
          <IconHistoryLine />
@ -564,7 +560,6 @@ useSlugify(
        </template>
        {{ $t("core.common.buttons.publish") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>
  <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
--- a/ui/console-src/modules/contents/posts/PostList.vue
+++ b/ui/console-src/modules/contents/posts/PostList.vue
@ -384,10 +384,9 @@ 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>
@ -408,7 +407,6 @@ watch(
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>

--- 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>
    </template>
  </VPageHeader>

--- 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>
--- 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
--- 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
--- 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">
--- 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">
--- a/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
@ -195,10 +195,9 @@ 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']"
@ -220,7 +219,6 @@ onMounted(() => {
          </template>
          {{ $t("core.theme.actions.management") }}
        </VButton>
-        </VSpace>
      </template>
    </VPageHeader>

--- 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>
--- 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>

--- 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">
--- 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">
--- 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>
--- 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()">
--- a/ui/console-src/modules/system/plugins/PluginList.vue
+++ b/ui/console-src/modules/system/plugins/PluginList.vue
@ -159,10 +159,9 @@ 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"
@ -185,7 +184,6 @@ onMounted(() => {
        </template>
        {{ $t("core.common.buttons.install") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>

--- 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">
--- 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
--- 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>

--- 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>

--- a/ui/console-src/modules/system/users/UserList.vue
+++ b/ui/console-src/modules/system/users/UserList.vue
@ -187,10 +187,9 @@ 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' }"
@ -220,7 +219,6 @@ function onCreationModalClose() {
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
-      </VSpace>
    </template>
  </VPageHeader>

--- 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">
+  <div class="page-header">
+    <h2 class="page-header__title">
      <slot name="icon" />
-        <span>{{ title }}</span>
+      <span class="page-header__title-text">{{ title }}</span>
    </h2>
-    </div>
-    <div class="self-center">
+    <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>
--- 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" />
--- 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,10 +466,9 @@ 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"
@ -511,7 +509,6 @@ useSlugify(
          {{ $t("core.common.buttons.publish") }}
        </VButton>
      </HasPermission>
-      </VSpace>
    </template>
  </VPageHeader>
  <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
--- 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">
--- 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">