win-chart 1.0.0

package/src/components/win-v/components/VDialogMsg.tsx

@@ -0,0 +1,325 @@
+import $i18n from 'panda-i18n';
+import {
+  IDialogMsgInfo,
+  IIndicatorChangeInfo,
+  IIndicatorMsgChangeInfo,
+} from '@/types';
+import {
+  ITimeMarker,
+  RESPONSIVE_BREAKPOINT,
+  getHandleOpenLink,
+  isJsonString,
+  treeFlatToArr,
+} from '@/utils';
+import { rgba } from 'polished';
+import { styled, css } from 'styled-components';
+import {
+  OperateBtnBox,
+  RetryBtn,
+  LikeBtn,
+  CopyBtn,
+  FeedbackBtn,
+} from './VDialogBtn';
+import { CnBox, CnTable, ICnTableColumn } from '@cainiaofe/cn-ui';
+import { CustomIcon } from '@/components/icon';
+import { CSSProperties, memo, useEffect, useRef } from 'react';
+import { useHasIntersected } from '@/hooks/useHasIntersected';
+import { useVDialogOperate } from '../hooks/useVDialogOperate';
+import { HoverView } from '@/components/hover-view';
+import { useMobileState } from '@/hooks/useMobile';
+import { useSetHalfScreenState } from '@/hooks/useHalfScreenState';
+
+function isDialogMsgInfo(
+  data: Partial<IDialogMsgInfo> | ITimeMarker,
+): data is Partial<IDialogMsgInfo> {
+  return 'sender' in data;
+}
+
+interface IProps {
+  data: Partial<IDialogMsgInfo> | ITimeMarker;
+  retryMsg?: string;
+}
+
+export const VDialogMsg = memo(({ data, retryMsg }: IProps) => {
+  const msgRef = useRef<HTMLDivElement>(null);
+  const isShow = useHasIntersected(msgRef);
+  const { handleUpdateDialogMsg } = useVDialogOperate();
+  const isMobile = useMobileState();
+  const handleSetHalfScreenState = useSetHalfScreenState();
+
+  useEffect(() => {
+    if (
+      isDialogMsgInfo(data) &&
+      isShow &&
+      data.sender === '0' &&
+      data.status === 0
+    ) {
+      handleUpdateDialogMsg({
+        id: data.id,
+        status: 1,
+      });
+    }
+  }, [data, handleUpdateDialogMsg, isShow]);
+
+  if (data.type === 'time-marker') {
+    // 时间
+    return <TimeMarkerWrapper>{data.content}</TimeMarkerWrapper>;
+  }
+
+  // 消息
+  const msg = data as IDialogMsgInfo;
+  const isVMsg = msg.sender === '0';
+
+  const renderContent = () => {
+    if (msg.type === 'text_multiply' && isJsonString(msg.content)) {
+      // 指标变动提醒
+      const data: IIndicatorMsgChangeInfo = JSON.parse(msg.content!);
+      const codeList = treeFlatToArr(data.indicators).map((item) => item.code);
+
+      const handleClick = (url?: string) => {
+        if (url) {
+          if (isMobile) {
+            handleSetHalfScreenState({
+              show: true,
+              src: url,
+              title: $i18n.get({ id: 'IndicatorDetails', dm: '指标详情' }),
+            });
+          } else {
+            window.open(url);
+          }
+        }
+      };
+
+      return (
+        <ContentWrapper>
+          <CnBox direction="row" margin={[0, 0, 8, 0]}>
+            <span>📈</span>
+            <IndicatorChangeTitle>{data.msg}</IndicatorChangeTitle>
+          </CnBox>
+          <ChangeTable
+            primaryKey="code"
+            tree
+            columns={getTableColumn({ handleClick, isMobile })}
+            hasBorder={false}
+            dataSource={data.indicators}
+            treeConfig={{
+              defaultOpenKeys: codeList,
+            }}
+          />
+          <Remark>
+            {$i18n.get(
+              {
+                id: 'NoteComparisonWithDataLastVisitD_1983478722',
+                dm: '备注：与 {dataLastVisitDay} 日数据对比',
+              },
+              { dataLastVisitDay: data.lastVisitDay },
+            )}
+          </Remark>
+        </ContentWrapper>
+      );
+    }
+    return (
+      <ContentWrapper>
+        {isJsonString(data.content) ? '...' : data.content}
+      </ContentWrapper>
+    );
+  };
+
+  return (
+    <Wrapper $v={isVMsg} ref={msgRef}>
+      <MsgWrapper
+        $v={isVMsg}
+        $vLoading={msg.id === -2}
+        onClick={getHandleOpenLink(msg.url)}
+        style={{
+          cursor: msg.url ? 'pointer' : 'default',
+        }}
+      >
+        {renderContent()}
+        {data.type === 'text_retry' && (
+          <OperateBtnBox>
+            <RetryBtn {...msg} retryMsg={retryMsg} />
+          </OperateBtnBox>
+        )}
+
+        {data.type === 'text_general' && (
+          <OperateBtnBox>
+            <LikeBtn {...msg} />
+            <CopyBtn {...msg} />
+            <FeedbackBtn />
+          </OperateBtnBox>
+        )}
+      </MsgWrapper>
+    </Wrapper>
+  );
+});
+
+const TimeMarkerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  color: #828b9e;
+  font-weight: 500;
+  margin-top: 20px;
+
+  @media (max-width: ${RESPONSIVE_BREAKPOINT}) {
+    font-size: 0.22rem;
+    margin-top: 0.32rem;
+  }
+`;
+
+const Wrapper = styled.div<{ $v?: boolean }>`
+  display: flex;
+  flex-direction: column;
+
+  ${(props) =>
+    props.$v
+      ? css``
+      : css`
+          align-items: flex-end;
+        `}
+
+  @media (max-width: ${RESPONSIVE_BREAKPOINT}) {
+    font-size: 0.28rem;
+    line-height: 0.42rem;
+  }
+`;
+
+const MsgWrapper = styled.div<{ $v?: boolean; $vLoading?: boolean }>`
+  padding: 12px;
+
+  ${(props) =>
+    props.$v
+      ? css`
+          border-radius: 0 12px 12px 12px;
+          background: ${rgba('#fff', 0.8)};
+          white-space: pre-wrap;
+        `
+      : css`
+          border-radius: 12px 0px 12px 12px;
+          background: ${rgba('#3379FF', 0.2)};
+        `}
+
+  ${(props) =>
+    props.$vLoading &&
+    css`
+      width: 80px;
+      height: 40px;
+      background: url(https://img.alicdn.com/imgextra/i1/O1CN01uHrkBb1D9jpaM5O47_!!6000000000174-1-tps-800-600.gif)
+        no-repeat center / cover;
+    `}
+`;
+
+const IndicatorChangeTitle = styled.div`
+  color: #272f3d;
+  font-size: 14px;
+  font-weight: 700;
+`;
+
+const ChangeTable = styled(CnTable).attrs({
+  style: {
+    borderRadius: '4px 4px 0 0',
+  },
+})`
+  margin-bottom: 8px;
+`;
+
+const Remark = styled.div`
+  color: #828b9e;
+  font-size: 12px;
+`;
+
+const ContentWrapper = styled.div`
+  max-height: 50vh;
+  overflow-y: auto;
+
+  overflow-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const getTableColumn = ({
+  handleClick,
+  isMobile,
+}: {
+  isMobile?: boolean;
+  handleClick: (url?: string) => void;
+}): ICnTableColumn[] => {
+  return [
+    {
+      title: $i18n.get({ id: 'ExamplesOfIndicators', dm: '指标实例' }),
+      dataIndex: 'name',
+      width: 120,
+      render: (value: string, row: IIndicatorChangeInfo) => {
+        const handleTitleClick = () => handleClick(row.url);
+        const style: CSSProperties = {
+          width: 120,
+          ...(row.url && {
+            cursor: 'pointer',
+            color: '#3379FF',
+          }),
+        };
+
+        return isMobile ? (
+          <MobileIndicatorChangeTitle onClick={handleTitleClick} style={style}>
+            {value}
+          </MobileIndicatorChangeTitle>
+        ) : (
+          <HoverView
+            content={value}
+            onClick={handleTitleClick}
+            cStyle={style}
+          />
+        );
+      },
+    },
+    {
+      title: $i18n.get({ id: 'ThisData', dm: '本次数据' }),
+      dataIndex: 'value',
+      align: 'right',
+      render: (value: number, row: IIndicatorChangeInfo) => {
+        return (
+          <span>
+            {value}
+            {row.unit}
+          </span>
+        );
+      },
+    },
+    {
+      title: $i18n.get({ id: 'NumberOfDifferences', dm: '差异数' }),
+      dataIndex: 'diff',
+      align: 'right',
+      render: (value: string) => {
+        if (value) {
+          const isDown = value.includes('-');
+          const color = isDown ? '#F15451' : '#00C267';
+          const type = isDown ? 'icon-RED_DOWN' : 'icon-GREEN_UP';
+          const content = isDown ? value.replace('-', '') : value;
+          return (
+            <CnBox
+              direction="row"
+              justify="flex-end"
+              align="center"
+              spacing={4}
+            >
+              <span style={{ color }}>{content}</span>
+              <CustomIcon type={type} size={12} />
+            </CnBox>
+          );
+        }
+      },
+    },
+  ];
+};
+
+const MobileIndicatorChangeTitle = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/src/components/win-v/components/VInput.tsx

