github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/layout/Develop.vue (about)

     1  <script lang="tsx">
     2  import { computed, defineComponent, unref } from 'vue'
     3  import { useAppStore } from '@/store/modules/app'
     4  import { Backtop } from '@/components/Backtop'
     5  import { Setting } from '@/components/Setting'
     6  import { useRenderLayout } from './components/useRenderLayout'
     7  import { useDesign } from '@/hooks/web/useDesign'
     8  
     9  const { getPrefixCls } = useDesign()
    10  
    11  const prefixCls = getPrefixCls('layout')
    12  
    13  const appStore = useAppStore()
    14  
    15  // 是否是移动端
    16  const mobile = computed(() => appStore.getMobile)
    17  
    18  // 菜单折叠
    19  const collapse = computed(() => appStore.getCollapse)
    20  
    21  const layout = computed(() => appStore.getLayout)
    22  
    23  const handleClickOutside = () => {
    24    appStore.setCollapse(true)
    25  }
    26  
    27  const renderLayout = () => {
    28    switch (unref(layout)) {
    29      case 'classic':
    30        const { renderClassic } = useRenderLayout(true)
    31        return renderClassic()
    32      case 'topLeft':
    33        const { renderTopLeft } = useRenderLayout(true)
    34        return renderTopLeft()
    35      case 'top':
    36        const { renderTop } = useRenderLayout(true)
    37        return renderTop()
    38      case 'cutMenu':
    39        const { renderCutMenu } = useRenderLayout(true)
    40        return renderCutMenu()
    41      default:
    42        break
    43    }
    44  }
    45  
    46  export default defineComponent({
    47    name: 'Develop',
    48    setup() {
    49      return () => (
    50        <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
    51          {mobile.value && !collapse.value ? (
    52            <div
    53              class="absolute top-0 left-0 w-full h-full opacity-30 z-99 bg-[var(--el-color-black)]"
    54              onClick={handleClickOutside}
    55            ></div>
    56          ) : undefined}
    57  
    58          {renderLayout()}
    59  
    60          <Backtop></Backtop>
    61  
    62          <Setting></Setting>
    63  
    64        </section>
    65      )
    66    }
    67  })
    68  </script>
    69  
    70  <style lang="less" scoped>
    71  @prefix-cls: ~'@{namespace}-layout';
    72  
    73  .@{prefix-cls} {
    74    background-color: var(--app-content-bg-color);
    75    :deep(.@{elNamespace}-scrollbar__view) {
    76      height: 100% !important;
    77    }
    78  }
    79  </style>