@gx-design-vue/create-gx-cli 0.0.4 → 0.0.5

package/template-design-pro/src/components/GDesign/ProLayout/components/SiderMenu/BaseMenu.tsx

@@ -0,0 +1,224 @@
+import {
+  defineComponent,
+  VNodeChild,
+  VNode,
+  computed,
+  isVNode,
+  resolveComponent,
+  ExtractPropTypes,
+  ConcreteComponent
+} from 'vue'
+import { useRouter } from 'vue-router'
+import { Menu } from 'ant-design-vue'
+import { createFromIconfontCN } from '@ant-design/icons-vue'
+import { baseMenuProps } from './props'
+import { defaultSettings } from '../../defaultSettings'
+import { isImg, isUrl } from '../../utils'
+
+export interface CustomMenuRender {
+  menuItemRender?: WithFalse<
+    (args: { item: AppRouteModule; title?: JSX.Element; icon?: JSX.Element }) => CustomRender
+  >
+  subMenuItemRender?: WithFalse<
+    (args: { item: AppRouteModule; children?: CustomRender[] }) => CustomRender
+  >
+}
+
+export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>
+
+const IconFont: any = (iconfontUrl) => {
+  return createFromIconfontCN({
+    scriptUrl: iconfontUrl || defaultSettings.iconfontUrl
+  })
+}
+
+const LazyIcon = (props: {
+  icon: VNodeChild | string
+  iconType?: number
+  iconfontUrl?: string
+}) => {
+  const { icon, iconType, iconfontUrl } = props
+  if (!icon) {
+    return null
+  }
+  if (typeof icon === 'string' && icon !== '') {
+    if (isUrl(icon) || isImg(icon)) {
+      return <img src={icon} alt="icon" class={`gx-pro-sider-menu-icon customimg`} />
+    }
+    if (iconType === 1) {
+      return iconfontUrl ? <IconFont type={icon} /> : <i class={`iconfont ${icon} customicon`}></i>
+    }
+  }
+  if (isVNode(icon)) {
+    return icon
+  }
+  const DynamicIcon = resolveComponent(icon as string) as any
+  return (typeof LazyIcon === 'function' && <DynamicIcon />) || null
+}
+
+LazyIcon.props = {
+  icon: {
+    type: [String, Function, Object] as PropType<string | Function | VNode | JSX.Element>
+  },
+  iconType: Number,
+  iconfontUrl: String
+}
+
+export default defineComponent({
+  name: 'BaseMenu',
+  props: baseMenuProps,
+  emits: ['update:openKeys', 'update:selectedKeys', 'click'],
+  setup(props, { attrs, emit }) {
+    const router = useRouter()
+    const handleOpenChange = (openKeys: string[]): void => {
+      emit('update:openKeys', openKeys)
+    }
+    const handleSelect = (params: {
+      key: string | number
+      keyPath: string[] | number[]
+      item: VNodeChild | any
+      domEvent: MouseEvent
+      selectedKeys: string[]
+    }): void => {
+      emit('update:selectedKeys', params.selectedKeys)
+    }
+    const handleClick = (args: {
+      item: VNodeChild
+      key: string | number
+      keyPath: string | string[] | number | number[]
+    }) => {
+      emit('click', args)
+    }
+    const isTotargetLink = (meta: any, routerInfo: any) => {
+      const target = (meta.target || '') as string
+      const hasUrl = isUrl(target)
+      if (router.currentRoute.value?.fullPath !== routerInfo.to) {
+        if (hasUrl && target && meta.targetStatus === 1) {
+          window.open(target)
+        }
+      }
+    }
+    const RouterLink = resolveComponent('router-link') as ConcreteComponent
+    const getNavMenuItems = (menusData: AppRouteModule[] = []) => {
+      return menusData.map((item) => getSubMenuOrItem(item)).filter((item) => item)
+    }
+    const getSubMenuOrItem = (item: AppRouteModule): VNode => {
+      if (
+        Array.isArray(item.children) &&
+        item.children.length > 0 &&
+        !item?.meta?.hideInMenu &&
+        !item?.meta?.hideChildrenInMenu
+      ) {
+        if (props.subMenuItemRender) {
+          return props.subMenuItemRender({
+            item,
+            children: getNavMenuItems(item.children)
+          }) as VNode
+        }
+        const menuTitle = item.meta?.title
+        const defaultTitle = item.meta?.icon ? (
+          <span class={`gx-pro-sider-menu-item`}>
+            <span class={`gx-pro-sider-menu-item-title`}>{menuTitle}</span>
+          </span>
+        ) : (
+          <span class={`gx-pro-sider-menu-item`}>{menuTitle}</span>
+        )
+
+        const hasGroup = item.meta?.type === 'group'
+
+        const MenuComponent = hasGroup ? Menu.ItemGroup : Menu.SubMenu
+
+        return (
+          <MenuComponent
+            title={defaultTitle}
+            key={item.path}
+            icon={
+              hasGroup ? null : (
+                <LazyIcon
+                  icon={item.meta?.icon}
+                  iconfontUrl={props.iconfontUrl}
+                  iconType={item.meta?.iconType}
+                />
+              )
+            }
+          >
+            {getNavMenuItems(item.children)}
+          </MenuComponent>
+        )
+      }
+
+      const [title, icon] = getMenuItem(item)
+
+      return (
+        ((props.menuItemRender && props.menuItemRender({ item, title, icon })) as VNode) || (
+          <Menu.Item
+            disabled={item.meta?.disabled}
+            danger={item.meta?.danger}
+            key={item.path}
+            icon={icon}
+          >
+            {title}
+          </Menu.Item>
+        )
+      )
+    }
+    const getMenuItem = (item: AppRouteModule) => {
+      const meta = { ...item.meta }
+      const CustomTag: any = meta.targetStatus === 1 && meta.target ? 'a' : RouterLink
+      const parames = { to: item.linkPath || item.path || '' }
+      if (parames.to === '/live/list/operation/:id') parames.to = '/live/list/operation/add'
+
+      const menuTitle = item.meta?.title
+      const defaultTitle = item.meta?.icon ? (
+        <CustomTag
+          {...parames}
+          class={`gx-pro-sider-menu-item`}
+          onClick={() => isTotargetLink(meta, parames)}
+        >
+          <span class={`gx-pro-sider-menu-item-title`}>{menuTitle}</span>
+        </CustomTag>
+      ) : (
+        <CustomTag
+          {...parames}
+          class={`gx-pro-sider-menu-item`}
+          onClick={() => isTotargetLink(meta, parames)}
+        >
+          <span>{menuTitle}</span>
+        </CustomTag>
+      )
+
+      const icon =
+        (item.meta?.icon && (
+          <LazyIcon
+            icon={item.meta?.icon}
+            iconfontUrl={props.iconfontUrl}
+            iconType={item.meta?.iconType}
+          />
+        )) ||
+        undefined
+
+      return [defaultTitle, icon]
+    }
+    const getMenuItems = computed(() => {
+      return getNavMenuItems(props.menuData)
+    })
+    return () => (
+      <Menu
+        key="Menu"
+        inlineIndent={16}
+        mode={props.mode}
+        theme={props.theme as 'dark' | 'light'}
+        openKeys={props.openKeys === false ? [] : props.openKeys}
+        selectedKeys={props.selectedKeys || []}
+        style={attrs.style}
+        class={attrs.class}
+        onOpenChange={handleOpenChange}
+        onSelect={handleSelect}
+        onClick={handleClick}
+        {...props.menuProps}
+      >
+        {getMenuItems.value}
+      </Menu>
+    )
+  }
+})

