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

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

@@ -1,31 +0,0 @@
-import type { BreadcrumbProps } from './RouteContext'
-import type { ProProps } from './typings'
-
-// Custom render or slot
-export type DefaultPropRender = WithFalse<CustomRender>
-
-export type BreadcrumbRender = BreadcrumbProps['itemRender']
-export type HeaderContentRender = WithFalse<() => CustomRender>
-export type HeaderRender = WithFalse<(props: ProProps) => CustomRender>
-export type FooterRender = WithFalse<(props: ProProps) => CustomRender>
-export type RightContentRender = WithFalse<(props: ProProps) => CustomRender>
-export type MenuItemRender = WithFalse<
-  (args: { item: AppRouteModule; title?: JSX.Element; icon?: JSX.Element }) => CustomRender
->
-export type SubMenuItemRender = WithFalse<(args: { item: AppRouteModule; children?: CustomRender[] }) => CustomRender>
-export type LinksRender = WithFalse<CustomRender>
-export type MenuContentRender = WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>
-export type MenuFooterRender = WithFalse<(props?: ProProps) => CustomRender>
-export type MenuExtraRender = WithFalse<(props?: ProProps) => CustomRender>
-export type LogoRender = WithFalse<CustomRender>
-export type ExtraRightDropdownRender = WithFalse<CustomRender>
-export type HeaderLogoRender = WithFalse<(
-  logo: CustomRender,
-  title: CustomRender,
-  props?: ProProps
-) => CustomRender>
-export type CopyrightRender = WithFalse<CustomRender>
-
-export type CollapsedButtonRender = WithFalse<(collapsed?: boolean) => CustomRender>
-
-export type PageHeaderRender = WithFalse<(props?: ProProps) => CustomRender>

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

@@ -1,82 +0,0 @@
-import type { InjectionKey, Ref, ComputedRef } from 'vue'
-import { provide, reactive } from 'vue'
-import { themeConfig } from '/types/config'
-import type { PrefixCls } from '@gx-design-vue/pro-utils'
-import { getPrefixCls } from '@gx-design-vue/pro-utils'
-import { createContext, useContext } from './hooks/context'
-
-export interface Route {
-  path: string
-  breadcrumbName: string
-  children?: Omit<Route, 'children'>[]
-}
-
-export interface BreadcrumbProps {
-  prefixCls?: string
-  routes?: Route[]
-  params?: any
-  separator?: CustomRender
-  itemRender?: (opts: {
-    route: Route
-    params: any
-    routes: Array<Route>
-    paths: Array<string>
-  }) => CustomRender
-}
-
-export type BreadcrumbListReturn = Pick<
-  BreadcrumbProps,
-  Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>
->
-
-export interface MenuState {
-  selectedKeys: string[]
-  openKeys: string[]
-  setSelectedKeys?: (key: string[]) => void
-  setOpenKeys?: (key: string[]) => void
-}
-
-export interface RouteContextProps extends Partial<themeConfig>, MenuState {
-  menuData: AppRouteModule[]
-  flatMenuData?: AppRouteModule[]
-
-  getPrefixCls?: (prefixCls: PrefixCls) => string
-  breadcrumb?: BreadcrumbListReturn | ComputedRef<BreadcrumbListReturn>
-  hasContentWide?: boolean
-  isMobile?: boolean
-  prefixCls?: string
-  collapsed?: boolean
-  hasSideMenu?: boolean
-  hasHeader?: boolean
-  siderWidth?: number
-  headerHeight?: number
-  hasFooterToolbar?: boolean
-  hasFooter?: boolean
-  hasSide?: boolean
-  setHasFooterToolbar?: (bool: boolean) => void
-  /* 附加属性 */
-  [key: string]: any
-}
-
-// set default context
-export const defaultRouteContext = reactive({
-  getPrefixCls
-})
-
-const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context')
-
-export const createRouteContext = () =>
-  createContext<RouteContextProps>(routeContextInjectKey, 'RouteContext.Provider')
-
-export const provideRouteContext = (value: RouteContextProps | Ref<RouteContextProps> | any) => {
-  provide(routeContextInjectKey, value)
-}
-
-export const useRouteContext = () =>
-  useContext<Required<RouteContextProps>>(routeContextInjectKey, defaultRouteContext)
-
-const Provider = createRouteContext()
-
-export default {
-  Provider
-}

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

