refactor: 重构 ToolHeader.vue 代码

Signed-off-by: dhb52 <dhb52@126.com>
pull/772/head
dhb52 2025-05-07 15:22:08 +00:00 committed by Gitee
parent d72946100a
commit ad16c4d4ad
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 35 additions and 28 deletions

View File

@ -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>
)
}