package/template-design-pro/src/components/GDesign/ProLayout/components/SiderMenu/SiderMenu.tsx

@@ -0,0 +1,224 @@
+import type { FunctionalComponent as FC, ExtractPropTypes } from 'vue'
+import { computed, unref } from 'vue'
+import { Layout, Spin, Menu } from 'ant-design-vue'
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
+import BaseMenu from './BaseMenu'
+import { siderMenuProps } from './props'
+import LogoContent from '../LogoContent'
+import { useRouteContext } from '../../RouteContext'
+
+const { Sider } = Layout
+
+const { Item } = Menu
+
+export type SiderMenuProps = Partial<ExtractPropTypes<typeof siderMenuProps>>
+
+export type PrivateSiderMenuProps = {
+  matchMenuKeys?: string[]
+}
+
+export const defaultRenderCollapsedButton = (collapsed?: boolean): CustomRender =>
+  collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />
+
+const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
+  const {
+    theme,
+    layout,
+    isMobile,
+    menuLoading,
+    breakpoint,
+    fixSiderbar,
+    collapsed,
+    siderWidth,
+    collapsedWidth = 48,
+    menuExtraRender = false,
+    menuContentRender = false,
+    menuFooterRender = false,
+    collapsedButtonRender = defaultRenderCollapsedButton,
+    links,
+    onCollapse,
+    onOpenKeys
+  } = props
+
+  const context = useRouteContext()
+
+  const baseClassName = context.getPrefixCls({
+    suffixCls: 'sider',
+    isPor: true
+  })
+
+  const hasContentWide = computed(() => props.layout === 'wide')
+  const hasSplitMenu = computed(() => props.layout === 'mix' && !props.isMobile && props.splitMenus)
+  const layoutSide = computed(() => layout === 'side' || layout === 'simple')
+  const sTheme = computed(
+    () => ((props.layout === 'mix' || hasContentWide.value) && 'light') || theme
+  )
+  const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth))
+  const classNames = computed(() => {
+    return [
+      baseClassName,
+      isMobile ? 'shadow' : null,
+      sTheme.value,
+      hasContentWide.value ? 'wide' : null,
+      fixSiderbar && props.layout !== 'wide' ? `${baseClassName}-fixed` : null
+    ]
+  })
+
+  const handleSelect = ($event: string[]) => {
+    if (props.onSelect) {
+      if (unref(hasSplitMenu)) {
+        props.onSelect([context?.selectedKeys?.[0], ...$event])
+        return
+      }
+      props.onSelect($event)
+    }
+  }
+
+  if (hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
+    return null
+  }
+
+  const defaultMenuDom = (
+    <BaseMenu
+      class={`${baseClassName}-menu`}
+      theme={sTheme.value}
+      mode="inline"
+      menuData={hasSplitMenu.value ? context.flatMenuData : context.menuData}
+      collapsed={props.collapsed}
+      openKeys={context.openKeys}
+      selectedKeys={context.selectedKeys}
+      menuItemRender={props.menuItemRender}
+      subMenuItemRender={props.subMenuItemRender}
+      onClick={props.onMenuClick}
+      style={{
+        width: '100%'
+      }}
+      {...{
+        'onUpdate:openKeys': ($event: string[]) => onOpenKeys && onOpenKeys($event),
+        'onUpdate:selectedKeys': handleSelect
+      }}
+    />
+  )
+
+  const headerDom =
+    layoutSide.value || isMobile ? <LogoContent drawer={isMobile} {...props} /> : null
+
+  const extraDom = menuExtraRender && menuExtraRender(props)
+
+  const linksChild = computed(() => {
+    if (typeof links === 'function') return links?.()
+    return links
+  })
+
+  watch(
+    () => sTheme.value,
+    (val) => {
+      console.log(val)
+    }
+  )
+
+  return (
+    <>
+      {!!(hasSplitMenu.value ? context.flatMenuData : context.menuData).length && (
+        <>
+          {fixSiderbar && (
+            <div
+              style={{
+                width: `${sSideWidth.value}px`,
+                overflow: 'hidden',
+                flex: `0 0 ${sSideWidth.value}px`,
+                maxWidth: `${sSideWidth.value}px`,
+                minWidth: `${sSideWidth.value}px`,
+                transition: `background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)`
+              }}
+            />
+          )}
+          <Sider
+            collapsible
+            trigger={null}
+            class={classNames.value}
+            style={{
+              overflow: 'hidden',
+              zIndex: fixSiderbar ? 101 : undefined,
+              paddingTop:
+                layoutSide.value || props.isMobile || hasContentWide.value
+                  ? 0
+                  : `${props.headerHeight}px`,
+              top: props.layout === 'wide' ? `${props.headerHeight + 20}px` : undefined,
+              height:
+                props.layout === 'wide'
+                  ? `calc(100vh - ${props.headerHeight + 20 * 2}px)`
+                  : undefined
+            }}
+            theme={sTheme.value}
+            breakpoint={breakpoint || undefined}
+            collapsed={collapsed}
+            width={siderWidth}
+            collapsedWidth={collapsedWidth}
+            onCollapse={(collapse) => {
+              if (props.isMobile) return
+              onCollapse?.(collapse)
+            }}
+          >
+            {menuLoading && (
+              <div class="gx-pro-sider-loading">
+                <Spin spinning={menuLoading} />
+              </div>
+            )}
+            {headerDom || null}
+            {extraDom && !props.collapsed && (
+              <div
+                class={{
+                  [`${baseClassName}-extra`]: true,
+                  [`${baseClassName}-extra-no-logo`]: !headerDom
+                }}
+              >
+                {extraDom}
+              </div>
+            )}
+            <div style="flex: 1 1 0%; overflow: hidden auto">
+              {(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}
+            </div>
+            {props.layout !== 'wide' && (
+              <div class={`${baseClassName}-links`}>
+                <Menu
+                  theme={sTheme.value}
+                  inlineIndent={16}
+                  class={`${baseClassName}-link-menu`}
+                  selectedKeys={[]}
+                  openKeys={[]}
+                  mode="inline"
+                >
+                  {((linksChild.value || []) as any[]).map((node, index) => (
+                    <Item class={`${baseClassName}-link`} key={index}>
+                      {node}
+                    </Item>
+                  ))}
+                  {collapsedButtonRender && !isMobile && (
+                    <Item
+                      class={`${baseClassName}-collapsed-button`}
+                      title={false}
+                      key="collapsed"
+                      onClick={() => {
+                        if (onCollapse) {
+                          onCollapse(!collapsed)
+                        }
+                      }}
+                    >
+                      {collapsedButtonRender(collapsed)}
+                    </Item>
+                  )}
+                </Menu>
+              </div>
+            )}
+            {menuFooterRender && (
+              <div class={`${baseClassName}-footer`}>{menuFooterRender(props)}</div>
+            )}
+          </Sider>
+        </>
+      )}
+    </>
+  )
+}
+
+export default SiderMenu

