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

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

@@ -1,190 +0,0 @@
-import type { ExtractPropTypes, VNodeChild } from 'vue'
-import { omit } from 'lodash-es'
-import { defineComponent } from 'vue'
-import { RouterLink } from 'vue-router'
-import { Card, PageHeader, Breadcrumb } from 'ant-design-vue'
-import { breadcrumbProps } from 'ant-design-vue/es/breadcrumb/Breadcrumb'
-import config from '/config/config'
-import { GPorWaterMark } from '@gx-design-vue/pro-watermark'
-import { getPrefixCls, getSlotVNode } from '@gx-design-vue/pro-utils'
-import { PropTypes } from '@/utils'
-import { pageContainerProps } from './props'
-import { useRouteContext } from '../../RouteContext'
-import type { RouteContextProps } from '../../RouteContext'
-import type { DefaultPropRender } from '../../RenderTypings'
-
-export type PageContainerProps = Partial<ExtractPropTypes<typeof pageContainerProps>>
-
-const { waterMark } = config.defaultSettings
-
-const renderPageHeader = (
-  content: CustomRender,
-  extraContent: CustomRender,
-  prefixedClassName: string
-): VNodeChild | JSX.Element | null => {
-  if (!content && !extraContent) {
-    return null
-  }
-  return (
-    <div class={`${prefixedClassName}-detail`}>
-      <div class={`${prefixedClassName}-main`}>
-        <div class={`${prefixedClassName}-row`}>
-          {content && (
-            <div class={`${prefixedClassName}-content`}>
-              {(typeof content === 'function' && content()) || content}
-            </div>
-          )}
-          {extraContent && (
-            <div class={`${prefixedClassName}-extraContent`}>
-              {(typeof extraContent === 'function' && extraContent()) || extraContent}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/**
- * 配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
- *
- * @param props
- * @returns
- */
-const ProBreadcrumb = defineComponent({
-  props: breadcrumbProps(),
-  setup(props) {
-    const value = useRouteContext()
-
-    return () => {
-      return (
-        <div
-          style={{
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center'
-          }}
-        >
-          <Breadcrumb {...value?.breadcrumb} {...value?.breadcrumbProps} {...props} />
-        </div>
-      )
-    }
-  }
-})
-
-const defaultPageHeaderRender = (
-  props: PageContainerProps,
-  value: Required<RouteContextProps> & { prefixedClassName: string }
-) => {
-  const { title, content, pageHeaderRender, header, extraContent, ...restProps } = omit(props, [
-    'prefixCls'
-  ])
-  if (pageHeaderRender) {
-    return pageHeaderRender({ ...props, ...value })
-  }
-  let pageHeaderTitle = title
-  if (!title && title !== false) {
-    pageHeaderTitle = value.title
-  }
-  const unrefBreadcrumb = unref(value.breadcrumb || {})
-  const breadcrumb = restProps.breadcrumb || {
-    ...unrefBreadcrumb,
-    itemRender:
-      unrefBreadcrumb.itemRender ||
-      (({ route }) => {
-        return <RouterLink to={route.path}>{route.breadcrumbName}</RouterLink>
-      })
-  }
-
-  // inject value
-  return (
-    <PageHeader {...restProps} title={pageHeaderTitle} breadcrumb={breadcrumb}>
-      {header || renderPageHeader(content, extraContent, value.prefixedClassName)}
-    </PageHeader>
-  )
-}
-
-const PageContainer = defineComponent({
-  inheritAttrs: false,
-  name: 'GProPageContainer',
-  props: {
-    contentStyle: PropTypes.style,
-    cardBodyStyle: PropTypes.style,
-    useCard: PropTypes.bool.def(true)
-  },
-  setup(props, { slots }) {
-    const value = useRouteContext()
-
-    const prefixedClassName = getPrefixCls({
-      suffixCls: 'page-container',
-      isPor: true
-    })
-
-    const gridPrefixCls = getPrefixCls({
-      suffixCls: 'grid-content',
-      isPor: true
-    })
-
-    const headerDom = computed(() => {
-      const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags')
-      const headerContent = getSlotVNode<DefaultPropRender>(slots, props, 'content')
-      const extra = getSlotVNode<DefaultPropRender>(slots, props, 'extra')
-      const extraContent = getSlotVNode<DefaultPropRender>(slots, props, 'extraContent')
-      return (
-        <div class={`${prefixedClassName}-warp`}>
-          {defaultPageHeaderRender(
-            {
-              ...omit(props, 'useCard'),
-              tags,
-              content: headerContent,
-              extra,
-              extraContent,
-              prefixCls: undefined
-            },
-            {
-              ...value,
-              prefixedClassName: prefixedClassName
-            }
-          )}
-        </div>
-      )
-    })
-
-    const content = () => (
-      <div class={`${prefixedClassName}-children-content`}>
-        {
-          props.useCard
-            ? (
-              <Card style={value.hasContentWide ? { minHeight: '853px' } : undefined} bordered={false}>
-                {slots.default?.()}
-              </Card>
-            ) : slots.default?.()
-        }
-      </div>
-    )
-
-    const renderContentDom = () => <>{waterMark ? <GPorWaterMark>{content()}</GPorWaterMark> : content()}</>
-
-    return () => {
-      return (
-        <div
-          class={{
-            [`${prefixedClassName}`]: true,
-            ['wide']: value.hasContentWide
-          }}
-        >
-          {!value.hasContentWide && headerDom.value}
-          <div class={gridPrefixCls}>
-            <div class={`${gridPrefixCls}-children`} style={props.contentStyle}>
-              {renderContentDom()}
-            </div>
-          </div>
-        </div>
-      )
-    }
-  }
-})
-
-export { ProBreadcrumb }
-
-export default PageContainer

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

@@ -1,48 +0,0 @@
-import { pageHeaderProps } from 'ant-design-vue/es/page-header'
-import { PropTypes } from '@/utils'
-import type { DefaultPropRender, PageHeaderRender } from '../../RenderTypings'
-
-export const pageContainerProps = {
-  ...pageHeaderProps(),
-  title: {
-    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
-    default: () => null,
-  },
-  subTitle: {
-    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
-    default: () => null,
-  },
-  content: {
-    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
-    default: () => null,
-  },
-  extraContent: {
-    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
-    default: () => null,
-  },
-  header: {
-    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
-    default: () => null,
-  },
-  footer: {
-    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
-    default: () => null,
-  },
-  pageHeaderRender: {
-    type: [Object, Function, Boolean] as PropType<PageHeaderRender>,
-  },
-  prefixCls: {
-    type: String,
-    default: 'gx-pro',
-  },
-  contentStyle: PropTypes.style,
-  useCard: PropTypes.bool.def(true),
-  ghost: {
-    type: Boolean,
-    default: () => undefined,
-  },
-  loading: {
-    type: Boolean,
-    default: () => undefined,
-  },
-}

package/template-design-pro/src/components/GDesign/ProLayout/components/PageContainer/style.less

@@ -1,128 +0,0 @@
-@root-entry-name: 'default';
-
-@pro-layout-page-container: ~'@{gx-prefix-pro}-page-container';
-@pro-layout-grid-content-prefix-cls: ~'@{gx-prefix-pro}-pro-grid-content';
-
-@pro-layout-page-container-content-margin: 24px 24px 0;
-@pro-layout-page-container-content-padding: inherit;
-@pro-layout-page-container-bg-color: inherit;
-@pro-layout-page-container-warp-bg-color: @component-background;
-
-.@{pro-layout-grid-content-prefix-cls} {
-  width: 100%;
-}
-
-.@{pro-layout-page-container}-children-content {
-  padding: @pro-layout-page-container-content-padding;
-  margin: @pro-layout-page-container-content-margin;
-}
-
-.@{pro-layout-page-container} {
-  background-color: @pro-layout-page-container-bg-color;
-
-  &.wide {
-    margin: 0;
-  }
-
-  &-warp {
-    background-color: @pro-layout-page-container-warp-bg-color;
-
-    .@{ant-prefix}-tabs-nav {
-      margin: 0;
-    }
-  }
-
-  &-ghost {
-    .@{pro-layout-page-container}-warp {
-      background-color: transparent;
-    }
-
-    .@{pro-layout-page-container}-children-content {
-      margin-top: 0;
-    }
-  }
-}
-
-.@{pro-layout-page-container}-main {
-  .@{pro-layout-page-container}-detail {
-    display: flex;
-  }
-
-  .@{pro-layout-page-container}-row {
-    display: flex;
-    width: 100%;
-  }
-
-  .@{pro-layout-page-container}-title-content {
-    margin-bottom: 16px;
-  }
-
-  .@{pro-layout-page-container}-title,
-  .@{pro-layout-page-container}-content {
-    flex: auto;
-    width: 100%;
-  }
-
-  .@{pro-layout-page-container}-extraContent,
-  .@{pro-layout-page-container}-main {
-    flex: 0 1 auto;
-  }
-
-  .@{pro-layout-page-container}-main {
-    width: 100%;
-  }
-
-  .@{pro-layout-page-container}-title {
-    margin-bottom: 16px;
-  }
-
-  .@{pro-layout-page-container}-logo {
-    margin-bottom: 16px;
-  }
-
-  .@{pro-layout-page-container}-extraContent {
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .@{pro-layout-page-container}-main {
-    .@{pro-layout-page-container}-extraContent {
-      margin-left: 44px;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .@{pro-layout-page-container}-main {
-    .@{pro-layout-page-container}-extraContent {
-      margin-left: 20px;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .@{pro-layout-page-container}-main {
-    .@{pro-layout-page-container}-row {
-      display: block;
-    }
-
-    .@{pro-layout-page-container}-action,
-    .@{pro-layout-page-container}-extraContent {
-      margin-left: 0;
-      text-align: left;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .@{pro-layout-page-container}-detail {
-    display: block;
-  }
-
-  .@{pro-layout-page-container}-extraContent {
-    margin-left: 0;
-  }
-}

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

@@ -1,63 +0,0 @@
-import type { FunctionalComponent as FC, VNode } from 'vue'
-import { cloneVNode } from 'vue'
-import { cloneDeep } from 'lodash-es'
-import { Dropdown, Menu, Avatar } from 'ant-design-vue'
-import { LogoutOutlined, UserOutlined } from '@ant-design/icons-vue'
-import type { ExtraRightDropdownRender } from '../../RenderTypings'
-import { useRouteContext } from '../../RouteContext'
-
-export type AvatarDropdownProps = {
-  extra?: ExtraRightDropdownRender
-  onLogout?: () => void
-  avatar?: string
-  userName?: string
-}
-
-const AvatarDropdown: FC<AvatarDropdownProps> = (props: AvatarDropdownProps) => {
-  const { extra, onLogout, avatar, userName } = props
-
-  const context = useRouteContext()
-
-  const baseClassName = context.getPrefixCls({
-    suffixCls: 'header-right',
-    isPor: true
-  })
-
-  return (
-    <Dropdown
-      overlay={
-        <Menu class={`${baseClassName}-menu`}>
-          {extra &&
-            (extra as VNode[]).map((child: VNode, index) => {
-              const newChild = cloneDeep(child)
-              const handleChildClick = child?.['props']?.onClick
-              if (child?.['props']?.onClick) delete child?.['props']?.onClick
-              return (
-                <Menu.Item key={index} onClick={() => handleChildClick()}>
-                  {cloneVNode(newChild)}
-                </Menu.Item>
-              )
-            })}
-          <Menu.Item key={extra ? (extra as VNode[]).length : 0} onClick={onLogout}>
-            <a href="javascript:">
-              <LogoutOutlined />
-              <span>退出登录</span>
-            </a>
-          </Menu.Item>
-        </Menu>
-      }
-    >
-      <span class={[`${baseClassName}-action`, `${baseClassName}-account`]}>
-        <Avatar
-          src={avatar}
-          icon={<UserOutlined />}
-          size="small"
-          class={`${baseClassName}-avatar`}
-        />
-        <span class={[`${baseClassName}-name`, 'anticon']}>{userName}</span>
-      </span>
-    </Dropdown>
-  )
-}
-
-export default AvatarDropdown

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

@@ -1,122 +0,0 @@
-import { ref } from 'vue'
-import { AutoComplete, Input } from 'ant-design-vue'
-import type { AutoCompleteProps } from 'ant-design-vue/es/auto-complete'
-import { SearchOutlined } from '@ant-design/icons-vue'
-import { getPrefixCls } from '@gx-design-vue/pro-utils'
-
-export type HeaderSearchProps = {
-  onSearch?: (value?: string) => void
-  onChange?: (value?: string) => void
-  onVisibleChange?: (b: boolean) => void
-  placeholder?: string
-  options: AutoCompleteProps['options']
-  defaultVisible?: boolean
-  visible?: boolean
-  defaultValue?: string
-  value?: string
-}
-
-const hearderSearchProps = {
-  onSearch: Function as PropType<HeaderSearchProps['onSearch']>,
-  onChange: Function as PropType<HeaderSearchProps['onChange']>,
-  onVisibleChange: Function as PropType<HeaderSearchProps['onVisibleChange']>,
-  placeholder: String as PropType<HeaderSearchProps['placeholder']>,
-  options: Object as PropType<HeaderSearchProps['options']>,
-  defaultVisible: Boolean as PropType<HeaderSearchProps['defaultVisible']>,
-  visible: Boolean as PropType<HeaderSearchProps['visible']>,
-  defaultValue: String as PropType<HeaderSearchProps['defaultValue']>,
-  value: String as PropType<HeaderSearchProps['value']>
-}
-
-const HeaderSearch = defineComponent({
-  props: hearderSearchProps,
-  emit: ['update:value', 'update:visible', 'visibleChange', 'change'],
-  setup(props, { emit, attrs }) {
-    const baseClass = getPrefixCls({
-      suffixCls: 'header-search',
-      isPor: true
-    })
-    const inputRef = ref()
-    const value = ref<string>('')
-    const searchMode = ref<boolean>(false)
-
-    watchEffect(() => {
-      value.value = props.value ?? props.defaultValue
-    })
-
-    watchEffect(() => {
-      searchMode.value = props.visible ?? props.defaultVisible
-    })
-
-    const inputClass = computed(() => {
-      return {
-        [`${baseClass}-input`]: true,
-        [`${baseClass}-show`]: searchMode.value
-      }
-    })
-
-    const setValue = (val: string) => {
-      value.value = val
-      emit('change', val)
-    }
-
-    const setSearchMode = (val: boolean) => {
-      searchMode.value = val
-      emit('visibleChange', val)
-    }
-
-    return () => (
-      <div
-        class={{ [`${baseClass}`]: true, [`${attrs.class}`]: true }}
-        onClick={() => {
-          setSearchMode(true)
-          if (searchMode.value && inputRef.value) {
-            inputRef.value.focus()
-          }
-        }}
-        onTransitionend={({ propertyName }) => {
-          if (propertyName === 'width' && !searchMode.value) {
-            if (props.onVisibleChange) {
-              emit('visibleChange', searchMode.value)
-            }
-          }
-        }}
-      >
-        <SearchOutlined
-          key="Icon"
-          style={{
-            cursor: 'pointer'
-          }}
-        />
-        <AutoComplete
-          key="AutoComplete"
-          class={inputClass.value}
-          value={value}
-          options={props.options}
-          onChange={setValue}
-        >
-          <Input
-            size="small"
-            ref={(e) => (inputRef.value = e)}
-            defaultValue={props.defaultValue}
-            aria-label={props.placeholder}
-            placeholder={props.placeholder}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                if (props.onSearch) {
-                  props.onSearch(value.value)
-                }
-              }
-            }}
-            onBlur={() => {
-              setSearchMode(false)
-            }}
-          />
-        </AutoComplete>
-      </div>
-    )
-  }
-})
-
-HeaderSearch.inheritAttrs = false
-export default HeaderSearch

package/template-design-pro/src/components/GDesign/ProLayout/components/RightContent/headerSearch.less

@@ -1,30 +0,0 @@
-@import '../../default.less';
-
-@pro-layout-header-search-prefix-cls: ~'@{gx-prefix-pro}-header-search';
-
-.@{pro-layout-header-right-prefix-cls} {
-  display: inline-flex;
-  align-items: center;
-
-  .@{pro-layout-header-right-prefix-cls}-input {
-    width: 0;
-    min-width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    transition: width 0.3s, margin-left 0.3s;
-
-    :global(.ant-select-selection) {
-      background: transparent;
-    }
-
-    input {
-      box-shadow: none !important;
-    }
-
-    &.@{pro-layout-header-right-prefix-cls}-show {
-      width: 210px;
-      margin-left: 8px;
-    }
-  }
-}

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

@@ -1,95 +0,0 @@
-import { computed, defineComponent, createVNode } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Modal, Space } from 'ant-design-vue'
-import { LogoutOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
-import config from '/config/config'
-import { useStore } from '@gx-vuex'
-import { globalHeaderProps } from '../GlobalHeader/props'
-import HeaderSearch from './HeaderSearch'
-import AvatarDropdown from './AvatarDropdown'
-import NoticeIcon from '../NoticeIcon'
-import { useRouteContext } from '../../RouteContext'
-
-export default defineComponent({
-  components: { LogoutOutlined },
-  props: {
-    theme: globalHeaderProps.theme,
-    extra: globalHeaderProps.extraRightDropdownRender
-  },
-  setup(props) {
-    const { recordRoute } = config.defaultSettings
-
-    const context = useRouteContext()
-
-    const baseClassName = context.getPrefixCls({
-      suffixCls: 'header-right',
-      isPor: true
-    })
-
-    const store = useStore()
-    const route = useRoute()
-    const router = useRouter()
-
-    const avatar = computed(() => store.user.avatar)
-    const userName = computed(() => store.user.loginName)
-
-    const logout = () => {
-      Modal.confirm({
-        title: '温馨提醒',
-        icon: createVNode(ExclamationCircleOutlined),
-        content: '是否确认退出系统?',
-        okText: '确认',
-        cancelText: '取消',
-        onOk() {
-          return new Promise((resolve) => {
-            setTimeout(resolve, 200)
-            store.user.userLogut().then(() => {
-              if (recordRoute) {
-                const fullPath = route.fullPath
-                router.push(`/user/login?redirect=${fullPath}`)
-              } else {
-                router.push({ path: '/user/login' })
-              }
-            })
-          })
-        },
-        onCancel() {}
-      })
-    }
-
-    return () => (
-      <Space class={[baseClassName, props.theme]}>
-        <HeaderSearch
-          class={[`${baseClassName}-action`, `${baseClassName}-search`]}
-          placeholder="站内搜索"
-          defaultValue="Ant Design"
-          options={[
-            {
-              label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>,
-              value: 'umi ui'
-            },
-            {
-              label: <a href="https://www.antdv.com/components/overview-cn">Ant Design</a>,
-              value: 'Ant Design'
-            },
-            {
-              label: <a href="https://protable.ant.design/">Pro Table</a>,
-              value: 'Pro Table'
-            },
-            {
-              label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
-              value: 'Pro Layout'
-            }
-          ]}
-        />
-        <NoticeIcon />
-        <AvatarDropdown
-          avatar={avatar.value}
-          userName={userName.value}
-          onLogout={logout}
-          {...props}
-        />
-      </Space>
-    )
-  }
-})