win-chart 1.0.0

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

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

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

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

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

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

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

@@ -0,0 +1,103 @@
+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;
+`;