(feature)(chat-sdk) trend chart supports switch between line and bar,add second drill-down dimensions,chang queryMode from ENTITY to TAG (#422)

2025-12-10 19:38:13 +00:00 · 2023-11-25 11:13:10 +08:00
parent fe2a424718
commit 0534053ff9
17 changed files with 251 additions and 127 deletions
--- a/webapp/packages/chat-sdk/src/Chat/ChatFooter/style.module.less
+++ b/webapp/packages/chat-sdk/src/Chat/ChatFooter/style.module.less
@@ -90,8 +90,8 @@
            }

            .ant-select-selection-placeholder {
-              padding-left: 2px;
              line-height: 40px;
+              margin-bottom: 30px;
            }
          }

--- a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
@@ -127,7 +127,6 @@ const FilterItem: React.FC<Props> = ({
  };

  const onDateChange = (_: any, date: string) => {
-    console.log('onDateChange', date);
    const newFilters = filters.map((item, indexValue) => {
      if (item.bizName === filter.bizName && index === indexValue) {
        item.value = date;
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
@@ -126,7 +126,7 @@ const ParseTip: React.FC<Props> = ({
    const { type: agentType, name: agentName } = properties || {};

    const fields =
-      queryMode === 'ENTITY_DETAIL' ? dimensionItems?.concat(metrics || []) : dimensionItems;
+      queryMode === 'TAG_DETAIL' ? dimensionItems?.concat(metrics || []) : dimensionItems;

    return (
      <div className={`${prefixCls}-tip-content`}>
@@ -162,9 +162,7 @@ const ParseTip: React.FC<Props> = ({
                  </div>
                </div>
              )}
-            {['METRIC_GROUPBY', 'METRIC_ORDERBY', 'ENTITY_DETAIL', 'LLM_S2SQL'].includes(
-              queryMode!
-            ) &&
+            {['METRIC_GROUPBY', 'METRIC_ORDERBY', 'TAG_DETAIL', 'LLM_S2SQL'].includes(queryMode!) &&
              fields &&
              fields.length > 0 && (
                <div className={`${prefixCls}-tip-item`}>
@@ -173,7 +171,7 @@ const ParseTip: React.FC<Props> = ({
                      ? nativeQuery
                        ? '查询字段'
                        : '下钻维度'
-                      : queryMode === 'ENTITY_DETAIL'
+                      : queryMode === 'TAG_DETAIL'
                      ? '查询字段'
                      : '下钻维度'}
                    ：
@@ -187,7 +185,7 @@ const ParseTip: React.FC<Props> = ({
                  </div>
                </div>
              )}
-            {queryMode !== 'ENTITY_ID' &&
+            {queryMode !== 'TAG_ID' &&
              !dimensions?.some(item => item.bizName?.includes('_id')) &&
              entityDimensions
                ?.filter(dimension => dimension.value != null)
--- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
@@ -57,6 +57,10 @@
    align-items: center;
    column-gap: 13px;
    margin-left: -10px;
+
+    &.mobile {
+      flex-wrap: wrap;
+    }
  }

  &-content-option {
@@ -358,6 +362,20 @@
    overflow-wrap: break-word;
    user-select: text;
  }
+  &-toggle-expand-btn {
+    margin-left: 4px;
+    color: var(--text-color-fourth);
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  &-step-item {
+    position: relative;
+    margin: 2px 0 2px 7px;
+    padding: 2px 0 8px 18px;
+    border-left: 1px solid var(--green);
+    overflow: auto;
+  }
 }

 .@{filter-item-prefix-cls} {
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Message/index.tsx
@@ -45,7 +45,7 @@ const Message: React.FC<Props> = ({
              e.stopPropagation();
            }}
          >
-            {(queryMode === 'METRIC_ENTITY' || queryMode === 'ENTITY_DETAIL') &&
+            {(queryMode === 'METRIC_TAG' || queryMode === 'TAG_DETAIL') &&
              entityInfoList.length > 0 && (
                <div className={`${prefixCls}-info-bar`}>
                  <div className={`${prefixCls}-main-entity-info`}>
@@ -64,7 +64,7 @@ const Message: React.FC<Props> = ({
                  </div>
                </div>
              )}
-            {queryMode === 'ENTITY_LIST_FILTER' && (
+            {queryMode === 'TAG_LIST_FILTER' && (
              <div className={`${prefixCls}-info-bar`}>
                <div className={`${prefixCls}-main-entity-info`}>
                  <div className={`${prefixCls}-info-item`}>
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/style.less
@@ -32,6 +32,7 @@
  }

  &-filter-item {
+    margin-right: 4px;
    display: flex;
    align-items: center;
  }
@@ -52,11 +53,16 @@
    margin-top: 2px;
  }

+  &-query-tootip {
+    margin-left: 5px;
+  }
+  
  &-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
+    margin: 12px 0;
  }

  &-date-range {
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
@@ -23,6 +23,7 @@ type Props = {
  resultList: any[];
  triggerResize?: boolean;
  onApplyAuth?: (model: string) => void;
+  chartType?: string;
 };

 const MetricTrendChart: React.FC<Props> = ({
@@ -33,6 +34,7 @@ const MetricTrendChart: React.FC<Props> = ({
  resultList,
  triggerResize,
  onApplyAuth,
+  chartType,
 }) => {
  const chartRef = useRef<any>();
  const [instance, setInstance] = useState<ECharts>();
@@ -173,7 +175,7 @@ const MetricTrendChart: React.FC<Props> = ({
      series: sortedGroupKeys.slice(0, 20).map((category, index) => {
        const data = groupData[category];
        return {
-          type: 'line',
+          type: chartType,
          name: categoryColumnName ? category : metricField.name,
          symbol: 'circle',
          showSymbol: data.length === 1,
@@ -197,7 +199,7 @@ const MetricTrendChart: React.FC<Props> = ({
    if (metricField.authorized) {
      renderChart();
    }
-  }, [resultList, metricField]);
+  }, [resultList, metricField, chartType]);

  useEffect(() => {
    if (triggerResize && instance) {
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx
@@ -12,6 +12,7 @@ type Props = {
  metricFields: ColumnType[];
  resultList: any[];
  triggerResize?: boolean;
+  chartType?: string;
 };

 const MultiMetricsTrendChart: React.FC<Props> = ({
@@ -19,6 +20,7 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
  metricFields,
  resultList,
  triggerResize,
+  chartType,
 }) => {
  const chartRef = useRef<any>();
  const [instance, setInstance] = useState<ECharts>();
@@ -110,7 +112,7 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
      },
      series: metricFields.map((metricField, index) => {
        return {
-          type: 'line',
+          type: chartType,
          name: metricField.name,
          symbol: 'circle',
          showSymbol: resultList.length === 1,
@@ -132,7 +134,7 @@ const MultiMetricsTrendChart: React.FC<Props> = ({

  useEffect(() => {
    renderChart();
-  }, [resultList]);
+  }, [resultList, chartType]);

  useEffect(() => {
    if (triggerResize && instance) {
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
@@ -2,11 +2,23 @@ import { CLS_PREFIX } from '../../../common/constants';
 import { DrillDownDimensionType, FieldType, MsgDataType } from '../../../common/type';
 import { isMobile } from '../../../utils/utils';
 import MetricTrendChart from './MetricTrendChart';
-import { Spin } from 'antd';
+import { Spin, Select } from 'antd';
 import Table from '../Table';
 import MetricInfo from './MetricInfo';
 import DateOptions from '../DateOptions';
 import MultiMetricsTrendChart from './MultiMetricsTrendChart';
+import { useState } from 'react';
+
+const metricChartSelectOptions = [
+  {
+    value: 'line',
+    label: '折线图',
+  },
+  {
+    value: 'bar',
+    label: '柱状图',
+  },
+];

 type Props = {
  data: MsgDataType;
@@ -32,6 +44,7 @@ const MetricTrend: React.FC<Props> = ({
  onSelectDateOption,
 }) => {
  const { queryColumns, queryResults, aggregateInfo, entityInfo, chatContext } = data;
+  const [chartType, setChartType] = useState('line');

  const dateField: any = queryColumns?.find(
    (column: any) => column.showType === 'DATE' || column.type === 'DATE'
@@ -69,11 +82,21 @@ const MetricTrend: React.FC<Props> = ({
              drillDownDimension === undefined && (
                <MetricInfo aggregateInfo={aggregateInfo} currentMetricField={currentMetricField} />
              )}
-            <DateOptions
-              chatContext={chatContext}
-              currentDateOption={currentDateOption}
-              onSelectDateOption={onSelectDateOption}
-            />
+            <div className={`${prefixCls}-select-options`}>
+              <DateOptions
+                chatContext={chatContext}
+                currentDateOption={currentDateOption}
+                onSelectDateOption={onSelectDateOption}
+              />
+              <div>
+                <Select
+                  defaultValue="line"
+                  bordered={false}
+                  options={metricChartSelectOptions}
+                  onChange={(value: string) => setChartType(value)}
+                />
+              </div>
+            </div>
            {queryResults?.length === 1 || chartIndex % 2 === 1 ? (
              <Table data={{ ...data, queryResults }} onApplyAuth={onApplyAuth} />
            ) : metricFields.length > 1 ? (
@@ -82,6 +105,7 @@ const MetricTrend: React.FC<Props> = ({
                metricFields={metricFields}
                resultList={queryResults}
                triggerResize={triggerResize}
+                chartType={chartType}
              />
            ) : (
              <MetricTrendChart
@@ -92,6 +116,7 @@ const MetricTrend: React.FC<Props> = ({
                resultList={queryResults}
                triggerResize={triggerResize}
                onApplyAuth={onApplyAuth}
+                chartType={chartType}
              />
            )}
          </div>
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/style.less
@@ -56,6 +56,11 @@
    row-gap: 12px;
  }

+  &-select-options {
+    display: flex;
+    justify-content: space-between;
+  }
+
  &-indicator {
    display: flex;
    flex-direction: column;
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx
@@ -1,4 +1,4 @@
-import { formatByDecimalPlaces, getFormattedValue, isMobile } from '../../../utils/utils';
+import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils';
 import { Table as AntTable } from 'antd';
 import { MsgDataType } from '../../../common/type';
 import { CLS_PREFIX } from '../../../common/constants';
@@ -9,10 +9,11 @@ import moment from 'moment';
 type Props = {
  data: MsgDataType;
  size?: SizeType;
+  loading?: boolean;
  onApplyAuth?: (model: string) => void;
 };

-const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
+const Table: React.FC<Props> = ({ data, size, loading, onApplyAuth }) => {
  const { entityInfo, queryColumns, queryResults } = data;

  const prefixCls = `${CLS_PREFIX}-table`;
@@ -70,19 +71,14 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
    <div className={prefixCls}>
      <AntTable
        pagination={
-          queryResults.length <= 10
-            ? false
-            : {
-                defaultPageSize: 10,
-                position: ['bottomCenter'],
-                size: isMobile ? 'small' : 'default',
-              }
+          queryResults.length <= 10 ? false : { defaultPageSize: 10, position: ['bottomCenter'] }
        }
        columns={tableColumns}
        dataSource={dataSource}
        style={{ width: '100%', overflowX: 'auto', overflowY: 'hidden' }}
        rowClassName={getRowClassName}
        size={size}
+        loading={loading}
      />
    </div>
  );
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
@@ -27,6 +27,8 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
  const [referenceColumn, setReferenceColumn] = useState<ColumnType>();
  const [dataSource, setDataSource] = useState<any[]>(queryResults);
  const [drillDownDimension, setDrillDownDimension] = useState<DrillDownDimensionType>();
+  const [secondDrillDownDimension, setSecondDrillDownDimension] =
+    useState<DrillDownDimensionType>();
  const [loading, setLoading] = useState(false);
  const [defaultMetricField, setDefaultMetricField] = useState<FieldType>();
  const [activeMetricField, setActiveMetricField] = useState<FieldType>();
@@ -48,6 +50,8 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    setActiveMetricField(chatContext?.metrics?.[0]);
    setDateModeValue(chatContext?.dateInfo?.dateMode);
    setCurrentDateOption(chatContext?.dateInfo?.unit);
+    setDrillDownDimension(undefined);
+    setSecondDrillDownDimension(undefined);
  }, [data]);

  if (!queryColumns || !queryResults || !columns) {
@@ -75,7 +79,7 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    !isText &&
    !isMetricCard &&
    (categoryField.length > 1 ||
-      queryMode === 'ENTITY_DETAIL' ||
+      queryMode === 'TAG_DETAIL' ||
      queryMode === 'ENTITY_DIMENSION' ||
      (categoryField.length === 1 && metricFields.length === 0));

@@ -92,7 +96,12 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
      );
    }
    if (isTable) {
-      return <Table data={{ ...data, queryColumns: columns, queryResults: dataSource }} />;
+      return (
+        <Table
+          data={{ ...data, queryColumns: columns, queryResults: dataSource }}
+          loading={loading}
+        />
+      );
    }
    if (
      dateField &&
@@ -129,15 +138,21 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
        />
      );
    }
-    return <Table data={{ ...data, queryColumns: columns, queryResults: dataSource }} />;
+    return (
+      <Table
+        data={{ ...data, queryColumns: columns, queryResults: dataSource }}
+        loading={loading}
+      />
+    );
  };

-  const onLoadData = async (value: any) => {
+  const onLoadData = async (value: any, extraFilter?: any) => {
    setLoading(true);
    const res: any = await queryData({
+      ...chatContext,
+      ...value,
      queryId,
      parseId: chatContext.id,
-      ...value,
    });
    setLoading(false);
    if (res.code === 200) {
@@ -146,7 +161,8 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    }
  };

-  const onSelectDimension = (dimension?: DrillDownDimensionType) => {
+  const onSelectDimension = async (dimension?: DrillDownDimensionType) => {
+    setLoading(true);
    setDrillDownDimension(dimension);
    onLoadData({
      dateInfo: {
@@ -161,6 +177,23 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    });
  };

+  const onSelectSecondDimension = (dimension?: DrillDownDimensionType) => {
+    setSecondDrillDownDimension(dimension);
+    onLoadData({
+      dateInfo: {
+        ...chatContext.dateInfo,
+        dateMode: dateModeValue,
+        unit: currentDateOption || chatContext.dateInfo.unit,
+      },
+      dimensions: [
+        ...(chatContext.dimensions || []),
+        ...(drillDownDimension ? [drillDownDimension] : []),
+        ...(dimension ? [dimension] : []),
+      ],
+      metrics: [activeMetricField || defaultMetricField],
+    });
+  };
+
  const onSwitchMetric = (metricField?: FieldType) => {
    setActiveMetricField(metricField);
    onLoadData({
@@ -199,7 +232,7 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
    ?.name;

  const isEntityMode =
-    (queryMode === 'ENTITY_LIST_FILTER' || queryMode === 'METRIC_ENTITY') &&
+    (queryMode === 'TAG_LIST_FILTER' || queryMode === 'METRIC_TAG') &&
    typeof entityId === 'string' &&
    entityName !== undefined;

@@ -225,12 +258,11 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
            <div
              className={`${prefixCls}-bottom-tools ${
                isMetricCard ? `${prefixCls}-metric-card-tools` : ''
-              }`}
+              } ${isMobile ? 'mobile' : ''}`}
            >
              {isMultipleMetric && (
                <MetricOptions
-                  // metrics={chatContext.metrics}
-                  metrics={recommendMetrics}
+                  metrics={chatContext.metrics}
                  defaultMetric={defaultMetricField}
                  currentMetric={activeMetricField}
                  onSelectMetric={onSwitchMetric}
@@ -241,9 +273,11 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
                  modelId={chatContext.modelId}
                  metricId={activeMetricField?.id || defaultMetricField?.id}
                  drillDownDimension={drillDownDimension}
+                  secondDrillDownDimension={secondDrillDownDimension}
                  originDimensions={chatContext.dimensions}
                  dimensionFilters={chatContext.dimensionFilters}
                  onSelectDimension={onSelectDimension}
+                  onSelectSecondDimension={onSelectSecondDimension}
                />
              )}
            </div>
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/style.less
@@ -15,9 +15,13 @@
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 2px;
+
+    &.mobile {
+      flex-wrap: wrap;
+    }
  }

  &-metric-card-tools {
-    margin-top: 2px;
+    margin-top: 0;
  }
 }
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/DimensionSection.tsx
+++ b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/DimensionSection.tsx
@@ -0,0 +1,95 @@
+import classNames from 'classnames';
+import { CLS_PREFIX } from '../../common/constants';
+import { DrillDownDimensionType } from '../../common/type';
+import { Dropdown, Menu } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+
+type Props = {
+  drillDownDimension?: DrillDownDimensionType;
+  dimensions: DrillDownDimensionType[];
+  isSecondDrillDown?: boolean;
+  onSelectDimension: (dimension?: DrillDownDimensionType) => void;
+  onCancelDrillDown: () => void;
+};
+
+const DEFAULT_DIMENSION_COUNT = 5;
+
+const DimensionSection: React.FC<Props> = ({
+  drillDownDimension,
+  dimensions,
+  isSecondDrillDown,
+  onSelectDimension,
+  onCancelDrillDown,
+}) => {
+  const prefixCls = `${CLS_PREFIX}-drill-down-dimensions`;
+
+  const defaultDimensions = dimensions.slice(0, DEFAULT_DIMENSION_COUNT);
+
+  return (
+    <div className={`${prefixCls}-section`}>
+      <div className={`${prefixCls}-title`}>{isSecondDrillDown ? '二级' : '推荐'}下钻维度：</div>
+      <div className={`${prefixCls}-content`}>
+        {defaultDimensions.map((dimension, index) => {
+          const itemNameClass = classNames(`${prefixCls}-content-item-name`, {
+            [`${prefixCls}-content-item-active`]: drillDownDimension?.id === dimension.id,
+          });
+          return (
+            <div>
+              <span
+                className={itemNameClass}
+                onClick={() => {
+                  onSelectDimension(
+                    drillDownDimension?.id === dimension.id ? undefined : dimension
+                  );
+                }}
+              >
+                {dimension.name}
+              </span>
+              {index !== defaultDimensions.length - 1 && <span>、</span>}
+            </div>
+          );
+        })}
+        {dimensions.length > DEFAULT_DIMENSION_COUNT && (
+          <div>
+            <span>、</span>
+            <Dropdown
+              overlay={
+                <Menu>
+                  {dimensions.slice(DEFAULT_DIMENSION_COUNT).map(dimension => {
+                    const itemNameClass = classNames({
+                      [`${prefixCls}-menu-item-active`]: drillDownDimension?.id === dimension.id,
+                    });
+                    return (
+                      <Menu.Item key={dimension.id}>
+                        <span
+                          className={itemNameClass}
+                          onClick={() => {
+                            onSelectDimension(dimension);
+                          }}
+                        >
+                          {dimension.name}
+                        </span>
+                      </Menu.Item>
+                    );
+                  })}
+                </Menu>
+              }
+            >
+              <span>
+                <span className={`${prefixCls}-content-item-name`}>更多</span>
+                <DownOutlined className={`${prefixCls}-down-arrow`} />
+              </span>
+            </Dropdown>
+          </div>
+        )}
+        {drillDownDimension && (
+          <div className={`${prefixCls}-cancel-drill-down`} onClick={onCancelDrillDown}>
+            取消{isSecondDrillDown ? '二级' : ''}下钻
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DimensionSection;
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/index.tsx
@@ -2,32 +2,30 @@ import { useEffect, useState } from 'react';
 import { CLS_PREFIX } from '../../common/constants';
 import { DrillDownDimensionType, FilterItemType } from '../../common/type';
 import { queryDrillDownDimensions } from '../../service';
-import { Dropdown, Menu } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
+import DimensionSection from './DimensionSection';

 type Props = {
  modelId: number;
  metricId?: number;
  drillDownDimension?: DrillDownDimensionType;
-  isMetricCard?: boolean;
+  secondDrillDownDimension?: DrillDownDimensionType;
  originDimensions?: DrillDownDimensionType[];
  dimensionFilters?: FilterItemType[];
  onSelectDimension: (dimension?: DrillDownDimensionType) => void;
+  onSelectSecondDimension: (dimension?: DrillDownDimensionType) => void;
 };

 const MAX_DIMENSION_COUNT = 20;

-const DEFAULT_DIMENSION_COUNT = 5;
-
 const DrillDownDimensions: React.FC<Props> = ({
  modelId,
  metricId,
  drillDownDimension,
-  isMetricCard,
+  secondDrillDownDimension,
  originDimensions,
  dimensionFilters,
  onSelectDimension,
+  onSelectSecondDimension,
 }) => {
  const [dimensions, setDimensions] = useState<DrillDownDimensionType[]>([]);

@@ -54,77 +52,27 @@ const DrillDownDimensions: React.FC<Props> = ({
    onSelectDimension(undefined);
  };

-  const defaultDimensions = dimensions.slice(0, DEFAULT_DIMENSION_COUNT);
-
-  const drillDownDimensionsSectionClass = classNames(`${prefixCls}-section`, {
-    [`${prefixCls}-metric-card`]: isMetricCard,
-  });
+  const cancelSecondDrillDown = () => {
+    onSelectSecondDimension(undefined);
+  };

  return (
    <div className={prefixCls}>
-      <div className={drillDownDimensionsSectionClass}>
-        <div className={`${prefixCls}-title`}>推荐下钻维度：</div>
-        <div className={`${prefixCls}-content`}>
-          {defaultDimensions.map((dimension, index) => {
-            const itemNameClass = classNames(`${prefixCls}-content-item-name`, {
-              [`${prefixCls}-content-item-active`]: drillDownDimension?.id === dimension.id,
-            });
-            return (
-              <div>
-                <span
-                  className={itemNameClass}
-                  onClick={() => {
-                    onSelectDimension(
-                      drillDownDimension?.id === dimension.id ? undefined : dimension
-                    );
-                  }}
-                >
-                  {dimension.name}
-                </span>
-                {index !== defaultDimensions.length - 1 && <span>、</span>}
-              </div>
-            );
-          })}
-          {dimensions.length > DEFAULT_DIMENSION_COUNT && (
-            <div>
-              <span>、</span>
-              <Dropdown
-                overlay={
-                  <Menu>
-                    {dimensions.slice(DEFAULT_DIMENSION_COUNT).map(dimension => {
-                      const itemNameClass = classNames({
-                        [`${prefixCls}-menu-item-active`]: drillDownDimension?.id === dimension.id,
-                      });
-                      return (
-                        <Menu.Item key={dimension.id}>
-                          <span
-                            className={itemNameClass}
-                            onClick={() => {
-                              onSelectDimension(dimension);
-                            }}
-                          >
-                            {dimension.name}
-                          </span>
-                        </Menu.Item>
-                      );
-                    })}
-                  </Menu>
-                }
-              >
-                <span>
-                  <span className={`${prefixCls}-content-item-name`}>更多</span>
-                  <DownOutlined className={`${prefixCls}-down-arrow`} />
-                </span>
-              </Dropdown>
-            </div>
-          )}
-          {drillDownDimension && (
-            <div className={`${prefixCls}-cancel-drill-down`} onClick={cancelDrillDown}>
-              取消下钻
-            </div>
-          )}
-        </div>
-      </div>
+      <DimensionSection
+        drillDownDimension={drillDownDimension}
+        dimensions={dimensions}
+        onSelectDimension={onSelectDimension}
+        onCancelDrillDown={cancelDrillDown}
+      />
+      {drillDownDimension && dimensions.length > 1 && (
+        <DimensionSection
+          drillDownDimension={secondDrillDownDimension}
+          dimensions={dimensions.filter(dimension => dimension.id !== drillDownDimension?.id)}
+          isSecondDrillDown
+          onSelectDimension={onSelectSecondDimension}
+          onCancelDrillDown={cancelSecondDrillDown}
+        />
+      )}
    </div>
  );
 };
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/style.less
+++ b/webapp/packages/chat-sdk/src/components/DrillDownDimensions/style.less
@@ -4,25 +4,17 @@

 .@{drill-down-dimensions-prefix-cls} {
  display: flex;
-  flex-direction: column;
+  align-items: center;
+  column-gap: 12px;

  &-section {
-    width: 100%;
+    // width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 6px;
  }

-  &-metric-card {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
-    border-radius: 8px;
-    background-color: #fff;
-    width: fit-content;
-    padding: 2px 4px;
-    font-size: 12px;
-  }
-
  &-title {
    color: var(--text-color-third);
  }
--- a/webapp/packages/chat-sdk/src/utils/utils.ts
+++ b/webapp/packages/chat-sdk/src/utils/utils.ts
@@ -89,7 +89,7 @@ export const formatNumberWithCN = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + "万";
  } else {
-    return num;
+    return formatByDecimalPlaces(num, 2);
  }
 }