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

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

@@ -1,79 +0,0 @@
-@import '../../default.less';
-
-@pro-layout-multi-tab-prefix-cls: ~'@{gx-prefix-pro}-multi-tab';
-
-.@{pro-layout-multi-tab-prefix-cls} {
-  .ant-tabs {
-    margin: 0;
-    width: 100%;
-    padding-bottom: 6px;
-    background: @white;
-
-    .ant-tabs-nav {
-      padding-left: 16px;
-      margin: 0;
-    }
-  }
-
-  .ant-tabs-bar {
-    padding-left: 16px;
-    margin: 0;
-  }
-
-  &-wrap {
-    background-color: @white;
-
-    &-fixed {
-      position: fixed;
-      top: 48px;
-      right: 0;
-      z-index: 9;
-      width: 100%;
-      height: 62px;
-      transition: width 0.2s;
-    }
-
-    &-loading {
-      height: 48px;
-    }
-  }
-
-  &-fixed {
-    width: 100%;
-    height: 62px;
-    background: transparent;
-
-    &-loading {
-      height: 48px;
-    }
-  }
-
-  &-dropdown-menu-btn {
-    padding: 12px;
-    margin-right: 8px;
-    font-size: 16px;
-    cursor: pointer;
-  }
-
-  &-content {
-    display: flex;
-    align-items: center;
-  }
-
-  &-reload-btn {
-    margin-right: 0;
-    margin-left: 8px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.45);
-
-    &:hover {
-      color: var(--ant-primary-color);
-    }
-  }
-
-  &-close-btn {
-    margin-left: 8px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.45);
-  }
-}

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

@@ -1,148 +0,0 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { computed, defineComponent, ref } from 'vue'
-import { Tabs, Badge, Dropdown, Spin } from 'ant-design-vue'
-import { BellOutlined } from '@ant-design/icons-vue'
-import { getPrefixCls } from '@gx-design-vue/pro-utils'
-import { PropTypes } from '@/utils'
-import NoticeList, { NoticeIconItem, NoticeIconTabProps } from './NoticeList'
-
-import './index.less'
-
-const TabPane = Tabs.TabPane
-
-export const noticeIconProps = {
-  class: PropTypes.string,
-  count: PropTypes.number,
-  loading: PropTypes.looseBool,
-  onClear: Function as PropType<(tabName: string, tabKey: string) => void>,
-  onItemClick: Function as PropType<(item: NoticeIconItem, tabProps: NoticeIconTabProps) => void>,
-  onViewMore: Function as PropType<(tabProps: NoticeIconTabProps, e: MouseEvent) => void>,
-  onTabChange: Function as PropType<(tabTile: string) => void>,
-  style: {
-    type: Object as PropType<CSSProperties>,
-    default: () => undefined
-  },
-  onPopupVisibleChange: Function as PropType<(visible: boolean) => void>,
-  popupVisible: PropTypes.looseBool,
-  clearText: PropTypes.string,
-  viewMoreText: PropTypes.string,
-  clearClose: PropTypes.looseBool,
-  emptyImage: PropTypes.string
-}
-
-export type NoticeIconProps = Partial<ExtractPropTypes<typeof noticeIconProps>>
-
-const NoticeIcon = defineComponent({
-  props: noticeIconProps,
-  Tab: NoticeList,
-  emits: ['onClear', 'onTabChange', 'onItemClick', 'onViewMore', 'onPopupVisibleChange'],
-  setup(props, { emit, slots }) {
-    const prefixCls = getPrefixCls({
-      suffixCls: 'notice',
-      isPor: true
-    })
-
-    const visible = ref(props.popupVisible || false)
-
-    const activeKey = ref('notification')
-
-    const getChildrenSlots: any = computed(() =>
-      slots.default?.().length === 1 &&
-      (String(slots.default?.()[0].type) === String(Symbol('Fragment')) ||
-        String(slots.default?.()[0].type) === String(Symbol()))
-        ? slots.default?.()[0].children || []
-        : slots.default?.() || []
-    )
-
-    const onChange = (value: boolean) => {
-      visible.value = value
-      emit('onPopupVisibleChange', value)
-    }
-
-    const onTabChange = (key) => {
-      activeKey.value = key
-      props.onTabChange && props.onTabChange(key)
-    }
-
-    const NoticeBellIcon = <BellOutlined class={`${prefixCls}-icon`} />
-
-    const trigger = computed(() => (
-      <span
-        class={{
-          [`${prefixCls}-button`]: true,
-          [`${props.class}`]: props.class,
-          [`opened`]: visible.value
-        }}
-        onClick={() => onChange(true)}
-      >
-        <Badge count={props.count} style={{ boxShadow: 'none' }} class={`${prefixCls}-badge`}>
-          {NoticeBellIcon}
-        </Badge>
-      </span>
-    ))
-
-    const notificationBoxRender = () => {
-      const { loading, onClear, onItemClick, onViewMore, clearText, viewMoreText } = props
-
-      return (
-        <Spin spinning={loading} delay={300}>
-          <Tabs class={`${prefixCls}-tabs`} activeKey={activeKey.value} onChange={onTabChange}>
-            {getChildrenSlots.value.map((item: any) => {
-              if (!item) {
-                return null
-              }
-
-              const { list, title, count, tabKey, showClear, showViewMore, emptyText } = item.props
-              const len = list && list.length ? list.length : 0
-              const msgCount = count || count === 0 ? count : len
-              const tabTitle: string = msgCount > 0 ? `${title} (${msgCount})` : title
-              return (
-                <TabPane tab={tabTitle} key={tabKey}>
-                  <NoticeList
-                    clearText={clearText}
-                    viewMoreText={viewMoreText}
-                    list={list}
-                    tabKey={tabKey}
-                    onClear={(): void => onClear && onClear(title, tabKey)}
-                    onClick={(el): void => onItemClick && onItemClick(el, item.props)}
-                    onViewMore={(event): void => onViewMore && onViewMore(item.props, event)}
-                    emptyText={emptyText}
-                    showClear={showClear}
-                    showViewMore={showViewMore}
-                    title={title}
-                  />
-                </TabPane>
-              )
-            })}
-          </Tabs>
-        </Spin>
-      )
-    }
-
-    return () => {
-      return (
-        <>
-          {getChildrenSlots.value.length > 0 ? (
-            <Dropdown
-              placement="bottomRight"
-              trigger={['click']}
-              overlay={notificationBoxRender()}
-              overlayClassName={`gx-pro-dropdown-container ${prefixCls}-popover`}
-              onVisibleChange={() => onChange}
-            >
-              {trigger.value}
-            </Dropdown>
-          ) : (
-            trigger.value
-          )}
-        </>
-      )
-    }
-  }
-})
-
-NoticeIcon.defaultProps = {
-  emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg'
-}
-
-export default NoticeIcon