@@ -1,69 +0,0 @@
-import type { FunctionalComponent, CSSProperties } from 'vue'
-import { computed } from 'vue'
-import { Layout } from 'ant-design-vue'
-import PageLoading from './PageLoading'
-import type { MultiTabProps } from './components/MultiTab'
-import MultiTab from './components/MultiTab'
-import { useRouteContext } from './RouteContext'
-
-const { Content } = Layout
-
-export interface WrapContentProps {
-  style?: CSSProperties
-  class?: string | string[] | any
-  loading?: boolean
-  isMobile: boolean
-  collapsed?: boolean
-  isShowTabsBar?: boolean
-  isFixedMultiTab?: boolean
-  isChildrenLayout?: boolean
-  location?: string | string[] | any
-  siderWidth?: number
-  contentHeight?: number
-  onReloadPage?: MultiTabProps['onReloadPage']
-}
-
-export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots, attrs }) => {
-  const { isMobile, loading, collapsed, siderWidth, isShowTabsBar, isFixedMultiTab, onReloadPage } =
-    props
-
-  if (props.isChildrenLayout) {
-    return slots.default?.()
-  }
-  const context = useRouteContext()
-  const { getPrefixCls } = useRouteContext()
-
-  const prefixCls = getPrefixCls({
-    suffixCls: 'basic-layout',
-    isPor: true
-  })
-
-  const classNames = computed(() => {
-    return {
-      [`${prefixCls}-content`]: true,
-      [`${prefixCls}-warp`]: context.flatMenuData.length === 0
-    }
-  })
-
-  return (
-    <>
-      {context.flatMenuData.length > 0 && isShowTabsBar && (
-        <MultiTab
-          isMobile={isMobile}
-          loading={loading}
-          isFixedMultiTab={isFixedMultiTab}
-          siderWidth={siderWidth}
-          collapsed={collapsed}
-          onReloadPage={onReloadPage}
-        />
-      )}
-      <Content style={attrs.style} class={classNames.value}>
-        {loading && <PageLoading />}
-        <div style={{ opacity: loading ? '0' : undefined }}>{slots.default?.()}</div>
-      </Content>
-    </>
-  )
-}
-
-WrapContent.inheritAttrs = false
-WrapContent.displayName = 'wrap-content'

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

@@ -1,88 +0,0 @@
-import { defineComponent, VNodeChild } from 'vue'
-import { LayoutFooter } from 'ant-design-vue'
-import { GithubOutlined } from '@ant-design/icons-vue'
-import { getPrefixCls } from '@gx-design-vue/pro-utils'
-import type { CopyrightRender } from '../../RenderTypings'
-
-export type Links = WithFalse<
-  {
-    key?: string
-    title: VNodeChild | JSX.Element
-    href: string
-    blankTarget?: boolean
-  }[]
->
-
-export interface GlobalFooterProps {
-  links?: Links
-  copyright?: VNodeChild | JSX.Element
-  prefixCls?: string
-}
-
-export const defaultLinks = [
-  {
-    key: 'Ant Design Pro',
-    title: 'Ant Design Pro',
-    href: 'https://pro.ant.design',
-    blankTarget: true
-  },
-  {
-    key: 'gitee',
-    title: <GithubOutlined />,
-    href: 'https://gitee.com/gx12358/vue-antd-admin',
-    blankTarget: true
-  },
-  {
-    key: 'Ant Design Vue',
-    title: 'Ant Design Vue',
-    href: 'https://next.antdv.com/components/overview-cn/',
-    blankTarget: true
-  }
-]
-
-export default defineComponent({
-  name: 'GlobalFooter',
-  props: {
-    links: {
-      type: [Array, Boolean] as PropType<Links>,
-      default: defaultLinks
-    },
-    copyright: {
-      type: [Object, Function, Boolean, String] as PropType<CopyrightRender>,
-      default: '皖ICP备2022010510号-1'
-    }
-  },
-  setup(props) {
-    const baseClassName = getPrefixCls({
-      suffixCls: 'global-footer',
-      isPor: true
-    })
-
-    return () => (
-      <LayoutFooter style={{ padding: 0 }}>
-        <div class={baseClassName}>
-          {props.links && (
-            <div class={`${baseClassName}-links`}>
-              {props.links.map((link) => (
-                <a
-                  key={link.key}
-                  title={link.key}
-                  target={link.blankTarget ? '_blank' : '_self'}
-                  href={link.href}
-                >
-                  {link.title}
-                </a>
-              ))}
-            </div>
-          )}
-          {props.copyright && (
-            <div class={`${baseClassName}-copyright`}>
-              Copyright&nbsp;&nbsp;2022&nbsp;&nbsp;
-              <a href="https://beian.miit.gov.cn/">{props.copyright}</a>
-            </div>
-          )}
-        </div>
-      </LayoutFooter>
-    )
-  }
-})

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

