From ad16c4d4adb4bca5d63135f2357d7d3902b145e9 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Wed, 7 May 2025 15:22:08 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20ToolHeader.vue?=
 =?UTF-8?q?=20=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: dhb52 <dhb52@126.com>
---
 src/layout/components/ToolHeader.vue | 63 +++++++++++++++-------------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index 276eed1bb..8160e28c8 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -51,6 +51,39 @@ const hasTenantVisitPermission = computed(
 export default defineComponent({
   name: 'ToolHeader',
   setup() {
+    const renderLeftSection = () => {
+      if (layout.value === 'top') return null
+      
+      return (
+        <div class="h-full flex items-center">
+          {hamburger.value && layout.value !== 'cutMenu' && (
+            <Collapse class="custom-hover" color="var(--top-header-text-color)" />
+          )}
+          {breadcrumb.value && <Breadcrumb class="lt-md:hidden" />}
+        </div>
+      )
+    }
+
+    const renderRightSection = () => (
+      <div class="h-full flex items-center">
+        {hasTenantVisitPermission.value && <TenantVisit />}
+        {screenfull.value && (
+          <Screenfull class="custom-hover" color="var(--top-header-text-color)" />
+        )}
+        {search.value && <RouterSearch isModal={false} />}
+        {size.value && (
+          <SizeDropdown class="custom-hover" color="var(--top-header-text-color)" />
+        )}
+        {locale.value && (
+          <LocaleDropdown class="custom-hover" color="var(--top-header-text-color)" />
+        )}
+        {message.value && (
+          <Message class="custom-hover" color="var(--top-header-text-color)" />
+        )}
+        <UserInfo />
+      </div>
+    )
+
     return () => (
       <div
         id={`${variables.namespace}-tool-header`}
@@ -60,34 +93,8 @@ export default defineComponent({
           'dark:bg-[var(--el-bg-color)]'
         ]}
       >
-        {layout.value !== 'top' ? (
-          <div class="h-full flex items-center">
-            {hamburger.value && layout.value !== 'cutMenu' ? (
-              <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
-            ) : undefined}
-            {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
-          </div>
-        ) : undefined}
-        <div class="h-full flex items-center">
-          {hasTenantVisitPermission.value ? <TenantVisit /> : undefined}
-          {screenfull.value ? (
-            <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
-          ) : undefined}
-          {search.value ? <RouterSearch isModal={false} /> : undefined}
-          {size.value ? (
-            <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
-          ) : undefined}
-          {locale.value ? (
-            <LocaleDropdown
-              class="custom-hover"
-              color="var(--top-header-text-color)"
-            ></LocaleDropdown>
-          ) : undefined}
-          {message.value ? (
-            <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
-          ) : undefined}
-          <UserInfo></UserInfo>
-        </div>
+        {renderLeftSection()}
+        {renderRightSection()}
       </div>
     )
   }
-- 
Gitee