新布局完成

src/layout/Layout.vue

@@ -38,6 +38,9 @@ const renderLayout = () => {
     case 'cutMenu':
       const { renderCutMenu } = useRenderLayout()
       return renderCutMenu()
+    case 'leftTop':
+      const { NewTopLeft } = useRenderLayout()
+      return NewTopLeft()
     default:
       break
   }

src/layout/components/AppView.vue

@@ -40,14 +40,14 @@ provide('reload', reload)
       {
         '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
           (fixedHeader &&
-            (layout === 'classic' || layout === 'topLeft' || layout === 'top') &&
+            (layout === 'classic' || layout === 'topLeft' || layout === 'top'|| layout === 'leftTop') &&
             footer) ||
           (!tagsView && layout === 'top' && footer),
         '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
           tagsView && layout === 'top' && footer,
 
         '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
-          !fixedHeader && layout === 'classic' && footer,
+          !fixedHeader && (layout === 'classic'|| layout === 'leftTop') && footer,
 
         '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
           !fixedHeader && layout === 'topLeft' && footer,

src/layout/components/Logo/src/Logo.vue

@@ -75,7 +75,7 @@ watch(
         :class="[
           'ml-10px text-16px font-700',
           {
-            'text-[var(--logo-title-text-color)]': layout === 'classic',
+            'text-[var(--logo-title-text-color)]': layout === 'classic' || layout === 'leftTop',
             'text-[var(--top-header-text-color)]':
               layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
           }

src/layout/components/Menu/src/Menu.vue

@@ -32,7 +32,7 @@ export default defineComponent({
 
     const menuMode = computed((): 'vertical' | 'horizontal' => {
       // 竖
-      const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu']
+      const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu', 'leftTop']
 
       if (vertical.includes(unref(layout))) {
         return 'vertical'
@@ -42,7 +42,7 @@ export default defineComponent({
     })
 
     const routers = computed(() =>
-      unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
+      (unref(layout) === 'cutMenu' || unref(layout) === 'leftTop') ? permissionStore.getMenuTabRouters : permissionStore.getRouters
     )
 
     const collapse = computed(() => appStore.getCollapse)

src/layout/components/Setting/src/components/LayoutRadioPicker.vue

@@ -30,10 +30,10 @@ const layout = computed(() => appStore.getLayout)
         `${prefixCls}__top-left`,
         'relative w-56px h-48px cursor-pointer bg-gray-300',
         {
-          'is-acitve': layout === 'topLeft'
+          'is-acitve': layout === 'leftTop'
         }
       ]"
-      @click="appStore.setLayout('topLeft')"
+      @click="appStore.setLayout('leftTop')"
     ></div>
     <div
       :class="[

src/layout/components/TabMenu/index.ts

@@ -1,3 +1,5 @@
 import TabMenu from './src/TabMenu.vue'
+import TabMenu2 from './src/TabMenu2.vue'
 
 export { TabMenu }
+export { TabMenu2 }

src/layout/components/TabMenu/src/TabMenu2.vue

@@ -57,6 +57,7 @@ export default defineComponent({
           )
         }
       }
+      appStore.setCollapse(true)
     })
 
     watch(
@@ -102,10 +103,13 @@ export default defineComponent({
       const oldPath = unref(tabActive)
       tabActive.value = item.children ? item.path : item.path.split('/')[0]
       if (item.children) {
+        if (unref(collapse)){
+          appStore.setCollapse(false)
+        }
         if (newPath === oldPath || !unref(showMenu)) {
           showMenu.value = unref(fixedMenu) ? true : !unref(showMenu)
         }
-        if (unref(showMenu)) {
+        if (unref(showMenu)&&newPath) {
           permissionStore.setMenuTabRouters(
             cloneDeep(item.children).map((v) => {
               v.path = pathResolve(unref(tabActive), v.path)
@@ -115,7 +119,7 @@ export default defineComponent({
         }
       } else {
         push(item.path)
-        permissionStore.setMenuTabRouters([])
+        if (unref(collapse))permissionStore.setMenuTabRouters([])
         showMenu.value = false
       }
     }
@@ -139,7 +143,7 @@ export default defineComponent({
         id={`${variables.namespace}-menu`}
         class={[
           prefixCls,
-          'relative bg-[var(--left-menu-bg-color)] top-1px layout-border__right',
+          'relative dark:bg-[var(--el-bg-color)] flex flex-row flex-grow-1 pl-[1%]',
           {
             'w-[var(--tab-menu-max-width)]': !unref(collapse),
             'w-[var(--tab-menu-min-width)]': unref(collapse)
@@ -148,7 +152,7 @@ export default defineComponent({
         onMouseleave={mouseleave}
       >
         <ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height)-1px)]">
-          <div>
+          <div class="flex flex-row">
             {() => {
               return unref(tabRouters).map((v) => {
                 const item = (
@@ -163,52 +167,37 @@ export default defineComponent({
                   <div
                     class={[
                       `${prefixCls}__item`,
-                      'text-center text-12px relative py-12px cursor-pointer',
+                      'h-[100%] text-center text-14px relative cursor-pointer flex-grow pl-15px pr-15px',
-                      {
+                      'whitespace-nowrap overflow-hidden',
-                        'is-active': isActive(v.path)
-                      }
                     ]}
+                    style={['color: var(--top-header-text-color)', 'height: 50px']}
                     onClick={() => {
                       tabClick(item)
                     }}
                   >
-                    <div>
+                    <div class="flex items-center justify-center">
-                      <Icon icon={item?.meta?.icon}></Icon>
+                      <Icon class="mb-1px icon-class"
+                            icon={item?.meta?.icon}
+                      />
+                      <p class="mr-3px mt-13px break-words px-2px "
+                      >{t(item.meta?.title)}</p>
+                      <span
+                        class={{'is-active': isActive(v.path)}}
+                        style={['height: 3px','width: 100%','position: absolute','bottom: 1px']}
+                      />
                     </div>
-                    {!unref(showTitle) ? undefined : (
-                      <p class="mt-5px break-words px-2px">{t(item.meta?.title)}</p>
-                    )}
                   </div>
                 )
               })
             }}
           </div>
         </ElScrollbar>
-        <div
-          class={[
-            `${prefixCls}--collapse`,
-            'text-center h-[var(--tab-menu-collapse-height)] leading-[var(--tab-menu-collapse-height)] cursor-pointer'
-          ]}
-          onClick={setCollapse}
-        >
-          <Icon icon={unref(collapse) ? 'ep:d-arrow-right' : 'ep:d-arrow-left'}></Icon>
-        </div>
-        <Menu
-          class={[
-            '!absolute top-0 z-11',
-            {
-              '!left-[var(--tab-menu-min-width)]': unref(collapse),
-              '!left-[var(--tab-menu-max-width)]': !unref(collapse),
-              '!w-[calc(var(--left-menu-max-width)+1px)]': unref(showMenu) || unref(fixedMenu),
-              '!w-0': !unref(showMenu) && !unref(fixedMenu)
-            }
-          ]}
-          style="transition: width var(--transition-time-02), left var(--transition-time-02);"
-        ></Menu>
       </div>
     )
   }
 })
+// {!unref(showTitle) ? undefined : (
+// )}
 </script>
 
 <style lang="scss" scoped>
@@ -223,7 +212,7 @@ $prefix-cls: #{$namespace}-tab-menu;
 
     &:hover {
       color: var(--left-menu-text-active-color);
-      // background-color: var(--left-menu-bg-active-color);
+       background-color: var(--left-menu-bg-active-color);
     }
   }
 
@@ -236,5 +225,16 @@ $prefix-cls: #{$namespace}-tab-menu;
     color: var(--left-menu-text-active-color);
     background-color: var(--left-menu-bg-active-color);
   }
+  .is-hover {
+    color: var(--left-menu-text-active-color);
+  }
+}
+.icon-class {
+   flex-shrink: 1;
+   min-width: 0;
+   overflow: hidden;
+ }
+.icon-class.hidden {
+  opacity: 0;
 }
 </style>

src/layout/components/ToolHeader.vue

@@ -58,7 +58,7 @@ export default defineComponent({
             {hamburger.value && layout.value !== 'cutMenu' ? (
               <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
             ) : undefined}
-            {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
+            {breadcrumb.value && layout.value !== 'leftTop' ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
           </div>
         ) : undefined}
         <div class="h-full flex items-center">

src/layout/components/useRenderLayout.tsx

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { Menu } from '@/layout/components/Menu'
-import { TabMenu } from '@/layout/components/TabMenu'
+import { TabMenu, TabMenu2 } from '@/layout/components/TabMenu'
 import { TagsView } from '@/layout/components/TagsView'
 import { Logo } from '@/layout/components/Logo'
 import AppView from './AppView.vue'
@@ -297,72 +297,92 @@ export const useRenderLayout = () => {
     )
   }
 
-    const NewTopLeft = () => {
+  const NewTopLeft = () => {
-      return (
+    return (
-        <>
+      <>
-          <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
+        <div
-            {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
+          class={[
-
+            'absolute top-0 left-0 h-full layout-border__right',
-            <ToolHeader class="flex-1"></ToolHeader>
+            { '!fixed z-3000': mobile.value }
-          </div>
+          ]}
-          <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex">
+        >
-            <TabMenu></TabMenu>
+          {logo.value ? (
+            <Logo
+              class={[
+                'bg-[var(--left-menu-bg-color)] relative',
+                {
+                  '!pl-0': mobile.value && collapse.value,
+                  'w-[var(--left-menu-min-width)]': appStore.getCollapse,
+                  'w-[var(--left-menu-max-width)]': !appStore.getCollapse
+                }
+              ]}
+              style="transition: all var(--transition-time-02);"
+            ></Logo>
+          ) : undefined}
+            <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
+        </div>
+        <div
+          class={[
+            `${prefixCls}-content`,
+            'absolute top-0 h-[100%]',
+            {
+              'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
+                  collapse.value && !mobile.value && !mobile.value,
+              'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
+                  !collapse.value && !mobile.value && !mobile.value,
+              'fixed !w-full !left-0': mobile.value
+            }
+          ]}
+          style="transition: all var(--transition-time-02);"
+        >
+          <ElScrollbar
+            v-loading={pageLoading.value}
+            class={[
+                `${prefixCls}-content-scrollbar`,
+                {
+                    '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
+                    fixedHeader.value
+                }
+            ]}
+          >
             <div
               class={[
-                `${prefixCls}-content`,
-                'h-[100%]',
                 {
-                  'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
+                  'fixed top-0 left-0 z-10': fixedHeader.value,
-                    collapse.value && !fixedMenu.value,
+                  'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
-                  'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
+                       collapse.value && fixedHeader.value && !mobile.value,
-                    !collapse.value && !fixedMenu.value,
+                  'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
-                  'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
+                      !collapse.value && fixedHeader.value && !mobile.value,
-                    collapse.value && fixedMenu.value,
+                  '!w-full !left-0': mobile.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
+              <div class="flex items-center justify-between bg-[var(--top-header-bg-color)]">
-                v-loading={pageLoading.value}
+                <TabMenu2
-                class={[
+                  class={[
-                  `${prefixCls}-content-scrollbar`,
+                    'bg-[var(--top-header-bg-color)]',
-                  {
+                  ]}
-                    '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                ></TabMenu2>
-                      fixedHeader.value && tagsView.value
+                <ToolHeader
-                  }
+                  class={[
-                ]}
+                    'bg-[var(--top-header-bg-color)] flex-shrink-0',
-              >
+                    {'layout-border__bottom': !tagsView.value},
-                {tagsView.value ? (
+                  ]}
-                  <TagsView
+                ></ToolHeader>
-                    class={[
+              </div>
-                      '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>
+                {tagsView.value ? (
-              </ElScrollbar>
+                  <TagsView class="layout-border__top layout-border__bottom"></TagsView>
+                ) : undefined}
             </div>
-          </div>
+
-        </>
+            <AppView></AppView>
-      )
+          </ElScrollbar>
-    }
+        </div>
+      </>
+    )
+  }
 
   return {
     renderClassic,

src/types/layout.d.ts

@@ -1 +1 @@
-export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
+export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu' | 'leftTop'