[improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings. (#929)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI adjustment for metric details page.

* [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty.

* [improvement][semantic-fe] Added field type and metric type to the metric creation options.

* [improvement][semantic-fe] The organization structure selection feature has been added to the permission management.

* [improvement][semantic-fe] Improved user experience for the metric list.

* [improvement][semantic-fe] fix update the metric list.

* [improvement][headless-fe] Added view management functionality.

* [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system.

* [improvement][headless-fe] Added model editing side effect detection.

* [improvement][headless-fe] Fixed the logic error in view editing.

* [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings.

* [improvement][headless-fe] Added the ability to hide the Q&A settings entry point.

* [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation.

* [improvement][headless-fe] Added search functionality to the field list in model editing.

* [improvement][headless-fe] fix the field list in model editing

* [improvement][headless-fe] Restructured the data for the dimension value settings interface.

* [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts.

* [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function.

* [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process.

* [improvement][headless-fe] Replaced the term "view" with "dataset"

* [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target.

* [improvement][headless-fe] Enhanced dataset creation to support the tag mode.

* [improvement][headless-fe] Added tag value setting.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead.

* [improvement][headless-fe] Added search functionality to model management.

* [improvement][headless-fe] Removed field null validation during model editing.

* [improvement][headless-fe] Updated the batch operation button component.

* [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings.

* [improvement][headless-fe] Adjusted the length of the input field for model editing names.

* [improvement][headless-fe]  Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components.

* [improvement][headless-fe] Optimized the style of the metrics market and tags market.

webapp/packages/supersonic-fe/package.json

@@ -73,7 +73,7 @@
     "@umijs/route-utils": "^1.0.33",
     "ace-builds": "^1.4.12",
     "ahooks": "^3.7.7",
-    "antd": "^5.11.0",
+    "antd": "5.11.0",
     "classnames": "^2.2.6",
     "compression-webpack-plugin": "^11.0.0",
     "copy-to-clipboard": "^3.3.1",

webapp/packages/supersonic-fe/src/app.tsx

@@ -135,7 +135,7 @@ export const layout: RunTimeLayoutConfig = (params) => {
           color="#fff"
           style={{ display: 'inline-block', marginTop: 8 }}
         />
-        <div className="logo">超音数(SuperSonic)</div>
+        <div className="logo">SuperSonic</div>
       </Space>
     ),
     contentStyle: { ...(initialState?.contentStyle || {}) },

webapp/packages/supersonic-fe/src/pages/Login/index.tsx

@@ -93,7 +93,7 @@ const LoginPage: React.FC = () => {
                       color="#296DF3"
                       style={{ display: 'inline-block', marginTop: 8 }}
                     />
-                    <div>超音数(SuperSonic)</div>
+                    <div>SuperSonic</div>
                   </Space>
                 </h3>
                 <Item name="name" rules={[{ required: true }]} label="">

webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx

@@ -9,7 +9,6 @@ import { SENSITIVE_LEVEL_ENUM } from '../constant';
 import { getTagList, deleteTag, batchDeleteTag, getTagObjectList } from '../service';
 import TagFilter from './components/TagFilter';
 import TagInfoCreateForm from './components/TagInfoCreateForm';
-import { StatusEnum } from '../enum';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
@@ -338,6 +337,17 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
         <TagFilter
           tagObjectList={tagObjectList}
           initFilterValues={filterParams}
+          extraNode={
+            <BatchCtrlDropDownButton
+              key="ctrlBtnList"
+              downloadLoading={downloadLoading}
+              onDeleteConfirm={() => {
+                queryBatchDeleteTag(selectedRowKeys);
+              }}
+              hiddenList={['batchDownload', 'batchStart', 'batchStop']}
+              disabledList={hasAllPermission ? [] : ['batchStart', 'batchDelete']}
+            />
+          }
           onFilterInit={(values) => {
             setFilterParams({
               ...filterParams,
@@ -373,18 +383,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
             type: 'checkbox',
             ...rowSelection,
           }}
-          toolBarRender={() => [
-            <BatchCtrlDropDownButton
-              key="ctrlBtnList"
-              downloadLoading={downloadLoading}
-              onDeleteConfirm={() => {
-                queryBatchDeleteTag(selectedRowKeys);
-              }}
-              hiddenList={['batchDownload', 'batchStart', 'batchStop']}
-              disabledList={hasAllPermission ? [] : ['batchStart', 'batchDelete']}
-              // onMenuClick={onMenuClick}
-            />,
-          ]}
           loading={loading}
           onChange={(data: any) => {
             const { current, pageSize, total } = data;
@@ -396,7 +394,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
             setPagination(pagin);
             queryTagList({ ...pagin, ...filterParams });
           }}
-          options={{ reload: false, density: false, fullScreen: false }}
+          options={false}
         />
       </>
 

webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagFilter.tsx

@@ -12,6 +12,7 @@ const FormItem = Form.Item;
 
 type Props = {
   tagObjectList: ISemantic.ITagObjectItem[];
+  extraNode?: ReactNode;
   initFilterValues?: any;
   onFilterInit?: (values: any) => void;
   onFiltersChange: (_: any, values: any) => void;
@@ -19,6 +20,7 @@ type Props = {
 
 const TagFilter: React.FC<Props> = ({
   tagObjectList,
+  extraNode,
   initFilterValues = {},
   onFilterInit,
   onFiltersChange,
@@ -63,12 +65,6 @@ const TagFilter: React.FC<Props> = ({
     }
   }, [currentDomainId, tagObjectList]);
 
-  // useEffect(() => {
-  //   if (currentDomainId) {
-  //     onFilterInit?.();
-  //   }
-  // }, [currentDomainId])
-
   const handleValuesChange = (value: any, values: any) => {
     onFiltersChange(value, values);
   };
@@ -158,6 +154,8 @@ const TagFilter: React.FC<Props> = ({
           </Row>
         </div>
       </StandardFormRow>
+      <Row style={{ width: '100%' }}>
+        <Col flex="auto">
           <Space size={40}>
             <StandardFormRow key="domainId" title="主题域" block>
               <FormItem name="domainId">
@@ -196,6 +194,9 @@ const TagFilter: React.FC<Props> = ({
               );
             })}
           </Space>
+        </Col>
+        {extraNode && <Col flex="130px">{extraNode}</Col>}
+      </Row>
     </Form>
   );
 };

webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/style.less

@@ -1,30 +1,32 @@
 .TagFilterWrapper {
   margin: 20px;
   padding: 20px;
-    border-radius: 10px;
   padding-bottom: 5px;
   background: #fff;
+  border-radius: 10px;
 }
 
 .tagTable {
   margin: 20px;
+  :global {
+    .ant-pro-card-body {
+      padding: 0;
+    }
+  }
 }
 
-
-
 .searchBox {
+  width: 740px;
+  margin: 0 auto;
   // margin-bottom: 12px;
   background: #fff;
   border-radius: 10px;
-    width: 740px;
-    margin: 0 auto;
   .searchInput {
     width: 100%;
     border: 1px solid rgba(35, 104, 184, 0.6);
     border-radius: 10px;
   }
   :global {
-
     .ant-select-auto-complete {
       width: 100%;
     }
@@ -83,19 +85,17 @@
   }
 }
 
-
-
 .tagDetailWrapper {
   height: calc(100vh - 56px);
   overflow: scroll;
   .tagDetailTab {
     :global {
       .ant-tabs-nav {
-                background-color: rgb(255, 255, 255);
-                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
         margin: 10px 20px 0 20px;
         padding: 0 20px;
+        background-color: rgb(255, 255, 255);
         border-radius: 8px;
+        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
       }
       .ant-tabs-tab {
         padding: 12px 0;
@@ -103,67 +103,66 @@
         font-weight: 500;
       }
     }
-
   }
   .tagDetail {
-        display: flex;
-        padding: 0px;
-        width: 100%;
-        background-color: transparent;
     position: relative;
+    display: flex;
     flex-direction: row;
+    width: 100%;
+    padding: 0px;
+    background-color: transparent;
     .tabContainer {
-            background-color: rgb(240, 242, 245);
       width: calc(100vw - 450px);
+      background-color: rgb(240, 242, 245);
     }
     .metricInfoContent {
-            padding:25px;
+      padding: 25px;
       .title {
+        position: relative;
         margin-bottom: 12px;
-                font-size: 16px;
         color: #0e73ff;
         font-weight: bold;
-                position: relative;
+        font-size: 16px;
         &::before {
-                    display: block;
           position: absolute;
-                    content: "";
-                    left: -10px;
           top: 10px;
-                    height: 14px;
+          left: -10px;
+          display: block;
           width: 3px;
+          height: 14px;
           font-size: 0;
           background: #0e73ff;
-                    border-radius: 2px;
           border: 1px solid #0e73ff;
+          border-radius: 2px;
+          content: '';
         }
       }
     }
     .siderContainer {
-            background-color: rgb(255, 255, 255);
       width: 450px;
       min-height: calc(100vh - 78px);
       margin: 10px 20px 20px 0;
+      background-color: rgb(255, 255, 255);
       border-radius: 6px;
-            box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px, rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
+      box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px,
+        rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
     }
   }
 }
 
 .sectionBox {
+  position: relative;
   margin: 20px;
   padding: 10px;
-    box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
-    background-color: rgb(255, 255, 255);
-    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    border-radius: 6px;
-    background-image: none;
   overflow: hidden;
-    position: relative;
+  background-color: rgb(255, 255, 255);
+  background-image: none;
+  border-radius: 6px;
+  box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-
+.metricInfoSider {
-.metricInfoSider{
   padding: 24px;
   color: #344767;
   .gotoMetricListIcon {
@@ -175,8 +174,8 @@
   }
   .title {
     .name {
-            font-size: 18px;
       font-weight: 600;
+      font-size: 18px;
     }
     .bizName {
       margin: 5px 0 0 25px;
@@ -185,154 +184,154 @@
     }
   }
   .desc {
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 1.9;
-        margin-top: 8px;
     display: block;
+    margin-top: 8px;
     color: #7b809a;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.9;
   }
   .subTitle {
     margin: 0px;
+    color: rgb(123, 128, 154);
+    font-weight: 700;
     font-size: 14px;
     line-height: 1.25;
     letter-spacing: 0.03333em;
-        opacity: 1;
     text-transform: uppercase;
-        vertical-align: unset;
     text-decoration: none;
-        color: rgb(123, 128, 154);
+    vertical-align: unset;
-        font-weight: 700;
+    opacity: 1;
   }
-    .sectionContainer{
+  .sectionContainer {
-        // transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        border-radius: 6px;
-        // box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
-        background-image: none;
     margin-top: 20px;
     overflow: hidden;
+    // box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+    background-image: none;
+    // transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 6px;
     .section {
       padding: 16px;
-            line-height: 1.25;
-            opacity: 1;
-            background: transparent;
       color: rgb(52, 71, 103);
+      line-height: 1.25;
+      background: transparent;
       box-shadow: none;
+      opacity: 1;
       .sectionTitleBox {
         padding: 8px 0;
-                opacity: 1;
-                background: transparent;
         color: rgb(52, 71, 103);
+        background: transparent;
         box-shadow: none;
+        opacity: 1;
         .sectionTitle {
           margin: 0px;
+          color: rgb(52, 71, 103);
+          font-weight: 600;
           font-size: 16px;
           line-height: 1.625;
           letter-spacing: 0.0075em;
-                    opacity: 1;
           text-transform: capitalize;
-                    vertical-align: unset;
           text-decoration: none;
-                    color: rgb(52, 71, 103);
+          vertical-align: unset;
-                    font-weight: 600;
+          opacity: 1;
         }
       }
 
       .item {
         display: flex;
         padding-top: 8px;
-                padding-bottom: 8px;
         padding-right: 16px;
-                opacity: 1;
+        padding-bottom: 8px;
-                background: transparent;
         color: rgb(52, 71, 103);
+        background: transparent;
         box-shadow: none;
+        opacity: 1;
         .itemLable {
-                    margin: 0px;
-                    font-size: 14px;
-                    line-height: 1.5;
-                    letter-spacing: 0.02857em;
-                    opacity: 1;
-                    text-transform: capitalize;
-                    vertical-align: unset;
-                    text-decoration: none;
-                    color: #344767;
-                    margin-right: 10px;
           min-width: fit-content;
-                    font-weight: 700;
-                }
-                .itemValue{
           margin: 0px;
+          margin-right: 10px;
+          color: #344767;
+          font-weight: 700;
           font-size: 14px;
           line-height: 1.5;
           letter-spacing: 0.02857em;
-                    opacity: 1;
+          text-transform: capitalize;
-                    text-transform: none;
-                    vertical-align: unset;
           text-decoration: none;
+          vertical-align: unset;
+          opacity: 1;
+        }
+        .itemValue {
+          margin: 0px;
           color: #7b809a;
           font-weight: 400;
+          font-size: 14px;
+          line-height: 1.5;
+          letter-spacing: 0.02857em;
+          text-transform: none;
+          text-decoration: none;
+          vertical-align: unset;
+          opacity: 1;
         }
       }
     }
     .hr {
-            margin: 0px;
       flex-shrink: 0;
+      margin: 0px;
+      border-color: rgb(242, 244, 247);
       // border-width: 0px 0px thin;
       border-style: solid;
-            border-color: rgb(242, 244, 247);
     }
-        .ctrlBox{
+    .ctrlBox {
-            .ctrlList{
+      .ctrlList {
-                list-style: none;
+        position: relative;
         margin: 0px;
         padding: 8px 0px;
-                position: relative;
+        list-style: none;
         background-color: rgb(249, 250, 251);
         li {
-                    -webkit-tap-highlight-color: transparent;
-                    background-color: transparent;
-                    outline: 0px;
-                    border: 0px;
-                    margin: 4px;
-                    border-radius: 0px;
-                    cursor: pointer;
-                    user-select: none;
-                    vertical-align: middle;
-                    appearance: none;
-                    color: inherit;
-                    display: flex;
-                    -webkit-box-flex: 1;
-                    flex-grow: 1;
-                    -webkit-box-pack: start;
-                    justify-content: flex-start;
-                    -webkit-box-align: center;
-                    align-items: center;
           position: relative;
-                    text-decoration: none;
+          display: flex;
-                    min-width: 0px;
+          flex-grow: 1;
+          align-items: center;
+          justify-content: flex-start;
           box-sizing: border-box;
-                    text-align: left;
+          min-width: 0px;
+          margin: 4px;
           padding: 4px 16px;
+          color: inherit;
+          text-align: left;
+          text-decoration: none;
+          vertical-align: middle;
+          background-color: transparent;
+          border: 0px;
+          border-radius: 0px;
+          outline: 0px;
+          cursor: pointer;
           transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+          appearance: none;
+          user-select: none;
+          -webkit-tap-highlight-color: transparent;
+          -webkit-box-flex: 1;
+          -webkit-box-pack: start;
+          -webkit-box-align: center;
           &:hover {
+            color: #3182ce;
             text-decoration: none;
             background-color: rgba(16, 24, 40, 0.04);
-                        color: #3182ce;
           }
         }
         .ctrlItemIcon {
           flex-shrink: 0;
-                    font-size: 14px;
-                    margin-right: 5px;
           min-width: unset;
+          margin-right: 5px;
+          font-size: 14px;
         }
         .styles.ctrlItemLable {
+          display: block;
           margin: 0px;
-                    line-height: 1.6;
           font-weight: 400;
           font-size: 14px;
-                    display: block;
+          line-height: 1.6;
         }
       }
     }

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx

@@ -372,9 +372,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       }
       setSelectedRowKeys(selectedRowKeys);
     },
-    // getCheckboxProps: (record: ISemantic.IMetricItem) => ({
-    //   disabled: !record.hasAdminRes,
-    // }),
   };
 
   const onMenuClick = (key: string) => {
@@ -395,6 +392,20 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       <div className={styles.metricFilterWrapper}>
         <MetricFilter
           initFilterValues={filterParams}
+          extraNode={
+            <BatchCtrlDropDownButton
+              key="ctrlBtnList"
+              downloadLoading={downloadLoading}
+              onDeleteConfirm={() => {
+                queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
+              }}
+              disabledList={hasAllPermission ? [] : ['batchStart', 'batchStop', 'batchDelete']}
+              onMenuClick={onMenuClick}
+              onDownloadDateRangeChange={(searchDateRange, pickerType) => {
+                downloadMetricQuery(selectedRowKeys, searchDateRange, pickerType);
+              }}
+            />
+          }
           onFiltersChange={(_, values) => {
             if (_.showType !== undefined) {
               setLoading(true);
@@ -441,20 +452,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
               type: 'checkbox',
               ...rowSelection,
             }}
-            toolBarRender={() => [
-              <BatchCtrlDropDownButton
-                key="ctrlBtnList"
-                downloadLoading={downloadLoading}
-                onDeleteConfirm={() => {
-                  queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
-                }}
-                disabledList={hasAllPermission ? [] : ['batchStart', 'batchStop', 'batchDelete']}
-                onMenuClick={onMenuClick}
-                onDownloadDateRangeChange={(searchDateRange, pickerType) => {
-                  downloadMetricQuery(selectedRowKeys, searchDateRange, pickerType);
-                }}
-              />,
-            ]}
             loading={loading}
             onChange={(data: any) => {
               const { current, pageSize, total } = data;
@@ -466,7 +463,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
               setPagination(pagin);
               queryMetricList({ ...pagin, ...filterParams });
             }}
-            options={{ reload: false, density: false, fullScreen: false }}
+            options={false}
           />
         )}
       </>

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx

@@ -1,7 +1,7 @@
 import { Form, Input, Space, Row, Col, Switch } from 'antd';
 import StandardFormRow from '@/components/StandardFormRow';
 import TagSelect from '@/components/TagSelect';
-import React, { useEffect } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
 import { SearchOutlined } from '@ant-design/icons';
 import DomainTreeSelect from '../../components/DomainTreeSelect';
@@ -11,10 +11,11 @@ const FormItem = Form.Item;
 
 type Props = {
   initFilterValues?: any;
+  extraNode?: ReactNode;
   onFiltersChange: (_: any, values: any) => void;
 };
 
-const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange }) => {
+const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, extraNode, onFiltersChange }) => {
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -97,6 +98,8 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
           </Row>
         </div>
       </StandardFormRow>
+      <Row style={{ width: '100%' }}>
+        <Col flex="auto">
           <Space size={40}>
             {/* <StandardFormRow key="showType" title="切换为卡片" block>
           <FormItem name="showType" valuePropName="checked">
@@ -130,6 +133,9 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
               );
             })}
           </Space>
+        </Col>
+        {extraNode && <Col flex="130px">{extraNode}</Col>}
+      </Row>
     </Form>
   );
 };

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less

@@ -1,13 +1,18 @@
 .metricFilterWrapper {
   margin: 20px;
   padding: 20px;
-    border-radius: 10px;
   padding-bottom: 5px;
   background: #fff;
+  border-radius: 10px;
 }
 
 .metricTable {
   margin: 20px;
+  :global {
+    .ant-pro-card-body {
+      padding: 0;
+    }
+  }
 }
 
 .table {
@@ -16,38 +21,38 @@
 
 .metricBasicInfo {
   .label {
-        font-size: 14px;
     color: rgb(95, 116, 141);
+    font-size: 14px;
   }
   div {
     min-width: 300px;
-        font-size: 15px;
     margin-bottom: 10px;
     color: rgb(18, 31, 67);
+    font-size: 15px;
   }
 }
 
 .caliberTitle {
-    font-weight: 500;
-    font-size: 16px;
   margin-bottom: 20px;
   color: rgb(18, 31, 67);
+  font-weight: 500;
+  font-size: 16px;
 }
 
 .caliberSubTitle {
+  color: rgb(33, 43, 54);
   font-weight: 500;
   font-size: 14px;
-    color: rgb(33, 43, 54);
 }
 
-.defineDataTable{
+.defineDataTable {
   width: 600px;
-    background-color: rgb(255, 255, 255);
+  overflow: hidden;
   color: rgb(67, 71, 75);
-    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: rgb(255, 255, 255);
   border-radius: 6px;
   box-shadow: rgba(114, 117, 120, 0.14) 0px 9px 16px, rgba(179, 181, 183, 0.38) 0px 0px 2px;
-    overflow: hidden;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   :global {
     .ant-table-thead {
       font-size: 13px;
@@ -56,24 +61,22 @@
 }
 
 .caliberDesc {
-    font-size: 14px;
   color: #bdbdbd;
+  font-size: 14px;
 }
 
-
 .searchBox {
+  width: 740px;
+  margin: 0 auto;
   // margin-bottom: 12px;
   background: #fff;
   border-radius: 10px;
-    width: 740px;
-    margin: 0 auto;
   .searchInput {
     width: 100%;
     border: 1px solid rgba(35, 104, 184, 0.6);
     border-radius: 10px;
   }
   :global {
-
     .ant-select-auto-complete {
       width: 100%;
     }
@@ -132,7 +135,6 @@
   }
 }
 
-
 .overviewExtraContainer {
   display: flex;
   font-size: 14px;
@@ -141,43 +143,42 @@
     width: 100%;
     .extraStatistic {
       display: inline-flex;
-            color: rgba(42, 46, 54, 0.65);
       box-sizing: border-box;
       margin: 0;
       padding: 0;
+      color: rgba(42, 46, 54, 0.65);
       font-size: 14px;
       line-height: 1.5714285714285714;
       list-style: none;
       .extraTitle {
         // font-size: 12px;
         min-width: 50px;
-                margin-inline-end: 6px;
-                margin-block-end: 0;
         margin-bottom: 4px;
         color: rgba(42, 46, 54, 0.45);
+        margin-inline-end: 6px;
+        margin-block-end: 0;
       }
       .extraValue {
-                font-size: 12px;
-                color: rgba(42, 46, 54, 0.65);
         display: inline-block;
+        color: rgba(42, 46, 54, 0.65);
+        font-size: 12px;
         direction: ltr;
       }
     }
   }
 }
 
-
 .metricDetailWrapper {
   height: calc(100vh - 56px);
   overflow: scroll;
   .metricDetailTab {
     :global {
       .ant-tabs-nav {
-                background-color: rgb(255, 255, 255);
-                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
         margin: 10px 20px 0 20px;
         padding: 0 20px;
+        background-color: rgb(255, 255, 255);
         border-radius: 8px;
+        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
       }
       .ant-tabs-tab {
         padding: 12px 0;
@@ -185,67 +186,66 @@
         font-weight: 500;
       }
     }
-
   }
   .metricDetail {
-        display: flex;
-        padding: 0px;
-        width: 100%;
-        background-color: transparent;
     position: relative;
+    display: flex;
     flex-direction: row;
+    width: 100%;
+    padding: 0px;
+    background-color: transparent;
     .tabContainer {
-            background-color: rgb(240, 242, 245);
       width: calc(100vw - 450px);
+      background-color: rgb(240, 242, 245);
     }
     .metricInfoContent {
-            padding:25px;
+      padding: 25px;
       .title {
+        position: relative;
         margin-bottom: 12px;
-                font-size: 16px;
         color: #0e73ff;
         font-weight: bold;
-                position: relative;
+        font-size: 16px;
         &::before {
-                    display: block;
           position: absolute;
-                    content: "";
-                    left: -10px;
           top: 10px;
-                    height: 14px;
+          left: -10px;
+          display: block;
           width: 3px;
+          height: 14px;
           font-size: 0;
           background: #0e73ff;
-                    border-radius: 2px;
           border: 1px solid #0e73ff;
+          border-radius: 2px;
+          content: '';
         }
       }
     }
     .siderContainer {
-            background-color: rgb(255, 255, 255);
       width: 450px;
       min-height: calc(100vh - 78px);
       margin: 10px 20px 20px 0;
+      background-color: rgb(255, 255, 255);
       border-radius: 6px;
-            box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px, rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
+      box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px,
+        rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
     }
   }
 }
 
 .sectionBox {
+  position: relative;
   margin: 20px;
   padding: 10px;
-    box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
-    background-color: rgb(255, 255, 255);
-    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    border-radius: 6px;
-    background-image: none;
   overflow: hidden;
-    position: relative;
+  background-color: rgb(255, 255, 255);
+  background-image: none;
+  border-radius: 6px;
+  box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-
+.metricInfoSider {
-.metricInfoSider{
   padding: 24px;
   color: #344767;
   .gotoMetricListIcon {
@@ -257,8 +257,8 @@
   }
   .title {
     .name {
-            font-size: 18px;
       font-weight: 600;
+      font-size: 18px;
     }
     .bizName {
       margin: 5px 0 0 25px;
@@ -267,154 +267,154 @@
     }
   }
   .desc {
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 1.9;
-        margin-top: 8px;
     display: block;
+    margin-top: 8px;
     color: #7b809a;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.9;
   }
   .subTitle {
     margin: 0px;
+    color: rgb(123, 128, 154);
+    font-weight: 700;
     font-size: 14px;
     line-height: 1.25;
     letter-spacing: 0.03333em;
-        opacity: 1;
     text-transform: uppercase;
-        vertical-align: unset;
     text-decoration: none;
-        color: rgb(123, 128, 154);
+    vertical-align: unset;
-        font-weight: 700;
+    opacity: 1;
   }
-    .sectionContainer{
+  .sectionContainer {
-        // transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        border-radius: 6px;
-        // box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
-        background-image: none;
     margin-top: 20px;
     overflow: hidden;
+    // box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
+    background-image: none;
+    // transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 6px;
     .section {
       padding: 16px;
-            line-height: 1.25;
-            opacity: 1;
-            background: transparent;
       color: rgb(52, 71, 103);
+      line-height: 1.25;
+      background: transparent;
       box-shadow: none;
+      opacity: 1;
       .sectionTitleBox {
         padding: 8px 0;
-                opacity: 1;
-                background: transparent;
         color: rgb(52, 71, 103);
+        background: transparent;
         box-shadow: none;
+        opacity: 1;
         .sectionTitle {
           margin: 0px;
+          color: rgb(52, 71, 103);
+          font-weight: 600;
           font-size: 16px;
           line-height: 1.625;
           letter-spacing: 0.0075em;
-                    opacity: 1;
           text-transform: capitalize;
-                    vertical-align: unset;
           text-decoration: none;
-                    color: rgb(52, 71, 103);
+          vertical-align: unset;
-                    font-weight: 600;
+          opacity: 1;
         }
       }
 
       .item {
         display: flex;
         padding-top: 8px;
-                padding-bottom: 8px;
         padding-right: 16px;
-                opacity: 1;
+        padding-bottom: 8px;
-                background: transparent;
         color: rgb(52, 71, 103);
+        background: transparent;
         box-shadow: none;
+        opacity: 1;
         .itemLable {
-                    margin: 0px;
-                    font-size: 14px;
-                    line-height: 1.5;
-                    letter-spacing: 0.02857em;
-                    opacity: 1;
-                    text-transform: capitalize;
-                    vertical-align: unset;
-                    text-decoration: none;
-                    color: #344767;
-                    margin-right: 10px;
           min-width: fit-content;
-                    font-weight: 700;
-                }
-                .itemValue{
           margin: 0px;
+          margin-right: 10px;
+          color: #344767;
+          font-weight: 700;
           font-size: 14px;
           line-height: 1.5;
           letter-spacing: 0.02857em;
-                    opacity: 1;
+          text-transform: capitalize;
-                    text-transform: none;
-                    vertical-align: unset;
           text-decoration: none;
+          vertical-align: unset;
+          opacity: 1;
+        }
+        .itemValue {
+          margin: 0px;
           color: #7b809a;
           font-weight: 400;
+          font-size: 14px;
+          line-height: 1.5;
+          letter-spacing: 0.02857em;
+          text-transform: none;
+          text-decoration: none;
+          vertical-align: unset;
+          opacity: 1;
         }
       }
     }
     .hr {
-            margin: 0px;
       flex-shrink: 0;
+      margin: 0px;
+      border-color: rgb(242, 244, 247);
       // border-width: 0px 0px thin;
       border-style: solid;
-            border-color: rgb(242, 244, 247);
     }
-        .ctrlBox{
+    .ctrlBox {
-            .ctrlList{
+      .ctrlList {
-                list-style: none;
+        position: relative;
         margin: 0px;
         padding: 8px 0px;
-                position: relative;
+        list-style: none;
         background-color: rgb(249, 250, 251);
         li {
-                    -webkit-tap-highlight-color: transparent;
-                    background-color: transparent;
-                    outline: 0px;
-                    border: 0px;
-                    margin: 4px;
-                    border-radius: 0px;
-                    cursor: pointer;
-                    user-select: none;
-                    vertical-align: middle;
-                    appearance: none;
-                    color: inherit;
-                    display: flex;
-                    -webkit-box-flex: 1;
-                    flex-grow: 1;
-                    -webkit-box-pack: start;
-                    justify-content: flex-start;
-                    -webkit-box-align: center;
-                    align-items: center;
           position: relative;
-                    text-decoration: none;
+          display: flex;
-                    min-width: 0px;
+          flex-grow: 1;
+          align-items: center;
+          justify-content: flex-start;
           box-sizing: border-box;
-                    text-align: left;
+          min-width: 0px;
+          margin: 4px;
           padding: 4px 16px;
+          color: inherit;
+          text-align: left;
+          text-decoration: none;
+          vertical-align: middle;
+          background-color: transparent;
+          border: 0px;
+          border-radius: 0px;
+          outline: 0px;
+          cursor: pointer;
           transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+          appearance: none;
+          user-select: none;
+          -webkit-tap-highlight-color: transparent;
+          -webkit-box-flex: 1;
+          -webkit-box-pack: start;
+          -webkit-box-align: center;
           &:hover {
+            color: #3182ce;
             text-decoration: none;
             background-color: rgba(16, 24, 40, 0.04);
-                        color: #3182ce;
           }
         }
         .ctrlItemIcon {
           flex-shrink: 0;
-                    font-size: 14px;
-                    margin-right: 5px;
           min-width: unset;
+          margin-right: 5px;
+          font-size: 14px;
         }
         .styles.ctrlItemLable {
+          display: block;
           margin: 0px;
-                    line-height: 1.6;
           font-weight: 400;
           font-size: 14px;
-                    display: block;
+          line-height: 1.6;
         }
       }
     }

webapp/packages/supersonic-fe/src/pages/document.ejs

@@ -8,7 +8,7 @@
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-  <title>超音数(SuperSonic)</title>
+  <title>SuperSonic</title>
   <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
 </head>