| 提交 | 用户 | 时间 | ||
| 820397 | 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> | |
| 3e359e | 129 | <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex"> |
| 820397 | 130 | <Menu class="relative layout-border__right !h-full"></Menu> |
| H | 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, | |
| 3e359e | 160 | 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]': |
| 820397 | 161 | collapse.value && fixedHeader.value, |
| 3e359e | 162 | 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]': |
| 820397 | 163 | !collapse.value && fixedHeader.value |
| H | 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> | |
| 3e359e | 193 | <div class={[`${prefixCls}-content`, 'w-full h-[calc(100%-var(--top-tool-height))]']}> |
| 820397 | 194 | <ElScrollbar |
| H | 195 | v-loading={pageLoading.value} |
| 196 | class={[ | |
| 197 | `${prefixCls}-content-scrollbar`, | |
| 198 | { | |
| 3e359e | 199 | '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]': |
| H | 200 | fixedHeader.value |
| 820397 | 201 | } |
| H | 202 | ]} |
| 203 | > | |
| 204 | {tagsView.value ? ( | |
| 205 | <TagsView | |
| 206 | class={[ | |
| 207 | 'layout-border__bottom layout-border__top relative', | |
| 208 | { | |
| 3e359e | 209 | '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value |
| 820397 | 210 | } |
| H | 211 | ]} |
| 212 | style="transition: width var(--transition-time-02), left var(--transition-time-02);" | |
| 213 | ></TagsView> | |
| 214 | ) : undefined} | |
| 215 | ||
| 216 | <AppView></AppView> | |
| 217 | </ElScrollbar> | |
| 218 | </div> | |
| 219 | </> | |
| 220 | ) | |
| 221 | } | |
| 222 | ||
| 223 | const renderCutMenu = () => { | |
| 224 | return ( | |
| 225 | <> | |
| 226 | <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom"> | |
| 227 | {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined} | |
| 228 | ||
| 229 | <ToolHeader class="flex-1"></ToolHeader> | |
| 230 | </div> | |
| 3e359e | 231 | <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex"> |
| 820397 | 232 | <TabMenu></TabMenu> |
| H | 233 | <div |
| 234 | class={[ | |
| 235 | `${prefixCls}-content`, | |
| 236 | 'h-[100%]', | |
| 237 | { | |
| 238 | 'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]': | |
| 239 | collapse.value && !fixedMenu.value, | |
| 240 | 'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]': | |
| 241 | !collapse.value && !fixedMenu.value, | |
| 242 | 'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]': | |
| 243 | collapse.value && fixedMenu.value, | |
| 244 | 'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]': | |
| 245 | !collapse.value && fixedMenu.value | |
| 246 | } | |
| 247 | ]} | |
| 248 | style="transition: all var(--transition-time-02);" | |
| 249 | > | |
| 250 | <ElScrollbar | |
| 251 | v-loading={pageLoading.value} | |
| 252 | class={[ | |
| 253 | `${prefixCls}-content-scrollbar`, | |
| 254 | { | |
| 255 | '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]': | |
| 256 | fixedHeader.value && tagsView.value | |
| 257 | } | |
| 258 | ]} | |
| 259 | > | |
| 260 | {tagsView.value ? ( | |
| 261 | <TagsView | |
| 262 | class={[ | |
| 3e359e | 263 | 'relative layout-border__bottom', |
| 820397 | 264 | { |
| H | 265 | '!fixed top-0 left-0 z-10': fixedHeader.value, |
| 266 | 'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]': | |
| 3e359e | 267 | collapse.value && fixedHeader.value && !fixedMenu.value, |
| 820397 | 268 | 'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]': |
| 3e359e | 269 | !collapse.value && fixedHeader.value && !fixedMenu.value, |
| H | 270 | '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)]': |
| 820397 | 271 | collapse.value && fixedHeader.value && fixedMenu.value, |
| 3e359e | 272 | '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)]': |
| 820397 | 273 | !collapse.value && fixedHeader.value && fixedMenu.value |
| H | 274 | } |
| 275 | ]} | |
| 276 | style="transition: width var(--transition-time-02), left var(--transition-time-02);" | |
| 277 | ></TagsView> | |
| 278 | ) : undefined} | |
| 279 | ||
| 280 | <AppView></AppView> | |
| 281 | </ElScrollbar> | |
| 282 | </div> | |
| 283 | </div> | |
| 284 | </> | |
| 285 | ) | |
| 286 | } | |
| 287 | ||
| 288 | return { | |
| 289 | renderClassic, | |
| 290 | renderTopLeft, | |
| 291 | renderTop, | |
| 292 | renderCutMenu | |
| 293 | } | |
| 294 | } | |
