github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/layout/Dashboard.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    const { renderDashboard } = useRenderLayout(false)
    29    return renderDashboard()
    30  }
    31  
    32  export default defineComponent({
    33    name: 'Dashboard',
    34    setup() {
    35      return () => (
    36        <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
    37          {mobile.value && !collapse.value ? (
    38            <div
    39              class="absolute top-0 left-0 w-full h-full opacity-30 z-99 bg-[var(--el-color-black)]"
    40              onClick={handleClickOutside}
    41            ></div>
    42          ) : undefined}
    43  
    44          {renderLayout()}
    45  
    46          <Backtop></Backtop>
    47  
    48          <Setting></Setting>
    49  
    50        </section>
    51      )
    52    }
    53  })
    54  </script>
    55  
    56  <style lang="less" scoped>
    57  @prefix-cls: ~'@{namespace}-layout';
    58  
    59  .@{prefix-cls} {
    60    background-color: var(--app-content-bg-color);
    61    :deep(.@{elNamespace}-scrollbar__view) {
    62      height: 100% !important;
    63    }
    64  }
    65  </style>