package/template-design-pro/src/components/GDesign/ProLayout/components/SiderMenu/index.tsx

@@ -0,0 +1,43 @@
+import type { FunctionalComponent as FC } from 'vue'
+import { Drawer } from 'ant-design-vue'
+import { siderMenuProps } from './props'
+import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu'
+
+export type SiderMenuWrapperProps = Partial<SiderMenuProps> & Partial<PrivateSiderMenuProps>
+
+const SiderMenuWrapper: FC<SiderMenuWrapperProps> = (props, { attrs }) => {
+  return props.isMobile ? (
+    <Drawer
+      visible={!props.collapsed}
+      closable={false}
+      placement="left"
+      style={{
+        padding: 0,
+        height: '100vh'
+      }}
+      onClose={() => props.onCollapse && props.onCollapse(true)}
+      width={props.siderWidth}
+      bodyStyle={{
+        height: '100vh',
+        padding: 0,
+        display: 'flex',
+        flexDirection: 'row'
+      }}
+    >
+      <SiderMenu {...attrs} {...props} collapsed={props.isMobile ? false : props.collapsed} />
+    </Drawer>
+  ) : (
+    <SiderMenu {...attrs} {...props} />
+  )
+}
+
+SiderMenuWrapper.inheritAttrs = false
+SiderMenuWrapper.displayName = 'SiderMenuWrapper'
+
+export {
+  SiderMenu,
+  // vue props
+  siderMenuProps
+}
+
+export default SiderMenuWrapper

