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

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

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

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

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

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

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

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

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