| 提交 | 用户 | 时间 | ||
| 23db5e | 1 | import { computed } from 'vue' |
| H | 2 | import { useAppStore } from '@/store/modules/app' |
| 3 | import { Menu } from '@/layout/components/Menu' | |
| 4 | import { TabMenu } from '@/layout/components/TabMenu' | |
| 5 | import { TagsView } from '@/layout/components/TagsView' | |
| 6 | import { Logo } from '@/layout/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 | ||
| 12 | const { getPrefixCls } = useDesign() | |
| 13 | ||
| 14 | const prefixCls = getPrefixCls('layout') | |
| 15 | ||
| 16 | const appStore = useAppStore() | |
| 17 | ||
| 18 | const pageLoading = computed(() => appStore.getPageLoading) | |
| 19 | ||
| 20 | // 标签页 | |
| 21 | const tagsView = computed(() => appStore.getTagsView) | |
| 22 | ||
| 23 | // 菜单折叠 | |
| 24 | const collapse = computed(() => appStore.getCollapse) | |
| 25 | ||
| 26 | // logo | |
| 27 | const logo = computed(() => appStore.logo) | |
| 28 | ||
| 29 | // 固定头部 | |
| 30 | const fixedHeader = computed(() => appStore.getFixedHeader) | |
| 31 | ||
| 32 | // 是否是移动端 | |
| 33 | const mobile = computed(() => appStore.getMobile) | |
| 34 | ||
| 35 | // 固定菜单 | |
| 36 | const fixedMenu = computed(() => appStore.getFixedMenu) | |
| 37 | ||
| 38 | export const useRenderLayout = () => { | |
| 39 | const renderClassic = () => { | |
| 40 | return ( | |
| 41 | <> | |
| 42 | <div | |
| 43 | class={[ | |
| 44 | 'absolute top-0 left-0 h-full layout-border__right', | |
| 45 | { '!fixed z-3000': mobile.value } | |
| 46 | ]} | |
| 47 | > | |
| 48 | {logo.value ? ( | |
| 49 | <Logo | |
| 50 | class={[ | |
| 51 | 'bg-[var(--left-menu-bg-color)] relative', | |
| 52 | { | |
| 53 | '!pl-0': mobile.value && collapse.value, | |
| 54 | 'w-[var(--left-menu-min-width)]': appStore.getCollapse, | |
| 55 | 'w-[var(--left-menu-max-width)]': !appStore.getCollapse | |
| 56 | } | |
| 57 | ]} | |
| 58 | style="transition: all var(--transition-time-02);" | |
| 59 | ></Logo> | |
| 60 | ) : undefined} | |
| 61 | <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu> | |
| 62 | </div> | |
| 63 | <div | |
| 64 | class={[ | |
| 65 | `${prefixCls}-content`, | |
| 66 | 'absolute top-0 h-[100%]', | |
| 67 | { | |
| 68 | 'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]': | |
| 69 | collapse.value && !mobile.value && !mobile.value, | |
| 70 | 'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]': | |
| 71 | !collapse.value && !mobile.value && !mobile.value, | |
| 72 | 'fixed !w-full !left-0': mobile.value | |
| 73 | } | |
| 74 | ]} | |
| 75 | style="transition: all var(--transition-time-02);" | |
| 76 | > | |
| 77 | <ElScrollbar | |
| 78 | v-loading={pageLoading.value} | |
| 79 | class={[ | |
| 80 | `${prefixCls}-content-scrollbar`, | |
| 81 | { | |
| 82 | '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]': | |
| 83 | fixedHeader.value | |
| 84 | } | |
| 85 | ]} | |
| 86 | > | |
| 87 | <div | |
| 88 | class={[ | |
| 89 | { | |
| 90 | 'fixed top-0 left-0 z-10': fixedHeader.value, | |
| 91 | 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]': | |
| 92 | collapse.value && fixedHeader.value && !mobile.value, | |
| 93 | 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]': | |
| 94 | !collapse.value && fixedHeader.value && !mobile.value, | |
| 95 | '!w-full !left-0': mobile.value | |
| 96 | } | |
| 97 | ]} | |
| 98 | style="transition: all var(--transition-time-02);" | |
| 99 | > | |
| 100 | <ToolHeader | |
| 101 | class={[ | |
| 102 | 'bg-[var(--top-header-bg-color)]', | |
| 103 | { | |
| 104 | 'layout-border__bottom': !tagsView.value | |
| 105 | } | |
| 106 | ]} | |
| 107 | ></ToolHeader> | |
| 108 | ||
| 109 | {tagsView.value ? ( | |
| 110 | <TagsView class="layout-border__top layout-border__bottom"></TagsView> | |
| 111 | ) : undefined} | |
| 112 | </div> | |
| 113 | ||
| 114 | <AppView></AppView> | |
| 115 | </ElScrollbar> | |
| 116 | </div> | |
| 117 | </> | |
| 118 | ) | |
| 119 | } | |
| 120 | ||
| 121 | const renderTopLeft = () => { | |
| 122 | return ( | |
| 123 | <> | |
| 124 | <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]"> | |
| 125 | {logo.value ? <Logo class="custom-hover"></Logo> : undefined} | |
| 126 | ||
| 127 | <ToolHeader class="flex-1"></ToolHeader> | |
| 128 | </div> | |
| 129 | <div class="absolute left-0 top-[var(--logo-height)+1px] h-[calc(100%-1px-var(--logo-height))] w-full flex"> | |
| 130 | <Menu class="relative layout-border__right !h-full"></Menu> | |
| 131 | <div | |
| 132 | class={[ | |
| 133 | `${prefixCls}-content`, | |
| 134 | 'h-[100%]', | |
| 135 | { | |
| 136 | 'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]': | |
| 137 | collapse.value, | |
| 138 | 'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]': | |
| 139 | !collapse.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(--tags-view-height))] mt-[calc(var(--tags-view-height))]': | |
| 150 | fixedHeader.value && tagsView.value | |
| 151 | } | |
| 152 | ]} | |
| 153 | > | |
| 154 | {tagsView.value ? ( | |
| 155 | <TagsView | |
| 156 | class={[ | |
| 157 | 'layout-border__bottom absolute', | |
| 158 | { | |
| 159 | '!fixed top-0 left-0 z-10': fixedHeader.value, | |
| 160 | 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[calc(var(--logo-height)+1px)]': | |
| 161 | collapse.value && fixedHeader.value, | |
| 162 | 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[calc(var(--logo-height)+1px)]': | |
| 163 | !collapse.value && fixedHeader.value | |
| 164 | } | |
| 165 | ]} | |
| 166 | style="transition: width var(--transition-time-02), left var(--transition-time-02);" | |
| 167 | ></TagsView> | |
| 168 | ) : undefined} | |
| 169 | ||
| 170 | <AppView></AppView> | |
| 171 | </ElScrollbar> | |
| 172 | </div> | |
| 173 | </div> | |
| 174 | </> | |
| 175 | ) | |
| 176 | } | |
| 177 | ||
| 178 | const renderTop = () => { | |
| 179 | return ( | |
| 180 | <> | |
| 181 | <div | |
| 182 | class={[ | |
| 183 | 'flex items-center justify-between bg-[var(--top-header-bg-color)] relative', | |
| 184 | { | |
| 185 | 'layout-border__bottom': !tagsView.value | |
| 186 | } | |
| 187 | ]} | |
| 188 | > | |
| 189 | {logo.value ? <Logo class="custom-hover"></Logo> : undefined} | |
| 190 | <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu> | |
| 191 | <ToolHeader></ToolHeader> | |
| 192 | </div> | |
| 193 | <div | |
| 194 | class={[ | |
| 195 | `${prefixCls}-content`, | |
| 196 | 'w-full', | |
| 197 | { | |
| 198 | 'h-[calc(100%-var(--app-footer-height))]': !fixedHeader.value, | |
| 199 | 'h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]': fixedHeader.value | |
| 200 | } | |
| 201 | ]} | |
| 202 | > | |
| 203 | <ElScrollbar | |
| 204 | v-loading={pageLoading.value} | |
| 205 | class={[ | |
| 206 | `${prefixCls}-content-scrollbar`, | |
| 207 | { | |
| 208 | 'mt-[var(--tags-view-height)] !pb-[calc(var(--tags-view-height)+var(--app-footer-height))]': | |
| 209 | fixedHeader.value, | |
| 210 | 'pb-[var(--app-footer-height)]': !fixedHeader.value | |
| 211 | } | |
| 212 | ]} | |
| 213 | > | |
| 214 | {tagsView.value ? ( | |
| 215 | <TagsView | |
| 216 | class={[ | |
| 217 | 'layout-border__bottom layout-border__top relative', | |
| 218 | { | |
| 219 | '!fixed w-full top-[calc(var(--top-tool-height)+1px)] left-0': fixedHeader.value | |
| 220 | } | |
| 221 | ]} | |
| 222 | style="transition: width var(--transition-time-02), left var(--transition-time-02);" | |
| 223 | ></TagsView> | |
| 224 | ) : undefined} | |
| 225 | ||
| 226 | <AppView></AppView> | |
| 227 | </ElScrollbar> | |
| 228 | </div> | |
| 229 | </> | |
| 230 | ) | |
| 231 | } | |
| 232 | ||
| 233 | const renderCutMenu = () => { | |
| 234 | return ( | |
| 235 | <> | |
| 236 | <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom"> | |
| 237 | {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined} | |
| 238 | ||
| 239 | <ToolHeader class="flex-1"></ToolHeader> | |
| 240 | </div> | |
| 241 | <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex"> | |
| 242 | <TabMenu></TabMenu> | |
| 243 | <div | |
| 244 | class={[ | |
| 245 | `${prefixCls}-content`, | |
| 246 | 'h-[100%]', | |
| 247 | { | |
| 248 | 'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]': | |
| 249 | collapse.value && !fixedMenu.value, | |
| 250 | 'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]': | |
| 251 | !collapse.value && !fixedMenu.value, | |
| 252 | 'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]': | |
| 253 | collapse.value && fixedMenu.value, | |
| 254 | 'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]': | |
| 255 | !collapse.value && fixedMenu.value | |
| 256 | } | |
| 257 | ]} | |
| 258 | style="transition: all var(--transition-time-02);" | |
| 259 | > | |
| 260 | <ElScrollbar | |
| 261 | v-loading={pageLoading.value} | |
| 262 | class={[ | |
| 263 | `${prefixCls}-content-scrollbar`, | |
| 264 | { | |
| 265 | '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]': | |
| 266 | fixedHeader.value && tagsView.value | |
| 267 | } | |
| 268 | ]} | |
| 269 | > | |
| 270 | {tagsView.value ? ( | |
| 271 | <TagsView | |
| 272 | class={[ | |
| 273 | 'relative layout-border__bottom layout-border__top', | |
| 274 | { | |
| 275 | '!fixed top-0 left-0 z-10': fixedHeader.value, | |
| 276 | 'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]': | |
| 277 | collapse.value && fixedHeader.value, | |
| 278 | 'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]': | |
| 279 | !collapse.value && fixedHeader.value, | |
| 280 | '!fixed top-0 !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10': | |
| 281 | fixedHeader.value && fixedMenu.value, | |
| 282 | '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)]': | |
| 283 | collapse.value && fixedHeader.value && fixedMenu.value, | |
| 284 | '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)]': | |
| 285 | !collapse.value && fixedHeader.value && fixedMenu.value | |
| 286 | } | |
| 287 | ]} | |
| 288 | style="transition: width var(--transition-time-02), left var(--transition-time-02);" | |
| 289 | ></TagsView> | |
| 290 | ) : undefined} | |
| 291 | ||
| 292 | <AppView></AppView> | |
| 293 | </ElScrollbar> | |
| 294 | </div> | |
| 295 | </div> | |
| 296 | </> | |
| 297 | ) | |
| 298 | } | |
| 299 | ||
| 300 | return { | |
| 301 | renderClassic, | |
| 302 | renderTopLeft, | |
| 303 | renderTop, | |
| 304 | renderCutMenu | |
| 305 | } | |
| 306 | } | |
