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

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

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

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

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

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

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

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