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

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

@@ -1,224 +0,0 @@
-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

@@ -1,224 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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>
-  }
-}