first commit

webapp/packages/chat-sdk/src/components/ChatMsg/SemanticInfoPopover/SemanticTypeTag.tsx

@@ -0,0 +1,25 @@
+import { Tag } from 'antd';
+import React from 'react';
+import { SemanticTypeEnum, SEMANTIC_TYPE_MAP } from '../../../common/type';
+
+type Props = {
+  infoType?: SemanticTypeEnum;
+};
+
+const SemanticTypeTag: React.FC<Props> = ({ infoType = SemanticTypeEnum.METRIC }) => {
+  return (
+    <Tag
+      color={
+        infoType === SemanticTypeEnum.DIMENSION || infoType === SemanticTypeEnum.DOMAIN
+          ? 'blue'
+          : infoType === SemanticTypeEnum.VALUE
+            ? 'geekblue'
+            : 'orange'
+      }
+    >
+      {SEMANTIC_TYPE_MAP[infoType]}
+    </Tag>
+  );
+};
+
+export default SemanticTypeTag;

webapp/packages/chat-sdk/src/components/ChatMsg/SemanticInfoPopover/index.tsx

@@ -0,0 +1,104 @@
+import { Popover, message, Row, Col, Button, Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { SemanticTypeEnum } from '../../../common/type';
+import { queryMetricInfo } from '../../../service';
+import SemanticTypeTag from './SemanticTypeTag';
+import { isMobile } from '../../../utils/utils';
+import { CLS_PREFIX } from '../../../common/constants';
+
+type Props = {
+  children: React.ReactNode;
+  classId?: number;
+  infoType?: SemanticTypeEnum;
+  uniqueId: string | number;
+  onDetailBtnClick?: (data: any) => void;
+};
+
+const SemanticInfoPopover: React.FC<Props> = ({
+  classId,
+  infoType,
+  uniqueId,
+  children,
+  onDetailBtnClick,
+}) => {
+  const [semanticInfo, setSemanticInfo] = useState<any>(undefined);
+  const [popoverVisible, setPopoverVisible] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const prefixCls = `${CLS_PREFIX}-semantic-info-popover`;
+
+  const text = (
+    <Row>
+      <Col flex="1">
+        <SemanticTypeTag infoType={infoType} />
+      </Col>
+      {onDetailBtnClick && (
+        <Col flex="0 1 40px">
+          {semanticInfo && (
+            <Button
+              type="link"
+              size="small"
+              onClick={() => {
+                onDetailBtnClick(semanticInfo);
+              }}
+            >
+              详情
+            </Button>
+          )}
+        </Col>
+      )}
+    </Row>
+  );
+
+  const content = loading ? (
+    <div className={`${prefixCls}-spin-box`}>
+      <Spin />
+    </div>
+  ) : (
+    <div>
+      <span>{semanticInfo?.description || '暂无数据'}</span>
+    </div>
+  );
+
+  const getMetricInfo = async () => {
+    setLoading(true);
+    const { data: resData } = await queryMetricInfo({
+      classId,
+      uniqueId,
+    });
+    const { code, data, msg } = resData;
+    setLoading(false);
+    if (code === '0') {
+      setSemanticInfo({
+        ...data,
+        semanticInfoType: SemanticTypeEnum.METRIC,
+      });
+    } else {
+      message.error(msg);
+    }
+  };
+
+  useEffect(() => {
+    if (popoverVisible && !semanticInfo) {
+      getMetricInfo();
+    }
+  }, [popoverVisible]);
+
+  return (
+    <Popover
+      placement="top"
+      title={text}
+      content={content}
+      trigger="hover"
+      open={classId && !isMobile ? undefined : false}
+      onOpenChange={visible => {
+        setPopoverVisible(visible);
+      }}
+      overlayClassName={prefixCls}
+    >
+      {children}
+    </Popover>
+  );
+};
+
+export default SemanticInfoPopover;

webapp/packages/chat-sdk/src/components/ChatMsg/SemanticInfoPopover/style.less

@@ -0,0 +1,18 @@
+@import '../../../styles/index.less';
+
+@semantic-info-popover-cls: ~'@{supersonic-chat-prefix}-semantic-info-popover';
+
+.semantic-info-popover-cls {
+  max-width: 300px;
+  &-spin-box {
+    text-align: center;
+    padding-top: 10px;
+  }
+  .ant-popover-title{
+    padding: 5px 8px 4px;
+  }
+  .ant-popover-inner-content {
+    min-height: 60px;
+    min-width: 185px;
+  }
+}