first commit

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

@@ -0,0 +1,72 @@
+import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils';
+import { Table as AntTable } from 'antd';
+import { MsgDataType } from '../../../common/type';
+import { CLS_PREFIX } from '../../../common/constants';
+import ApplyAuth from '../ApplyAuth';
+
+type Props = {
+  data: MsgDataType;
+  onApplyAuth?: (domain: string) => void;
+};
+
+const Table: React.FC<Props> = ({ data, onApplyAuth }) => {
+  const { entityInfo, queryColumns, queryResults } = data;
+
+  const prefixCls = `${CLS_PREFIX}-table`;
+
+  const tableColumns: any[] = queryColumns.map(
+    ({ name, nameEn, showType, dataFormatType, dataFormat, authorized }) => {
+      return {
+        dataIndex: nameEn,
+        key: nameEn,
+        title: name,
+        render: (value: string | number) => {
+          if (!authorized) {
+            return (
+              <ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
+            );
+          }
+          if (dataFormatType === 'percent') {
+            return (
+              <div className={`${prefixCls}-formatted-value`}>
+                {`${formatByDecimalPlaces(
+                  dataFormat?.needmultiply100 ? +value * 100 : value,
+                  dataFormat?.decimalPlaces || 2
+                )}%`}
+              </div>
+            );
+          }
+          if (showType === 'NUMBER') {
+            return (
+              <div className={`${prefixCls}-formatted-value`}>
+                {getFormattedValue(value as number)}
+              </div>
+            );
+          }
+          if (nameEn.includes('photo')) {
+            return (
+              <div className={`${prefixCls}-photo`}>
+                <img width={40} height={40} src={value as string} alt="" />
+              </div>
+            );
+          }
+          return value;
+        },
+      };
+    }
+  );
+
+  return (
+    <div className={prefixCls}>
+      <AntTable
+        pagination={queryResults.length <= 10 ? false : undefined}
+        size={queryResults.length === 1 ? 'middle' : 'small'}
+        columns={tableColumns}
+        dataSource={queryResults}
+        style={{ width: '100%' }}
+      />
+    </div>
+  );
+};
+
+export default Table;

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

@@ -0,0 +1,72 @@
+@import '../../../styles/index.less';
+
+@table-prefix-cls: ~'@{supersonic-chat-prefix}-table';
+
+.@{table-prefix-cls} {
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  &-photo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  .ant-table-container table > thead > tr:first-child th:first-child {
+    border-top-left-radius: 12px !important;
+    border-bottom-left-radius: 12px !important;
+  }
+
+  .ant-table-container table > thead > tr:first-child th:last-child {
+    border-top-right-radius: 12px !important;
+    border-bottom-right-radius: 12px !important;
+  }
+
+  .ant-table-tbody > tr.ant-table-row:hover > td {
+    background-color: #fafafa !important;
+  }
+
+  .ant-table-cell {
+    text-align: center !important;
+  }
+
+  .ant-table-thead {
+    .ant-table-cell {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      color: #666;
+      font-size: 13px;
+      background: #f0f2f5;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .@{table-prefix-cls}-formatted-value {
+    font-weight: 500;
+    font-size: 16px;
+  }
+
+  .ant-table-thead .ant-table-cell {
+    padding-top: 8.5px;
+    padding-bottom: 8.5px;
+    color: #737b7b;
+    font-weight: 500;
+    font-size: 14px;
+    background-color: #edf2f2;
+  }
+
+  .ant-table-tbody {
+    .ant-table-cell {
+      padding: 15px 0;
+      color: #333;
+      font-size: 14px;
+    }
+  }
+}