72 lines
2.1 KiB
Vue
72 lines
2.1 KiB
Vue
<script lang="tsx">
|
|
import { defineComponent, computed } from 'vue'
|
|
import { Collapse } from '@/components/Collapse'
|
|
import { LocaleDropdown } from '@/components/LocaleDropdown'
|
|
import { SizeDropdown } from '@/components/SizeDropdown'
|
|
import { UserInfo } from '@/components/UserInfo'
|
|
import { Screenfull } from '@/components/Screenfull'
|
|
import { Breadcrumb } from '@/components/Breadcrumb'
|
|
import { useAppStore } from '@/store/modules/app'
|
|
|
|
const appStore = useAppStore()
|
|
|
|
// 面包屑
|
|
const breadcrumb = computed(() => appStore.getBreadcrumb)
|
|
|
|
// 折叠图标
|
|
const hamburger = computed(() => appStore.getHamburger)
|
|
|
|
// 全屏图标
|
|
const screenfull = computed(() => appStore.getScreenfull)
|
|
|
|
// 尺寸图标
|
|
const size = computed(() => appStore.getSize)
|
|
|
|
// 多语言图标
|
|
const locale = computed(() => appStore.getLocale)
|
|
|
|
export default defineComponent({
|
|
name: 'ToolHeader',
|
|
setup() {
|
|
return () => (
|
|
<div
|
|
class={[
|
|
'v-tool-header',
|
|
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
|
|
]}
|
|
>
|
|
<div class="h-full flex items-center">
|
|
{hamburger.value ? (
|
|
<Collapse class="hover-tigger" color="var(--top-header-text-color)"></Collapse>
|
|
) : undefined}
|
|
{breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
|
|
</div>
|
|
<div class="h-full flex items-center">
|
|
{screenfull.value ? (
|
|
<Screenfull class="hover-tigger" color="var(--top-header-text-color)"></Screenfull>
|
|
) : undefined}
|
|
{size.value ? (
|
|
<SizeDropdown class="hover-tigger" color="var(--top-header-text-color)"></SizeDropdown>
|
|
) : undefined}
|
|
{locale.value ? (
|
|
<LocaleDropdown
|
|
class="hover-tigger"
|
|
color="var(--top-header-text-color)"
|
|
></LocaleDropdown>
|
|
) : undefined}
|
|
<UserInfo class="hover-tigger"></UserInfo>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@prefix-cls: ~'@{namespace}-tool-header';
|
|
|
|
.@{prefix-cls} {
|
|
transition: left var(--transition-time-02);
|
|
}
|
|
</style>
|