| 提交 | 用户 | 时间 | ||
| 37b204 | 1 | <script lang="tsx"> |
| H | 2 | import { defineComponent, computed } from 'vue' |
| 3 | import { Message } from '@/layout/components//Message' | |
| 4 | import { Collapse } from '@/layout/components/Collapse' | |
| 5 | import { UserInfo } from '@/layout/components/UserInfo' | |
| 6 | import { Screenfull } from '@/layout/components/Screenfull' | |
| 7 | import { Breadcrumb } from '@/layout/components/Breadcrumb' | |
| 8 | import { SizeDropdown } from '@/layout/components/SizeDropdown' | |
| 9 | import { LocaleDropdown } from '@/layout/components/LocaleDropdown' | |
| 10 | import RouterSearch from '@/components/RouterSearch/index.vue' | |
| 11 | import { useAppStore } from '@/store/modules/app' | |
| 12 | import { useDesign } from '@/hooks/web/useDesign' | |
| 13 | ||
| 14 | const { getPrefixCls, variables } = useDesign() | |
| 15 | ||
| 16 | const prefixCls = getPrefixCls('tool-header') | |
| 17 | ||
| 18 | const appStore = useAppStore() | |
| 19 | ||
| 20 | // 面包屑 | |
| 21 | const breadcrumb = computed(() => appStore.getBreadcrumb) | |
| 22 | ||
| 23 | // 折叠图标 | |
| 24 | const hamburger = computed(() => appStore.getHamburger) | |
| 25 | ||
| 26 | // 全屏图标 | |
| 27 | const screenfull = computed(() => appStore.getScreenfull) | |
| 28 | ||
| 29 | // 搜索图片 | |
| 30 | const search = computed(() => appStore.search) | |
| 31 | ||
| 32 | // 尺寸图标 | |
| 33 | const size = computed(() => appStore.getSize) | |
| 34 | ||
| 35 | // 布局 | |
| 36 | const layout = computed(() => appStore.getLayout) | |
| 37 | ||
| 38 | // 多语言图标 | |
| 39 | const locale = computed(() => appStore.getLocale) | |
| 40 | ||
| 41 | // 消息图标 | |
| 42 | const message = computed(() => appStore.getMessage) | |
| 43 | ||
| 44 | export default defineComponent({ | |
| 45 | name: 'ToolHeader', | |
| 46 | setup() { | |
| 47 | return () => ( | |
| 48 | <div | |
| 49 | id={`${variables.namespace}-tool-header`} | |
| 50 | class={[ | |
| 51 | prefixCls, | |
| 52 | 'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between', | |
| 53 | 'dark:bg-[var(--el-bg-color)]' | |
| 54 | ]} | |
| 55 | > | |
| 56 | {layout.value !== 'top' ? ( | |
| 57 | <div class="h-full flex items-center"> | |
| 58 | {hamburger.value && layout.value !== 'cutMenu' ? ( | |
| 59 | <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse> | |
| 60 | ) : undefined} | |
| 61 | {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined} | |
| 62 | </div> | |
| 63 | ) : undefined} | |
| 64 | <div class="h-full flex items-center"> | |
| 65 | {screenfull.value ? ( | |
| 66 | <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull> | |
| 67 | ) : undefined} | |
| 68 | {search.value ? <RouterSearch isModal={false} /> : undefined} | |
| 69 | {size.value ? ( | |
| 70 | <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown> | |
| 71 | ) : undefined} | |
| 72 | {locale.value ? ( | |
| 73 | <LocaleDropdown | |
| 74 | class="custom-hover" | |
| 75 | color="var(--top-header-text-color)" | |
| 76 | ></LocaleDropdown> | |
| 77 | ) : undefined} | |
| 78 | {message.value ? ( | |
| 79 | <Message class="custom-hover" color="var(--top-header-text-color)"></Message> | |
| 80 | ) : undefined} | |
| 81 | <UserInfo></UserInfo> | |
| 82 | </div> | |
| 83 | </div> | |
| 84 | ) | |
| 85 | } | |
| 86 | }) | |
| 87 | </script> | |
| 88 | ||
| 89 | <style lang="scss" scoped> | |
| 90 | $prefix-cls: #{$namespace}-tool-header; | |
| 91 | ||
| 92 | .#{$prefix-cls} { | |
| 93 | transition: left var(--transition-time-02); | |
| 94 | } | |
| 95 | </style> | |
