pms-iot-vue/src/layout/components/useRenderLayout.tsx

import { computed } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { Menu } from '@/layout/components/Menu'
import { TabMenu } from '@/layout/components/TabMenu'
import { TagsView } from '@/layout/components/TagsView'
import { Logo } from '@/layout/components/Logo'
import AppView from './AppView.vue'
import ToolHeader from './ToolHeader.vue'
import { ElScrollbar } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { getCurrentSource } from '@/utils/currentSource'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('layout')

const appStore = useAppStore()

const pageLoading = computed(() => appStore.getPageLoading)
const tagsView = computed(() => appStore.getTagsView)
const collapse = computed(() => appStore.getCollapse)
const logo = computed(() => appStore.logo)
const fixedHeader = computed(() => appStore.getFixedHeader)
const mobile = computed(() => appStore.getMobile)
const fixedMenu = computed(() => appStore.getFixedMenu)
const hideLeftMenu = computed(() => getCurrentSource() === 'qhse')
const hideTopHeader = computed(() => getCurrentSource() === 'qhse')

export const useRenderLayout = () => {
  const renderClassic = () => {
    return (
      <>
        {!hideLeftMenu.value ? (
          <div
            class={[
              'absolute top-0 left-0 z-20 h-full layout-border__right',
              { '!fixed z-3000': mobile.value }
            ]}>
            {logo.value ? (
              <Logo
                class={[
                  'bg-[var(--left-menu-bg-color)] relative',
                  {
                    '!pl-0': mobile.value && collapse.value,
                    'w-[var(--left-menu-min-width)]': appStore.getCollapse,
                    'w-[var(--left-menu-max-width)]': !appStore.getCollapse
                  }
                ]}
                style="transition: all var(--transition-time-02);"></Logo>
            ) : undefined}
            <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
          </div>
        ) : undefined}
        <div
          class={[
            `${prefixCls}-content`,
            'absolute top-0 h-[100%]',
            {
              'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
                !hideLeftMenu.value && collapse.value && !mobile.value,
              'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
                !hideLeftMenu.value && !collapse.value && !mobile.value,
              'w-full left-0': hideLeftMenu.value,
              'fixed !w-full !left-0': mobile.value
            }
          ]}
          style="transition: all var(--transition-time-02);">
          <ElScrollbar
            v-loading={pageLoading.value}
            class={[
              `${prefixCls}-content-scrollbar`,
              {
                '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
                  fixedHeader.value && !hideTopHeader.value,
                '!h-[calc(100%-var(--tags-view-height))] mt-0':
                  fixedHeader.value && hideTopHeader.value
              }
            ]}>
            {!hideTopHeader.value ? (
              <div
                class={[
                  {
                    'fixed top-0 left-0 z-10': fixedHeader.value,
                    'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
                      !hideLeftMenu.value && collapse.value && fixedHeader.value && !mobile.value,
                    'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
                      !hideLeftMenu.value && !collapse.value && fixedHeader.value && !mobile.value,
                    '!w-full !left-0': hideLeftMenu.value || mobile.value
                  }
                ]}
                style="transition: all var(--transition-time-02);">
                <ToolHeader
                  class={[
                    'bg-[var(--top-header-bg-color)]',
                    {
                      'layout-border__bottom': !tagsView.value
                    }
                  ]}></ToolHeader>

                {!hideTopHeader.value && tagsView.value ? (
                  <TagsView class="layout-border__top layout-border__bottom"></TagsView>
                ) : undefined}
              </div>
            ) : undefined}

            <AppView></AppView>
          </ElScrollbar>
        </div>
      </>
    )
  }

  const renderTopLeft = () => {
    return (
      <>
        {!hideTopHeader.value ? (
          <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
            {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
            <ToolHeader class="flex-1"></ToolHeader>
          </div>
        ) : undefined}
        <div
          class={[
            'absolute left-0 w-full flex',
            hideTopHeader.value
              ? 'top-0 h-full'
              : 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
          ]}>
          {!hideLeftMenu.value ? (
            <Menu class="relative layout-border__right !h-full"></Menu>
          ) : undefined}
          <div
            class={[
              `${prefixCls}-content`,
              'h-[100%]',
              {
                'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
                  !hideLeftMenu.value && collapse.value,
                'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
                  !hideLeftMenu.value && !collapse.value,
                'w-full left-0': hideLeftMenu.value
              }
            ]}
            style="transition: all var(--transition-time-02);">
            <ElScrollbar
              v-loading={pageLoading.value}
              class={[
                `${prefixCls}-content-scrollbar`,
                {
                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
                    fixedHeader.value && tagsView.value && !hideTopHeader.value,
                  '!h-[calc(100%)] mt-0': fixedHeader.value && hideTopHeader.value
                }
              ]}>
              {!hideTopHeader.value && tagsView.value ? (
                <TagsView
                  class={[
                    'layout-border__bottom absolute',
                    {
                      '!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
                      'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
                        !hideLeftMenu.value &&
                        collapse.value &&
                        fixedHeader.value &&
                        !hideTopHeader.value,
                      'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
                        !hideLeftMenu.value &&
                        !collapse.value &&
                        fixedHeader.value &&
                        !hideTopHeader.value,
                      '!w-full !left-0': hideLeftMenu.value || hideTopHeader.value
                    }
                  ]}
                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
              ) : undefined}

              <AppView></AppView>
            </ElScrollbar>
          </div>
        </div>
      </>
    )
  }

  const renderTop = () => {
    return (
      <>
        {!hideTopHeader.value ? (
          <div
            class={[
              'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
              {
                'layout-border__bottom': !tagsView.value
              }
            ]}>
            {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
            <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
            <ToolHeader></ToolHeader>
          </div>
        ) : undefined}
        <div
          class={[
            `${prefixCls}-content`,
            hideTopHeader.value ? 'w-full h-full' : 'w-full h-[calc(100%-var(--top-tool-height))]'
          ]}>
          <ElScrollbar
            v-loading={pageLoading.value}
            class={[
              `${prefixCls}-content-scrollbar`,
              {
                '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
                  fixedHeader.value && tagsView.value && !hideTopHeader.value,
                '!h-full mt-0': hideTopHeader.value
              }
            ]}>
            {!hideTopHeader.value && tagsView.value ? (
              <TagsView
                class={[
                  'layout-border__bottom layout-border__top relative',
                  {
                    '!fixed w-full top-[var(--top-tool-height)] left-0':
                      fixedHeader.value && !hideTopHeader.value,
                    '!fixed w-full top-0 left-0': hideTopHeader.value
                  }
                ]}
                style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
            ) : undefined}

            <AppView></AppView>
          </ElScrollbar>
        </div>
      </>
    )
  }

  const renderCutMenu = () => {
    return (
      <>
        {!hideTopHeader.value ? (
          <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
            {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
            <ToolHeader class="flex-1"></ToolHeader>
          </div>
        ) : undefined}
        <div
          class={[
            'absolute left-0 w-full flex',
            hideTopHeader.value
              ? 'top-0 h-full'
              : 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
          ]}>
          {!hideLeftMenu.value ? <TabMenu></TabMenu> : undefined}
          <div
            class={[
              `${prefixCls}-content`,
              'h-[100%]',
              {
                'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
                  !hideLeftMenu.value && collapse.value && !fixedMenu.value,
                'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
                  !hideLeftMenu.value && !collapse.value && !fixedMenu.value,
                'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
                  !hideLeftMenu.value && collapse.value && fixedMenu.value,
                'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
                  !hideLeftMenu.value && !collapse.value && fixedMenu.value,
                'w-full left-0': hideLeftMenu.value
              }
            ]}
            style="transition: all var(--transition-time-02);">
            <ElScrollbar
              v-loading={pageLoading.value}
              class={[
                `${prefixCls}-content-scrollbar`,
                {
                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
                    fixedHeader.value && tagsView.value && !hideTopHeader.value,
                  '!h-full mt-0': hideTopHeader.value
                }
              ]}>
              {!hideTopHeader.value && tagsView.value ? (
                <TagsView
                  class={[
                    'relative layout-border__bottom',
                    {
                      '!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
                      '!fixed top-0 left-0 z-10 w-full': hideTopHeader.value,
                      'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
                        !hideLeftMenu.value &&
                        collapse.value &&
                        fixedHeader.value &&
                        !fixedMenu.value &&
                        !hideTopHeader.value,
                      'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
                        !hideLeftMenu.value &&
                        !collapse.value &&
                        fixedHeader.value &&
                        !fixedMenu.value &&
                        !hideTopHeader.value,
                      'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-min-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
                        !hideLeftMenu.value &&
                        collapse.value &&
                        fixedHeader.value &&
                        fixedMenu.value &&
                        !hideTopHeader.value,
                      'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-max-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
                        !hideLeftMenu.value &&
                        !collapse.value &&
                        fixedHeader.value &&
                        fixedMenu.value &&
                        !hideTopHeader.value
                    }
                  ]}
                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
              ) : undefined}

              <AppView></AppView>
            </ElScrollbar>
          </div>
        </div>
      </>
    )
  }

  return {
    renderClassic,
    renderTopLeft,
    renderTop,
    renderCutMenu
  }
}