package/template-design-pro/src/components/GDesign/ProLayout/components/NoticeIcon/NoticeList.module.less

@@ -1,115 +0,0 @@
-.list {
-  max-height: 400px;
-  overflow: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .item {
-    padding-right: 24px;
-    padding-left: 24px;
-    overflow: hidden;
-    cursor: pointer;
-    transition: all 0.3s;
-
-    .meta {
-      width: 100%;
-    }
-
-    .avatar {
-      margin-top: 4px;
-      background: @component-background;
-    }
-
-    .iconElement {
-      font-size: 32px;
-    }
-
-    &.read {
-      opacity: 0.4;
-    }
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    &:hover {
-      background: @primary-1;
-    }
-
-    .title {
-      margin-bottom: 8px;
-      font-weight: normal;
-    }
-
-    .description {
-      font-size: 12px;
-      line-height: @line-height-base;
-    }
-
-    .datetime {
-      margin-top: 4px;
-      font-size: 12px;
-      line-height: @line-height-base;
-    }
-
-    .extra {
-      float: right;
-      margin-top: -1.5px;
-      margin-right: 0;
-      font-weight: normal;
-      color: @text-color-secondary;
-    }
-  }
-
-  .loadMore {
-    padding: 8px 0;
-    color: @primary-6;
-    text-align: center;
-    cursor: pointer;
-
-    &.loadedAll {
-      color: rgba(0, 0, 0, 0.25);
-      cursor: unset;
-    }
-  }
-}
-
-.notFound {
-  padding: 73px 0 88px;
-  color: @text-color-secondary;
-  text-align: center;
-
-  img {
-    display: inline-block;
-    height: 76px;
-    margin-bottom: 16px;
-  }
-}
-
-.bottomBar {
-  height: 46px;
-  line-height: 46px;
-  color: @text-color;
-  text-align: center;
-  border-top: 1px solid @border-color-split;
-  border-radius: 0 0 @border-radius-base @border-radius-base;
-  transition: all 0.3s;
-
-  div {
-    display: inline-block;
-    width: 50%;
-    cursor: pointer;
-    user-select: none;
-    transition: all 0.3s;
-
-    &:only-child {
-      width: 100%;
-    }
-
-    &:not(:only-child):last-child {
-      border-left: 1px solid @border-color-split;
-    }
-  }
-}

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

