systemrobotassistant 3.0.8

package/src/index.jsx

@@ -0,0 +1,554 @@
+import classNames from 'classnames'
+import React, { PureComponent, createRef } from 'react'
+import Proptypes from 'prop-types'
+import { Popover } from 'shineout'
+import Icon from '@shein-components/Icon'
+import { format as bblFormat } from '@shein-bbl/core'
+import * as Server from './server'
+import ChatModal from './jsx/chat-modal'
+import styles from './style.less'
+import {
+  setHfcSpace, setHfcEnv, clearAll, setTokenInvalidCallback,
+  getHfcToken as hfcIsLogin, setLocalStorage, setTranslateFn,
+} from './js/hfc-space'
+import ErrorBoundary from './component/error-boundary'
+import { openITNoticeModal } from './component/it-notice-modal'
+
+const defaultSate = {
+  isHover: false,
+  isMoving: false,
+  bottom: 12,
+  right: 32,
+  modalVisible: false,
+
+  // 记录按下去的时间戳
+  mouseDownTime: 0,
+
+  messageCount: 0,
+
+  isCollapse: false,
+  showExpirePopover: false,
+}
+
+
+/**
+ * @cn 帮助中心机器人组件
+ * @desc 帮助中心机器人组件，不需要安装，不能直接使用，@shein-components/hfc-robot 内部调用，安装 @shein-components/hfc-robot 即可使用
+ * @author -
+ */
+class SystemRobotAssistant extends PureComponent {
+  constructor(props) {
+    super(props)
+    setHfcSpace(props.hfcSpace)
+    setHfcEnv(props.env)
+    this.state = defaultSate
+    this.iconRef = createRef()
+    this.modalRef = createRef()
+    this.popoverTimerRef = createRef()
+
+    this.handleInit = this.handleInit.bind(this)
+    this.setMoving = this.setMoving.bind(this)
+    this.onMouseDown = this.onMouseDown.bind(this)
+    this.onMouseUp = this.onMouseUp.bind(this)
+    this.handleTokenInvalid = this.handleTokenInvalid.bind(this)
+    this.setModalVisible = this.setModalVisible.bind(this)
+    this.closeVisible = this.closeVisible.bind(this)
+    this.adjustIconPosition = this.adjustIconPosition.bind(this)
+    this.addMoveListener = this.addMoveListener.bind(this)
+    this.mouseupListener = this.mouseupListener.bind(this)
+    this.getRenderIcon = this.getRenderIcon.bind(this)
+    this.isPopITInform = this.isPopITInform.bind(this)
+  }
+
+  componentDidMount() {
+    const {
+      bottom, right, draggable, isLogin, t, hfcSpace, lang,
+    } = this.props
+    setTranslateFn(t)
+    setLocalStorage({
+      [`${hfcSpace}-lang`]: lang || 'CN',
+    })
+    window.addEventListener('mouseup', this.mouseupListener)
+    // draggable 为 true 时，才处理图标位置
+    if (draggable) {
+      window.addEventListener('mousedown', this.addMoveListener)
+    }
+    if (isLogin) {
+      this.handleInit()
+    }
+    // 登录失效的回调
+    setTokenInvalidCallback(this.handleTokenInvalid)
+    this.setState({
+      bottom,
+      right,
+    })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { draggable, isLogin, t, hfcSpace, lang } = this.props
+    const { isCollapse } = this.state
+    // draggable 为 true 时，才处理图标位置
+    if (draggable && !isCollapse && isCollapse !== prevState.isCollapse) {
+      // 如果当前 icon 在临界点时，不让图标超出外面
+      this.adjustIconPosition()
+    }
+    if (isLogin !== prevProps.isLogin && isLogin) {
+      this.handleInit()
+    }
+    if (t !== prevProps.t || hfcSpace !== prevProps.hfcSpace || lang !== prevProps.lang) {
+      setTranslateFn(t)
+      setLocalStorage({
+        [`${hfcSpace}-lang`]: lang || 'CN',
+      })
+    }
+    setTokenInvalidCallback(this.handleTokenInvalid)
+  }
+
+  componentWillUnmount() {
+    clearAll()
+    clearInterval(this.timer)
+    const { draggable } = this.props
+    if (draggable) {
+      window.removeEventListener('mousedown', this.addMoveListener)
+    }
+    window.removeEventListener('mouseup', this.mouseupListener)
+    this.timer = null
+  }
+
+  onMouseDown() {
+    this.setState({
+      isMoving: true,
+      mouseDownTime: new Date().getTime(),
+    })
+  }
+
+  onMouseUp() {
+    this.setState({
+      isMoving: false,
+    })
+  }
+
+  setMoving(e) {
+    const {
+      isMoving,
+    } = this.state
+    if (!isMoving) return
+    e.preventDefault()
+    const {
+      right, bottom,
+    } = this.state
+
+    const {
+      movementX,
+      movementY,
+    } = e
+    const { width, height } = this.iconRef.current.getBoundingClientRect()
+    const rightBound = window.innerWidth - width
+    const topBound = window.innerHeight - height
+
+    let x = 0
+    if (right - movementX >= window.innerWidth) {
+      x = window.innerWidth
+    } else {
+      x = right - movementX
+    }
+
+    let y = 0
+    if (bottom - movementY >= window.innerHeight) {
+      y = window.innerHeight
+    } else {
+      y = bottom - movementY
+    }
+    // 当前图标超出边界
+    if (x < 0 || x > rightBound || y < 0 || y > topBound) {
+      this.setState({
+        isCollapse: true,
+        modalVisible: false,
+      })
+      return
+    }
+
+    this.setState({
+      right: x,
+      bottom: y,
+    })
+  }
+
+  setHover(bool) {
+    this.setState({
+      isHover: bool,
+    })
+  }
+
+
+  setModalVisible() {
+    const {
+      modalVisible, mouseDownTime,
+    } = this.state
+    const { isLogin } = this.props
+    const { draggable } = this.props
+    if (!isLogin) return
+    // 大于 170 豪秒就不要处理点击事件且 draggable 为 true 时，不处理
+    if (draggable && (new Date().getTime() - mouseDownTime) > 170) return
+
+    this.setState({
+      modalVisible: !modalVisible,
+      messageCount: 0,
+    })
+  }
+
+  getRenderIcon() {
+    const { renderIcon } = this.props
+    const { isLogin } = this.props
+    if (typeof renderIcon === 'function') {
+      return renderIcon(isLogin)
+    }
+    return renderIcon
+  }
+
+  mouseupListener(e) {
+    if (!this?.modalRef?.current?.contains(e.target)
+    && !this?.iconRef?.current?.contains(e.target)) {
+      this.setState({
+        modalVisible: false,
+      })
+    }
+    const { draggable } = this.props
+    // draggable 为 false 时，不处理
+    if (!draggable) return
+    this.setState({
+      isMoving: false,
+    })
+    document.body.removeEventListener('mousemove', this.setMoving)
+  }
+
+  addMoveListener() {
+    document.body.addEventListener('mousemove', this.setMoving)
+  }
+
+
+  handleTokenInvalid(argument) {
+    const { bottom, right, expireTipUse } = this.props
+    // 登录失效要关掉窗口
+    this.setState({
+      ...defaultSate,
+      modalVisible: false,
+      bottom,
+      right,
+    }, () => {
+      if (expireTipUse) {
+        this.setState({
+          showExpirePopover: true,
+        })
+      }
+    })
+    if (expireTipUse) {
+      // eslint-disable-next-line no-unused-expressions
+      this.popoverTimerRef && clearTimeout(this.popoverTimerRef)
+      this.popoverTimerRef = setTimeout(() => {
+        this.setState({
+          showExpirePopover: false,
+        })
+      }, 15000)
+    }
+    const { tokenInvalidCallback } = this.props
+    tokenInvalidCallback(argument)
+  }
+
+  closeVisible() {
+    this.setState({
+      modalVisible: false,
+    })
+  }
+
+  handleInit() {
+    this.setState({
+      showExpirePopover: false,
+    })
+    this.statisticsMessageCount()
+    this.isPopITInform()
+    clearInterval(this.timer)
+    this.timer = setInterval(() => {
+      this.statisticsMessageCount()
+    }, 1000 * 60 * 10)
+  }
+
+  statisticsMessageCount() {
+    const { isLogin } = this.props
+    if (!isLogin) return
+    Server.statisticsMessageCount()
+      .then((res) => {
+        if (res) {
+          this.setState({
+            messageCount: res.info && res.info.messageCount,
+          })
+        }
+      })
+  }
+
+  // 校正大图标的位置
+  adjustIconPosition() {
+    const {
+      width, height, top, left, right: iconRight, bottom: iconBottom,
+    } = this.iconRef.current.getBoundingClientRect()
+    const { bottom, right } = this.state
+    let x = right
+    let y = bottom
+    if (top < 0) {
+      y = window.innerHeight - height
+    } else if (iconBottom < 0) {
+      y = 0
+    }
+    if (left < 0) {
+      x = window.innerWidth - width
+    } else if (iconRight < 0) {
+      x = 0
+    }
+    this.setState({
+      right: x,
+      bottom: y,
+    })
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async isPopITInform() {
+    const { zIndex, t } = this.props
+    const res = await Server.isPopITInform()
+    if (res?.info) {
+      openITNoticeModal({
+        zIndex,
+        t,
+      })
+    }
+  }
+
+
+  render() {
+    const {
+      isHover, bottom, right, modalVisible,
+      messageCount, isCollapse, showExpirePopover,
+    } = this.state
+
+    const {
+      zIndex,
+      iconWrapperClassName,
+      iconClassName,
+      textClassName,
+      renderIcon,
+      draggable,
+      nodeIdList,
+      isLogin,
+      t,
+    } = this.props
+
+    const actualRenderIcon = renderIcon ? React.cloneElement(this.getRenderIcon(renderIcon), {
+      onClick: this.setModalVisible,
+      ...(draggable ? {
+        onMouseDown: this.onMouseDown,
+        onMouseUp: this.onMouseUp,
+      } : {}),
+    }) : null
+
+    return (
+      <ErrorBoundary>
+        {
+          'renderIcon' in this.props ? (
+            <div
+              className={
+                classNames(
+                  styles.renderIconWrapper, draggable && styles.draggableIcon, iconWrapperClassName,
+                )
+              }
+              style={{
+                zIndex,
+                bottom,
+                right,
+              }}
+            >
+              <div
+                ref={this.iconRef}
+              >
+                {actualRenderIcon}
+              </div>
+              {
+                messageCount && isLogin ? (
+                  <div
+                    className={styles.redDot}
+                  >
+                    {messageCount}
+                  </div>
+                ) : null
+              }
+            </div>
+          ) : (
+            <div
+              className={
+                classNames(
+                  styles.iconWrapper,
+                  isCollapse && styles.collapseRobotBox,
+                  iconWrapperClassName,
+                )
+              }
+              style={{
+                bottom,
+                right,
+                zIndex,
+              }}
+              ref={this.iconRef}
+              onMouseDown={draggable ? this.onMouseDown : undefined}
+              onMouseUp={draggable ? this.onMouseUp : undefined}
+              onClick={this.setModalVisible}
+            >
+              <Popover
+                zIndex={zIndex}
+                visible={showExpirePopover}
+              >
+                {t('有事找 TA 登陆已失效，请刷新页面重试')}
+              </Popover>
+              {
+                !isCollapse ? (
+                  <div className={classNames(styles.avatarWrap)}>
+                    <div
+                      className={classNames(styles.avatarBorder, isHover && styles.hover)}
+                      onMouseOver={() => {
+                        this.setHover(true)
+                      }}
+                      onMouseOut={() => {
+                        this.setHover(false)
+                      }}
+                    >
+                      <div
+                        className={
+                          classNames(
+                            styles.robotImg, !isLogin && styles.expireStatus, iconClassName,
+                          )
+                        }
+                      />
+                    </div>
+                    <span className={classNames(styles.switch, textClassName)}>{modalVisible ? t('戳我关闭') : t('有事找TA')}</span>
+                  </div>
+                ) : (
+                  <Icon
+                    className={styles.collapseIcon}
+                    name="round-arrow-right"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                      this.setState({
+                        isCollapse: !isCollapse,
+                      })
+                    }}
+                  />
+                )
+              }
+              {
+                messageCount && isLogin ? (
+                  <div
+                    className={styles.redDot}
+                  >
+                    {messageCount}
+                  </div>
+                ) : null
+              }
+
+            </div>
+          )
+        }
+
+        {
+          modalVisible ? (
+            <ChatModal
+              modalRef={this.modalRef}
+              iconRef={this.iconRef?.current}
+              onClose={this.closeVisible}
+              nodeIdList={nodeIdList}
+              {...this.props}
+            />
+          ) : null
+        }
+      </ErrorBoundary>
+
+    )
+  }
+}
+
+SystemRobotAssistant.defaultProps = {
+  tokenInvalidCallback: () => null,
+  zIndex: 100,
+  iconWrapperClassName: '',
+  iconClassName: '',
+  textClassName: '',
+  spinSize: 40,
+  bottom: 12,
+  right: 32,
+  draggable: true,
+  expireTipUse: true,
+  chatgptUse: true,
+  lang: 'CN',
+  t: bblFormat,
+}
+SystemRobotAssistant.propTypes = {
+  /** 系统 code，跟后端要或者在帮助中心后台端的系统配置页面查看 */
+  hfcSpace: Proptypes.string.isRequired,
+  /** 开发环境 可选 'dev'|'test'|'sit'|'online' */
+  env: Proptypes.string.isRequired,
+  /** 菜单栏名称 */
+  menusTitle: Proptypes.string,
+  /** 层级，默认 100 */
+  zIndex: Proptypes.number,
+  /** 帮助中心登录失效回调 */
+  tokenInvalidCallback: Proptypes.func,
+
+  /** 企微唤醒前置判断  */
+  checkBeforeCallWechat: Proptypes.func,
+
+  /** 最外层样式 */
+  iconWrapperClassName: Proptypes.string,
+
+  /** icon 样式  */
+  iconClassName: Proptypes.string,
+
+  /** 文字样式 */
+  textClassName: Proptypes.string,
+
+  /** 加载中的 spin 大小 -- 2.3.0 后废弃  */
+  spinSize: Proptypes.number,
+
+  /** 位置，right */
+  right: Proptypes.number,
+
+  /** 位置，bottom */
+  bottom: Proptypes.number,
+
+  /** 自定义 icon */
+  renderIcon: Proptypes.oneOfType([Proptypes.element, Proptypes.func]),
+
+  /** 是否可移动 */
+  draggable: Proptypes.bool,
+
+  /** 是否显示过期提示 */
+  expireTipUse: Proptypes.bool,
+
+  /** 是否使用 chatgpt */
+  chatgptUse: Proptypes.bool,
+
+  /** 分组 id 列表 */
+  nodeIdList: Proptypes.arrayOf(Proptypes.string),
+
+  /** 是否登录 */
+  isLogin: Proptypes.bool,
+
+  /** 多语言翻译函数 */
+  t: Proptypes.func,
+
+  /** 多语言 */
+  lang: Proptypes.string,
+}
+SystemRobotAssistant.hfcIsLogin = hfcIsLogin
+
+// 暴露到 window, HFC Bot 组件会用到
+window.SystemRobotAssistant = {
+  default: SystemRobotAssistant,
+}
+
+export default SystemRobotAssistant

