ToolHeader.vue 2.8 KB

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