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

     1  import { computed } from 'vue'
     2  import { useAppStore } from '@/store/modules/app'
     3  import { Menu } from '@/components/Menu'
     4  import { TabMenu } from '@/components/TabMenu'
     5  import { TagsView } from '@/components/TagsView'
     6  import { Logo } from '@/components/Logo'
     7  import AppView from './AppView.vue'
     8  import ToolHeader from './ToolHeader.vue'
     9  import { ElScrollbar } from 'element-plus'
    10  import { useDesign } from '@/hooks/web/useDesign'
    11  import AppViewLanding from "@/layout/components/AppViewLanding.vue";
    12  import AppViewDashboard from "@/layout/components/AppViewDashboard.vue";
    13  
    14  const { getPrefixCls } = useDesign()
    15  
    16  const prefixCls = getPrefixCls('layout')
    17  
    18  const appStore = useAppStore()
    19  
    20  const pageLoading = computed(() => appStore.getPageLoading)
    21  
    22  // 标签页
    23  const tagsView = computed(() => appStore.getTagsView)
    24  
    25  // 菜单折叠
    26  const collapse = computed(() => appStore.getCollapse)
    27  
    28  // logo
    29  const logo = computed(() => appStore.logo)
    30  
    31  // 固定头部
    32  const fixedHeader = computed(() => appStore.getFixedHeader)
    33  
    34  // 是否是移动端
    35  const mobile = computed(() => appStore.getMobile)
    36  
    37  // 固定菜单
    38  const fixedMenu = computed(() => appStore.getFixedMenu)
    39  
    40  export const useRenderLayout = (isDevelop: boolean) => {
    41    const renderClassic = () => {
    42      return (
    43        <>
    44          <div class={['absolute top-0 left-0 h-full', { '!fixed z-3000': mobile.value }]}>
    45            {logo.value ? (
    46              <Logo
    47                class={[
    48                  'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)] dark:border-[var(--el-border-color)]',
    49                  {
    50                    '!pl-0': mobile.value && collapse.value,
    51                    'w-[var(--left-menu-min-width)]': appStore.getCollapse,
    52                    'w-[var(--left-menu-max-width)]': !appStore.getCollapse
    53                  }
    54                ]}
    55                style="transition: all var(--transition-time-02);"
    56              ></Logo>
    57            ) : undefined}
    58            <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]} v-model:isDevelop={isDevelop}></Menu>
    59          </div>
    60          <div
    61            class={[
    62              `${prefixCls}-content`,
    63              'absolute top-0 h-[100%]',
    64              {
    65                'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
    66                  collapse.value && !mobile.value && !mobile.value,
    67                'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
    68                  !collapse.value && !mobile.value && !mobile.value,
    69                'fixed !w-full !left-0': mobile.value
    70              }
    71            ]}
    72            style="transition: all var(--transition-time-02);"
    73          >
    74            <ElScrollbar
    75              v-loading={pageLoading.value}
    76              class={[
    77                `${prefixCls}-content-scrollbar`,
    78                {
    79                  '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
    80                    fixedHeader.value
    81                }
    82              ]}
    83            >
    84              <div
    85                class={[
    86                  {
    87                    'fixed top-0 left-0 z-10': fixedHeader.value,
    88                    'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
    89                      collapse.value && fixedHeader.value && !mobile.value,
    90                    'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
    91                      !collapse.value && fixedHeader.value && !mobile.value,
    92                    '!w-full !left-0': mobile.value
    93                  }
    94                ]}
    95                style="transition: all var(--transition-time-02);"
    96              >
    97                <ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
    98  
    99                {tagsView.value && isDevelop ? (
   100                  <TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
   101                ) : undefined}
   102              </div>
   103  
   104              <AppView></AppView>
   105            </ElScrollbar>
   106          </div>
   107        </>
   108      )
   109    }
   110  
   111    const renderDashboard = () => {
   112      return (
   113        <>
   114          <div class={['absolute top-0 left-0 h-full', { '!fixed z-3000': mobile.value }]}>
   115            {logo.value ? (
   116              <Logo
   117                class={[
   118                  'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)] dark:border-[var(--el-border-color)]',
   119                  {
   120                    '!pl-0': mobile.value && collapse.value,
   121                    'w-[var(--left-menu-min-width)]': appStore.getCollapse,
   122                    'w-[var(--left-menu-max-width)]': !appStore.getCollapse
   123                  }
   124                ]}
   125                style="transition: all var(--transition-time-02);"
   126              ></Logo>
   127            ) : undefined}
   128            <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]} v-model:isDevelop={isDevelop}></Menu>
   129          </div>
   130          <div
   131            class={[
   132              `${prefixCls}-content`,
   133              'absolute top-0 h-[100%]',
   134              {
   135                'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
   136                  collapse.value && !mobile.value && !mobile.value,
   137                'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
   138                  !collapse.value && !mobile.value && !mobile.value,
   139                'fixed !w-full !left-0': mobile.value
   140              }
   141            ]}
   142            style="transition: all var(--transition-time-02);"
   143          >
   144            <ElScrollbar
   145              v-loading={pageLoading.value}
   146              class={[
   147                `${prefixCls}-content-scrollbar`,
   148                {
   149                  '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
   150                  fixedHeader.value
   151                }
   152              ]}
   153            >
   154              <div
   155                class={[
   156                  {
   157                    'fixed top-0 left-0 z-10': fixedHeader.value,
   158                    'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
   159                      collapse.value && fixedHeader.value && !mobile.value,
   160                    'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
   161                      !collapse.value && fixedHeader.value && !mobile.value,
   162                    '!w-full !left-0': mobile.value
   163                  }
   164                ]}
   165                style="transition: all var(--transition-time-02);"
   166              >
   167                <ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
   168  
   169                {tagsView.value && isDevelop ? (
   170                  <TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
   171                ) : undefined}
   172              </div>
   173  
   174              <AppViewDashboard></AppViewDashboard>
   175            </ElScrollbar>
   176          </div>
   177        </>
   178      )
   179    }
   180  
   181    const renderLanding = () => {
   182      return (
   183        <>
   184  
   185          <div
   186            class={[
   187              `${prefixCls}-content`,
   188              'absolute top-0 h-[100%]',
   189              {
   190  
   191                'fixed !w-full !left-0': true
   192              }
   193            ]}
   194            style="transition: all var(--transition-time-02);"
   195          >
   196            <ElScrollbar
   197              v-loading={pageLoading.value}
   198              class={[
   199                `${prefixCls}-content-scrollbar`,
   200  
   201              ]}
   202            >
   203              <div
   204                class={[
   205                  {
   206                    '!w-full !left-0': true
   207                  }
   208                ]}
   209                style="transition: all var(--transition-time-02);"
   210              >
   211  
   212              </div>
   213  
   214              <AppViewLanding></AppViewLanding>
   215            </ElScrollbar>
   216          </div>
   217        </>
   218      )
   219    }
   220  
   221    const renderTopLeft = () => {
   222      return (
   223        <>
   224          <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
   225            {logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
   226  
   227            <ToolHeader class="flex-1"></ToolHeader>
   228          </div>
   229          <div class="absolute top-[var(--logo-height)+1px] left-0 w-full h-[calc(100%-1px-var(--logo-height))] flex">
   230            <Menu class="!h-full"></Menu>
   231            <div
   232              class={[
   233                `${prefixCls}-content`,
   234                'h-[100%]',
   235                {
   236                  'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
   237                    collapse.value,
   238                  'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
   239                    !collapse.value
   240                }
   241              ]}
   242              style="transition: all var(--transition-time-02);"
   243            >
   244              <ElScrollbar
   245                v-loading={pageLoading.value}
   246                class={[
   247                  `${prefixCls}-content-scrollbar`,
   248                  {
   249                    '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
   250                      fixedHeader.value && tagsView.value
   251                  }
   252                ]}
   253              >
   254                {tagsView.value ? (
   255                  <TagsView
   256                    class={[
   257                      'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
   258                      {
   259                        '!fixed top-0 left-0 z-10': fixedHeader.value,
   260                        'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
   261                          collapse.value && fixedHeader.value,
   262                        'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
   263                          !collapse.value && fixedHeader.value
   264                      }
   265                    ]}
   266                    style="transition: width var(--transition-time-02), left var(--transition-time-02);"
   267                  ></TagsView>
   268                ) : undefined}
   269  
   270                <AppView></AppView>
   271              </ElScrollbar>
   272            </div>
   273          </div>
   274        </>
   275      )
   276    }
   277  
   278    const renderTop = () => {
   279      return (
   280        <>
   281          <div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
   282            {logo.value ? <Logo class="hover-trigger"></Logo> : undefined}
   283            <Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
   284            <ToolHeader></ToolHeader>
   285          </div>
   286          <div class={[`${prefixCls}-content`, 'h-full w-full']}>
   287            <ElScrollbar
   288              v-loading={pageLoading.value}
   289              class={[
   290                `${prefixCls}-content-scrollbar`,
   291                {
   292                  'mt-[var(--tags-view-height)] !pb-[calc(var(--tags-view-height)+var(--app-footer-height))]':
   293                    fixedHeader.value,
   294                  'pb-[var(--app-footer-height)]': !fixedHeader.value
   295                }
   296              ]}
   297            >
   298              {tagsView.value ? (
   299                <TagsView
   300                  class={[
   301                    'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
   302                    {
   303                      '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
   304                    }
   305                  ]}
   306                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
   307                ></TagsView>
   308              ) : undefined}
   309  
   310              <AppView></AppView>
   311            </ElScrollbar>
   312          </div>
   313        </>
   314      )
   315    }
   316  
   317    const renderCutMenu = () => {
   318      return (
   319        <>
   320          <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
   321            {logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
   322  
   323            <ToolHeader class="flex-1"></ToolHeader>
   324          </div>
   325          <div class="absolute top-[var(--logo-height)] left-0 w-full h-[calc(100%-var(--logo-height))] flex">
   326            <TabMenu></TabMenu>
   327            <div
   328              class={[
   329                `${prefixCls}-content`,
   330                'h-[100%]',
   331                {
   332                  'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
   333                    collapse.value && !fixedMenu.value,
   334                  'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
   335                    !collapse.value && !fixedMenu.value,
   336                  'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
   337                    collapse.value && fixedMenu.value,
   338                  'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
   339                    !collapse.value && fixedMenu.value
   340                }
   341              ]}
   342              style="transition: all var(--transition-time-02);"
   343            >
   344              <ElScrollbar
   345                v-loading={pageLoading.value}
   346                class={[
   347                  `${prefixCls}-content-scrollbar`,
   348                  {
   349                    '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
   350                      fixedHeader.value && tagsView.value
   351                  }
   352                ]}
   353              >
   354                {tagsView.value ? (
   355                  <TagsView
   356                    class={[
   357                      'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
   358                      {
   359                        '!fixed top-0 left-0 z-10': fixedHeader.value,
   360                        'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
   361                          collapse.value && fixedHeader.value,
   362                        'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
   363                          !collapse.value && fixedHeader.value,
   364                        '!fixed top-0 left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10':
   365                          fixedHeader.value && fixedMenu.value,
   366                        'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
   367                          collapse.value && fixedHeader.value && fixedMenu.value,
   368                        'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] left-[var(--tab-menu-max-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
   369                          !collapse.value && fixedHeader.value && fixedMenu.value
   370                      }
   371                    ]}
   372                    style="transition: width var(--transition-time-02), left var(--transition-time-02);"
   373                  ></TagsView>
   374                ) : undefined}
   375  
   376                <AppView></AppView>
   377              </ElScrollbar>
   378            </div>
   379          </div>
   380        </>
   381      )
   382    }
   383  
   384    return {
   385      renderClassic,
   386      renderDashboard,
   387      renderLanding,
   388      renderTopLeft,
   389      renderTop,
   390      renderCutMenu
   391    }
   392  }