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

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

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

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

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

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

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

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

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

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