@@ -0,0 +1,15 @@
+import TextInput from 'react-autocomplete-input';
+// import 'react-autocomplete-input/dist/bundle.css';
+
+export const VInput = () => {
+  return (
+    <div>
+      <TextInput
+        trigger={['@']}
+        options={{
+          '@': ['问题反馈'],
+        }}
+      />
+    </div>
+  );
+};

package/src/components/win-v/components/VRemindMsgList.tsx

@@ -0,0 +1,303 @@
+import $i18n from 'panda-i18n';
+import { IUnreadMsg } from 'src/types';
+import { css, styled } from 'styled-components';
+import { CustomIcon } from 'src/components/icon';
+import { CnBox, CnDrawer, CnIcon } from '@cainiaofe/cn-ui';
+import { useEffect, useRef, useState } from 'react';
+import { arraySum, msgBizTypeMap } from 'src/utils';
+import dayjs from 'dayjs';
+import { useSetVDialogState } from '../hooks/useVDialogState';
+import { useHalfScreenDispatch } from '@/hooks/useHalfScreenState';
+import { useMobileState } from '@/hooks/useMobile';
+
+interface IProps {
+  data: IUnreadMsg[];
+  onRefreshData: (id: number) => void;
+}
+
+export const VRemindMsgList = ({ data = [], onRefreshData }: IProps) => {
+  const [isFold, setIsFold] = useState(data.length > 1);
+  const listBoxRef = useRef<HTMLDivElement>(null);
+  const setVDialogState = useSetVDialogState();
+  const dispatch = useHalfScreenDispatch();
+  const isMobileDevice = useMobileState();
+  const [showDrawerBrowser, setShowDrawerBrowser] = useState<string>();
+  const msgIdRef = useRef<number>();
+
+  useEffect(() => {
+    if (listBoxRef.current) {
+      const items = Array.from<HTMLDivElement>(
+        listBoxRef.current.querySelectorAll('.msg-item'),
+      );
+      setVDialogState((state) => ({
+        ...state,
+        show: true,
+      }));
+
+      if (isFold) {
+        // 折叠
+        const heightList = mapToHeightList(items);
+        const showHeight = Math.min(heightList.at(0)!);
+
+        items.forEach((ele, index) => {
+          ele.style.height = `${showHeight}px`;
+          ele.style.top = '0px';
+
+          if (index !== 0) {
+            Array.from(ele.children ?? []).forEach((item) => {
+              (item as HTMLElement).style.opacity = '0';
+            });
+          }
+
+          if (index === 1) {
+            ele.style.transform = 'translateY(12px) scale(0.95)';
+          }
+
+          if (index > 1) {
+            ele.style.transform = 'translateY(24px) scale(0.9)';
+          }
+
+          if (index > 2) {
+            ele.style.display = 'none';
+          }
+        });
+
+        listBoxRef.current.style.height = `calc(${showHeight}px + 16px)`;
+      } else {
+        // 展开
+        // 隐藏小V对话
+        if (data.length !== 1) {
+          setVDialogState((state) => ({
+            ...state,
+            show: false,
+          }));
+        }
+
+        items.forEach((ele, index) => {
+          ele.style.height = '';
+
+          if (index !== 0) {
+            Array.from(ele.children ?? []).forEach((item) => {
+              (item as HTMLElement).style.opacity = '';
+            });
+          }
+
+          if (index > 2) {
+            ele.style.display = '';
+          }
+        });
+
+        const heightList = mapToHeightList(items);
+
+        items.forEach((ele, index) => {
+          ele.style.top = `calc(${arraySum(heightList.slice(0, index))}px + ${
+            index * 12
+          }px)`;
+          ele.style.transform = 'translateY(0) scale(1)';
+        });
+
+        listBoxRef.current.style.height = `calc(${arraySum(heightList)}px + ${
+          (heightList.length - 1) * 12
+        }px)`;
+      }
+    }
+  }, [isFold, data, setVDialogState]);
+
+  return (
+    <div
+      onClick={() => {
+        if (isFold) {
+          setIsFold(false);
+        }
+      }}
+    >
+      <CnBox direction="row" justify="flex-end">
+        <FoldBtn
+          $show={!isFold && data.length > 1}
+          onClick={() => setIsFold(true)}
+        >
+          <CnIcon
+            type="arrow-up"
+            size="medium"
+            style={{
+              marginRight: 8,
+            }}
+          />
+          {$i18n.get({ id: 'Folding', dm: '折叠' })}
+        </FoldBtn>
+      </CnBox>
+      <MsgListWrapper ref={listBoxRef}>
+        {data.map((item, index) => {
+          const { iconType, color } = msgBizTypeMap.get(item.bizType2) ?? {};
+          const handleClick = () => {
+            if (!isFold || data.length === 1) {
+              if (item.url) {
+                if (isMobileDevice) {
+                  // 手机端
+                  dispatch.setState({
+                    show: true,
+                    src: item.url,
+                    title: item.title,
+                  });
+                  onRefreshData(item.id);
+                } else {
+                  // PC端
+                  if (['GOOD_HABITS'].includes(item.bizType2)) {
+                    setShowDrawerBrowser(
+                      item.url.replace('cainiao.com', 'cainiao-inc.com'),
+                    );
+                  } else {
+                    globalThis.open(item.url);
+                    onRefreshData(item.id);
+                  }
+                }
+              } else {
+                onRefreshData(item.id);
+              }
+            } else {
+              setIsFold(true);
+            }
+          };
+          return (
+            <MsgWrapper
+              $index={index}
+              $fold={isFold}
+              className="msg-item"
+              key={item.id}
+              style={{
+                zIndex: data.length - index,
+              }}
+              onClick={handleClick}
+            >
+              <Remark>
+                <div data-type>
+                  <CustomIcon
+                    type={iconType}
+                    size={16}
+                    style={{
+                      marginRight: 4,
+                    }}
+                  />
+
+                  <span style={{ color }}>{item.bizTypeDesc2}</span>
+                </div>
+                <div data-time>
+                  {dayjs(item.sendTime).format('YYYY.MM.DD HH:mm')}
+                </div>
+              </Remark>
+              <MsgContentWrapper>
+                <span data-title>{item.title}：</span>
+                <span>{item.content}</span>
+              </MsgContentWrapper>
+            </MsgWrapper>
+          );
+        })}
+      </MsgListWrapper>
+      <Drawer
+        visible={!!showDrawerBrowser}
+        onClose={() => {
+          setShowDrawerBrowser(undefined);
+          onRefreshData(msgIdRef.current!);
+        }}
+      >
+        <iframe src={showDrawerBrowser} data-iframe title="abc" />
+      </Drawer>
+    </div>
+  );
+};
+
+const mapToHeightList = (items: Element[]) =>
+  items
+    .map((item) => item.getBoundingClientRect().height)
+    .map((item, index) => {
+      if (index === 1) {
+        return item / 0.95;
+      }
+
+      if (index > 1) {
+        return item / 0.9;
+      }
+
+      return item;
+    });
+
+const MsgListWrapper = styled.div`
+  display: grid;
+  gap: 16px;
+  position: relative;
+  transition: all 0.5s;
+`;
+
+const MsgWrapper = styled.div<{ $index: number; $fold: boolean }>`
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #fff;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
+  border-radius: 16px;
+  padding: 16px;
+  color: #272e3a;
+  transition: all 0.5s;
+  cursor: pointer;
+`;
+
+const Remark = styled.div`
+  width: 100%;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+
+  [data-type] {
+    display: flex;
+    align-items: center;
+    color: #3379ff;
+  }
+
+  [data-time] {
+    color: #828b9e;
+  }
+`;
+
+const MsgContentWrapper = styled.div`
+  font-size: 14px;
+  line-height: 20px;
+
+  [data-title] {
+    font-weight: 700;
+  }
+`;
+
+const FoldBtn = styled.div<{ $show: boolean }>`
+  width: 80px;
+  height: 32px;
+  border-radius: 16px;
+  color: #828b9e;
+  font-size: 14px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  ${(props) =>
+    !props.$show &&
+    css`
+      display: none;
+    `}
+`;
+
+const Drawer = styled(CnDrawer).attrs({
+  width: 430,
+  noCard: true,
+})`
+  [data-iframe] {
+    border: none;
+    width: 100%;
+    height: calc(100vh - 70px);
+  }
+`;