Pre Merge pull request !772 from dhb52/N/A

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' ? (
+        {renderLeftSection()}
-          <div class="h-full flex items-center">
+        {renderRightSection()}
-            {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>
       </div>
     )
   }