win-chart 1.0.1 → 1.0.3

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

@@ -1,97 +0,0 @@
-import { styled, keyframes, css } from 'styled-components';
-import $i18n from 'panda-i18n';
-
-const isChinese = $i18n.getLang() === 'zh-CN';
-
-const slideInFromRight = keyframes`
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-    filter: blur(3px); /* 开始时模糊 */
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-    filter: blur(0); /* 结束时清晰 */
-  }
-`;
-
-interface IProps {
-  onClick: () => void;
-}
-
-export const UnreadRobot = (args: IProps) => {
-  return (
-    <Wrapper {...args}>
-      <ChangeTipImg
-        src={
-          isChinese
-            ? 'https://img.alicdn.com/imgextra/i1/O1CN01W657Of1iK2qUG0WKS_!!6000000004393-1-tps-720-638.gif'
-            : 'https://img.alicdn.com/imgextra/i1/O1CN01KJmNjj1JlBvXcYJW4_!!6000000001068-1-tps-720-638.gif'
-        }
-      />
-      <RobotImg />
-      <ShadowImg />
-    </Wrapper>
-  );
-};
-
-export const ChangeRobot = (args: IProps) => {
-  return (
-    <Wrapper {...args}>
-      <ChangeTipImg
-        src={
-          isChinese
-            ? 'https://img.alicdn.com/imgextra/i3/O1CN01rdpqie1Gi2LsgNFff_!!6000000000655-1-tps-720-638.gif'
-            : 'https://img.alicdn.com/imgextra/i4/O1CN018SJdhy1DbDbnjWYVE_!!6000000000234-1-tps-720-638.gif'
-        }
-      />
-      <RobotImg />
-      <ShadowImg />
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  position: absolute;
-  width: 177px;
-  right: 0;
-  bottom: 80px;
-  cursor: pointer;
-  z-index: 1;
-  animation: ${slideInFromRight} 0.8s forwards;
-`;
-
-const ChangeTipImg = styled.img`
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-
-  ${!isChinese &&
-  css`
-    bottom: 18px;
-    left: -50px;
-  `}
-`;
-
-const RobotImg = styled.img.attrs({
-  src: 'https://img.alicdn.com/imgextra/i4/O1CN01RXKj9z27ygNSyfxe7_!!6000000007866-1-tps-720-638.gif',
-})`
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  left: 0;
-`;
-
-const ShadowImg = styled.img.attrs({
-  src: 'https://img.alicdn.com/imgextra/i3/O1CN01vLugxW1rYXvF8V5XP_!!6000000005643-2-tps-720-638.png',
-})`
-  position: absolute;
-  width: 80%;
-  bottom: 0;
-  left: 21px;
-  z-index: -1;
-  opacity: 0.5;
-`;

package/src/components/win-v/hooks/useVDialogCore.ts

@@ -1,102 +0,0 @@
-import { useVDialogValue } from '../hooks/useVDialogState';
-import { useEventListener } from 'ahooks';
-import { useRef, useState, useEffect } from 'react';
-import { useSetVRemindMsgShow } from './useVRemindMsgShow';
-import { useVDialogOperate } from './useVDialogOperate';
-
-export const useVDialogCore = () => {
-  const dialogState = useVDialogValue();
-  const [isInputFocus, setIsInputFocus] = useState(false);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const setVRemindMsgShow = useSetVRemindMsgShow();
-  const lastScrollTopRef = useRef(0);
-
-  const {
-    handleInputChange,
-    handleSend,
-    handleQueryDialogList,
-    handleUpdateDialogMsg,
-  } = useVDialogOperate();
-
-  // 处理聚焦
-  const handleFocus = (isFocus: boolean) => {
-    setIsInputFocus(isFocus);
-  };
-
-  // 向上滚动隐患提醒消息
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (container) {
-      const onScroll = (e: Event) => {
-        const currentScrollTop = container.scrollTop;
-        const lastScrollTop = lastScrollTopRef.current;
-
-        if (currentScrollTop < lastScrollTop) {
-          // 向上滚动
-          setVRemindMsgShow(false);
-        }
-
-        // 更新最后的滚动位置
-        lastScrollTopRef.current = currentScrollTop;
-      };
-
-      container.addEventListener('scroll', onScroll);
-
-      // 组件卸载时移除滚动监听
-      return () => {
-        if (container) {
-          container.removeEventListener('scroll', onScroll);
-        }
-      };
-    }
-  }, [setVRemindMsgShow]);
-
-  // 聚集输入框时，隐藏提醒消息
-  useEffect(() => {
-    if (isInputFocus) {
-      setVRemindMsgShow(false);
-    }
-  }, [isInputFocus, setVRemindMsgShow]);
-
-  // 监听回车键
-  useEventListener('keydown', (e) => {
-    if (e.code === 'Enter' && isInputFocus) {
-      handleSend(dialogState.input);
-    }
-  });
-
-  // 触发滚动到底部
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-
-    setTimeout(() => {
-      if (container) {
-        container.scrollTop = container.scrollHeight;
-      }
-    }, 0);
-
-    if (container) {
-      // 使用MutationObserver来观察DOM变化
-      const observer = new MutationObserver(() => {
-        container.scrollTop = container.scrollHeight;
-        observer.disconnect();
-      });
-
-      // 仅观察子节点变动，根据需要可以调整配置
-      observer.observe(container, { childList: true, subtree: true });
-
-      // 在组件卸载时断开观察
-      return () => observer.disconnect();
-    }
-  }, [dialogState.scrollToBottomTag]);
-
-  return {
-    scrollContainerRef,
-    dialogState,
-    handleSend,
-    handleInputChange,
-    handleFocus,
-    handleQueryDialogList,
-    handleUpdateDialogMsg,
-  };
-};

package/src/components/win-v/hooks/useVDialogOperate.ts

@@ -1,132 +0,0 @@
-import { useSetVDialogState } from '../hooks/useVDialogState';
-import { DialogService } from '@/services/DialogService';
-import { mergeAndDeduplicateArrays } from '@/utils';
-import { CnMessage } from '@cainiaofe/cn-ui';
-import { useCallback } from 'react';
-import { IDialogMsgInfo } from '@/types';
-
-export const useVDialogOperate = () => {
-  const setDialogState = useSetVDialogState();
-
-  // 查询对话
-  const handleQueryDialogList = useCallback(
-    async (currentPage = 1) => {
-      try {
-        const data = await DialogService.queryList({
-          currentPage,
-          pageSize: 10,
-        });
-
-        setDialogState((state) => ({
-          ...state,
-          dialogList: mergeAndDeduplicateArrays(
-            state.dialogList,
-            data.tableData,
-          ),
-          paging: data.paging,
-          ...(currentPage === 1 && {
-            scrollToBottomTag: state.scrollToBottomTag + 1,
-          }),
-        }));
-      } catch (error) {
-        CnMessage.error(error.message);
-      }
-    },
-    [setDialogState],
-  );
-
-  // 发送
-  const handleSend = useCallback(
-    async (msg?: string) => {
-      const sendMsg = msg?.trim();
-
-      if (!sendMsg) {
-        return;
-      }
-
-      try {
-        const regex = /^\/问题反馈\s+(.+)/;
-        const match = sendMsg.match(regex);
-        if (match) {
-          // 问题反馈
-          setDialogState((state) => ({
-            ...state,
-            loading: true,
-            input: '',
-            scrollToBottomTag: state.scrollToBottomTag + 1,
-          }));
-          const feedbackContent = match[1];
-          await DialogService.feedback(feedbackContent);
-          CnMessage.success('问题反馈成功');
-          return;
-        }
-
-        // 发送消息
-        setDialogState((state) => ({
-          ...state,
-          loading: true,
-          input: '',
-          dialogList: [
-            ...state.dialogList,
-            { id: -1, content: sendMsg },
-            { id: -2, sender: '0' },
-          ],
-          scrollToBottomTag: state.scrollToBottomTag + 1,
-        }));
-        await DialogService.send(sendMsg);
-        handleQueryDialogList();
-      } catch (error) {
-        CnMessage.error(error.message);
-      } finally {
-        setDialogState((state) => ({
-          ...state,
-          loading: false,
-        }));
-      }
-    },
-    [handleQueryDialogList, setDialogState],
-  );
-
-  // 更新信息
-  const handleUpdateDialogMsg = useCallback(
-    async (data: Partial<IDialogMsgInfo>) => {
-      if (typeof data.id === 'number') {
-        try {
-          // 1. 更远程状态
-          await DialogService.update(data);
-
-          // 2. 更新本地状态
-          setDialogState((state) => ({
-            ...state,
-            dialogList: state.dialogList.map((item) => ({
-              ...item,
-              ...(item.id === data.id && data),
-            })),
-          }));
-        } catch (error) {
-          CnMessage.error(error.message);
-        }
-      }
-    },
-    [setDialogState],
-  );
-
-  //  处理输入
-  const handleInputChange = useCallback(
-    (input: string) => {
-      setDialogState((state) => ({
-        ...state,
-        input,
-      }));
-    },
-    [setDialogState],
-  );
-
-  return {
-    handleSetDialogState: setDialogState,
-    handleInputChange,
-    handleSend,
-    handleQueryDialogList,
-    handleUpdateDialogMsg,
-  };
-};

package/src/components/win-v/hooks/useVDialogState.ts

@@ -1,52 +0,0 @@
-import { ICnPaging, IDialogMsgInfo } from '@/types';
-import { atom, selector, useRecoilValue, useSetRecoilState } from 'recoil';
-
-interface IVDialogState {
-  input: string;
-  loading: boolean;
-  show: boolean;
-  dialogList: IDialogMsgInfo[];
-  paging: ICnPaging;
-
-  /**
-   * 滚动到底部标记
-   */
-  scrollToBottomTag: number;
-}
-
-const vDialogState = atom<IVDialogState>({
-  key: 'v-dialog-state',
-  default: {
-    input: '',
-    loading: false,
-    show: true,
-    dialogList: [],
-    paging: {
-      currentPage: 1,
-      pageSize: 10,
-      totalCount: 0,
-    },
-    scrollToBottomTag: 0,
-  },
-});
-
-export const useVDialogValue = () => useRecoilValue(vDialogState);
-export const useSetVDialogState = () => useSetRecoilState(vDialogState);
-
-const hasChangeMsgState = selector({
-  key: 'has-change-msg-state',
-  get: ({ get }) => {
-    const { dialogList } = get(vDialogState);
-    return dialogList.some(
-      (item) => item.type === 'text_multiply' && item.status === 0,
-    );
-  },
-});
-
-/**
- * 是否有未读变更消息
- * @returns
- */
-export const useHasChangeMsg = () => {
-  return useRecoilValue(hasChangeMsgState);
-};

package/src/components/win-v/hooks/useVRemindMsgShow.ts

@@ -1,15 +0,0 @@
-import {
-  atom,
-  useRecoilState,
-  useRecoilValue,
-  useSetRecoilState,
-} from 'recoil';
-
-const state = atom({
-  key: 'v-remind-msg-show',
-  default: true,
-});
-
-export const useVRemindMsgShow = () => useRecoilValue(state);
-export const useVRemindMsgShowState = () => useRecoilState(state);
-export const useSetVRemindMsgShow = () => useSetRecoilState(state);

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

@@ -1,205 +0,0 @@
-import $i18n from 'panda-i18n';
-import { CnMessage } from '@cainiaofe/cn-ui';
-import { PageService } from '@/services/PageService';
-import { IUnreadMsg } from '@/types';
-import { css, styled } from 'styled-components';
-import { VRemindMsgList } from './components/VRemindMsgList';
-import { VDialog } from './components/VDialog';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useVRemindMsgShowState } from './hooks/useVRemindMsgShow';
-import { rgba } from 'polished';
-import { RESPONSIVE_BREAKPOINT } from '@/utils';
-import { useSetVDialogState } from './hooks/useVDialogState';
-import { CustomIcon } from '../icon';
-
-interface IProps {
-  msgList: IUnreadMsg[];
-  handleRefreshMsgList: () => void;
-}
-
-export function VShowPanel({ msgList, handleRefreshMsgList }: IProps) {
-  const setVDialogState = useSetVDialogState();
-  const bizTypeList = useMemo(
-    () => [...new Set<string>([...msgList.map((m) => m.bizType2)])],
-    [msgList],
-  );
-
-  // 标记已读并刷新数据
-  const handleRefreshData = async (id: number | number[]) => {
-    try {
-      if (Array.isArray(id)) {
-        await PageService.markUnreadMsgList(id);
-      } else {
-        await PageService.markUnreadMsg(id);
-      }
-    } catch (error) {
-      CnMessage.error(error.message);
-    }
-    handleRefreshMsgList();
-  };
-
-  const [vRemindMsgState, setVRemindMsgState] = useVRemindMsgShowState();
-
-  const magGroupListRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-
-  useEffect(() => {
-    if (vRemindMsgState) {
-      setHeight(magGroupListRef.current?.clientHeight || 0);
-    } else {
-      setHeight(0);
-    }
-  }, [vRemindMsgState]);
-
-  useEffect(() => {
-    if (msgList.length === 0) {
-      setVDialogState((state) => ({
-        ...state,
-        show: true,
-      }));
-    }
-  }, [msgList.length, setVDialogState]);
-
-  return (
-    <Wrapper>
-      <VRobot />
-      <MsgAreaWrapper>
-        <div data-title>
-          {$i18n.get({ id: 'SmallVAssistant', dm: '小V助手' })}
-        </div>
-        <div data-description>
-          {msgList.length === 0 ? (
-            <span>
-              {$i18n.get({
-                id: 'DearYourMessageBoxIsNeat',
-                dm: '亲，您的消息盒子很整洁。',
-              })}
-            </span>
-          ) : (
-            <span>
-              <span>
-                {$i18n.get({ id: 'DearYouHave', dm: '亲，您有' })}
-                <span
-                  data-open
-                  onClick={() => {
-                    setVRemindMsgState(true);
-                  }}
-                >
-                  {` ${msgList.length} `}
-                </span>
-                {$i18n.get({ id: 'UnreadMessages', dm: '条未读消息' })}
-              </span>
-              <CustomIcon
-                type="icon-yijianqingli"
-                size={16}
-                onClick={() => {
-                  handleRefreshData(msgList.map((item) => item.id));
-                  setVRemindMsgState(false);
-                }}
-                style={{
-                  marginLeft: 16,
-                  cursor: 'pointer',
-                  transform: 'translateY(1px)',
-                }}
-              />
-            </span>
-          )}
-        </div>
-      </MsgAreaWrapper>
-      <MsgGroupListWrapper $show={vRemindMsgState} ref={magGroupListRef}>
-        {bizTypeList.map((item) => (
-          <VRemindMsgList
-            key={item}
-            data={msgList.filter((msg) => msg.bizType2 === item)}
-            onRefreshData={handleRefreshData}
-          />
-        ))}
-      </MsgGroupListWrapper>
-      <DialogAreaWrapper style={{ paddingTop: height ? height - 8 : 0 }}>
-        <VDialog style={{ background: 'transparent', padding: 0 }} />
-      </DialogAreaWrapper>
-    </Wrapper>
-  );
-}
-
-const TOP_HEIGHT = '80px';
-
-const Wrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  position: relative;
-`;
-
-const MsgAreaWrapper = styled.div`
-  height: ${TOP_HEIGHT};
-  padding-bottom: 12px;
-
-  [data-title] {
-    font-size: 20px;
-    color: #222;
-    line-height: 1;
-    margin-bottom: 8px;
-  }
-
-  [data-description] {
-    width: max-content;
-    font-size: 12px;
-    color: #272e3a;
-    padding: 8px 12px;
-    border-radius: 12px 0px 12px 12px;
-    padding-right: 50px;
-    background: ${rgba('#3399FF', 0.1)};
-
-    [data-open] {
-      color: #3d84ff;
-      cursor: pointer;
-    }
-  }
-`;
-
-const DialogAreaWrapper = styled.div`
-  height: calc(100% - ${TOP_HEIGHT});
-`;
-
-export const MsgGroupListWrapper = styled.div<{ $show?: boolean }>`
-  display: grid;
-  grid: auto-flow auto / 1fr;
-  gap: 16px;
-  place-content: start;
-  padding-bottom: 20px;
-  width: 100%;
-  max-height: 85%;
-  padding: 0 20px;
-  overflow: auto;
-  position: absolute;
-  left: 0;
-  top: 92px;
-  padding-bottom: 20px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  ${(props) =>
-    !props.$show &&
-    css`
-      visibility: hidden;
-    `}
-`;
-
-export const VRobot = styled.div`
-  width: 170px;
-  height: 160px;
-  background: url('https://img.alicdn.com/imgextra/i1/O1CN01Zzbxyo1M7kf8Dx46V_!!6000000001388-2-tps-700-636.png')
-    no-repeat center / cover;
-  position: absolute;
-  right: 0px;
-  top: -4px;
-
-  @media (max-width: ${RESPONSIVE_BREAKPOINT}) {
-    width: 3.6rem;
-    height: 3.4rem;
-    right: -0.1rem;
-  }
-`;

package/src/components/win-wrappers/card-wrapper.tsx

@@ -1,103 +0,0 @@
-import { styled, css } from 'styled-components';
-
-export const CardWrapper = styled.div<{ $hidden?: boolean }>`
-  ${(props) =>
-    props.$hidden &&
-    css`
-      display: none;
-    `}
-
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 2px 4px 0px rgba(39, 46, 58, 0.12);
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(30px);
-
-  ${(props) => css`
-    background-color: ${props.theme.cardBackgroundColor};
-  `};
-
-  .cn-next-loading-wrap {
-    width: 100% !important;
-    height: 100% !important;
-  }
-`;
-
-export const CardWrapperMobile = styled.div<{ $show?: boolean }>`
-  ${(props) =>
-    props.$show &&
-    css`
-      display: none;
-    `}
-
-  width: 100%;
-  height: 100%;
-  position: relative;
-  padding: 0.32rem;
-  border-radius: 0.24rem;
-  box-shadow: 0 0.02rem 0.04rem 0 rgba(39, 46, 58, 0.12);
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(30px);
-
-  ${(props) => css`
-    background-color: ${props.theme.cardBackgroundColor};
-  `};
-
-  .cn-next-loading-wrap {
-    width: 100% !important;
-    height: 100% !important;
-  }
-`;
-
-export const CardTitleWrapper = styled.div<{ $checked?: boolean }>`
-  color: ${(props) => props.theme.color ?? '#000'};
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1;
-  margin-bottom: 8px;
-  ${({ $checked = true }) =>
-    !$checked &&
-    css`
-      color: ${(props) => props.theme.color ?? '#6d7a90'};
-    `}
-`;
-
-export const CardTitleWrapperMobile = styled.div<{ $checked?: boolean }>`
-  color: ${(props) => props.theme.color ?? '#272F3D'};
-  font-weight: 600;
-  font-size: 0.32rem;
-  line-height: 1;
-  margin-bottom: 0.2rem;
-
-  ${({ $checked = true }) =>
-    !$checked &&
-    css`
-      color: ${(props) => props.theme.color ?? '#6d7a90'};
-    `}
-`;
-
-export const IconWrapper = styled.div<{ $src?: string }>`
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  padding: 8px;
-  box-shadow: 0 2px 4px 0px rgba(39, 46, 58, 0.12);
-  background: no-repeat center / 16px 16px url('${(props) => props.$src}');
-  cursor: pointer;
-  background-color: #fff;
-
-  ${(props) => css`
-    background-color: ${props.theme.iconBackgroundColor};
-  `}
-`;
-
-export const UnitWrapper = styled.span`
-  color: #6d7a90;
-  font-size: 12px;
-  padding-left: 5px;
-  display: inline-block;
-`;