add chat plugin and split query to parse and execute (#25)

* [feature](webapp) add drill down dimensions and metric period compare and modify layout * [feature](webapp) add drill down dimensions and metric period compare and modify layout * [feature](webapp) gitignore add supersonic-webapp * [feature](webapp) gitignore add supersonic-webapp * [feature](webapp) add chat plugin and split query to parse and execute * [feature](webapp) add chat plugin and split query to parse and execute * [feature](webapp) add chat plugin and split query to parse and execute --------- Co-authored-by: williamhliu <williamhliu@tencent.com>
2025-12-20 06:34:55 +00:00 · 2023-08-05 22:17:42 +08:00
parent c9baed6c4e
commit 6951eada9d
86 changed files with 3193 additions and 1595 deletions
--- a/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/RecommendOptions/index.tsx
@@ -0,0 +1,134 @@
+import { getFormattedValue, isMobile } from '../../utils/utils';
+import { Table } from 'antd';
+import Avatar from 'antd/lib/avatar/avatar';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { queryEntities } from '../../service';
+import { CLS_PREFIX } from '../../common/constants';
+import IconFont from '../IconFont';
+import classNames from 'classnames';
+
+type Props = {
+  entityId: string | number;
+  domainId: number;
+  domainName: string;
+  isMobileMode?: boolean;
+  onSelect: (option: string) => void;
+};
+
+const RecommendOptions: React.FC<Props> = ({
+  entityId,
+  domainId,
+  domainName,
+  isMobileMode,
+  onSelect,
+}) => {
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const prefixCls = `${CLS_PREFIX}-recommend-options`;
+
+  const initData = async () => {
+    setLoading(true);
+    const res = await queryEntities(entityId, domainId);
+    setLoading(false);
+    setData(res.data.data);
+  };
+
+  useEffect(() => {
+    if (entityId) {
+      initData();
+    }
+  }, [entityId]);
+
+  const getSectionOptions = () => {
+    const basicColumn = {
+      dataIndex: 'name',
+      key: 'name',
+      title: '基本信息',
+      render: (name: string, record: any) => {
+        return (
+          <div className={`${prefixCls}-item-name-column`}>
+            <Avatar
+              shape="square"
+              icon={<IconFont type={domainName === '艺人库' ? 'icon-geshou' : 'icon-zhuanji'} />}
+              src={record.url}
+            />
+            <div className={`${prefixCls}-entity-name`}>
+              {name}
+              {record.ver && record.ver !== '完整版' && record.ver !== '-' && `(${record.ver})`}
+              {record.singerName && ` - ${record.singerName}`}
+            </div>
+          </div>
+        );
+      },
+    };
+
+    const playCntColumnIdex = domainName.includes('歌曲')
+      ? 'tme3platAvgLogYyPlayCnt'
+      : 'tme3platJsPlayCnt';
+
+    const columns = isMobile
+      ? [basicColumn]
+      : [
+          basicColumn,
+          domainName.includes('艺人')
+            ? {
+                dataIndex: 'onlineSongCnt',
+                key: 'onlineSongCnt',
+                title: '在架歌曲数',
+                align: 'center',
+                render: (onlineSongCnt: string) => {
+                  return onlineSongCnt ? getFormattedValue(+onlineSongCnt) : '-';
+                },
+              }
+            : {
+                dataIndex: 'publishTime',
+                key: 'publishTime',
+                title: '发布时间',
+                align: 'center',
+                render: (publishTime: string) => {
+                  return publishTime ? moment(publishTime).format('YYYY-MM-DD') : '-';
+                },
+              },
+          {
+            dataIndex: playCntColumnIdex,
+            key: playCntColumnIdex,
+            align: 'center',
+            title: domainName.includes('歌曲') ? '近7天日均运营播放量' : '昨日结算播放量',
+            render: (value: string) => {
+              return value ? getFormattedValue(+value) : '-';
+            },
+          },
+        ];
+
+    return (
+      <Table
+        rowKey="id"
+        columns={columns as any}
+        dataSource={data}
+        showHeader={!isMobile}
+        size="small"
+        pagination={false}
+        loading={loading}
+        className={`${prefixCls}-table`}
+        rowClassName={`${prefixCls}-table-row`}
+        onRow={record => {
+          return {
+            onClick: () => {
+              onSelect(record.id);
+            },
+          };
+        }}
+      />
+    );
+  };
+
+  const recommendOptionsClass = classNames(prefixCls, {
+    [`${prefixCls}-mobile-mode`]: isMobileMode,
+  });
+
+  return <div className={recommendOptionsClass}>{getSectionOptions()}</div>;
+};
+
+export default RecommendOptions;
--- a/webapp/packages/chat-sdk/src/components/RecommendOptions/style.less
+++ b/webapp/packages/chat-sdk/src/components/RecommendOptions/style.less
@@ -0,0 +1,24 @@
+@import '../../styles/index.less';
+
+@recommend-options-prefix-cls: ~'@{supersonic-chat-prefix}-recommend-options';
+
+.@{recommend-options-prefix-cls} {
+  padding: 8px 0 12px;
+
+  &-item-name-column {
+    display: flex;
+    align-items: center;
+    column-gap: 6px;
+  }
+
+  &-entity-name {
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  &-table-row {
+    cursor: pointer;
+  }
+}
+