package/src/js/const.js

@@ -0,0 +1,48 @@
+export const contentType = {
+  OPPOSITION: 2, // 对方的回答
+  MYSELF: 1, // 自己的问题
+
+  TIPS: 3, // 说明更新了
+
+  NEEDANSWER: 4, // 需要更新
+}
+
+// 不用包t了
+export const TIPS = {
+  globalCount: {
+    content: 'SHEIN标准与规范',
+    link: '/direction',
+  },
+  guideCount: {
+    content: '新手指南',
+    link: '/guide',
+  },
+  problemCount: {
+    content: '问题库',
+    link: '/question/list',
+  },
+}
+
+// 不用包t了
+export const TABS = [
+  {
+    label: '问题库',
+    value: 1,
+    icon: 'problem-base',
+  },
+  {
+    label: '对接人',
+    value: 2,
+    icon: 'qiyeweixin',
+  },
+  {
+    label: '系统报障',
+    value: 3,
+  },
+  {
+    label: '版本计划',
+    value: 4,
+    icon: 'pc-notice',
+    popoverContent: '版本计划展示产研未来两周的上线计划（含今日）',
+  },
+]

package/src/js/gen-render-promise.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import Render from './render-special'
+
+/**
+ *
+ * @param {ReactNode} InnerComponent
+ * @param {String} name
+ * @returns {Promise}
+ */
+const genRenderPromise = (InnerComponent, name, useHistory) => (record = {}) => {
+  let render = new Render(name, useHistory)
+  return new Promise((resolve, reject) => {
+    const el = (
+      <InnerComponent
+        {...record}
+        onOk={(res) => {
+          render.unmountComponentAtNode()
+          render = null
+          resolve(res)
+        }}
+        onClose={(rej) => {
+          render.unmountComponentAtNode()
+          render = null
+          reject(rej)
+        }}
+      />
+    )
+    render.render(el)
+  })
+}
+
+export default genRenderPromise

