win-chart 1.0.1 → 1.0.2

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

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

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

@@ -1,303 +0,0 @@
-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);
-  }
-`;