systemrobotassistant 3.0.8

package/lib/style.css

@@ -0,0 +1,174 @@
+.shein-components_systemrobotassistant_renderIconWrapper {
+  display: inline-block;
+}
+.shein-components_systemrobotassistant_renderIconWrapper.shein-components_systemrobotassistant_draggableIcon {
+  position: fixed;
+}
+.shein-components_systemrobotassistant_iconWrapper {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  width: 56px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.shein-components_systemrobotassistant_iconWrapper .shein-components_systemrobotassistant_avatarWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.shein-components_systemrobotassistant_iconWrapper .shein-components_systemrobotassistant_avatarWrap .shein-components_systemrobotassistant_avatarBorder > img {
+  width: 52px;
+  height: 52px;
+  border-radius: 2px;
+  -webkit-user-drag: none;
+}
+.shein-components_systemrobotassistant_iconWrapper .shein-components_systemrobotassistant_avatarWrap > span {
+  display: inline-block;
+  white-space: nowrap;
+  margin-top: 8px;
+}
+.shein-components_systemrobotassistant_collapseRobotBox {
+  width: 30px;
+  height: 30px;
+}
+.shein-components_systemrobotassistant_collapseRobotBox .shein-components_systemrobotassistant_collapseIcon {
+  font-size: 28px;
+  color: #1890FF;
+}
+.shein-components_systemrobotassistant_redDot {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  background: red;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.shein-components_systemrobotassistant_chatModalWrapper {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  width: 440px;
+  height: 85vh;
+  max-height: 660px;
+  background: #ffffff;
+  box-shadow: 0px 8px 12px 0px rgba(25, 122, 250, 0.1);
+  border: 1px solid #D9D9D9;
+  border-radius: 8px;
+  word-break: break-all;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0 50px 0 20px;
+  height: 48px;
+  box-shadow: 0px 1px 0px 0px rgba(230, 234, 240, 0.5);
+  border-radius: 4px 4px 0px 0px;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_midlleWrapper {
+  height: 100%;
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+  flex-direction: row;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_tabItem {
+  margin-right: 12px;
+  flex: 1;
+  justify-content: center;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_tabItem:last-child {
+  margin: 0;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_leftTitle {
+  display: flex;
+  align-items: center;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_tabIcon {
+  margin-right: 4px;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #35383d;
+  margin-left: 20px;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_avatarClass {
+  width: 55px;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_suggestion {
+  font-size: 12px;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_link {
+  font-size: 14px;
+  font-weight: 400;
+  color: #1890FF;
+  color: var(--primary-color, #1890FF);
+  cursor: pointer;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_link > span {
+  margin-right: 2px;
+}
+.shein-components_systemrobotassistant_chatModalWrapper .shein-components_systemrobotassistant_closedIcon {
+  position: absolute;
+  right: 20px;
+  color: #7E848F;
+  font-size: 20px;
+  cursor: pointer;
+}
+.shein-components_systemrobotassistant_chatContentWrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.shein-components_systemrobotassistant_switch {
+  color: #666C7C;
+}
+.shein-components_systemrobotassistant_robotImg {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  -webkit-user-drag: none;
+  box-shadow: 1px 1px 6px 6px rgba(30, 128, 255, 0.1);
+  background-image: url('https://assets.dotfashion.cn/unpkg/@shein/static-file@1.0.69/image/pims/help-center/close-eyes.png');
+  background-color: #1890FF;
+  background-position: center center;
+  background-size: cover;
+  animation-name: shein-components_systemrobotassistant_robotGif;
+  animation-duration: 1.5s;
+  animation-timing-function: step-end;
+  animation-iteration-count: infinite;
+}
+.shein-components_systemrobotassistant_robotImg.shein-components_systemrobotassistant_expireStatus {
+  animation-name: shein-components_systemrobotassistant_none;
+  background-image: url('https://assets.dotfashion.cn/unpkg/@shein/static-file@1.0.96/image/hfc/expire-robot.svg');
+  box-shadow: unset;
+}
+@keyframes shein-components_systemrobotassistant_robotGif {
+  0% {
+    background-image: url('https://assets.dotfashion.cn/unpkg/@shein/static-file@1.0.69/image/pims/help-center/open-eyes.png');
+  }
+  90% {
+    background-image: url('https://assets.dotfashion.cn/unpkg/@shein/static-file@1.0.69/image/pims/help-center/close-eyes.png');
+  }
+  100% {
+    background-image: url('https://assets.dotfashion.cn/unpkg/@shein/static-file@1.0.69/image/pims/help-center/open-eyes.png');
+  }
+}
+.shein-components_systemrobotassistant_modalMask {
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "systemrobotassistant",
+  "version": "3.0.8",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "license": "MIT",
+  "config": {
+    "lib": "shein-components"
+  },
+  "scripts": {
+    "build": "npx rct build",
+    "test": "npx rct test",
+    "doc": "npx rct doc",
+    "doc:dev": "npx rct doc --dev",
+    "lint": "npx eslint . --ext js,jsx",
+    "preinstall": "node src/main.js"
+  },
+  "engines": {
+    "node": ">= 8.0.0"
+  },
+  "packageManager": "yarn@1.22.9",
+  "devDependencies": {
+    "@shein/eslint-config": "^1.0.8",
+    "@shein/react-component-tool": "^2.1.22",
+    "@types/react-dom": "^18.2.7",
+    "@types/webpack-sources": "^3.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "eslint": "^8.31.0",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.3",
+    "prop-types": "^15.8.1",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "shineout": "^2.0.4",
+    "webpack-sources": "3.2.3"
+  },
+  "peerDependencies": {
+    "prop-types": "*",
+    "react": ">=16",
+    "react-dom": ">=16",
+    "shineout": ">=1"
+  },
+  "dependencies": {
+    "@shein-bbl/core": "^1.0.0",
+    "@shein-components/Ellipsis": "^1.0.27-rc.1",
+    "@shein-components/Icon": "^3.1.5",
+    "@shein-components/ImagesPreviewer": "^1.5.34",
+    "@shein-components/TextButton": "0.0.3",
+    "classnames": "^2.3.1",
+    "history": "^4.7.2",
+    "immer": "^9.0.15",
+    "moment": "^2.29.4",
+    "react-custom-scrollbars": "^4.2.1",
+    "sheinq": "^2.0.8"
+  }
+}

package/rct.config.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line
+import { rctConfig } from '@shein/react-component-tool'
+
+export default rctConfig({
+  samples: ['01', '02', '03'],
+  devServer: { port: 3000 },
+  entries: [],
+})

package/src/component/answer-itme/index.jsx

@@ -0,0 +1,64 @@
+import React, { memo } from 'react'
+import Proptypes from 'prop-types'
+import { toHfc } from '../../js/to-hfc'
+import styles from './style.less'
+
+const AnswerItme = memo((props) => {
+  const { item, t } = props
+  return (
+    <div>
+      {item.isHaveAnswer === 0
+        ? (
+          <div>
+            <span
+              className={styles.otherAnswer}
+            >
+              {item.answer}
+            </span>
+            {t('找对接人')}
+            {t('寻求帮助')}
+          </div>
+        )
+        : (
+          <div
+            className={styles.answerTitle}
+          >
+            {t('你问的“{0}？”，找到以下问题：', item.problem)}
+          </div>
+        )
+      }
+
+      {
+       item.isHaveAnswer !== 0 && item.answerList && item.answerList.map(vo => (
+         <div
+           key={vo.problemId}
+           className={styles.answerContent}
+           onClick={() => {
+             const url = '/question/answer/'
+             const { problemId } = vo
+             toHfc(url + problemId)
+           }}
+         >
+           {vo.problemTitle}
+         </div>
+       ))
+      }
+    </div>
+  )
+})
+
+
+AnswerItme.propTypes = {
+  item: Proptypes.shape({
+    isHaveAnswer: Proptypes.number,
+    problem: Proptypes.string,
+    answer: Proptypes.string,
+    answerList: Proptypes.arrayOf(Proptypes.shape({
+      isHaveAnswer: Proptypes.string,
+      problemTitle: Proptypes.string,
+    })),
+  }),
+}
+
+
+export default AnswerItme

package/src/component/answer-itme/style.less

@@ -0,0 +1,37 @@
+.answerTitle {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.answerContent {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--primary-color, #1890FF);
+  margin-top: 7px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--primary-color, #005AAD);
+  }
+}
+
+.otherAnswer {
+  font-size: 14px;
+  font-weight: 400;
+  color: #35383D;
+}
+
+.toHfc {
+  color: var(--primary-color, #1890FF) ;
+  cursor: pointer;
+}
+
+.onSeekHlep {
+  color: var(--primary-color, #1890FF);
+  cursor: pointer;
+}
+
+.onDisabled {
+  color: #A5ACB8;
+  cursor: not-allowed;
+}

package/src/component/data-container/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { Spin } from 'shineout'
+import Icon from '@shein-components/Icon'
+import styles from './style.less'
+
+const cs = classnames.bind(styles)
+
+const DataContainer = (props) => {
+  const {
+    loading, emptyText, className, children,
+  } = props
+  return (
+    <div className={cs(styles.dataContainer, className)}>
+      {
+        !children || (Array.isArray(children) && !children?.length) ? (
+          <div className={styles.emptyCon}>
+            <Icon
+              name="dataemptying_icon"
+              fontSize={200}
+            />
+            <div>{emptyText}</div>
+          </div>
+        ) : children
+      }
+      {
+        loading ? (
+          <div className={cs(styles.loadingMask)}>
+            <Spin size="48px" />
+          </div>
+        ) : null
+      }
+    </div>
+  )
+}
+
+DataContainer.propTypes = {
+  loading: PropTypes.bool,
+  emptyText: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.element]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+}
+
+export default DataContainer

package/src/component/data-container/style.less

@@ -0,0 +1,27 @@
+.dataContainer {
+  flex: 1;
+
+  .emptyCon {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    flex: 1;
+    color: var(--primary-color, #1890ff);
+  }
+}
+  
+.loadingMask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, .04);
+  z-index: 100;
+}

package/src/component/days-tab/index.jsx

@@ -0,0 +1,114 @@
+import React, { useEffect } from 'react'
+import moment from 'moment'
+import classnames from 'classnames'
+import Icon from '@shein-components/Icon'
+import useImmer from '../../js/state-immer'
+import styles from './style.less'
+
+const cs = classnames.bind(styles)
+
+const defaultState = {
+  showData: [],
+  // activeDay: '',
+  curDate: moment(),
+  splitIndex: 0,
+}
+
+const getNextDays = (sourceData, splitIndex) => {
+  let index = splitIndex + 3
+  let result = sourceData?.slice(index, index + 3)
+  const len = sourceData?.length
+  if (result?.length < 3 && len > 3) {
+    result = sourceData?.slice(len - 3, len)
+    index = len - 3
+  }
+  return {
+    data: result,
+    index,
+  }
+}
+
+const getPrevDays = (sourceData, splitIndex) => {
+  let index = splitIndex - 3
+  let result = []
+  if (index <= 0) {
+    index = 0
+    result = sourceData?.slice(0, 3)
+  } else {
+    result = sourceData?.slice(index, splitIndex)
+  }
+  return {
+    data: result,
+    index,
+  }
+}
+
+const DaysTab = (props) => {
+  const { activeDay, data, t, onChange } = props
+  const [state, setState] = useImmer(defaultState)
+  const { curDate, showData, splitIndex } = state
+
+  useEffect(() => {
+    const now = moment()
+    setState({
+      // activeDay: now.format('YYYY-MM-DD'),
+      showData: data?.slice(0, 3),
+      curDate: now,
+    })
+  }, [data])
+
+  return (
+    <div className={styles.daysTab}>
+      <Icon
+        name="arrow-left"
+        className={cs(styles.arrowIcon, splitIndex <= 0 && styles.disabledIcon)}
+        onClick={() => {
+          if (splitIndex <= 0) {
+            return
+          }
+          const obj = getPrevDays(data, splitIndex)
+          setState({
+            showData: obj.data,
+            splitIndex: obj.index,
+          })
+        }}
+      />
+      <div className={styles.itemWrapper}>
+        {
+          showData?.map(item => (
+            <div
+              className={[
+                styles.dateItem, activeDay === item.date && styles.active,
+              ].join(' ')}
+              onClick={() => {
+                setState({
+                  activeDay: item.date,
+                })
+                onChange({ ...item })
+              }}
+            >
+              {item.dateStr}
+              {item.today ? t('(今天)') : null}
+            </div>
+          ))
+        }
+      </div>
+      <Icon
+        name="arrow-right"
+        className={cs(styles.arrowIcon, splitIndex + 3 >= data?.length && styles.disabledIcon)}
+        onClick={() => {
+          if (splitIndex + 3 >= data?.length) {
+            return
+          }
+          const obj = getNextDays(data, splitIndex)
+          setState({
+            showData: obj.data,
+            splitIndex: obj.index,
+          })
+        }}
+      />
+    </div>
+  )
+}
+
+export default DaysTab

package/src/component/days-tab/style.less

@@ -0,0 +1,55 @@
+@primaryColor: var(--primary-color, #1890FF);
+@grayColor: #7E848F;
+
+.daysTab {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+
+  .arrowIcon {
+    color: @grayColor;
+    cursor: pointer;
+  }
+
+  .disabledIcon {
+    cursor: not-allowed;
+    color: #cccfd6;
+  }
+
+  .itemWrapper {
+    margin: 0 12px;
+    // display: grid;
+    // grid-template-columns: repeat(auto-fill, minmax(109px, 1fr));
+    // grid-column-gap: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+  }
+
+  .dateItem {
+    margin-left: 8px;
+    width: calc((100% - 16px) / 3);
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #FFFFFF;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &.active {
+      background: #E2F2FF;
+      color: @primaryColor;
+    }
+
+    &:hover {
+      background: #F3F9FE;
+    }
+  }
+}

package/src/component/days-tab/utils.js

@@ -0,0 +1,87 @@
+import moment from 'moment'
+
+// 获取前n天的日期
+export const getPrevDays = (date, num = 3) => {
+  const dates = []
+  let day
+  for (let i = num; i > 0; i--) {
+    day = moment(date).subtract(i, 'days')
+    dates.push({
+      date: day.format('YYYY-MM-DD'),
+      year: day.year(),
+    })
+  }
+  return dates
+}
+
+// 获取后n天的日期
+export const getNextDays = (date, num = 3) => {
+  const dates = []
+  let day
+  for (let i = 0; i < num; i++) {
+    day = moment(date).add(i, 'days')
+    dates.push({
+      date: day.format('YYYY-MM-DD'),
+      year: day.year(),
+    })
+  }
+  return dates
+}
+
+// 拼接文案
+export const getDayLabel = ({ date, year, curDate }) => {
+  const curYear = curDate.year()
+  let suffix = ''
+  if (moment(curDate).format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD')) {
+    suffix = '(今日)'
+  }
+  return `${year !== curYear ? `${year}-` : ''}${moment(date).format('MM-DD')}${suffix}`
+}
+
+// 获取签n周的日期
+export const getPrevWeeks = (date, num = 3) => {
+  const dates = []
+  let start
+  let end
+  for (let i = num; i > 0; i--) {
+    start = moment(date).subtract(7 * i, 'days')
+    end = moment(start).add(6, 'days')
+    const weekIndex = moment(start).isoWeek()
+    dates.push({
+      start: start.format('YYYY-MM-DD'),
+      end: end.format('YYYY-MM-DD'),
+      weekIndex,
+      year: start.year(),
+    })
+  }
+  return dates
+}
+
+// 获取后n周的日期
+export const getNextWeeks = (date, num = 3) => {
+  const dates = []
+  let start
+  let end
+  for (let i = 0; i < num; i++) {
+    start = moment(date).add(7 * (i + 1), 'days')
+    end = moment(start).add(6, 'days')
+    const weekIndex = moment(start).isoWeek()
+    dates.push({
+      start: start.format('YYYY-MM-DD'),
+      end: end.format('YYYY-MM-DD'),
+      weekIndex,
+      year: start.year(),
+    })
+  }
+  return dates
+}
+
+// 拼接文案
+export const getWeekLabel = ({ weekIndex, start, year, curDate }) => {
+  const curYear = curDate.year()
+  const firstDay = moment(curDate).day(1)
+  if (curDate.isoWeek() === weekIndex && year === curYear) return '本周'
+  if (firstDay.clone().subtract(7, 'days').format('YYYY-MM-DD') === start) return '上周'
+  if (firstDay.clone().add(7, 'days').format('YYYY-MM-DD') === start) return '下周'
+  return `${year !== curYear ? year : ''}第${weekIndex}周`
+}