package/template-design-pro/src/components/GDesign/ProLayout/components/SiderMenu/props.ts

@@ -0,0 +1,112 @@
+import type { themeConfig, MenuTheme } from '/types/config'
+import { PropTypes } from '@/utils'
+import type { CustomMenuRender } from './BaseMenu'
+import type { SiderProps, MenuMode } from './typings'
+import logoContentProps from '../LogoContent/props'
+import type { LinksRender, MenuExtraRender, MenuFooterRender } from '../../RenderTypings'
+import { defaultSettingProps } from '../../defaultSettings'
+import { HeaderLogoRender, MenuContentRender } from '../../RenderTypings'
+
+export const baseMenuProps = {
+  ...defaultSettingProps,
+
+  mode: {
+    type: String as PropType<MenuMode>,
+    default: 'inline'
+  },
+  menuData: {
+    type: Array as PropType<AppRouteModule[]>,
+    default: () => []
+  },
+  theme: {
+    type: String as PropType<MenuTheme>,
+    default: 'dark'
+  },
+  layout: {
+    type: String as PropType<themeConfig['layout']>,
+    default: 'mix'
+  },
+  collapsed: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: () => false
+  },
+  openKeys: {
+    type: Array as PropType<WithFalse<string[]>>,
+    default: () => undefined
+  },
+  selectedKeys: {
+    type: Array as PropType<WithFalse<string[]>>,
+    default: () => undefined
+  },
+  menuProps: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => null
+  },
+  menuItemRender: {
+    type: [ Function, Boolean ] as PropType<CustomMenuRender['menuItemRender']>,
+    default: () => false
+  },
+  subMenuItemRender: {
+    type: [ Function, Boolean ] as PropType<CustomMenuRender['subMenuItemRender']>,
+    default: () => false
+  },
+  onClick: [ Function, Object ] as PropType<(...args: any) => void>
+}
+
+export const siderMenuProps = {
+  ...defaultSettingProps,
+  ...baseMenuProps,
+  menuLoading: PropTypes.looseBool,
+  logo: logoContentProps.logo,
+  logoStyle: logoContentProps.logoStyle,
+  logoDirection: logoContentProps.logoDirection,
+  siderWidth: PropTypes.number.def(208),
+  headerHeight: PropTypes.number.def(48),
+  collapsedWidth: PropTypes.number.def(48),
+  links: {
+    type: [ Function, Object, Array ] as PropType<LinksRender>,
+    default: () => undefined
+  },
+  menuHeaderRender: {
+    type: [ Function, Object ] as PropType<HeaderLogoRender>,
+    default: () => undefined
+  },
+  menuFooterRender: {
+    type: [ Function, Object ] as PropType<MenuFooterRender>,
+    default: () => undefined
+  },
+  menuContentRender: {
+    type: [ Function, Object ] as PropType<MenuContentRender>,
+    default: () => undefined
+  },
+  menuExtraRender: {
+    type: [ Function, Object ] as PropType<MenuExtraRender>,
+    default: () => undefined
+  },
+  collapsedButtonRender: {
+    type: [ Function, Object, Boolean ] as PropType<WithFalse<(collapsed?: boolean) => CustomRender>>,
+    default: () => undefined
+  },
+  breakpoint: {
+    type: [ Object, Boolean ] as PropType<SiderProps['breakpoint'] | false>,
+    default: () => false
+  },
+  isMobile: PropTypes.looseBool,
+  matchMenuKeys: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+
+  // events
+  onMenuHeaderClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  onCollapse: {
+    type: Function as PropType<(collapsed: boolean) => void>
+  },
+  onOpenKeys: {
+    type: Function as PropType<(openKeys: WithFalse<string[]>) => void>
+  },
+  onSelect: {
+    type: Function as PropType<(selectedKeys: WithFalse<string[]>) => void>
+  }
+}