|
@@ -11,6 +11,8 @@ import RouterSearch from '@/components/RouterSearch/index.vue'
|
|
import { useAppStore } from '@/store/modules/app'
|
|
import { useAppStore } from '@/store/modules/app'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
|
|
|
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
|
+
|
|
const { getPrefixCls, variables } = useDesign()
|
|
const { getPrefixCls, variables } = useDesign()
|
|
|
|
|
|
const prefixCls = getPrefixCls('tool-header')
|
|
const prefixCls = getPrefixCls('tool-header')
|
|
@@ -44,44 +46,52 @@ const message = computed(() => appStore.getMessage)
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'ToolHeader',
|
|
name: 'ToolHeader',
|
|
setup() {
|
|
setup() {
|
|
- return () => (
|
|
|
|
- <div
|
|
|
|
- id={`${variables.namespace}-tool-header`}
|
|
|
|
- class={[
|
|
|
|
- prefixCls,
|
|
|
|
- 'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
|
|
|
|
- 'dark:bg-[var(--el-bg-color)]'
|
|
|
|
- ]}
|
|
|
|
- >
|
|
|
|
- {layout.value !== 'top' ? (
|
|
|
|
|
|
+ const { currentRoute } = useRouter()
|
|
|
|
+ const isTopologyRoute = false && /^\/topology/.test(currentRoute?.value?.path || '')
|
|
|
|
+
|
|
|
|
+ if (!isTopologyRoute) {
|
|
|
|
+ return () => (
|
|
|
|
+ <div
|
|
|
|
+ id={`${variables.namespace}-tool-header`}
|
|
|
|
+ class={[
|
|
|
|
+ prefixCls,
|
|
|
|
+ 'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
|
|
|
|
+ '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">
|
|
<div class="h-full flex items-center">
|
|
- {hamburger.value && layout.value !== 'cutMenu' ? (
|
|
|
|
- <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
|
|
|
|
|
|
+ {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}
|
|
) : undefined}
|
|
- {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
|
|
|
|
|
|
+ {message.value ? (
|
|
|
|
+ <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
|
|
|
|
+ ) : undefined}
|
|
|
|
+ <UserInfo></UserInfo>
|
|
</div>
|
|
</div>
|
|
- ) : undefined}
|
|
|
|
- <div class="h-full flex items-center">
|
|
|
|
- {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>
|
|
- </div>
|
|
|
|
- )
|
|
|
|
|
|
+ )
|
|
|
|
+ }
|
|
}
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|