@@ -1,154 +0,0 @@
-import type { FunctionalComponent as FC, CSSProperties } from 'vue'
-import { Tag, List, Avatar } from 'ant-design-vue'
-
-import styles from './NoticeList.module.less'
-
-export type NoticeIconItemType = 'notification' | 'message' | 'event'
-
-export type NoticeIconItem = {
-  props?: any
-  id?: string
-  extra?: string
-  key?: string
-  read?: boolean
-  avatar?: string
-  title?: string
-  status?: string
-  datetime?: string
-  description?: string
-  type?: NoticeIconItemType
-}
-
-export type NoticeIconTabProps = {
-  count?: number
-  showClear?: boolean
-  showViewMore?: boolean
-  style?: CSSProperties
-  title: string
-  tabKey: NoticeIconItemType
-  onClick?: (item: NoticeIconItem) => void
-  onClear?: () => void
-  emptyText?: string
-  clearText?: string
-  viewMoreText?: string
-  list: NoticeIconItem[]
-  onViewMore?: (e: any) => void
-}
-
-const NoticeListExtra = (extra, status) => {
-  const color = {
-    todo: '',
-    processing: 'blue',
-    urgent: 'red',
-    doing: 'gold'
-  }[status]
-
-  return (
-    extra && (
-      <Tag
-        color={color}
-        style={{
-          marginRight: 0
-        }}
-      >
-        {extra}
-      </Tag>
-    )
-  )
-}
-
-const NoticeList: FC<NoticeIconTabProps> = ({
-  list = [],
-  onClick,
-  onClear,
-  title,
-  onViewMore,
-  emptyText,
-  showClear = true,
-  clearText,
-  viewMoreText,
-  showViewMore = false
-}) => {
-  if (!list || list.length === 0) {
-    return (
-      <div class={styles['notFound']}>
-        <img
-          src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
-          alt="not found"
-        />
-        <div>{emptyText}</div>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <List
-        class={styles['list']}
-        dataSource={list}
-        renderItem={({ item, index }) => {
-          const itemCls = {
-            [`${styles['item']}`]: true,
-            [`${styles['read']}`]: item.read
-          }
-          const leftIcon = item.avatar ? (
-            typeof item.avatar === 'string' ? (
-              <Avatar class={styles['avatar']} src={item.avatar} />
-            ) : (
-              <span class={styles['iconElement']}>{item.avatar}</span>
-            )
-          ) : null
-
-          return (
-            <List.Item
-              class={itemCls}
-              key={item.key || index}
-              onClick={() => {
-                onClick?.(item)
-              }}
-            >
-              <List.Item.Meta
-                class={styles['meta']}
-                avatar={leftIcon}
-                title={
-                  <div class={styles['title']}>
-                    {item.title}
-                    {item.extra && (
-                      <div class={styles.extra}>{NoticeListExtra(item.extra, item.status)}</div>
-                    )}
-                  </div>
-                }
-                description={
-                  <div>
-                    <div class={styles['description']}>{item.description}</div>
-                    <div class={styles['datetime']}>{item.datetime}</div>
-                  </div>
-                }
-              />
-            </List.Item>
-          )
-        }}
-      />
-      <div class={styles['bottomBar']}>
-        {showClear ? (
-          <div onClick={onClear}>
-            {clearText} {title}
-          </div>
-        ) : null}
-        {showViewMore ? (
-          <div
-            onClick={(e) => {
-              if (onViewMore) {
-                onViewMore(e)
-              }
-            }}
-          >
-            {viewMoreText}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-export default NoticeList

package/template-design-pro/src/components/GDesign/ProLayout/components/NoticeIcon/index.less

@@ -1,39 +0,0 @@
-@pro-notice: ~'@{gx-prefix}-pro-notice';
-
-body {
-  .@{pro-notice} {
-    &-popover {
-      position: relative;
-      width: 336px;
-    }
-
-    &-button {
-      display: inline-block;
-      cursor: pointer;
-      transition: all 0.3s;
-    }
-
-    &-icon {
-      padding: 4px;
-      vertical-align: middle;
-    }
-
-    &-badge {
-      font-size: 16px;
-    }
-
-    &-tabs {
-      .ant-tabs-nav-list {
-        margin: auto;
-      }
-
-      .ant-tabs-nav-scroll {
-        text-align: center;
-      }
-
-      .ant-tabs-bar {
-        margin-bottom: 0;
-      }
-    }
-  }
-}

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

@@ -1,133 +0,0 @@
-import { computed, defineComponent, onMounted, reactive } from 'vue'
-import dayjs from 'dayjs'
-import { groupBy } from 'lodash-es'
-import { message } from 'ant-design-vue'
-import { getNotices } from '@/services/system/notices'
-import type { NoticeIconItem } from './NoticeList'
-import NoticeIcon from './NoticeIcon'
-
-const getNoticeData = (notices: NoticeIconItem[]): Record<string, NoticeIconItem[]> => {
-  if (!notices || notices.length === 0 || !Array.isArray(notices)) {
-    return {}
-  }
-
-  const newNotices = notices.map((notice) => {
-    const newNotice = { ...notice }
-
-    if (newNotice.datetime) {
-      newNotice.datetime = dayjs(notice.datetime as string).fromNow()
-    }
-
-    if (newNotice.id) {
-      newNotice.key = newNotice.id
-    }
-
-    return newNotice
-  })
-  return groupBy(newNotices, 'type')
-}
-
-const getUnreadData = (noticeData: Record<string, NoticeIconItem[]>) => {
-  const unreadMsg: Record<string, number> = {}
-  Object.keys(noticeData).forEach((key) => {
-    const value = noticeData[key]
-
-    if (!unreadMsg[key]) {
-      unreadMsg[key] = 0
-    }
-
-    if (Array.isArray(value)) {
-      unreadMsg[key] = value.filter((item) => !item.read).length
-    }
-  })
-  return unreadMsg
-}
-
-const NoticeIconView = defineComponent({
-  setup() {
-    const state = reactive({
-      notices: [] as NoticeIconItem[]
-    })
-
-    onMounted(async () => {
-      const response = await getNotices()
-      if (response) {
-        state.notices = response.data || []
-      }
-    })
-
-    const noticeData = computed(() => getNoticeData(state.notices))
-
-    const unreadMsg = computed(() => getUnreadData(noticeData.value) || {})
-
-    const changeReadState = (id: string) => {
-      state.notices = state.notices.map((item) => {
-        const notice = { ...item }
-        if (notice.id === id) {
-          notice.read = true
-        }
-        return notice
-      })
-    }
-
-    const clearReadState = (title: string, key: string) => {
-      state.notices = state.notices.map((item) => {
-        const notice = { ...item }
-        if (notice.type === key) {
-          notice.read = true
-        }
-        return notice
-      })
-      message.success(`${'清空了'} ${title}`)
-    }
-
-    return () => {
-      return (
-        <NoticeIcon
-          class="gx-pro-right-content-action"
-          count={
-            unreadMsg.value && unreadMsg.value.notification
-              ? unreadMsg.value.notification + unreadMsg.value.message + unreadMsg.value.event
-              : 0
-          }
-          onItemClick={(item) => {
-            changeReadState(item.id!)
-          }}
-          onClear={(title: string, key: string) => clearReadState(title, key)}
-          loading={false}
-          clearText="清空"
-          viewMoreText="查看更多"
-          onViewMore={() => message.info('Click on view more')}
-          clearClose
-        >
-          <NoticeIcon.Tab
-            tabKey="notification"
-            count={unreadMsg.value.notification}
-            list={noticeData.value.notification}
-            title="通知"
-            emptyText="你已查看所有通知"
-            showViewMore
-          />
-          <NoticeIcon.Tab
-            tabKey="message"
-            count={unreadMsg.value.message}
-            list={noticeData.value.message}
-            title="消息"
-            emptyText="您已读完所有消息"
-            showViewMore
-          />
-          <NoticeIcon.Tab
-            tabKey="event"
-            title="待办"
-            emptyText="你已完成所有待办"
-            count={unreadMsg.value.event}
-            list={noticeData.value.event}
-            showViewMore
-          />
-        </NoticeIcon>
-      )
-    }
-  }
-})
-
-export default NoticeIconView