[feature](webapp) merge query steps to one card

2025-12-17 16:02:14 +00:00 · 2023-08-29 22:14:14 +08:00
parent 93ca060c45
commit 36fd737440
40 changed files with 994 additions and 496 deletions
--- a/webapp/packages/chat-sdk/src/components/MetricOptions/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/MetricOptions/index.tsx
@@ -0,0 +1,71 @@
+import { CLS_PREFIX } from '../../common/constants';
+import { FieldType } from '../../common/type';
+import classNames from 'classnames';
+import { isMobile } from '../../utils/utils';
+
+type Props = {
+  metrics: FieldType[];
+  defaultMetric?: FieldType;
+  currentMetric?: FieldType;
+  isMetricCard?: boolean;
+  onSelectMetric: (metric?: FieldType) => void;
+};
+
+const MetricOptions: React.FC<Props> = ({
+  metrics,
+  defaultMetric,
+  currentMetric,
+  isMetricCard,
+  onSelectMetric,
+}) => {
+  const DEFAULT_DIMENSION_COUNT = isMobile ? 2 : 5;
+  const prefixCls = `${CLS_PREFIX}-metric-options`;
+
+  const defaultMetrics = metrics
+    .filter(metric => metric.id !== defaultMetric?.id)
+    .slice(0, DEFAULT_DIMENSION_COUNT);
+
+  const sectionClass = classNames(`${prefixCls}-section`, {
+    [`${prefixCls}-metric-card`]: isMetricCard,
+  });
+
+  return (
+    <div className={prefixCls}>
+      <div className={sectionClass}>
+        <div className={`${prefixCls}-title`}>推荐相关指标：</div>
+        <div className={`${prefixCls}-content`}>
+          {defaultMetrics.map((metric, index) => {
+            const itemNameClass = classNames(`${prefixCls}-content-item-name`, {
+              [`${prefixCls}-content-item-active`]: currentMetric?.id === metric.id,
+            });
+            return (
+              <div>
+                <span
+                  className={itemNameClass}
+                  onClick={() => {
+                    onSelectMetric(currentMetric?.id === metric.id ? defaultMetric : metric);
+                  }}
+                >
+                  {metric.name}
+                </span>
+                {index !== defaultMetrics.length - 1 && <span>、</span>}
+              </div>
+            );
+          })}
+        </div>
+        {currentMetric?.id !== defaultMetric?.id && (
+          <div
+            className={`${prefixCls}-cancel-select`}
+            onClick={() => {
+              onSelectMetric(defaultMetric);
+            }}
+          >
+            取消
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MetricOptions;
--- a/webapp/packages/chat-sdk/src/components/MetricOptions/style.less
+++ b/webapp/packages/chat-sdk/src/components/MetricOptions/style.less
@@ -0,0 +1,70 @@
+@import '../../styles/index.less';
+
+@metric-options-prefix-cls: ~'@{supersonic-chat-prefix}-metric-options';
+
+.@{metric-options-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+
+  &-section {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    column-gap: 6px;
+    margin-top: 8px;
+    margin-bottom: 4px;
+  }
+
+  &-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);
+  }
+  
+  &-content {
+    display: flex;
+    align-items: center;
+  }
+
+  &-content-item-name {
+    color: var(--chat-blue);
+    font-weight: 500;
+    border-bottom: 1px solid var(--chat-blue);
+    padding: 1px;
+    cursor: pointer;
+  }
+
+  &-content-item-active {
+    color: #fff;
+    border-bottom: none;
+    background-color: var(--chat-blue);
+    border-radius: 2px;
+  }
+
+  &-menu-item-active {
+    color: var(--chat-blue);
+  }
+
+  &-cancel-select {
+    margin-left: 12px;
+    color: var(--text-color-third);
+    cursor: pointer;
+    padding: 0 4px;
+    border: 1px solid var(--text-color-third);
+    border-radius: 4px;
+    font-size: 12px;
+
+    &:hover {
+      color: var(--chat-blue);
+      border-color: var(--chat-blue);
+    }
+  }
+}