win-chart 1.0.0

package/src/components/win-chart/utils/type.ts

@@ -0,0 +1,96 @@
+export interface IWinChartProps {
+  theme?: 'light' | 'dark';
+  sort?: 'asc' | 'desc';
+  color?: string[];
+  chartType?: WinChartType;
+  xAxisLabelRotate?: number;
+  xAxisLabelLength?: number;
+  data?: ICharInfo[];
+  extraData?: ICharInfo[];
+  className?: string;
+  style?: React.CSSProperties;
+
+  /**
+   * label 与 value 取值互换 （只作用饼图、环图、雷达图图表）
+   */
+  reserveValueWithLabelType?: boolean;
+
+  /**
+   * Y 轴起始值
+   */
+  yStart?: number[];
+
+  /**
+   * 自定义配置，优先级最高，会覆盖默认配置（采用deepmerge，只覆盖差异部分）
+   */
+  extraOption?: echarts.EChartsOption;
+}
+
+/**
+ * 图表类型
+ */
+export enum WinChartType {
+  /**
+   * MINI面积图
+   */
+  MINI_AREA,
+
+  /**
+   * 面积图
+   */
+  AREA,
+
+  /**
+   * 双轴图
+   */
+  DUAL_LINE_BAR,
+
+  /**
+   * 柱状图
+   */
+  COLUMN,
+
+  /**
+   * 堆叠柱状图
+   */
+  STACK_COLUMN,
+
+  /**
+   * 折线图
+   */
+  LINE,
+
+  /**
+   * 条形图
+   */
+  BAR,
+
+  /**
+   * 漏斗图
+   */
+  FUNNEL,
+
+  /**
+   * 饼图
+   */
+  PIE,
+
+  /**
+   * 环形图
+   */
+  CYCLE,
+
+  /**
+   * 雷达图
+   */
+  RADAR,
+}
+
+/**
+ * 标准图表数据
+ */
+export interface ICharInfo {
+  label: string;
+  value: number;
+  type?: string;
+}

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

@@ -0,0 +1,97 @@
+import { HTMLAttributes, CSSProperties, useState, useEffect } from 'react';
+
+interface IconProps extends HTMLAttributes<SVGElement> {
+  type?: string;
+  size?:
+    | number
+    | 'xs'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xl'
+    | 'xxl'
+    | 'xxxl'
+    | 'inherit';
+  color?: string;
+}
+
+const sizeMap = {
+  xs: '0.5em',
+  small: '0.75em',
+  medium: '1em',
+  large: '1.25em',
+  xl: '1.5em',
+  xxl: '1.75em',
+  xxxl: '2em',
+  inherit: 'inherit',
+};
+
+export const createIconComponent = (scriptUrl: string) => {
+  const Icon: React.FC<IconProps> = ({
+    type,
+    size = 'medium',
+    color,
+    style,
+    className,
+    ...restProps
+  }) => {
+    const scriptLoaded = useIconLoader(scriptUrl);
+
+    if (!scriptLoaded) {
+      return null; // 或者可以返回一个占位符或者加载状态
+    }
+
+    // 根据size属性转换尺寸
+    const fontSize = typeof size === 'number' ? `${size}px` : sizeMap[size];
+
+    // 定义图标样式
+    const iconStyle: CSSProperties = {
+      width: fontSize,
+      height: fontSize,
+      verticalAlign: '-0.15em',
+      fill: color || 'currentColor',
+      overflow: 'hidden',
+      ...style, // 合并外部传入的style对象
+    };
+
+    // 使用type属性构建图标的引用链接
+    const href = `#${type}`;
+
+    // 合并额外的props和样式类名
+    const svgClassName = `icon ${className || ''}`.trim();
+
+    return (
+      <svg
+        className={svgClassName}
+        aria-hidden="true"
+        style={iconStyle}
+        {...restProps}
+      >
+        <use xlinkHref={href}></use>
+      </svg>
+    );
+  };
+
+  return Icon;
+};
+
+export const useIconLoader = (scriptUrl: string) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    if (document.querySelector(`script[src="${scriptUrl}"]`)) {
+      setLoaded(true);
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = () => setLoaded(true);
+    document.body.appendChild(script);
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [scriptUrl]);
+
+  return loaded;
+};

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