package/src/js/get-time.js

@@ -0,0 +1,35 @@
+export default function getNow() {
+  const now = new Date()
+  let h = now.getHours()
+  h = h < 10 ? `0${h}` : h
+  let m = now.getMinutes()
+  m = m < 10 ? `0${m}` : m
+  return `${h}:${m}`
+}
+
+/**
+ * 获取指定时间的前几天或者后几天
+ * @param date 时间 2012-12-12
+ * @param day 前几天 如2 或者后几天  如-2
+ * @returns {String} 如2012-12-10
+ */
+export function getNextOrPreDate(date, day) {
+  const dd = new Date(date)
+  dd.setDate(dd.getDate() + day)
+  const y = dd.getFullYear()
+  const m = dd.getMonth() + 1 < 10 ? `0${dd.getMonth() + 1}` : dd.getMonth() + 1
+  const d = dd.getDate() < 10 ? `0${dd.getDate()}` : dd.getDate()
+  return `${y}-${m}-${d}`
+}
+
+/**
+ * 获取指定时间的当周的周一和周日
+ * @param date 时间 2012-12-12
+ * @returns {Array} [2012-12-09,2012-12-15]
+ */
+export function getWeekByDate(date) {
+  const dt = new Date(date).getDay() === 0 ? 7 : new Date(date).getDay()
+  const pre = getNextOrPreDate(date, -dt + 1)
+  const next = getNextOrPreDate(date, 7 - dt)
+  return [pre, next]
+}