@@ -1,189 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent, unref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useWindowSize } from '@vueuse/core'
-import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer'
-import Logo from '@/assets/logo.png'
-import { globalHeaderProps } from './props'
-import type { SiderMenuProps } from '../SiderMenu/SiderMenu'
-import { defaultRenderCollapsedButton } from '../SiderMenu/SiderMenu'
-import { siderMenuProps } from '../SiderMenu/props'
-import BaseMenu from '../SiderMenu/BaseMenu'
-import DeFaultRightContent from '../RightContent'
-import LogoContent, { defaultRenderLogo } from '../LogoContent'
-import { useRouteContext } from '../../RouteContext'
-
-export const defaultHeaderProps = { ...siderMenuProps, ...globalHeaderProps }
-
-export type DefaultHeaderProps = Partial<ExtractPropTypes<typeof defaultHeaderProps>> &
-  Partial<SiderMenuProps>
-
-const renderLogo = (
-  menuHeaderRender: SiderMenuProps['menuHeaderRender'],
-  logoDom: CustomRender
-) => {
-  if (menuHeaderRender === false) {
-    return null
-  }
-  if (menuHeaderRender) {
-    return menuHeaderRender(logoDom, null)
-  }
-  return logoDom
-}
-
-const RightContent = defineComponent({
-  props: defaultHeaderProps,
-  setup(props) {
-    const rightSize = ref<number | string>('auto')
-
-    const handleResize = ({ width }: { width: number }) => {
-      rightSize.value = width
-    }
-
-    return () => (
-      <div
-        style={{
-          minWidth: typeof rightSize.value === 'string' ? rightSize.value : `${rightSize.value}px`
-        }}
-      >
-        <div
-          style={{
-            paddingRight: '8px'
-          }}
-        >
-          <ResizeObserver onResize={handleResize}>
-            {props.rightContentRender && typeof props.rightContentRender === 'function' ? (
-              <div>
-                {props.rightContentRender({
-                  ...props
-                })}
-              </div>
-            ) : (
-              <DeFaultRightContent theme={props.theme} extra={props.extraRightDropdownRender} />
-            )}
-          </ResizeObserver>
-        </div>
-      </div>
-    )
-  }
-})
-
-export const DefaultHeader = defineComponent({
-  props: defaultHeaderProps,
-  inheritAttrs: false,
-  setup(props, { slots, emit }) {
-    const router = useRouter()
-    const context = useRouteContext()
-
-    const { width } = useWindowSize()
-
-    const baseClassName = context.getPrefixCls({
-      suffixCls: 'global-header',
-      isPor: true
-    })
-    const className = computed(() => {
-      return {
-        [`${baseClassName}`]: true,
-        [`${props.theme}`]: true,
-        ['wide']: props.layout === 'wide'
-      }
-    })
-
-    const handleChangeKeys = (type: string) => {
-      if (router.currentRoute) {
-        const matched = router.currentRoute.value.matched.concat()
-        if (props.onSelect && type === 'select')
-          props.onSelect(matched.filter((r) => r.name !== 'index').map((r) => r.path))
-        if (props.onOpenKeys && type === 'openKeys')
-          props.onOpenKeys?.(
-            matched.filter((r) => r.path !== router.currentRoute.value.path).map((r) => r.path)
-          )
-      }
-    }
-
-    const onCollapse = () => {
-      emit('collapse', !props.collapsed)
-    }
-
-    const collapsedButtonRender = computed(() => props.collapsedButtonRender || defaultRenderCollapsedButton)
-
-    const contentRender = () => (
-      <>
-        {props.layout === 'mix' && !props.isMobile && props.splitMenus ? (
-          <div style={{ flex: 1 }} class={`${baseClassName}-menu`}>
-            <BaseMenu
-              theme={props.theme}
-              mode={props.mode}
-              collapsed={props.collapsed}
-              menuData={props.menuData}
-              openKeys={context.openKeys}
-              selectedKeys={context.selectedKeys}
-              iconfontUrl={props.iconfontUrl}
-              menuItemRender={props.menuItemRender}
-              subMenuItemRender={props.subMenuItemRender}
-              class={{ 'top-nav-menu': props.mode === 'horizontal' }}
-              {...{
-                'onUpdate:openKeys': () => handleChangeKeys('openKeys'),
-                'onUpdate:selectedKeys': () => handleChangeKeys('select')
-              }}
-            />
-          </div>
-        ) : (
-          <div style={{ flex: 1 }}>{slots.default?.()}</div>
-        )}
-        {props.layout !== 'simple' && (
-          <RightContent
-            extraRightDropdownRender={props.extraRightDropdownRender}
-            rightContentRender={props.rightContentRender}
-            {...props}
-          />
-        )}
-      </>
-    )
-
-    return () => {
-      const logoDom = (
-        <span class={[ `${baseClassName}-logo`, props.isMobile ? 'mobile' : '' ]} key="logo">
-          <a>{defaultRenderLogo(props.logo || Logo)}</a>
-        </span>)
-      return (
-        <div
-          style={{
-            height: '100%',
-            ...(props.isMobile || props.layout !== 'mix' ? {} : { padding: 0 })
-          }}
-          class={className.value}
-        >
-          {props.isMobile ? (
-            <>
-              {renderLogo(props.menuHeaderRender, logoDom)}
-              {props.isMobile && unref(collapsedButtonRender) && (
-                <span class={`${baseClassName}-collapsed-button`} onClick={onCollapse}>
-              {unref(collapsedButtonRender)(props.collapsed)}
-            </span>
-              )}
-              {contentRender()}
-            </>
-          ) : props.layout === 'mix' || props.layout === 'wide' ? (
-            <>
-              <div
-                style={{
-                  width: props.layout === 'wide' ? `${props.wideWidth}px` : undefined,
-                  padding: props.layout === 'wide' && width.value < props.wideWidth ? '0 50px' : undefined
-                }}
-                class={`${baseClassName}-main`}
-              >
-                <div class={`${baseClassName}-main-left`}>
-                  <LogoContent {...props} renderKey="headerTitleRender" />
-                </div>
-                {contentRender()}
-              </div>
-            </>
-          ) : (
-            contentRender()
-          )}
-        </div>
-      )
-    }
-  }
-})