@@ -0,0 +1,9 @@
+import { styled } from 'styled-components';
+
+export const EmptyBox = styled.img.attrs({
+  src: 'https://img.alicdn.com/imgextra/i4/O1CN01bkhh1m21HH4wlsyY9_!!6000000006959-55-tps-96-64.svg',
+})`
+  width: 50vw;
+  object-fit: contain;
+  margin-bottom: 0.64rem;
+`;

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

@@ -0,0 +1,173 @@
+import $i18n from 'panda-i18n';
+import { Box, CnButton, Input } from '@cainiaofe/cn-ui';
+import { useMemo } from 'react';
+import { css, styled } from 'styled-components';
+import { VDialogMsg } from './VDialogMsg';
+import { rgba } from 'polished';
+import { insertTimeMarkers } from '@/utils';
+import { CustomIcon } from '@/components/icon';
+import { IStyleProps } from '@/types';
+import { useVDialogCore } from '../hooks/useVDialogCore';
+import { BackMyVisionBtn, ToolBtnBox } from './VDialogBtn';
+import { useMobileState } from '@/hooks/useMobile';
+
+interface IProps extends IStyleProps {
+  insertContent?: React.ReactNode;
+}
+
+export const VDialog = ({ style, insertContent }: IProps) => {
+  const {
+    dialogState,
+    scrollContainerRef,
+    handleSend,
+    handleFocus,
+    handleInputChange,
+    handleQueryDialogList,
+  } = useVDialogCore();
+
+  // 对话列表
+  const msgList = useMemo(() => {
+    return insertTimeMarkers(dialogState.dialogList).map((item) => {
+      const curIndex = dialogState.dialogList.findIndex(
+        (ele) => ele.id === item.id,
+      );
+
+      const getRetryContent = () => {
+        for (let i = curIndex - 1; i >= 0; i--) {
+          if (dialogState.dialogList.at(i)?.sender !== '0') {
+            return dialogState.dialogList.at(i)?.content;
+          }
+        }
+      };
+
+      return (
+        <VDialogMsg key={item.id} data={item} retryMsg={getRetryContent()} />
+      );
+    });
+  }, [dialogState.dialogList]);
+  const isMobileDevice = useMobileState();
+
+  return (
+    <Wrapper style={style} $show={dialogState.show}>
+      <MessageListWrapper ref={scrollContainerRef}>
+        {insertContent}
+        <ListBtnWrapper>
+          <div style={{ height: 16 }}>
+            <ListBtn
+              $show={
+                dialogState.dialogList.length < dialogState.paging.totalCount &&
+                !dialogState.loading
+              }
+              onClick={() => {
+                handleQueryDialogList(dialogState.paging.currentPage + 1);
+              }}
+            >
+              {$i18n.get({ id: 'LoadMore', dm: '加载更多' })}
+            </ListBtn>
+          </div>
+        </ListBtnWrapper>
+        {msgList}
+      </MessageListWrapper>
+      <InputWrapper>
+        {isMobileDevice && (
+          <ToolBtnBox>
+            <BackMyVisionBtn />
+          </ToolBtnBox>
+        )}
+
+        <InputBox>
+          <InputDecoration
+            enterKeyHint="send"
+            disabled={dialogState.loading}
+            onFocus={() => {
+              handleFocus(true);
+            }}
+            onBlur={() => {
+              handleFocus(false);
+            }}
+            value={dialogState.input}
+            onChange={handleInputChange}
+          />
+          <SendDecoration onClick={() => handleSend(dialogState.input)} />
+        </InputBox>
+      </InputWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ $show?: boolean }>`
+  width: 100%;
+  height: 100%;
+  background: ${rgba('#fff', 0.6)};
+  padding: 16px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  ${(props) =>
+    !props.$show &&
+    css`
+      display: none;
+    `}
+`;
+
+const MessageListWrapper = styled.div`
+  display: grid;
+  gap: 8px;
+  flex: 1;
+  overflow: auto;
+  padding-bottom: 20px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const InputWrapper = styled.div`
+  width: 100%;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  margin-top: 8px;
+`;
+
+const InputBox = styled.div`
+  display: grid;
+  grid: auto-flow / 1fr 30px;
+  gap: 8px;
+  place-items: end center;
+`;
+
+const InputDecoration = styled(Input.TextArea).attrs({
+  hasBorder: false,
+  placeholder: $i18n.get({ id: 'TERM.PleaseEnter', dm: '请输入' }),
+  autoHeight: {
+    minRows: 1,
+    maxRows: 3,
+  },
+})`
+  width: 100%;
+`;
+
+const SendDecoration = styled(CustomIcon).attrs({ type: 'icon-fasong' })`
+  cursor: pointer;
+  margin-bottom: 8px;
+`;
+
+const ListBtnWrapper = styled(Box).attrs({
+  direction: 'row',
+  justify: 'center',
+})`
+  margin: 16px 0;
+`;
+
+const ListBtn = styled(CnButton).attrs({
+  text: true,
+  type: 'primary',
+})<{ $show: boolean }>`
+  ${(props) =>
+    !props.$show &&
+    css`
+      display: none;
+    `}
+`;

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

@@ -0,0 +1,119 @@
+import $i18n from 'panda-i18n';
+import { IDialogMsgInfo } from '@/types';
+import { CnBox, CnMessage } from '@cainiaofe/cn-ui';
+import { styled } from 'styled-components';
+import { CustomIcon } from '../../icon';
+import { useNavigate } from 'react-router-dom';
+import { CnButton } from '@cainiaofe/cn-ui-m';
+import { useVDialogOperate } from '../hooks/useVDialogOperate';
+
+export const OperateBtnBox = styled(CnBox).attrs({
+  direction: 'row',
+  justify: 'flex-end',
+  onClick: (e: React.MouseEvent) => e.stopPropagation(),
+})`
+  border-top: 1px solid #eef0f5;
+  padding-top: 8px;
+  margin-top: 8px;
+`;
+
+export const ToolBtnBox = styled(CnBox).attrs({
+  direction: 'row',
+  justify: 'flex-start',
+  onClick: (e: React.MouseEvent) => e.stopPropagation(),
+})`
+  border-bottom: 1px solid #eef0f5;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+`;
+
+const OperateBtn = styled.div`
+  color: #828b9e;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  margin-left: 16px;
+
+  span {
+    font-size: 12px;
+    margin-left: 4px;
+  }
+`;
+
+export const RetryBtn = (data: IDialogMsgInfo & { retryMsg?: string }) => {
+  const { handleSend } = useVDialogOperate();
+
+  return (
+    <OperateBtn onClick={() => handleSend(data.retryMsg)}>
+      <CustomIcon type="icon-refresh" />
+      <span>{$i18n.get({ id: 'TryAgain', dm: '再试一次' })}</span>
+    </OperateBtn>
+  );
+};
+
+export const CopyBtn = (data: IDialogMsgInfo) => {
+  return (
+    <OperateBtn
+      onClick={async () => {
+        if (data.content) {
+          await navigator.clipboard.writeText(data.content);
+          CnMessage.success(
+            $i18n.get({ id: 'TERM.CopySuccessful', dm: '复制成功' }),
+          );
+        }
+      }}
+    >
+      <CustomIcon type="icon-fuzhi" />
+      <span>{$i18n.get({ id: 'TERM.Copy', dm: '复制' })}</span>
+    </OperateBtn>
+  );
+};
+
+export const LikeBtn = (data: IDialogMsgInfo) => {
+  const { handleUpdateDialogMsg } = useVDialogOperate();
+  const handleLike = () => {
+    handleUpdateDialogMsg({
+      id: data.id,
+      status: { 0: 2, 1: 2, 2: 1 }[data.status!],
+    });
+  };
+
+  return (
+    <OperateBtn onClick={handleLike}>
+      <CustomIcon type={data.status === 2 ? 'icon-like-2' : 'icon-like-0'} />
+      <span>{$i18n.get({ id: 'ThumbsUp', dm: '点赞' })}</span>
+    </OperateBtn>
+  );
+};
+
+export const FeedbackBtn = () => {
+  const { handleSetDialogState } = useVDialogOperate();
+  const handleFeedback = () => {
+    handleSetDialogState((state) => ({
+      ...state,
+      input: '/问题反馈 ',
+    }));
+  };
+
+  return (
+    <OperateBtn onClick={handleFeedback}>
+      <CustomIcon type="icon-fankui" />
+      <span>{$i18n.get({ id: 'feedback', dm: '反馈' })}</span>
+    </OperateBtn>
+  );
+};
+
+export const BackMyVisionBtn = () => {
+  const nav = useNavigate();
+  const handleClick = async () => {
+    nav('/');
+  };
+
+  return (
+    <CnButton size="small" onClick={handleClick}>
+      <span>{$i18n.get({ id: 'GoToMyVision', dm: '进入My Vision' })}</span>
+    </CnButton>
+  );
+};