semantic-fe visual modeling pr (#21)

* [improvement][semantic-fe] Added an editing component to set filtering rules for Q&A. Now, the SQL editor will be accompanied by a list for display and control, to resolve ambiguity when using comma-separated values.
[improvement][semantic-fe] Improved validation logic and prompt copywriting for data source/dimension/metric editing and creation.
[improvement][semantic-fe] Improved user experience for visual modeling. Now, when using the legend to control the display/hide of data sources and their associated metric dimensions, the canvas will be re-layout based on the activated data source in the legend.

* [improvement][semantic-fe] Submitted a new version of the visual modeling tool.
[improvement][semantic-fe] Fixed an issue with the initialization of YoY and MoM metrics in Q&A settings.
[improvement][semantic-fe] Added a version field to the database settings.
[improvement][semantic-fe] 1. Added the ability to set YoY and MoM metrics in Q&A settings.2. Moved dimension value editing from the dimension editing window to the dimension list.

---------

Co-authored-by: tristanliu <tristanliu@tencent.com>

webapp/packages/supersonic-fe/src/components/StandardFormRow/index.less

@@ -0,0 +1,96 @@
+@import '~antd/es/style/themes/default.less';
+
+.standardFormRow {
+  display: flex;
+  width: 100%;
+  margin-bottom: 12px;
+  // padding-bottom: 16px;
+  // border-bottom: 1px dashed @border-color-split;
+  :global {
+    .ant-form-item,
+    .ant-legacy-form-item {
+      margin-right: 24px;
+    }
+    .ant-form-item-label,
+    .ant-legacy-form-item-label {
+      label {
+        margin-right: 0;
+        color: @text-color;
+      }
+    }
+    .ant-form-item-label,
+    .ant-legacy-form-item-label,
+    .ant-form-item-control,
+    .ant-legacy-form-item-control {
+      padding: 0;
+      line-height: 32px;
+    }
+  }
+  .label {
+    flex: 0 0 auto;
+    margin-right: 24px;
+    color: @heading-color;
+    font-size: @font-size-base;
+    text-align: left;
+    & > span {
+      display: inline-block;
+      flex-shrink: 0;
+      width: 80px;
+      height: 32px;
+      // height: 20px;
+      color: #999;
+      font-weight: 500;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      line-height: 32px;
+      // line-height: 20px;
+      // &::after {
+      //   content: '：';
+      // }
+    }
+  }
+  .content {
+    flex: 1 1 0;
+    :global {
+      .ant-form-item,
+      .ant-legacy-form-item {
+        &:last-child {
+          display: block;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+.standardFormRowLast {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border: none;
+}
+
+.standardFormRowBlock {
+  :global {
+    .ant-form-item,
+    .ant-legacy-form-item,
+    div.ant-form-item-control-wrapper,
+    div.ant-legacy-form-item-control-wrapper {
+      display: block;
+    }
+  }
+}
+
+.standardFormRowGrid {
+  :global {
+    .ant-form-item,
+    .ant-legacy-form-item,
+    div.ant-form-item-control-wrapper,
+    div.ant-legacy-form-item-control-wrapper {
+      display: block;
+    }
+    .ant-form-item-label,
+    .ant-legacy-form-item-label {
+      float: left;
+    }
+  }
+}

webapp/packages/supersonic-fe/src/components/StandardFormRow/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+type StandardFormRowProps = {
+  title?: string;
+  last?: boolean;
+  block?: boolean;
+  grid?: boolean;
+  style?: React.CSSProperties;
+  titleClassName?: string;
+};
+
+const StandardFormRow: React.FC<StandardFormRowProps> = ({
+  title,
+  children,
+  last,
+  block,
+  grid,
+  titleClassName,
+  ...rest
+}) => {
+  const cls = classNames(styles.standardFormRow, {
+    [styles.standardFormRowBlock]: block,
+    [styles.standardFormRowLast]: last,
+    [styles.standardFormRowGrid]: grid,
+  });
+
+  const labelCls = classNames(styles.label, titleClassName);
+
+  return (
+    <div className={cls} {...rest}>
+      {title && (
+        <div className={labelCls}>
+          <span>{title}</span>
+        </div>
+      )}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};
+
+export default StandardFormRow;