package/template-design-pro/src/components/GDesign/ProLayout/components/GlobalHeader/Header.less

@@ -1,8 +0,0 @@
-@import '../../default.less';
-
-@pro-layout-fixed-header-prefix-cls: ~'@{gx-prefix-pro}-fixed-header';
-
-.@{pro-layout-fixed-header-prefix-cls} {
-  z-index: 9;
-  width: 100%;
-}

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

@@ -1,105 +0,0 @@
-import { defineComponent, computed, toRefs } from 'vue'
-import { Layout } from 'ant-design-vue'
-import { headerViewProps } from './props'
-import { DefaultHeader } from './DefaultHeader'
-import { flatMap } from '../../utils'
-import { useRouteContext } from '../../RouteContext'
-
-const { Header } = Layout
-
-export default defineComponent({
-  inheritAttrs: false,
-  props: headerViewProps,
-  setup(props) {
-    const { theme, isMobile, fixedHeader, headerHeight, layout, onCollapse, splitMenus } =
-      toRefs(props)
-    const context = useRouteContext()
-    const baseClassName = context.getPrefixCls({
-      suffixCls: 'header',
-      isPor: true
-    })
-
-    const baseFixedClassName = context.getPrefixCls({
-      suffixCls: 'fixed-header',
-      isPor: true
-    })
-
-    const hasContentWide = computed(() => layout.value === 'wide')
-    const needFixedHeader = computed(() => fixedHeader.value || context.fixedHeader)
-    const isMix = computed(() => layout.value === 'mix' || hasContentWide.value)
-    const layoutSide = computed(() => layout.value === 'side' || layout.value === 'simple')
-    const hTheme = computed(() => (layoutSide.value && 'light') || theme.value)
-    const className = computed(() => {
-      return {
-        [`${hTheme.value}`]: true,
-        [`${baseClassName}`]: true,
-        [`${baseFixedClassName}`]: needFixedHeader.value
-      }
-    })
-    const needSettingWidth = computed(() => needFixedHeader.value && !isMobile.value)
-
-    // cache menu
-    const clearMenuData = computed(() =>
-      splitMenus.value
-        ? (context.menuData && flatMap(context.menuData as AppRouteModule[])) || []
-        : []
-    )
-    const width = computed(() => {
-      return layoutSide.value && needSettingWidth.value
-        ? `calc(100% - ${props.collapsed ? props.collapsedWidth : props.siderWidth}px)`
-        : '100%'
-    })
-    const right = computed(() => (needFixedHeader.value ? 0 : undefined))
-
-    const renderContent = () => {
-      const defaultDom = (
-        <DefaultHeader
-          {...props}
-          theme={hTheme.value as 'light' | 'dark'}
-          mode="horizontal"
-          onCollapse={onCollapse.value}
-          menuData={clearMenuData.value}
-        >
-          {!isMix.value
-            ? props.headerContentRender && typeof props.headerContentRender === 'function'
-              ? props.headerContentRender(props)
-              : props.headerContentRender
-            : null}
-        </DefaultHeader>
-      )
-      if (props.headerRender) {
-        return props.headerRender(props, defaultDom)
-      }
-      return defaultDom
-    }
-
-    return () => (
-      <>
-        {needFixedHeader.value && !hasContentWide.value && (
-          <Header
-            theme={hTheme.value}
-            style={{
-              height: `${headerHeight.value}px`,
-              lineHeight: `${headerHeight.value}px`,
-              background: 'transparent'
-            }}
-          />
-        )}
-        <Header
-          theme={hTheme.value}
-          class={className.value}
-          style={{
-            padding: 0,
-            height: `${headerHeight.value}px`,
-            lineHeight: `${headerHeight.value}px`,
-            width: width.value,
-            zIndex: layoutSide.value ? 100 : 101,
-            right: right.value
-          }}
-        >
-          {renderContent()}
-        </Header>
-      </>
-    )
-  }
-})

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

