@meethive/components 0.0.3 → 0.0.5

package/es/ProLayout/Basic/BasicLayout.js

@@ -1,422 +1,365 @@
- 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, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _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 _createVNode(_Fragment, null, [_createVNode("div", {
+          "class": className.value
+        }, [_createVNode(Layout, {
+          "style": {
+            minHeight: '100vh',
+            ...(attrs.style || {})
+          }
+        }, {
+          default: () => [headerDom.value, _createVNode(Layout, {
+            "style": genLayoutStyle,
+            "class": prefixCls.value
+          }, {
+            default: () => [!isTop.value && _createVNode(SiderMenu, _mergeProps(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
+            }), null), _createVNode(Layout, null, {
+              default: () => [_createVNode(LayoutContent, null, {
+                default: () => [slots.default?.()]
+              })]
+            })]
+          })]
+        })])]);
+      } else if (props.layoutType === LayoutType.PAD) {
+        return _createVNode("div", {
+          "class": className.value
+        }, [_createVNode(Layout, {
+          "style": {
+            minHeight: '100vh',
+            ...(attrs.style || {})
+          }
+        }, {
+          default: () => [_createVNode(SiderMenu, _mergeProps(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
+          }), null), _createVNode(Layout, {
+            "style": genLayoutStyle,
+            "class": prefixCls.value
+          }, {
+            default: () => [headerDom.value, _createVNode(LayoutContent, null, {
+              default: () => [slots.default?.()]
+            })]
+          })]
+        })]);
+      } else {
+        // CARD layout
+        return _createVNode(_Fragment, null, [_createVNode("div", {
+          "class": className.value
+        }, [_createVNode(Layout, null, {
+          default: () => [_createVNode(SiderMenu, _mergeProps(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
+          }), null), _createVNode(Layout, null, {
+            default: () => [_createVNode(Layout.Header, {
+              "style": {
+                background: 'transparent',
+                padding: 0,
+                height: '40px',
+                ...(props.pageHeaderStyle || {})
+              }
+            }, {
+              default: () => [_createVNode(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
+              }, {
+                default: () => [historyRender ? historyRender() : props.historyRoutes.map(item => _createVNode(Tabs.TabPane, {
+                  "key": item.name,
+                  "tab": item.label,
+                  "closable": true
+                }, null))]
+              })]
+            }), _createVNode(LayoutContent, {
+              "style": {
+                flex: '1 1 0',
+                overflow: 'auto'
+              }
+            }, {
+              default: () => [slots.default?.()]
+            }), _createVNode(Layout.Footer, {
+              "style": {
+                padding: '11px 24px',
+                ...(props.pageFooterStyle || {})
+              }
+            }, {
+              default: () => [_createVNode(Breadcrumb, {
+                "routes": breadcrumb.value.routes
+              }, {
+                itemRender: breadcrumb.value.itemRender
+              })]
+            })]
+          })]
+        })])]);
+      }
+    };
+  }
+});