@meethive/components 0.0.2 → 0.0.4

package/es/ProLayout/Basic/BasicLayout.js

@@ -1,422 +1,305 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, computed, reactive, watchEffect, toRefs, provide, h, Fragment } from 'vue'
-import { pick } from 'lodash-es'
-import { Layout, LayoutContent, Breadcrumb, Tabs } from 'ant-design-vue'
-import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu'
-import { defaultSettingProps, LayoutType } from '../defaultSettings'
-import { baseHeaderProps } from '../TopHeader'
-import Header, { headerViewProps } from './Header.js'
-import { defaultRouteContext, routeContextInjectKey } from '../RouteContext'
-import { getMenuFirstChildren, getSlot } from '../util'
-import useProLayoutStyle from '../style'
-
-export const basicLayoutProps = {
-  ...defaultSettingProps,
-  ...siderMenuProps,
-  ...baseHeaderProps,
-  ...headerViewProps,
-  pure: Boolean,
-  loading: Boolean,
-  locale: {
-    type: [Function, Boolean],
-    default: () => (s) => s
-  },
+import { defineComponent, computed, reactive, watchEffect, toRefs, provide, h, Fragment } from 'vue';
+import { pick } from 'lodash-es';
+import { Layout, LayoutContent, Breadcrumb, Tabs } from 'ant-design-vue';
+import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu';
+import { defaultSettingProps, LayoutType } from '../defaultSettings';
+import { baseHeaderProps } from '../TopHeader';
+import Header, { headerViewProps } from './Header.js';
+import { defaultRouteContext, routeContextInjectKey } from '../RouteContext';
+import { getMenuFirstChildren, getSlot } from '../util';
+import useProLayoutStyle from '../style';
+export const basicLayoutProps = {
+  ...defaultSettingProps,
+  ...siderMenuProps,
+  ...baseHeaderProps,
+  ...headerViewProps,
+  pure: Boolean,
+  loading: Boolean,
+  locale: {
+    type: [Function, Boolean],
+    default: () => s => s
+  },
   /**
    * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
-   */
-  disableMobile: {
-    type: Boolean,
-    required: false
-  },
-  isChildrenLayout: {
-    type: Boolean,
-    required: false
-  },
+   */
+  disableMobile: {
+    type: Boolean,
+    required: false
+  },
+  isChildrenLayout: {
+    type: Boolean,
+    required: false
+  },
   /**
    * 兼用 content 的 margin
-   */
-  disableContentMargin: {
-    type: Boolean,
-    required: false
-  },
-  colSize: {
-    type: Number,
-    required: false
-  },
-  contentStyle: {
-    type: [String, Object],
-    default: () => null
-  },
-  breadcrumb: {
-    type: [Object, Function],
-    default: () => null
-  },
-  collapsedButtonRender: {
-    type: [Function, Object, Boolean],
-    default: () => undefined
-  },
-  breadcrumbRender: {
-    type: [Object, Function, Boolean],
-    default: () => null
-  },
-  headerContentRender: {
-    type: [Function, Object, Boolean],
-    default: () => undefined
-  },
-  headerRender: {
-    type: [Object, Function, Boolean],
-    default: () => undefined
-  }
-}
-
-export default defineComponent({
-  name: 'JProLayout',
-  inheritAttrs: false,
-  props: basicLayoutProps ,
-  emits: [
-    'update:collapsed',
-    'update:open-keys',
-    'update:selected-keys',
-    'update:active-key',
-    'collapse',
-    'openKeys',
-    'select',
-    'menuHeaderClick',
-    'menuClick',
-    'backClick',
-    'historyTabClick',
-    'historyTabEdit',
-    'appMenuClick'
-  ],
-  setup(props, { emit, attrs, slots }) {
-    const prefixCls = computed(() => 'ant-layout')
-
-    const isTop = computed(() => props.layout === 'top')
-    const hasSide = computed(() => props.layout === 'mix' || props.layout === 'side' || false)
-    const hasSplitMenu = computed(() => props.layout === 'mix' && props.splitMenus)
-    const hasFlatMenu = computed(() => hasSide.value && hasSplitMenu.value)
-
-    const siderWidth = computed(() => {
-      if (props.layoutType === LayoutType.PAD) {
-        return props.collapsed ? 0 : props.siderWidth
-      }
-      return props.collapsed ? props.collapsedWidth : props.siderWidth
-    })
-
-    const stylePrefixCls = computed(() => 'pro-layout')
-    const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls)
-
-    const onCollapse = (collapsed) => {
-      emit('update:collapsed', collapsed)
-      emit('collapse', collapsed)
-    }
-
-    const onOpenKeys = (openKeys) => {
-      emit('update:open-keys', openKeys)
-      emit('openKeys', openKeys)
-    }
-
-    const onSelect = (selectedKeys) => {
-      emit('update:selected-keys', selectedKeys)
-      emit('select', selectedKeys)
-    }
-
-    const onMenuHeaderClick = (e) => {
-      emit('menuHeaderClick', e)
-    }
-
-    const onMenuClick = (args) => {
-      emit('menuClick', args)
-    }
-
-    const onBack = (args) => {
-      emit('backClick', args)
-    }
-
-    const onTabClick = (args) => {
-      emit('historyTabClick', args)
-    }
-
-    const onTabEdit = (args) => {
-      emit('historyTabEdit', args)
-    }
-
-    const onAppMenuClick = (args) => {
-      emit('appMenuClick', args)
-    }
-
-    const onTabChange = (key) => {
-      emit('update:active-key', key)
-    }
-
-    const baseClassName = computed(() => `${props.prefixCls}-basicLayout`)
-
-    const className = computed(() => ({
-      [baseClassName.value]: true,
-      [`${baseClassName.value}-top-menu`]: isTop.value,
-      [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
-      [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
-      [`${baseClassName.value}-${props.layout}`]: props.layout,
-      [`${baseClassName.value}-${props.layoutType}`]: props.layoutType,
-      [hashId.value]: true
-    }))
-
-    const genLayoutStyle = reactive({
-      position: 'relative' 
-    })
-
-    watchEffect(() => {
-      if (props.isChildrenLayout || (props.contentStyle && (props.contentStyle ).minHeight)) {
-        (genLayoutStyle ).minHeight = 0
-      }
-    })
-
-    const headerRender = (p, matchMenuKeys) => {
-      if (p.headerRender === false || p.pure) {
-        return null
-      }
-      return h(Header, {
-        ...p,
-        matchMenuKeys: matchMenuKeys || []
-      })
-    }
-
-    const breadcrumb = computed(() => ({
-      ...props.breadcrumb,
-      itemRender: getSlot(slots, props, 'breadcrumbRender')
-    }))
-
-    const flatMenuData = computed(() => {
-      return (hasFlatMenu.value && props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0])) || []
-    })
-
-    const layoutType = computed(() => props.layoutType)
-
-    const routeContext = reactive({
-      ...defaultRouteContext,
-      ...pick(toRefs(props), [
-        'pure',
-        'locale',
-        'menuData',
-        'openKeys',
-        'selectedKeys',
-        'contentWidth',
-        'disableMobile',
-        'fixSiderbar',
-        'fixedHeader',
-        'headerHeight',
-        'collapsedWidth',
-        'headerLeftWidth'
-      ]),
-      siderWidth,
-      breadcrumb,
-      flatMenuData,
-      hasSide,
-      back: onBack,
-      hasHeader: true,
-      flatMenu: hasFlatMenu,
-      layoutType
-    })
-
-    console.log(toRefs(props))
-    provide(routeContextInjectKey, routeContext)
-
-    return () => {
-      const {
-        pure,
-        onCollapse: propsOnCollapse,
-        onOpenKeys: propsOnOpenKeys,
-        onSelect: propsOnSelect,
-        onMenuClick: propsOnMenuClick,
-        ...restProps
-      } = props
-
-      const collapsedButtonRender = getSlot(slots, props, 'collapsedButtonRender')
-      const headerContentRender = getSlot(slots, props, 'headerContentRender')
-      const rightContentRender = getSlot(slots, props, 'rightContentRender')
-      const customHeaderRender = getSlot(slots, props, 'headerRender')
-      // menu
-      const menuHeaderRender = getSlot(slots, props, 'menuHeaderRender')
-      const menuExtraRender = getSlot(slots, props, 'menuExtraRender')
-      const menuContentRender = getSlot(slots, props, 'menuContentRender')
-      const menuItemRender = getSlot(slots, props, 'menuItemRender')
-      const subMenuItemRender = getSlot(slots, props, 'subMenuItemRender')
-      const linksRender = getSlot(slots, props, 'linksRender')
-      const logoRender = getSlot(slots, props, 'logoRender')
-      const historyRender = getSlot(slots, props, 'historyRender')
-      const topHeaderMenuRender = getSlot(slots, props, 'topHeaderMenuRender')
-
-      const headerDom = computed(() => {
-        return headerRender(
-          {
-            ...props,
-            menuItemRender,
-            subMenuItemRender,
-            hasSiderMenu: !isTop.value,
-            menuData: props.menuData,
-            onCollapse,
-            onOpenKeys,
-            onSelect,
-            onMenuHeaderClick,
-            rightContentRender,
-            collapsedButtonRender,
-            headerTitleRender: menuHeaderRender,
-            menuExtraRender,
-            menuContentRender,
-            headerContentRender,
-            logo: logoRender || props.logo,
-            headerRender: customHeaderRender,
-            topHeaderMenuRender,
-            theme: ((props.theme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light') 
-          },
-          props.matchMenuKeys
-        )
-      })
-
-      routeContext.hasHeader = !!headerDom.value
-
-      const contentClassName = computed(() => ({
-        [`${baseClassName.value}-content`]: true,
-        [`${baseClassName.value}-has-header`]: headerDom,
-        [`${baseClassName.value}-content-disable-margin`]: props.disableContentMargin
-      }))
-
-      if (pure) {
-        return _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()])
-      }
-
-        if (props.layoutType === LayoutType.LIST) {
-          return (
-            React.createElement(Fragment, null
-              , React.createElement('div', { class: className.value,}
-              , React.createElement(Layout, { style: { minHeight: '100vh', ...(attrs.style  || {}) },}
-                , headerDom.value
-                , React.createElement(Layout, { style: genLayoutStyle, class: prefixCls.value,}
-                  , !isTop.value && (
-                    React.createElement(SiderMenu, {
-                      ...restProps,
-                      logo: logoRender || restProps.logo,
-                      menuHeaderRender: menuHeaderRender,
-                      menuExtraRender: menuExtraRender,
-                      menuContentRender: menuContentRender,
-                      menuItemRender: menuItemRender,
-                      subMenuItemRender: subMenuItemRender,
-                      collapsedButtonRender: collapsedButtonRender,
-                      onCollapse: onCollapse,
-                      onSelect: onSelect,
-                      onOpenKeys: onOpenKeys,
-                      onMenuClick: onMenuClick,}
-                    )
-                  )
-                  , React.createElement(Layout, null
-                    , React.createElement(LayoutContent, null
-                      , _optionalChain([slots, 'access', _3 => _3.default, 'optionalCall', _4 => _4()])
-                    )
-                  )
-                )
-              )
-            )
-          )
-        )
-      } else if (props.layoutType === LayoutType.PAD) {
-        return (
-          React.createElement('div', { class: className.value,}
-            , React.createElement(Layout, { style: { minHeight: '100vh', ...(attrs.style  || {}) },}
-              , React.createElement(SiderMenu, {
-                ...restProps,
-                logo: logoRender || restProps.logo,
-                collapsedWidth: 0,
-                headerHeight: 0,
-                menuHeaderRender: menuHeaderRender,
-                menuExtraRender: menuExtraRender,
-                menuContentRender: menuContentRender,
-                menuItemRender: menuItemRender,
-                subMenuItemRender: subMenuItemRender,
-                collapsedButtonRender: collapsedButtonRender,
-                onCollapse: onCollapse,
-                onSelect: onSelect,
-                onOpenKeys: onOpenKeys,
-                onMenuClick: onMenuClick,}
-              )
-              , React.createElement(Layout, { style: genLayoutStyle, class: prefixCls.value,}
-                , headerDom.value
-                , React.createElement(LayoutContent, null
-                  , _optionalChain([slots, 'access', _5 => _5.default, 'optionalCall', _6 => _6()])
-                )
-              )
-            )
-          )
-        )
-      } else {
-        // CARD layout
-        return (
-          React.createElement(Fragment, null
-            , React.createElement('div', { class: className.value,}
-              , React.createElement(Layout, null
-                , React.createElement(SiderMenu, {
-                  ...restProps,
-                  logo: logoRender || restProps.logo,
-                  siderWidth: props.cardSiderWidth,
-                  headerHeight: 0,
-                  menuHeaderRender: menuHeaderRender,
-                  menuExtraRender: menuExtraRender,
-                  linksRender: linksRender,
-                  menuContentRender: menuContentRender,
-                  menuItemRender: menuItemRender,
-                  subMenuItemRender: subMenuItemRender,
-                  onCollapse: onCollapse,
-                  onSelect: onSelect,
-                  onOpenKeys: onOpenKeys,
-                  onMenuClick: onMenuClick,
-                  onAppMenuClick: onAppMenuClick,}
-                )
-                , React.createElement(Layout, null
-                  , React.createElement(Layout.Header, {
-                    style: {
-                      background: 'transparent',
-                      padding: 0,
-                      height: '40px',
-                      ...(props.pageHeaderStyle || {})
-                    },}
-
-                    , React.createElement(Tabs, {
-                      'hide-add': true,
-                      type: "editable-card",
-                      class: "history-tabs",
-                      id: "history-route-tabs",
-                      tabBarStyle: { margin: 0 },
-                      onTabClick: onTabClick,
-                      onEdit: onTabEdit,
-                      activeKey: props.historyActive,
-                      onChange: onTabChange,}
-
-                      , historyRender
-                        ? historyRender()
-                        : props.historyRoutes.map((item) => (
-                            React.createElement(Tabs.TabPane, {
-                              key: item.name,
-                              tab: item.label,
-                              closable: true,}
-                            )
-                          ))
-                    )
-                  )
-                  , React.createElement(LayoutContent, { style: { flex: '1 1 0', overflow: 'auto' },}
-                    , _optionalChain([slots, 'access', _7 => _7.default, 'optionalCall', _8 => _8()])
-                  )
-                  , React.createElement(Layout.Footer, { style: { padding: '11px 24px', ...(props.pageFooterStyle || {}) },}
-                    , React.createElement(Breadcrumb, { routes: breadcrumb.value.routes,}
-                      , {
-                        itemRender: breadcrumb.value.itemRender
-                      }
-                    )
-                  )
-                )
-              )
-            )
-          )
-        )
-      }
-    }
-  }
-})
+   */
+  disableContentMargin: {
+    type: Boolean,
+    required: false
+  },
+  colSize: {
+    type: Number,
+    required: false
+  },
+  contentStyle: {
+    type: [String, Object],
+    default: () => null
+  },
+  breadcrumb: {
+    type: [Object, Function],
+    default: () => null
+  },
+  collapsedButtonRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  breadcrumbRender: {
+    type: [Object, Function, Boolean],
+    default: () => null
+  },
+  headerContentRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  headerRender: {
+    type: [Object, Function, Boolean],
+    default: () => undefined
+  }
+};
+export default defineComponent({
+  name: 'JProLayout',
+  inheritAttrs: false,
+  props: basicLayoutProps,
+  emits: ['update:collapsed', 'update:open-keys', 'update:selected-keys', 'update:active-key', 'collapse', 'openKeys', 'select', 'menuHeaderClick', 'menuClick', 'backClick', 'historyTabClick', 'historyTabEdit', 'appMenuClick'],
+  setup(props, {
+    emit,
+    attrs,
+    slots
+  }) {
+    const prefixCls = computed(() => 'ant-layout');
+    const isTop = computed(() => props.layout === 'top');
+    const hasSide = computed(() => props.layout === 'mix' || props.layout === 'side' || false);
+    const hasSplitMenu = computed(() => props.layout === 'mix' && props.splitMenus);
+    const hasFlatMenu = computed(() => hasSide.value && hasSplitMenu.value);
+    const siderWidth = computed(() => {
+      if (props.layoutType === LayoutType.PAD) {
+        return props.collapsed ? 0 : props.siderWidth;
+      }
+      return props.collapsed ? props.collapsedWidth : props.siderWidth;
+    });
+    const stylePrefixCls = computed(() => 'pro-layout');
+    const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls);
+    const onCollapse = collapsed => {
+      emit('update:collapsed', collapsed);
+      emit('collapse', collapsed);
+    };
+    const onOpenKeys = openKeys => {
+      emit('update:open-keys', openKeys);
+      emit('openKeys', openKeys);
+    };
+    const onSelect = selectedKeys => {
+      emit('update:selected-keys', selectedKeys);
+      emit('select', selectedKeys);
+    };
+    const onMenuHeaderClick = e => {
+      emit('menuHeaderClick', e);
+    };
+    const onMenuClick = args => {
+      emit('menuClick', args);
+    };
+    const onBack = args => {
+      emit('backClick', args);
+    };
+    const onTabClick = args => {
+      emit('historyTabClick', args);
+    };
+    const onTabEdit = args => {
+      emit('historyTabEdit', args);
+    };
+    const onAppMenuClick = args => {
+      emit('appMenuClick', args);
+    };
+    const onTabChange = key => {
+      emit('update:active-key', key);
+    };
+    const baseClassName = computed(() => `${props.prefixCls}-basicLayout`);
+    const className = computed(() => ({
+      [baseClassName.value]: true,
+      [`${baseClassName.value}-top-menu`]: isTop.value,
+      [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
+      [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
+      [`${baseClassName.value}-${props.layout}`]: props.layout,
+      [`${baseClassName.value}-${props.layoutType}`]: props.layoutType,
+      [hashId.value]: true
+    }));
+    const genLayoutStyle = reactive({
+      position: 'relative'
+    });
+    watchEffect(() => {
+      if (props.isChildrenLayout || props.contentStyle && props.contentStyle.minHeight) {
+        genLayoutStyle.minHeight = 0;
+      }
+    });
+    const headerRender = (p, matchMenuKeys) => {
+      if (p.headerRender === false || p.pure) {
+        return null;
+      }
+      return h(Header, {
+        ...p,
+        matchMenuKeys: matchMenuKeys || []
+      });
+    };
+    const breadcrumb = computed(() => ({
+      ...props.breadcrumb,
+      itemRender: getSlot(slots, props, 'breadcrumbRender')
+    }));
+    const flatMenuData = computed(() => {
+      return hasFlatMenu.value && props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0]) || [];
+    });
+    const layoutType = computed(() => props.layoutType);
+    const routeContext = reactive({
+      ...defaultRouteContext,
+      ...pick(toRefs(props), ['pure', 'locale', 'menuData', 'openKeys', 'selectedKeys', 'contentWidth', 'disableMobile', 'fixSiderbar', 'fixedHeader', 'headerHeight', 'collapsedWidth', 'headerLeftWidth']),
+      siderWidth,
+      breadcrumb,
+      flatMenuData,
+      hasSide,
+      back: onBack,
+      hasHeader: true,
+      flatMenu: hasFlatMenu,
+      layoutType
+    });
+    console.log(toRefs(props));
+    provide(routeContextInjectKey, routeContext);
+    return () => {
+      const {
+        pure,
+        onCollapse: propsOnCollapse,
+        onOpenKeys: propsOnOpenKeys,
+        onSelect: propsOnSelect,
+        onMenuClick: propsOnMenuClick,
+        ...restProps
+      } = props;
+      const collapsedButtonRender = getSlot(slots, props, 'collapsedButtonRender');
+      const headerContentRender = getSlot(slots, props, 'headerContentRender');
+      const rightContentRender = getSlot(slots, props, 'rightContentRender');
+      const customHeaderRender = getSlot(slots, props, 'headerRender');
+      // menu
+      const menuHeaderRender = getSlot(slots, props, 'menuHeaderRender');
+      const menuExtraRender = getSlot(slots, props, 'menuExtraRender');
+      const menuContentRender = getSlot(slots, props, 'menuContentRender');
+      const menuItemRender = getSlot(slots, props, 'menuItemRender');
+      const subMenuItemRender = getSlot(slots, props, 'subMenuItemRender');
+      const linksRender = getSlot(slots, props, 'linksRender');
+      const logoRender = getSlot(slots, props, 'logoRender');
+      const historyRender = getSlot(slots, props, 'historyRender');
+      const topHeaderMenuRender = getSlot(slots, props, 'topHeaderMenuRender');
+      const headerDom = computed(() => {
+        return headerRender({
+          ...props,
+          menuItemRender,
+          subMenuItemRender,
+          hasSiderMenu: !isTop.value,
+          menuData: props.menuData,
+          onCollapse,
+          onOpenKeys,
+          onSelect,
+          onMenuHeaderClick,
+          rightContentRender,
+          collapsedButtonRender,
+          headerTitleRender: menuHeaderRender,
+          menuExtraRender,
+          menuContentRender,
+          headerContentRender,
+          logo: logoRender || props.logo,
+          headerRender: customHeaderRender,
+          topHeaderMenuRender,
+          theme: (props.theme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light'
+        }, props.matchMenuKeys);
+      });
+      routeContext.hasHeader = !!headerDom.value;
+      const contentClassName = computed(() => ({
+        [`${baseClassName.value}-content`]: true,
+        [`${baseClassName.value}-has-header`]: headerDom,
+        [`${baseClassName.value}-content-disable-margin`]: props.disableContentMargin
+      }));
+      if (pure) {
+        return slots.default?.();
+      }
+      if (props.layoutType === LayoutType.LIST) {
+        return <Fragment>
+              <div class={className.value}>
+              <Layout style={{
+              minHeight: '100vh',
+              ...(attrs.style || {})
+            }}>
+                {headerDom.value}
+                <Layout style={genLayoutStyle} class={prefixCls.value}>
+                  {!isTop.value && <SiderMenu {...restProps} logo={logoRender || restProps.logo} menuHeaderRender={menuHeaderRender} menuExtraRender={menuExtraRender} menuContentRender={menuContentRender} menuItemRender={menuItemRender} subMenuItemRender={subMenuItemRender} collapsedButtonRender={collapsedButtonRender} onCollapse={onCollapse} onSelect={onSelect} onOpenKeys={onOpenKeys} onMenuClick={onMenuClick} />}
+                  <Layout>
+                    <LayoutContent>
+                      {slots.default?.()}
+                    </LayoutContent>
+                  </Layout>
+                </Layout>
+              </Layout>
+            </div>
+          </Fragment>;
+      } else if (props.layoutType === LayoutType.PAD) {
+        return <div class={className.value}>
+            <Layout style={{
+            minHeight: '100vh',
+            ...(attrs.style || {})
+          }}>
+              <SiderMenu {...restProps} logo={logoRender || restProps.logo} collapsedWidth={0} headerHeight={0} menuHeaderRender={menuHeaderRender} menuExtraRender={menuExtraRender} menuContentRender={menuContentRender} menuItemRender={menuItemRender} subMenuItemRender={subMenuItemRender} collapsedButtonRender={collapsedButtonRender} onCollapse={onCollapse} onSelect={onSelect} onOpenKeys={onOpenKeys} onMenuClick={onMenuClick} />
+              <Layout style={genLayoutStyle} class={prefixCls.value}>
+                {headerDom.value}
+                <LayoutContent>
+                  {slots.default?.()}
+                </LayoutContent>
+              </Layout>
+            </Layout>
+          </div>;
+      } else {
+        // CARD layout
+        return <Fragment>
+            <div class={className.value}>
+              <Layout>
+                <SiderMenu {...restProps} logo={logoRender || restProps.logo} siderWidth={props.cardSiderWidth} headerHeight={0} menuHeaderRender={menuHeaderRender} menuExtraRender={menuExtraRender} linksRender={linksRender} menuContentRender={menuContentRender} menuItemRender={menuItemRender} subMenuItemRender={subMenuItemRender} onCollapse={onCollapse} onSelect={onSelect} onOpenKeys={onOpenKeys} onMenuClick={onMenuClick} onAppMenuClick={onAppMenuClick} />
+                <Layout>
+                  <Layout.Header style={{
+                  background: 'transparent',
+                  padding: 0,
+                  height: '40px',
+                  ...(props.pageHeaderStyle || {})
+                }}>
+                    <Tabs hide-add type="editable-card" class="history-tabs" id="history-route-tabs" tabBarStyle={{
+                    margin: 0
+                  }} onTabClick={onTabClick} onEdit={onTabEdit} activeKey={props.historyActive} onChange={onTabChange}>
+                      {historyRender ? historyRender() : props.historyRoutes.map(item => <Tabs.TabPane key={item.name} tab={item.label} closable />)}
+                    </Tabs>
+                  </Layout.Header>
+                  <LayoutContent style={{
+                  flex: '1 1 0',
+                  overflow: 'auto'
+                }}>
+                    {slots.default?.()}
+                  </LayoutContent>
+                  <Layout.Footer style={{
+                  padding: '11px 24px',
+                  ...(props.pageFooterStyle || {})
+                }}>
+                    <Breadcrumb routes={breadcrumb.value.routes}>
+                      {{
+                      itemRender: breadcrumb.value.itemRender
+                    }}
+                    </Breadcrumb>
+                  </Layout.Footer>
+                </Layout>
+              </Layout>
+            </div>
+          </Fragment>;
+      }
+    };
+  }
+});