@@ -1,69 +0,0 @@
-import type { Theme } from '/types/config'
-import { PropTypes } from '@/utils'
-import logoContentProps from '../LogoContent/props'
-import { siderMenuProps } from '../SiderMenu/props'
-import type { RightContentRender } from '../../RenderTypings'
-import { defaultSettingProps } from '../../defaultSettings'
-import { ExtraRightDropdownRender } from '../../RenderTypings'
-
-export const globalHeaderProps = {
-  ...defaultSettingProps,
-  logo: logoContentProps.logo,
-  logoStyle: logoContentProps.logoStyle,
-  logoDirection: logoContentProps.logoDirection,
-  menuLoading: PropTypes.looseBool,
-  autoHideHeader: PropTypes.looseBool,
-  collapsed: PropTypes.looseBool,
-  isMobile: PropTypes.looseBool,
-  siderWidth: siderMenuProps.siderWidth,
-  headerTheme: {
-    type: String as PropType<Theme>,
-    default: 'dark'
-  },
-  menuData: {
-    type: Array as PropType<AppRouteModule[]>,
-    default: () => []
-  },
-  menuRender: {
-    type: [ Object, Function ] as PropType<WithFalse<(props: any /* HeaderViewProps */,
-      defaultDom: CustomRender) => CustomRender>>,
-    default: () => undefined
-  },
-  extraRightDropdownRender: {
-    type: [ Object, Function ] as PropType<ExtraRightDropdownRender>,
-    default: () => undefined
-  },
-  rightContentRender: {
-    type: [Object, Function] as PropType<RightContentRender>,
-    default: () => undefined,
-  },
-  collapsedButtonRender: siderMenuProps.collapsedButtonRender,
-  matchMenuKeys: siderMenuProps.matchMenuKeys,
-  onCollapse: siderMenuProps.onCollapse,
-  onOpenKeys: siderMenuProps.onOpenKeys,
-  onMenuHeaderClick: PropTypes.func,
-  onSelect: siderMenuProps.onSelect
-}
-
-export const headerViewProps = {
-  ...globalHeaderProps,
-  headerTitleRender: {
-    type: [ Object, Function ] as PropType<WithFalse<(
-      props: any,
-      defaultDom: CustomRender
-    ) => CustomRender>>,
-    default: () => undefined
-  },
-  headerRender: {
-    type: [Object, Function] as PropType<WithFalse<(props: any, defaultDom: CustomRender) => CustomRender>>,
-    default: () => undefined,
-  },
-  headerContentRender: {
-    type: [Object, Function] as PropType<WithFalse<(props: any) => CustomRender>>,
-    default: () => undefined,
-  },
-  hasSiderMenu: PropTypes.looseBool,
-  collapsedWidth: siderMenuProps.collapsedWidth,
-  siderWidth: siderMenuProps.siderWidth
-}
-