布局整合

src/layout/components/useRenderLayout.tsx

@@ -297,10 +297,78 @@ export const useRenderLayout = () => {
     )
   }
 
+    const NewTopLeft = () => {
+      return (
+        <>
+          <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
+            {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
+
+            <ToolHeader class="flex-1"></ToolHeader>
+          </div>
+          <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex">
+            <TabMenu></TabMenu>
+            <div
+              class={[
+                `${prefixCls}-content`,
+                'h-[100%]',
+                {
+                  'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
+                    collapse.value && !fixedMenu.value,
+                  'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
+                    !collapse.value && !fixedMenu.value,
+                  'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
+                    collapse.value && fixedMenu.value,
+                  'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
+                    !collapse.value && fixedMenu.value
+                }
+              ]}
+              style="transition: all var(--transition-time-02);"
+            >
+              <ElScrollbar
+                v-loading={pageLoading.value}
+                class={[
+                  `${prefixCls}-content-scrollbar`,
+                  {
+                    '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                      fixedHeader.value && tagsView.value
+                  }
+                ]}
+              >
+                {tagsView.value ? (
+                  <TagsView
+                    class={[
+                      'relative layout-border__bottom layout-border__top',
+                      {
+                        '!fixed top-0 left-0 z-10': fixedHeader.value,
+                        'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
+                          collapse.value && fixedHeader.value,
+                        'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
+                          !collapse.value && fixedHeader.value,
+                        '!fixed top-0 !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10':
+                          fixedHeader.value && fixedMenu.value,
+                        '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)]':
+                          collapse.value && fixedHeader.value && fixedMenu.value,
+                        '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)]':
+                          !collapse.value && fixedHeader.value && fixedMenu.value
+                      }
+                    ]}
+                    style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+                  ></TagsView>
+                ) : undefined}
+
+                <AppView></AppView>
+              </ElScrollbar>
+            </div>
+          </div>
+        </>
+      )
+    }
+
   return {
     renderClassic,
     renderTopLeft,
     renderTop,
-    renderCutMenu
+    renderCutMenu,
+    NewTopLeft
   }
 }