@meethive/components 0.0.1

package/lib/ProLayout/Basic/BasicLayout.js

@@ -0,0 +1,422 @@
+ 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
+  },
+  /**
+   * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
+   */
+  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
+                      }
+                    )
+                  )
+                )
+              )
+            )
+          )
+        )
+      }
+    }
+  }
+})

package/lib/ProLayout/Basic/BasicLayoutStyle.js

@@ -0,0 +1,51 @@
+export const genBasicLayoutStyle = (config) => {
+  const { token } = config
+  const basicLayoutPrefixCls = `${token.antCls}-pro-basicLayout`
+  const proLayoutHeaderHeight = '48px'
+  return {
+    [`${basicLayoutPrefixCls}`]: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      minHeight: '100%',
+      [`${token.antCls}-layout-header`]: {
+        [`&${token.antCls}-pro-fixed-header`]: {
+          position: 'fixed',
+          top: 0
+        }
+      },
+      [`${basicLayoutPrefixCls}-content`]: {
+        position: 'relative',
+        margin: '24px',
+        [`${token.antCls}-pro-page-container`]: {
+          margin: '-24px -24px 0'
+        },
+        [`${basicLayoutPrefixCls}-content-disable-margin`]: {
+          margin: 0,
+          [`${token.antCls}-pro-page-container`]: {
+            margin: 0
+          }
+        },
+        [`> ${token.antCls}-layout`]: {
+          maxHeight: '100%'
+        }
+      },
+      [`${basicLayoutPrefixCls}-is-children${basicLayoutPrefixCls}-fix-siderbar`]: {
+        height: '100vh',
+        overflow: 'hidden',
+        transform: 'rotate(0)'
+      },
+      [`${basicLayoutPrefixCls}-has-header`]: {
+        '.tech-page-container': {
+          height: `calc(100vh - ${proLayoutHeaderHeight} - ${proLayoutHeaderHeight})`
+        },
+        [`${basicLayoutPrefixCls}-is-children`]: {
+          minHeight: `calc(100vh - ${proLayoutHeaderHeight})`,
+          [`&${basicLayoutPrefixCls}-fix-siderbar`]: {
+            height: `calc(100vh - ${proLayoutHeaderHeight})`
+          }
+        }
+      }
+    }
+  }
+}

package/lib/ProLayout/Basic/Header.js

@@ -0,0 +1,111 @@
+
+import { createVNode as _createVNode, } from 'vue'
+import { defineComponent, computed, toRefs, } from 'vue'
+import { Layout } from 'ant-design-vue'
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { baseHeaderProps, TopNavHeader } from '../TopHeader'
+import { useRouteContext } from '../RouteContext'
+import { LayoutType } from '../defaultSettings'
+
+export const headerViewProps = {
+  ...baseHeaderProps,
+  headerRender: {
+    type: [Object, Function, Boolean],
+    default: () => undefined
+  },
+  headerTitleRender: {
+    type: [Object, Function, Boolean],
+    default: () => undefined
+  },
+  headerContentRender: {
+    type: [Object, Function, Boolean],
+    default: () => undefined
+  },
+  hasSiderMenu: PropTypes.looseBool,
+  siderWidth: PropTypes.number.def(208)
+}
+
+export default defineComponent({
+  name: 'HeaderView',
+  inheritAttrs: false,
+  props: headerViewProps ,
+  setup(props) {
+    const {
+      prefixCls,
+      fixedHeader,
+      headerHeight,
+      layout,
+      theme,
+      onCollapse
+    } = toRefs(props)
+
+    const context = useRouteContext()
+
+    const needFixedHeader = computed(() => {
+      return fixedHeader.value || (context ).fixedHeader
+    })
+
+    const isTop = computed(() => {
+      return layout.value === 'top'
+    })
+
+    const className = computed(() => ({
+      [`${prefixCls.value}-fixed-header`]: needFixedHeader.value,
+      [`${prefixCls.value}-top-menu`]: isTop.value
+    }))
+
+    const renderContent = () => {
+      const defaultDom = _createVNode(TopNavHeader, {
+        theme: theme.value,
+        mode: 'horizontal',
+        ...props,
+        onCollapse: onCollapse.value,
+        menuData: (context ).menuData
+      }, null)
+      if (props.headerRender) {
+        return (props.headerRender )(props, defaultDom)
+      }
+      return defaultDom
+    }
+
+    const right = computed(() => {
+      return needFixedHeader.value ? 0 : undefined
+    })
+
+    const width = computed(() => {
+      if ((context ).layoutType === LayoutType.PAD) {
+        return (context ).siderWidth
+      }
+      return 0
+    })
+
+    return () => {
+      return (
+        React.createElement(React.Fragment, null
+          , needFixedHeader.value && (
+            React.createElement(Layout.Header, {
+              style: {
+                height: `${headerHeight.value}px`,
+                lineHeight: `${headerHeight.value}px`,
+                background: 'transparent'
+              },}
+            )
+          )
+          , React.createElement(Layout.Header, {
+            style: {
+              padding: 0,
+              height: `${headerHeight.value}px`,
+              lineHeight: `${headerHeight.value}px`,
+              width: props.hasSiderMenu ? `calc(100% - ${width.value}px)` : '100%',
+              zIndex: 100,
+              right: right.value
+            },
+            class: className.value,}
+
+            , renderContent()
+          )
+        )
+      )
+    }
+  }
+})

package/lib/ProLayout/Basic/HeaderStyle.js

@@ -0,0 +1,10 @@
+export const genHeaderStyle = (config) => {
+  const { token } = config
+  const proLayoutFixedHeaderPrefixCls = `${token.antCls}-pro-fixed-header`
+  return {
+    [`${proLayoutFixedHeaderPrefixCls}`]: {
+      zIndex: 9,
+      width: '100%'
+    }
+  }
+}