[improvement][headless-fe] Migrating scaffold version to @umi/max (#1030)

* [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.

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling.

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling.

* [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly.

* [improvement][headless-fe] Default value setting for hiding dimensions.

* [improvement][headless-fe] Updated the file imports in the project.

* [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain.

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

* [improvement][headless-fe] When creating a model, the current metric operator now allows for clearance.

* [improvement][headless-fe] Term management interface transformation

* [improvement][headless-fe] Migrating scaffold version to @umi/max

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelCreateForm.tsx

@@ -12,23 +12,19 @@ import {
   getUnAvailableItem,
   getTagObjectList,
 } from '../../service';
-import type { Dispatch } from 'umi';
-import type { StateType } from '../../model';
-import { connect } from 'umi';
+import { useModel } from '@umijs/max';
 import { ISemantic, IDataSource } from '../../data';
 import { isArrayOfValues } from '@/utils/utils';
 import EffectDimensionAndMetricTipsModal from './EffectDimensionAndMetricTipsModal';
 
 export type CreateFormProps = {
-  domainManger: StateType;
-  dispatch: Dispatch;
   createModalVisible: boolean;
   sql?: string;
   sqlParams?: IDataSource.ISqlParamsItem[];
   databaseId?: number;
   modelItem: ISemantic.IModelItem;
   onCancel?: () => void;
-  onSubmit?: (dataSourceInfo: any) => void;
+  onSubmit?: (modelItem: ISemantic.IModelItem) => void;
   scriptColumns?: any[] | undefined;
   basicInfoFormMode?: 'normal' | 'fast';
   onDataBaseTableChange?: (tableName: string) => void;
@@ -44,7 +40,6 @@ const initFormVal = {
 };
 
 const ModelCreateForm: React.FC<CreateFormProps> = ({
-  domainManger,
   onCancel,
   createModalVisible,
   scriptColumns,
@@ -63,7 +58,7 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
   const [fields, setFields] = useState<any[]>([]);
   const [currentStep, setCurrentStep] = useState(0);
   const [saveLoading, setSaveLoading] = useState(false);
-  // const [hasEmptyNameField, setHasEmptyNameField] = useState<boolean>(false);
+
   const [formDatabaseId, setFormDatabaseId] = useState<number>();
   const [queryParamsState, setQueryParamsState] = useState({});
   const [effectTipsModalOpenState, setEffectTipsModalOpenState] = useState<boolean>(false);
@@ -74,21 +69,18 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
   const [tagObjectIdState, setTagObjectIdState] = useState(modelItem?.tagObjectId);
   const formValRef = useRef(initFormVal as any);
   const [form] = Form.useForm();
-  const { databaseConfigList, selectModelId: modelId, selectDomainId, domainData } = domainManger;
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const { selectDomainId, selectDomain: domainData } = domainModel;
+  const { selectModelId: modelId } = modelModel;
+
+  const databaseModel = useModel('SemanticModel.databaseData');
+  const { databaseConfigList } = databaseModel;
+
   const updateFormVal = (val: any) => {
     formValRef.current = val;
   };
   const [sqlFilter, setSqlFilter] = useState<string>('');
-  // useEffect(() => {
-  //   const hasEmpty = fields.some((item) => {
-  //     const { name, isCreateDimension, isCreateMetric } = item;
-  //     if ((isCreateMetric || isCreateDimension) && !name) {
-  //       return true;
-  //     }
-  //     return false;
-  //   });
-  //   setHasEmptyNameField(hasEmpty);
-  // }, [fields]);
 
   const [fieldColumns, setFieldColumns] = useState<IDataSource.IExecuteSqlColumn[]>(
     scriptColumns || [],
@@ -155,8 +147,8 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
 
   const saveModel = async (queryParams: any) => {
     setSaveLoading(true);
-    const queryDatasource = isEdit ? updateModel : createModel;
-    const { code, msg, data } = await queryDatasource(queryParams);
+    const querySaveModel = isEdit ? updateModel : createModel;
+    const { code, msg, data } = await querySaveModel(queryParams);
     setSaveLoading(false);
     if (code === 200) {
       message.success('保存模型成功！');
@@ -218,7 +210,6 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
               isCreateDimension,
               name,
               type,
-              // entityNames,
               tagObjectId: modelItem?.tagObjectId,
             });
             break;
@@ -502,7 +493,6 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
             onClick={() => {
               handleNext(true);
             }}
-            // disabled={hasEmptyNameField}
           >
             保 存
           </Button>
@@ -590,6 +580,4 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ModelCreateForm);
+export default ModelCreateForm;

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Button, Table, message, Tooltip, Space, Dropdown } from 'antd';
 import SplitPane from 'react-split-pane';
 import Pane from 'react-split-pane/lib/Pane';
-import { connect } from 'umi';
+import { useModel } from '@umijs/max';
 import sqlFormatter from 'sql-formatter';
 import {
   FullscreenOutlined,
@@ -19,7 +19,6 @@ import FullScreen from '@/components/FullScreen';
 import SqlEditor from '@/components/SqlEditor';
 import type { TaskResultItem, TaskResultColumn } from '../data';
 import { excuteSql } from '@/pages/SemanticModel/service';
-import type { Dispatch } from 'umi';
 import type { StateType } from '../../model';
 import SqlParams from './SqlParams';
 import styles from '../style.less';
@@ -37,8 +36,6 @@ export type DataSourceSubmitData = {
 };
 
 type IProps = {
-  domainManger: StateType;
-  dispatch: Dispatch;
   dataSourceItem: IDataSource.IDataSourceItem;
   onUpdateSql?: (sql: string) => void;
   sql?: string;
@@ -61,13 +58,14 @@ type DatabaseItem = {
 };
 
 const SqlDetail: React.FC<IProps> = ({
-  domainManger,
   dataSourceItem,
   onSubmitSuccess,
   sql = '',
   onUpdateSql,
 }) => {
-  const { databaseConfigList } = domainManger;
+  const databaseModel = useModel('SemanticModel.databaseData');
+  const { databaseConfigList } = databaseModel;
+
   const [resultTable, setResultTable] = useState<ResultTableItem[]>([]);
   const [resultTableLoading, setResultTableLoading] = useState(false);
   const [resultCols, setResultCols] = useState<ResultColItem[]>([]);
@@ -385,7 +383,6 @@ const SqlDetail: React.FC<IProps> = ({
   }, [resultTable, isSqlResFullScreen]);
 
   useEffect(() => {
-    // queryDatabaseConfig();
     const windowHeight = window.innerHeight;
     let size: ScreenSize = 'small';
     if (windowHeight > 1100) {
@@ -479,10 +476,7 @@ const SqlDetail: React.FC<IProps> = ({
                 onSelect={onSelect}
               />
             </div>
-            <div
-              className={variableCollapsed ? styles.hideSqlParams : styles.sqlParams}
-              // style={{ height: sqlEditorHeight }}
-            >
+            <div className={variableCollapsed ? styles.hideSqlParams : styles.sqlParams}>
               <SqlParams
                 value={sqlParams}
                 onChange={(params) => {
@@ -538,6 +532,4 @@ const SqlDetail: React.FC<IProps> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(SqlDetail);
+export default SqlDetail;

webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx

@@ -1,13 +1,7 @@
 import React from 'react';
-import { connect } from 'umi';
-import type { StateType } from './model';
 import OverviewContainer from './OverviewContainer';
-import type { Dispatch } from 'umi';
 
-type Props = {
-  domainManger: StateType;
-  dispatch: Dispatch;
-};
+type Props = {};
 const DomainManager: React.FC<Props> = () => {
   return (
     <>
@@ -16,6 +10,4 @@ const DomainManager: React.FC<Props> = () => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DomainManager);
+export default DomainManager;

webapp/packages/supersonic-fe/src/pages/SemanticModel/HeadlessFlows/index.tsx

@@ -30,17 +30,14 @@ import './index.less';
 /** Mock所有与服务端交互的接口 */
 import { MockApi } from './service';
 
-type Props = {
-  domainManger: StateType;
-  dispatch: Dispatch;
-};
+type Props = {};
 
 /** 鼠标的引用 */
 let cursorTipRef: HTMLDivElement;
 /** 鼠标在画布的位置 */
 let cursorLocation: any;
 
-const DomainManger: React.FC<Props> = (demoProps: Props) => {
+const HeadLessFlows: React.FC<Props> = (demoProps: Props) => {
   /** XFlow应用实例 */
   const app = useXFlowApp();
 
@@ -309,6 +306,4 @@ const DomainManger: React.FC<Props> = (demoProps: Props) => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DomainManger);
+export default HeadLessFlows;

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

@@ -1,8 +1,7 @@
 import { message, Tabs, Button, Space } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { getTagData } from '../service';
-import { connect, useParams, history } from 'umi';
-import type { StateType } from '../model';
+import { useParams, history } from 'umi';
 import styles from './style.less';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import TagTrendSection from './components/TagTrendSection';
@@ -16,7 +15,7 @@ type Props = Record<string, any>;
 const TagDetail: React.FC<Props> = () => {
   const params: any = useParams();
   const tagId = params.tagId;
-  const [tagData, setTagData] = useState<ISemantic.IMetricItem>();
+  const [tagData, setTagData] = useState<ISemantic.ITagItem>();
   const [dimensionMap, setDimensionMap] = useState<Record<string, ISemantic.IDimensionItem>>({});
 
   const [metricMap, setMetricMap] = useState<Record<string, ISemantic.IMetricItem>>({});
@@ -146,6 +145,4 @@ const TagDetail: React.FC<Props> = () => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(TagDetail);
+export default TagDetail;

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

@@ -2,9 +2,7 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Space, Popconfirm } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
-import { connect, useModel } from 'umi';
-import type { StateType } from '../model';
+import { useModel } from 'umi';
 import { SENSITIVE_LEVEL_ENUM } from '../constant';
 import { getTagList, deleteTag, batchDeleteTag, getTagObjectList } from '../service';
 import TagFilter from './components/TagFilter';
@@ -15,10 +13,7 @@ import { ISemantic } from '../data';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
 import { ColumnsConfig } from '../components/TableColumnRender';
 
-type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
-};
+type Props = {};
 
 type QueryMetricListParams = {
   id?: string;
@@ -29,11 +24,9 @@ type QueryMetricListParams = {
   [key: string]: any;
 };
 
-const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
+const ClassMetricTable: React.FC<Props> = ({}) => {
   const { initialState = {} } = useModel('@@initialState');
-
   const { currentUser = {} } = initialState as any;
-  const { selectDomainId, selectModelId: modelId } = domainManger;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const defaultPagination = {
     current: 1,
@@ -400,8 +393,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
 
       {createModalVisible && (
         <TagInfoCreateForm
-          domainId={selectDomainId}
-          modelId={Number(modelId)}
           createModalVisible={createModalVisible}
           tagItem={tagItem}
           onSubmit={() => {
@@ -416,6 +407,4 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ClassMetricTable);
+export default ClassMetricTable;

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

@@ -2,10 +2,8 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Button, Space, Popconfirm, Input, Select } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
 import { StatusEnum } from '../../enum';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
+import { useModel } from '@umijs/max';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../../constant';
 import { getTagList, deleteTag, batchUpdateTagStatus } from '../../service';
 import TagInfoCreateForm from './TagInfoCreateForm';
@@ -17,13 +15,14 @@ import { ISemantic } from '../../data';
 import { ColumnsConfig } from '../../components/TableColumnRender';
 import TagValueSettingModal from './TagValueSettingModal';
 
-type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
-};
+type Props = {};
+
+const ClassTagTable: React.FC<Props> = ({}) => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const { selectDomainId } = domainModel;
+  const { selectModelId: modelId } = modelModel;
 
-const ClassTagTable: React.FC<Props> = ({ domainManger, dispatch }) => {
-  const { selectModelId: modelId, selectDomainId } = domainManger;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -369,6 +368,4 @@ const ClassTagTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ClassTagTable);
+export default ClassTagTable;

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

@@ -15,8 +15,7 @@ import { ISemantic } from '../../data';
 
 export type CreateFormProps = {
   datasourceId?: number;
-  domainId: number;
-  modelId: number;
+  modelId?: number;
   createModalVisible: boolean;
   tagItem?: ISemantic.ITagItem;
   onCancel?: () => void;
@@ -78,8 +77,8 @@ const TagInfoCreateForm: React.FC<CreateFormProps> = ({
   const forward = () => setCurrentStep(currentStep + 1);
   const backward = () => setCurrentStep(currentStep - 1);
 
-  const queryModelDetail = async () => {
-    const { code, data } = await getModelDetail({ modelId: modelId || tagItem?.modelId });
+  const queryModelDetail = async (modelId) => {
+    const { code, data } = await getModelDetail({ modelId });
     if (code === 200) {
       if (Array.isArray(data?.modelDetail?.fields)) {
         if (Array.isArray(tagItem?.tagDefineParams?.dependencies)) {
@@ -112,10 +111,14 @@ const TagInfoCreateForm: React.FC<CreateFormProps> = ({
   };
 
   useEffect(() => {
-    queryModelDetail();
-    queryDimensionList(modelId);
-    queryMetricList(modelId);
-  }, [modelId]);
+    const id = modelId || tagItem?.modelId;
+    if (!id) {
+      return;
+    }
+    queryModelDetail(id);
+    queryDimensionList(id);
+    queryMetricList(id);
+  }, [modelId, tagItem]);
 
   const handleNext = async () => {
     const fieldsValue = await form.validateFields();
@@ -226,7 +229,7 @@ const TagInfoCreateForm: React.FC<CreateFormProps> = ({
       if (isArrayOfValues(tagItem?.tagDefineParams?.dependencies)) {
         const fieldList = list.map((item: ISemantic.IDimensionItem) => {
           const { id } = item;
-          if (tagItem.tagDefineParams.dependencies.includes(id)) {
+          if (tagItem?.tagDefineParams.dependencies.includes(id)) {
             return {
               ...item,
               orderNumber: 9999,
@@ -262,7 +265,7 @@ const TagInfoCreateForm: React.FC<CreateFormProps> = ({
       if (isArrayOfValues(tagItem?.tagDefineParams?.dependencies)) {
         const fieldList = list.map((item: ISemantic.IMetricItem) => {
           const { id } = item;
-          if (tagItem.tagDefineParams.dependencies.includes(id)) {
+          if (tagItem?.tagDefineParams.dependencies.includes(id)) {
             return {
               ...item,
               orderNumber: 9999,

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

@@ -1,6 +1,5 @@
-import { Tag, Space, Tooltip, Typography } from 'antd';
+import { Tag, Space, Tooltip } from 'antd';
 import React, { ReactNode } from 'react';
-import { connect } from 'umi';
 import type { StateType } from '../../model';
 import dayjs from 'dayjs';
 import {
@@ -23,7 +22,6 @@ import IndicatorStar from '../../components/IndicatorStar';
 
 type Props = {
   tagData: ISemantic.ITagItem;
-  domainManger: StateType;
   onNodeChange: (params?: { eventName?: string }) => void;
   onEditBtnClick?: (tagData: any) => void;
   onDimensionRelationBtnClick?: () => void;
@@ -251,6 +249,4 @@ const TagInfoSider: React.FC<Props> = ({ tagData, dimensionMap, metricMap }) =>
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(TagInfoSider);
+export default TagInfoSider;

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

@@ -1,30 +1,24 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import { message, Button, Space, Popconfirm, Input, Select } from 'antd';
+import { message, Button, Space, Popconfirm } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
 import { StatusEnum } from '../../enum';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
-import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../../constant';
+import { useModel } from '@umijs/max';
 import { getTagObjectList, deleteTagObject, batchUpdateTagStatus } from '../../service';
 
 import TagObjectCreateForm from './TagObjectCreateForm';
-// import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
-import TableHeaderFilter from '../../components/TableHeaderFilter';
-import moment from 'moment';
 import styles from '../style.less';
 import { ISemantic } from '../../data';
 import { ColumnsConfig } from '../../components/TableColumnRender';
 import TagValueSettingModal from './TagValueSettingModal';
 
-type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
-};
+type Props = {};
 
-const TagObjectTable: React.FC<Props> = ({ domainManger, dispatch }) => {
-  const { selectModelId: modelId, selectDomainId } = domainManger;
+const TagObjectTable: React.FC<Props> = ({}) => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const { selectDomainId } = domainModel;
+  const { selectModelId: modelId } = modelModel;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -273,6 +267,4 @@ const TagObjectTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(TagObjectTable);
+export default TagObjectTable;

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

@@ -1,28 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Button, Modal, Space } from 'antd';
 import { KnowledgeConfigTypeEnum } from '../../enum';
 import { ISemantic } from '../../data';
 import DimensionValueSettingForm from '../../components/Entity/DimensionValueSettingForm';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
 
 export type CreateFormProps = {
   onCancel: () => void;
   tagItem: ISemantic.ITagItem;
   open: boolean;
   onSubmit: (values?: any) => void;
-  domainManger: StateType;
 };
 
 type TableDataSource = { techName: string; bizName: string; alias?: string[] };
 
-const TagValueSettingModal: React.FC<CreateFormProps> = ({
-  onCancel,
-  open,
-  tagItem,
-  domainManger,
-  onSubmit,
-}) => {
+const TagValueSettingModal: React.FC<CreateFormProps> = ({ onCancel, open, tagItem, onSubmit }) => {
   const [tableDataSource, setTableDataSource] = useState<TableDataSource[]>([]);
 
   // const handleSubmit = async () => {
@@ -81,6 +72,4 @@ const TagValueSettingModal: React.FC<CreateFormProps> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(TagValueSettingModal);
+export default TagValueSettingModal;

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

@@ -1,7 +1,12 @@
 import React from 'react';
+import { Outlet } from '@umijs/max';
 
-const market: React.FC = ({ children }) => {
-  return <>{children}</>;
+const market: React.FC = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
 };
 
 export default market;

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

@@ -112,6 +112,7 @@
     padding: 0px;
     background-color: transparent;
     .tabContainer {
+      height: 100%;
       width: calc(100vw - 450px);
       background-color: rgb(240, 242, 245);
     }

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

@@ -1,8 +1,7 @@
 import { message, Tabs, Button, Space } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
-import { connect, useParams, history } from 'umi';
-import type { StateType } from '../model';
+import { useParams, history } from '@umijs/max';
 import styles from './style.less';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
@@ -159,6 +158,4 @@ const MetricDetail: React.FC<Props> = () => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(MetricDetail);
+export default MetricDetail;

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

@@ -0,0 +1,127 @@
+import { message, Tabs, Button, Space } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
+import { connect, useParams, history } from 'umi';
+import type { StateType } from '../model';
+import styles from './style.less';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
+import { ISemantic } from '../data';
+import MetricBasicInfo from './components/MetricBasicInfo';
+import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
+import MetricInfoEditSider from './MetricInfoEditSider';
+import MetricInfoCreateForm from './components/MetricInfoCreateForm';
+import { MetricSettingKey, MetricSettingWording } from './constants';
+
+type Props = Record<string, any>;
+
+const MetricDetail: React.FC<Props> = () => {
+  const params: any = useParams();
+  const metricId = params.metricId;
+  const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
+  const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
+  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
+  const [drillDownDimension, setDrillDownDimension] = useState<ISemantic.IDrillDownDimensionItem[]>(
+    [],
+  );
+  const [relationDimensionOptions, setRelationDimensionOptions] = useState<
+    { value: string; label: string; modelId: number }[]
+  >([]);
+
+  const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
+
+  useEffect(() => {
+    if (!metricId) {
+      return;
+    }
+    queryMetricData(metricId);
+    queryDrillDownDimension(metricId);
+  }, [metricId]);
+
+  const queryMetricData = async (metricId: string) => {
+    const { code, data, msg } = await getMetricData(metricId);
+    if (code === 200) {
+      setMetircData({ ...data });
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryDrillDownDimension = async (metricId: number) => {
+    const { code, data, msg } = await getDrillDownDimension(metricId);
+    if (code === 200 && Array.isArray(data)) {
+      setDrillDownDimension(data);
+      const ids = data.map((item) => item.dimensionId);
+      queryDimensionList(ids);
+      return data;
+    } else {
+      setDimensionList([]);
+      setRelationDimensionOptions([]);
+    }
+    if (code !== 200) {
+      message.error(msg);
+    }
+    return [];
+  };
+
+  const queryDimensionList = async (ids: number[]) => {
+    if (!(Array.isArray(ids) && ids.length > 0)) {
+      setRelationDimensionOptions([]);
+      return;
+    }
+    const { code, data, msg } = await getDimensionList({ ids });
+    if (code === 200 && Array.isArray(data?.list)) {
+      setDimensionList(data.list);
+      setRelationDimensionOptions(
+        data.list.map((item: ISemantic.IMetricItem) => {
+          return { label: item.name, value: item.bizName, modelId: item.modelId };
+        }),
+      );
+      return data.list;
+    }
+    message.error(msg);
+    return [];
+  };
+
+  return (
+    <>
+      <div className={styles.metricEditWrapper}>
+        <div className={styles.metricDetail}>
+          <div className={styles.siderContainer}>
+            <MetricInfoEditSider
+              onSettingKeyChange={(key: string) => {
+                setSettingKey(key);
+              }}
+              metircData={metircData}
+            />
+          </div>
+          <div className={styles.tabContainer}>
+            {/* {metircData && ( */}
+            <MetricInfoCreateForm
+              settingKey={settingKey}
+              // domainId={metircData?.domainId}
+              // modelId={metircData?.modelId}
+              metricItem={metircData}
+            />
+            {/* )} */}
+          </div>
+        </div>
+        <DimensionAndMetricRelationModal
+          metricItem={metircData}
+          relationsInitialValue={drillDownDimension}
+          open={metricRelationModalOpenState}
+          onCancel={() => {
+            setMetricRelationModalOpenState(false);
+          }}
+          onSubmit={(relations) => {
+            queryMetricData(metricId);
+            queryDrillDownDimension(metricId);
+            setMetricRelationModalOpenState(false);
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default MetricDetail;

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

@@ -1,11 +1,9 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import { message, Space, Popconfirm, Tag, Spin, Tooltip } from 'antd';
+import { message, Space, Popconfirm, Spin } from 'antd';
 import MetricAddClass from './components/MetricAddClass';
 import React, { useRef, useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
-import { connect, history, useModel } from 'umi';
-import type { StateType } from '../model';
+import {  history, useModel } from '@umijs/max';
 import { SENSITIVE_LEVEL_ENUM } from '../constant';
 import {
   queryMetric,
@@ -18,8 +16,7 @@ import {
 import MetricFilter from './components/MetricFilter';
 import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
 import MetricCardList from './components/MetricCardList';
-import NodeInfoDrawer from '../SemanticGraph/components/NodeInfoDrawer';
-import { SemanticNodeType, StatusEnum } from '../enum';
+import {  StatusEnum } from '../enum';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
@@ -27,8 +24,7 @@ import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
 import { ColumnsConfig } from '../components/TableColumnRender';
 
 type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
+
 };
 
 type QueryMetricListParams = {
@@ -40,11 +36,9 @@ type QueryMetricListParams = {
   [key: string]: any;
 };
 
-const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
+const ClassMetricTable: React.FC<Props> = ({   }) => {
   const { initialState = {} } = useModel('@@initialState');
-
   const { currentUser = {} } = initialState as any;
-  const { selectDomainId, selectModelId: modelId } = domainManger;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const defaultPagination = {
     current: 1,
@@ -59,7 +53,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   const [filterParams, setFilterParams] = useState<Record<string, any>>({
     showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
   });
-  const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
 
   const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
 
@@ -193,55 +186,16 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     {
       dataIndex: 'name',
       title: '指标',
-      // width: '20%',
       width: 280,
       fixed: 'left',
       render: columnsConfig.indicatorInfo.render,
     },
-    // {
-    //   dataIndex: 'modelName',
-    //   title: '所属模型',
-    //   render: (_, record: any) => {
-    //     if (record.hasAdminRes) {
-    //       return (
-    //         <a
-    //           target="blank"
-    //           href={`/webapp/model/${record.domainId}/${record.modelId}/metric`}
-    //           // onClick={() => {
-    //           //   history.push(`/model/${record.domainId}/${record.modelId}/metric`);
-    //           // }}
-    //         >
-    //           {record.modelName}
-    //         </a>
-    //       );
-    //     }
-    //     return <> {record.modelName}</>;
-    //   },
-    // },
     {
       dataIndex: 'sensitiveLevel',
       title: '敏感度',
-      // width: 150,
       valueEnum: SENSITIVE_LEVEL_ENUM,
       render: columnsConfig.sensitiveLevel.render,
     },
-    // {
-    //   dataIndex: 'isPublish',
-    //   title: '是否发布',
-    //   width: 100,
-    //   search: false,
-    //   render: (isPublish) => {
-    //     switch (isPublish) {
-    //       case 0:
-    //         return '否';
-    //       case 1:
-    //         return <span style={{ color: '#1677ff' }}>是</span>;
-    //       default:
-    //         return <Tag color="default">未知</Tag>;
-    //     }
-    //   },
-    // },
-
     {
       dataIndex: 'description',
       title: '描述',
@@ -259,7 +213,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     {
       dataIndex: 'createdBy',
       title: '创建人',
-      // width: 150,
       search: false,
     },
     {
@@ -477,45 +430,18 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
 
       {createModalVisible && (
         <MetricInfoCreateForm
-          domainId={Number(selectDomainId)}
           createModalVisible={createModalVisible}
-          modelId={modelId}
           metricItem={metricItem}
           onSubmit={() => {
             setCreateModalVisible(false);
             queryMetricList(filterParams);
-            dispatch({
-              type: 'domainManger/queryMetricList',
-              payload: {
-                domainId: selectDomainId,
-              },
-            });
           }}
           onCancel={() => {
             setCreateModalVisible(false);
           }}
         />
       )}
-      {infoDrawerVisible && (
-        <NodeInfoDrawer
-          nodeData={{ ...metricItem, nodeType: SemanticNodeType.METRIC }}
-          placement="right"
-          onClose={() => {
-            setInfoDrawerVisible(false);
-          }}
-          width="100%"
-          open={infoDrawerVisible}
-          mask={true}
-          getContainer={false}
-          onEditBtnClick={(nodeData: any) => {
-            handleMetricEdit(nodeData);
-          }}
-          maskClosable={true}
-          onNodeChange={({ eventName }: { eventName: string }) => {
-            setInfoDrawerVisible(false);
-          }}
-        />
-      )}
+
       {addClassVisible && (
         <MetricAddClass
           ids={selectedRowKeys as number[]}
@@ -526,18 +452,10 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           onSuccess={() => {
             setAddClassVisible(false);
             queryMetricList(filterParams);
-            dispatch({
-              type: 'domainManger/queryMetricList',
-              payload: {
-                domainId: selectDomainId,
-              },
-            });
           }}
         />
       )}
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ClassMetricTable);
+export default ClassMetricTable

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

@@ -0,0 +1,161 @@
+import { Tag, Space, Tooltip } from 'antd';
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import { MetricSettingKey, MetricSettingWording } from './constants';
+import {
+  ExportOutlined,
+  SolutionOutlined,
+  PartitionOutlined,
+  ProjectOutlined,
+  ConsoleSqlOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import styles from './style.less';
+import { ISemantic } from '../data';
+import IndicatorStar from '../components/IndicatorStar';
+
+type Props = {
+  metircData: ISemantic.IMetricItem;
+  onSettingKeyChange?: (key: MetricSettingKey) => void;
+};
+
+const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }) => {
+  const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
+
+  const settingList = [
+    {
+      icon: <ProjectOutlined />,
+      key: MetricSettingKey.BASIC,
+      text: MetricSettingWording[MetricSettingKey.BASIC],
+    },
+    {
+      icon: <ConsoleSqlOutlined />,
+      key: MetricSettingKey.SQL_CONFIG,
+      text: MetricSettingWording[MetricSettingKey.SQL_CONFIG],
+    },
+    // {
+    //   icon: <DashboardOutlined />,
+    //   key: MetricSettingKey.DIMENSION_CONFIG,
+    //   text: MetricSettingWording[MetricSettingKey.DIMENSION_CONFIG],
+    // },
+  ];
+
+  return (
+    <div className={styles.metricInfoSider}>
+      <div className={styles.sectionContainer}>
+        {metircData?.id ? (
+          <div className={styles.title}>
+            <div className={styles.name}>
+              <Space>
+                <IndicatorStar indicatorId={metircData?.id} initState={metircData?.isCollect} />
+                {metircData?.name}
+                {metircData?.hasAdminRes && (
+                  <span
+                    className={styles.gotoMetricListIcon}
+                    onClick={() => {
+                      window.open(`/webapp/model/${metircData.domainId}/${metircData.modelId}/`);
+                    }}
+                  >
+                    <Tooltip title="前往所属模型指标列表">
+                      <ExportOutlined />
+                    </Tooltip>
+                  </span>
+                )}
+              </Space>
+            </div>
+            {metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
+          </div>
+        ) : (
+          <div className={styles.createTitle}>
+            <Space>
+              <SettingOutlined />
+              新建指标
+            </Space>
+          </div>
+        )}
+
+        <hr className={styles.hr} />
+        <div className={styles.section} style={{ padding: '16px 0' }}>
+          <ul className={styles.settingList}>
+            {settingList.map((item) => {
+              return (
+                <li
+                  className={item.key === settingKey ? styles.active : ''}
+                  key={item.key}
+                  onClick={() => {
+                    onSettingKeyChange?.(item.key);
+                    setSettingKey(item.key);
+                  }}
+                >
+                  <div className={styles.icon}>{item.icon}</div>
+                  <div className={styles.content}>
+                    <span className={styles.text}> {item.text}</span>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        {/* <hr className={styles.hr} /> */}
+        {metircData?.id && (
+          <div className={styles.section} style={{ marginTop: 'auto' }}>
+            <div className={styles.sectionTitleBox}>
+              <span className={styles.sectionTitle}>
+                <Space>
+                  <SolutionOutlined />
+                  创建信息
+                </Space>
+              </span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>所属模型: </span>
+              <span className={styles.itemValue}>
+                <Space>
+                  <Tag icon={<PartitionOutlined />} color="#3b5999">
+                    {metircData?.modelName || '模型名为空'}
+                  </Tag>
+                  {metircData?.hasAdminRes && (
+                    <span
+                      className={styles.gotoMetricListIcon}
+                      onClick={() => {
+                        window.open(`/webapp/model/${metircData.domainId}/0/overview`);
+                      }}
+                    >
+                      <Tooltip title="前往模型设置页">
+                        <ExportOutlined />
+                      </Tooltip>
+                    </span>
+                  )}
+                </Space>
+              </span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>创建人: </span>
+              <span className={styles.itemValue}>{metircData?.createdBy}</span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>创建时间: </span>
+              <span className={styles.itemValue}>
+                {metircData?.createdAt
+                  ? dayjs(metircData?.createdAt).format('YYYY-MM-DD HH:mm:ss')
+                  : ''}
+              </span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>更新时间: </span>
+              <span className={styles.itemValue}>
+                {metircData?.createdAt
+                  ? dayjs(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
+                  : ''}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* <hr className={styles.hr} /> */}
+      </div>
+    </div>
+  );
+};
+
+export default MetricInfoEditSider;

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

@@ -1,7 +1,5 @@
 import { Tag, Space, Tooltip, Typography } from 'antd';
 import React from 'react';
-import { connect } from 'umi';
-import type { StateType } from '../model';
 import { isArrayOfValues } from '@/utils/utils';
 import dayjs from 'dayjs';
 import {
@@ -22,7 +20,6 @@ const { Text } = Typography;
 
 type Props = {
   metircData: ISemantic.IMetricItem;
-  domainManger: StateType;
   relationDimensionOptions: { value: string; label: string; modelId: number }[];
   onNodeChange: (params?: { eventName?: string }) => void;
   onEditBtnClick?: (metircData: any) => void;
@@ -256,6 +253,4 @@ const MetricInfoSider: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(MetricInfoSider);
+export default MetricInfoSider;

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

@@ -3,10 +3,7 @@ import React, { useState } from 'react';
 import { Dropdown, Popconfirm, Typography } from 'antd';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { ISemantic } from '../../data';
-import { connect } from 'umi';
 import icon from '../../../../assets/icon/sourceState.svg';
-import type { Dispatch } from 'umi';
-import type { StateType } from '../../model';
 import { SemanticNodeType } from '../../enum';
 import styles from '../style.less';
 
@@ -17,8 +14,6 @@ type Props = {
   onMetricChange?: (metricItem: ISemantic.IMetricItem) => void;
   onEditBtnClick?: (metricItem: ISemantic.IMetricItem) => void;
   onDeleteBtnClick?: (metricItem: ISemantic.IMetricItem) => void;
-  domainManger: StateType;
-  dispatch: Dispatch;
 };
 
 const MetricCardList: React.FC<Props> = ({
@@ -27,7 +22,6 @@ const MetricCardList: React.FC<Props> = ({
   onMetricChange,
   onEditBtnClick,
   onDeleteBtnClick,
-  domainManger,
 }) => {
   const [currentNodeData, setCurrentNodeData] = useState<any>({});
 
@@ -129,6 +123,4 @@ const MetricCardList: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(MetricCardList);
+export default MetricCardList;

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

@@ -0,0 +1,944 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Form,
+  Button,
+  Input,
+  Select,
+  Radio,
+  Switch,
+  InputNumber,
+  message,
+  Result,
+  Row,
+  Col,
+  Space,
+  Divider,
+  Tooltip,
+  Tag,
+} from 'antd';
+
+import MetricMeasuresFormTable from '../../components/MetricMeasuresFormTable';
+import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE, TAG_DEFINE_TYPE } from '../../constant';
+import { formLayout } from '@/components/FormHelper/utils';
+import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import styles from '../../components/style.less';
+import {
+  getMetricsToCreateNewMetric,
+  getModelDetail,
+  getDrillDownDimension,
+  batchCreateTag,
+  batchDeleteTag,
+} from '../../service';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import MetricMetricFormTable from '../../components/MetricMetricFormTable';
+import MetricFieldFormTable from '../../components/MetricFieldFormTable';
+import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
+import TableTitleTooltips from '../../components/TableTitleTooltips';
+import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../../service';
+import { MetricSettingKey, MetricSettingWording } from '../constants';
+import { ISemantic } from '../../data';
+import { history } from '@umijs/max';
+
+export type CreateFormProps = {
+  datasourceId?: number;
+  metricItem: any;
+  settingKey: MetricSettingKey;
+  onCancel?: () => void;
+  onSubmit?: (values: any) => void;
+};
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+const { Option } = Select;
+
+const queryParamsTypeParamsKey = {
+  [METRIC_DEFINE_TYPE.MEASURE]: 'metricDefineByMeasureParams',
+  [METRIC_DEFINE_TYPE.METRIC]: 'metricDefineByMetricParams',
+  [METRIC_DEFINE_TYPE.FIELD]: 'metricDefineByFieldParams',
+};
+
+const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
+  datasourceId,
+  onCancel,
+  settingKey,
+  metricItem,
+  onSubmit,
+}) => {
+  const isEdit = !!metricItem?.id;
+  const domainId = metricItem?.domainId;
+  const modelId = metricItem?.modelId;
+  const [currentStep, setCurrentStep] = useState(0);
+  const formValRef = useRef({} as any);
+  const [form] = Form.useForm();
+  const updateFormVal = (val: any) => {
+    const formVal = {
+      ...formValRef.current,
+      ...val,
+    };
+    formValRef.current = formVal;
+  };
+
+  const [classMeasureList, setClassMeasureList] = useState<ISemantic.IMeasure[]>([]);
+
+  const [exprTypeParamsState, setExprTypeParamsState] = useState<{
+    [METRIC_DEFINE_TYPE.MEASURE]: ISemantic.IMeasureTypeParams;
+    [METRIC_DEFINE_TYPE.METRIC]: ISemantic.IMetricTypeParams;
+    [METRIC_DEFINE_TYPE.FIELD]: ISemantic.IFieldTypeParams;
+  }>({
+    [METRIC_DEFINE_TYPE.MEASURE]: {
+      measures: [],
+      expr: '',
+    },
+    [METRIC_DEFINE_TYPE.METRIC]: {
+      metrics: [],
+      expr: '',
+    },
+    [METRIC_DEFINE_TYPE.FIELD]: {
+      fields: [],
+      expr: '',
+    },
+  } as any);
+
+  // const [exprTypeParamsState, setExprTypeParamsState] = useState<ISemantic.IMeasure[]>([]);
+
+  const [defineType, setDefineType] = useState(METRIC_DEFINE_TYPE.MEASURE);
+
+  const [createNewMetricList, setCreateNewMetricList] = useState<ISemantic.IMetricItem[]>([]);
+  const [fieldList, setFieldList] = useState<ISemantic.IFieldTypeParamsItem[]>([]);
+  const [isPercentState, setIsPercentState] = useState<boolean>(false);
+  const [isDecimalState, setIsDecimalState] = useState<boolean>(false);
+  const [hasMeasuresState, setHasMeasuresState] = useState<boolean>(true);
+  const [llmLoading, setLlmLoading] = useState<boolean>(false);
+
+  const [tagOptions, setTagOptions] = useState<{ label: string; value: string }[]>([]);
+
+  const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
+
+  const [drillDownDimensions, setDrillDownDimensions] = useState<
+    ISemantic.IDrillDownDimensionItem[]
+  >([]);
+
+  const [drillDownDimensionsConfig, setDrillDownDimensionsConfig] = useState<
+    ISemantic.IDrillDownDimensionItem[]
+  >([]);
+
+  const forward = () => setCurrentStep(currentStep + 1);
+  const backward = () => setCurrentStep(currentStep - 1);
+
+  const queryModelDetail = async () => {
+    const { code, data } = await getModelDetail({ modelId: modelId || metricItem?.modelId });
+    if (code === 200) {
+      if (Array.isArray(data?.modelDetail?.fields)) {
+        if (Array.isArray(metricItem?.metricDefineByFieldParams?.fields)) {
+          const fieldList = data.modelDetail.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
+            const { fieldName } = item;
+            if (
+              metricItem?.metricDefineByFieldParams?.fields.find(
+                (measureParamsItem: ISemantic.IFieldTypeParamsItem) =>
+                  measureParamsItem.fieldName === fieldName,
+              )
+            ) {
+              return {
+                ...item,
+                orderNumber: 9999,
+              };
+            }
+            return {
+              ...item,
+              orderNumber: 0,
+            };
+          });
+
+          const sortList = fieldList.sort(
+            (
+              a: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
+              b: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
+            ) => b.orderNumber - a.orderNumber,
+          );
+          setFieldList(sortList);
+        } else {
+          setFieldList(data.modelDetail.fields);
+        }
+      }
+      if (Array.isArray(data?.modelDetail?.measures)) {
+        if (Array.isArray(metricItem?.metricDefineByMeasureParams?.measures)) {
+          const measureList = data.modelDetail.measures.map((item: ISemantic.IMeasure) => {
+            const { bizName } = item;
+            if (
+              metricItem?.metricDefineByMeasureParams?.measures.find(
+                (measureParamsItem: ISemantic.IMeasure) => measureParamsItem.bizName === bizName,
+              )
+            ) {
+              return {
+                ...item,
+                orderNumber: 9999,
+              };
+            }
+            return {
+              ...item,
+              orderNumber: 0,
+            };
+          });
+          const sortMeasureList = measureList.sort(
+            (
+              a: ISemantic.IMeasure & { orderNumber: number },
+              b: ISemantic.IMeasure & { orderNumber: number },
+            ) => b.orderNumber - a.orderNumber,
+          );
+          setClassMeasureList(sortMeasureList);
+        } else {
+          setClassMeasureList(data.modelDetail.measures);
+        }
+
+        if (datasourceId) {
+          const hasMeasures = data.some(
+            (item: ISemantic.IMeasure) => item.datasourceId === datasourceId,
+          );
+          setHasMeasuresState(hasMeasures);
+        }
+        return;
+      }
+    }
+    setClassMeasureList([]);
+  };
+
+  const queryDrillDownDimension = async (metricId: number) => {
+    const { code, data, msg } = await getDrillDownDimension(metricId);
+    if (code === 200 && Array.isArray(data)) {
+      setDrillDownDimensionsConfig(data);
+    }
+    if (code !== 200) {
+      message.error(msg);
+    }
+    return [];
+  };
+
+  useEffect(() => {
+    queryModelDetail();
+    queryMetricsToCreateNewMetric();
+    queryMetricTags();
+  }, []);
+
+  const handleSave = async () => {
+    const fieldsValue = await form.validateFields();
+    const submitForm = {
+      ...formValRef.current,
+      ...fieldsValue,
+      metricDefineType: defineType,
+      [queryParamsTypeParamsKey[defineType]]: exprTypeParamsState[defineType],
+    };
+    updateFormVal(submitForm);
+
+    await saveMetric(submitForm);
+  };
+
+  const initData = () => {
+    const {
+      id,
+      name,
+      bizName,
+      description,
+      sensitiveLevel,
+      typeParams,
+      isTag,
+      dataFormat,
+      dataFormatType,
+      alias,
+      classifications,
+      metricDefineType,
+      metricDefineByMeasureParams,
+      metricDefineByMetricParams,
+      metricDefineByFieldParams,
+    } = metricItem;
+    const isPercent = dataFormatType === 'percent';
+    const isDecimal = dataFormatType === 'decimal';
+    const initValue = {
+      id,
+      name,
+      bizName,
+      sensitiveLevel,
+      description,
+      classifications,
+      isTag,
+      // isPercent,
+      dataFormatType: dataFormatType || '',
+      alias: alias && alias.trim() ? alias.split(',') : [],
+      dataFormat: dataFormat || {
+        decimalPlaces: 2,
+        needMultiply100: false,
+      },
+    };
+    const editInitFormVal = {
+      ...formValRef.current,
+      ...initValue,
+    };
+    if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
+      const { measures, expr } = metricDefineByMeasureParams || {};
+      setExprTypeParamsState({
+        ...exprTypeParamsState,
+        [METRIC_DEFINE_TYPE.MEASURE]: {
+          measures: measures || [],
+          expr: expr || '',
+        },
+      });
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
+      const { metrics, expr } = metricDefineByMetricParams || {};
+      setExprTypeParamsState({
+        ...exprTypeParamsState,
+        [METRIC_DEFINE_TYPE.METRIC]: {
+          metrics: metrics || [],
+          expr: expr || '',
+        },
+      });
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
+      const { fields, expr } = metricDefineByFieldParams || {};
+      setExprTypeParamsState({
+        ...exprTypeParamsState,
+        [METRIC_DEFINE_TYPE.FIELD]: {
+          fields: fields || [],
+          expr: expr || '',
+        },
+      });
+    }
+    updateFormVal(editInitFormVal);
+    form.setFieldsValue(initValue);
+    setDefineType(metricDefineType);
+    setIsPercentState(isPercent);
+    setIsDecimalState(isDecimal);
+    queryDrillDownDimension(metricItem?.id);
+  };
+
+  useEffect(() => {
+    if (isEdit) {
+      initData();
+    }
+  }, [metricItem]);
+
+  const isEmptyConditions = (
+    metricDefineType: METRIC_DEFINE_TYPE,
+    metricDefineParams:
+      | ISemantic.IMeasureTypeParams
+      | ISemantic.IMetricTypeParams
+      | ISemantic.IFieldTypeParams,
+  ) => {
+    if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
+      const { measures } = (metricDefineParams as ISemantic.IMeasureTypeParams) || {};
+      if (!(Array.isArray(measures) && measures.length > 0)) {
+        message.error('请添加一个度量');
+        return true;
+      }
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
+      const { metrics } = (metricDefineParams as ISemantic.IMetricTypeParams) || {};
+      if (!(Array.isArray(metrics) && metrics.length > 0)) {
+        message.error('请添加一个指标');
+        return true;
+      }
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
+      const { fields } = (metricDefineParams as ISemantic.IFieldTypeParams) || {};
+      if (!(Array.isArray(fields) && fields.length > 0)) {
+        message.error('请添加一个字段');
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const saveMetric = async (fieldsValue: any) => {
+    const queryParams = {
+      modelId: isEdit ? metricItem.modelId : modelId,
+      relateDimension: {
+        ...(metricItem?.relateDimension || {}),
+        drillDownDimensions,
+      },
+      ...fieldsValue,
+    };
+    const { alias, dataFormatType } = queryParams;
+    queryParams.alias = Array.isArray(alias) ? alias.join(',') : '';
+    if (!queryParams[queryParamsTypeParamsKey[defineType]]?.expr) {
+      message.error('请输入度量表达式');
+      return;
+    }
+    if (!dataFormatType) {
+      delete queryParams.dataFormat;
+    }
+    if (isEmptyConditions(defineType, queryParams[queryParamsTypeParamsKey[defineType]])) {
+      return;
+    }
+
+    let saveMetricQuery = createMetric;
+    if (queryParams.id) {
+      saveMetricQuery = updateMetric;
+    }
+    const { code, msg, data } = await saveMetricQuery(queryParams);
+    if (code === 200) {
+      if (queryParams.isTag) {
+        queryBatchExportTag(data.id || metricItem?.id);
+      }
+
+      if (metricItem?.id && !queryParams.isTag) {
+        queryBatchDelete(metricItem);
+      }
+      message.success('编辑指标成功');
+      onSubmit?.(queryParams);
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryBatchDelete = async (metricItem: ISemantic.IMetricItem) => {
+    const { code, msg } = await batchDeleteTag([
+      {
+        itemIds: [metricItem.id],
+        tagDefineType: TAG_DEFINE_TYPE.METRIC,
+      },
+    ]);
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryBatchExportTag = async (id: number) => {
+    const { code, msg } = await batchCreateTag([
+      { itemId: id, tagDefineType: TAG_DEFINE_TYPE.METRIC },
+    ]);
+
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const generatorMetricAlias = async () => {
+    setLlmLoading(true);
+    const { code, data } = await mockMetricAlias({ ...metricItem });
+    const formAlias = form.getFieldValue('alias');
+    setLlmLoading(false);
+    if (code === 200) {
+      form.setFieldValue('alias', Array.from(new Set([...formAlias, ...data])));
+    } else {
+      message.error('大语言模型解析异常');
+    }
+  };
+
+  const queryMetricTags = async () => {
+    const { code, data } = await getMetricTags();
+    if (code === 200) {
+      setTagOptions(
+        Array.isArray(data)
+          ? data.map((tag: string) => {
+              return { label: tag, value: tag };
+            })
+          : [],
+      );
+    } else {
+      message.error('获取指标标签失败');
+    }
+  };
+  const queryMetricsToCreateNewMetric = async () => {
+    if (!metricItem?.id) {
+      return;
+    }
+    const { code, data } = await getMetricsToCreateNewMetric({
+      modelId: modelId || metricItem?.modelId,
+    });
+    if (code === 200) {
+      if (Array.isArray(metricItem?.metricDefineByMetricParams?.metrics)) {
+        const fieldList = data.map((item: ISemantic.IMetricTypeParamsItem) => {
+          const { bizName } = item;
+          if (
+            metricItem?.metricDefineByMetricParams?.metrics.find(
+              (measureParamsItem: ISemantic.IMetricTypeParamsItem) =>
+                measureParamsItem.bizName === bizName,
+            )
+          ) {
+            return {
+              ...item,
+              orderNumber: 9999,
+            };
+          }
+          return {
+            ...item,
+            orderNumber: 0,
+          };
+        });
+
+        const sortList = fieldList.sort(
+          (
+            a: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
+            b: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
+          ) => b.orderNumber - a.orderNumber,
+        );
+        setCreateNewMetricList(sortList);
+      } else {
+        setCreateNewMetricList(data);
+      }
+    } else {
+      message.error('获取指标标签失败');
+    }
+  };
+
+  const renderContent = () => {
+    if (settingKey === MetricSettingKey.SQL_CONFIG) {
+      return (
+        <div
+          style={{
+            marginLeft: '-24px',
+          }}
+        >
+          <div
+            style={{
+              padding: '0 0 0px 24px',
+            }}
+          >
+            <Space size={20}>
+              <Radio.Group
+                buttonStyle="solid"
+                value={defineType}
+                onChange={(e) => {
+                  setDefineType(e.target.value);
+                }}
+              >
+                <Radio.Button value={METRIC_DEFINE_TYPE.MEASURE}>按度量</Radio.Button>
+                <Radio.Button value={METRIC_DEFINE_TYPE.METRIC}>按指标</Radio.Button>
+                <Radio.Button value={METRIC_DEFINE_TYPE.FIELD}>按字段</Radio.Button>
+              </Radio.Group>
+              {defineType === METRIC_DEFINE_TYPE.METRIC && (
+                <p className={styles.desc}>
+                  基于
+                  <Tag color="#2499ef14" className={styles.markerTag}>
+                    已有
+                  </Tag>
+                  指标来衍生新的指标
+                </p>
+              )}
+            </Space>
+          </div>
+          {defineType === METRIC_DEFINE_TYPE.MEASURE && (
+            <>
+              <MetricMeasuresFormTable
+                datasourceId={datasourceId}
+                typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.MEASURE]}
+                measuresList={classMeasureList}
+                onFieldChange={(measures: ISemantic.IMeasure[]) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [METRIC_DEFINE_TYPE.MEASURE]: {
+                        ...prevState[METRIC_DEFINE_TYPE.MEASURE],
+                        measures,
+                      },
+                    };
+                  });
+                }}
+                onSqlChange={(expr: string) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [METRIC_DEFINE_TYPE.MEASURE]: {
+                        ...prevState[METRIC_DEFINE_TYPE.MEASURE],
+                        expr,
+                      },
+                    };
+                  });
+                }}
+              />
+            </>
+          )}
+          {defineType === METRIC_DEFINE_TYPE.METRIC && (
+            <>
+              <MetricMetricFormTable
+                typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.METRIC]}
+                metricList={createNewMetricList}
+                onFieldChange={(metrics: ISemantic.IMetricTypeParamsItem[]) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [METRIC_DEFINE_TYPE.METRIC]: {
+                        ...prevState[METRIC_DEFINE_TYPE.METRIC],
+                        metrics,
+                      },
+                    };
+                  });
+                }}
+                onSqlChange={(expr: string) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [METRIC_DEFINE_TYPE.METRIC]: {
+                        ...prevState[METRIC_DEFINE_TYPE.METRIC],
+                        expr,
+                      },
+                    };
+                  });
+                }}
+              />
+            </>
+          )}
+          {defineType === METRIC_DEFINE_TYPE.FIELD && (
+            <>
+              <MetricFieldFormTable
+                typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.FIELD]}
+                fieldList={fieldList}
+                onFieldChange={(fields: ISemantic.IFieldTypeParamsItem[]) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [METRIC_DEFINE_TYPE.FIELD]: {
+                        ...prevState[METRIC_DEFINE_TYPE.FIELD],
+                        fields,
+                      },
+                    };
+                  });
+                }}
+                onSqlChange={(expr: string) => {
+                  setExprTypeParamsState((prevState) => {
+                    return {
+                      ...prevState,
+                      [METRIC_DEFINE_TYPE.FIELD]: {
+                        ...prevState[METRIC_DEFINE_TYPE.FIELD],
+                        expr,
+                      },
+                    };
+                  });
+                }}
+              />
+            </>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <FormItem hidden={true} name="id" label="ID">
+          <Input placeholder="id" />
+        </FormItem>
+        <Row gutter={20}>
+          <Col span={12}>
+            <FormItem
+              name="name"
+              label="指标名称"
+              rules={[{ required: true, message: '请输入指标名称' }]}
+            >
+              <Input placeholder="名称不可重复" />
+            </FormItem>
+          </Col>
+          <Col span={12}>
+            <FormItem
+              name="bizName"
+              label="英文名称"
+              rules={[{ required: true, message: '请输入英文名称' }]}
+            >
+              <Input placeholder="名称不可重复" disabled={isEdit} />
+            </FormItem>
+          </Col>
+        </Row>
+        <Row gutter={20}>
+          <Col span={12}>
+            <FormItem
+              name="sensitiveLevel"
+              label="敏感度"
+              rules={[{ required: true, message: '请选择敏感度' }]}
+            >
+              <Select placeholder="请选择敏感度">
+                {SENSITIVE_LEVEL_OPTIONS.map((item) => (
+                  <Option key={item.value} value={item.value}>
+                    {item.label}
+                  </Option>
+                ))}
+              </Select>
+            </FormItem>
+          </Col>
+          <Col span={12}>
+            <FormItem name="classifications" label="分类">
+              <Select
+                mode="tags"
+                placeholder="支持手动输入及选择"
+                tokenSeparators={[',']}
+                maxTagCount={9}
+                options={tagOptions}
+              />
+            </FormItem>
+          </Col>
+        </Row>
+
+        <FormItem
+          name="description"
+          label={
+            <TableTitleTooltips
+              title="业务口径"
+              overlayInnerStyle={{ width: 600 }}
+              tooltips={
+                <>
+                  <p>
+                    在录入指标时，请务必详细填写指标口径。口径描述对于理解指标的含义、计算方法和使用场景至关重要。一个清晰、准确的口径描述可以帮助其他用户更好地理解和使用该指标，避免因为误解而导致错误的数据分析和决策。在填写口径时，建议包括以下信息：
+                  </p>
+                  <p>1. 指标的计算方法：详细说明指标是如何计算的，包括涉及的公式、计算步骤等。</p>
+                  <p>2. 数据来源：描述指标所依赖的数据来源，包括数据表、字段等信息。</p>
+                  <p>3. 使用场景：说明该指标适用于哪些业务场景，以及如何在这些场景中使用该指标。</p>
+                  <p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
+                  <p>
+                    请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握指标的核心要点。
+                  </p>
+                </>
+              }
+            />
+          }
+          rules={[{ required: true, message: '请输入业务口径' }]}
+        >
+          <TextArea placeholder="请输入业务口径" style={{ minHeight: 173 }} />
+        </FormItem>
+
+        <FormItem label="别名">
+          <Row gutter={20}>
+            <Col flex="1 1 200px">
+              <FormItem name="alias" noStyle>
+                <Select
+                  style={{ maxWidth: 500 }}
+                  mode="tags"
+                  placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
+                  tokenSeparators={[',']}
+                  maxTagCount={9}
+                />
+              </FormItem>
+            </Col>
+            {isEdit && (
+              <Col flex="0 1 75px">
+                <Tooltip title="智能填充将根据指标相关信息，使用大语言模型获取指标别名">
+                  <Button
+                    type="primary"
+                    loading={llmLoading}
+                    style={{ top: '5px' }}
+                    onClick={() => {
+                      generatorMetricAlias();
+                    }}
+                  >
+                    智能填充
+                  </Button>
+                </Tooltip>
+              </Col>
+            )}
+          </Row>
+        </FormItem>
+        <Divider />
+        <FormItem
+          name="isTag"
+          valuePropName="checked"
+          getValueFromEvent={(value) => {
+            return value === true ? 1 : 0;
+          }}
+          getValueProps={(value) => {
+            return {
+              checked: value === 1,
+            };
+          }}
+        >
+          <Row gutter={20}>
+            <Col flex="1 1 200px">
+              <FormItemTitle
+                title={`设为标签`}
+                subTitle={`如果勾选，代表取值都是一种'标签'，可用作对实体的圈选`}
+              />
+            </Col>
+
+            <Col flex="0 1 75px">
+              <Switch />
+            </Col>
+          </Row>
+        </FormItem>
+        <Divider />
+        <FormItem>
+          <Row gutter={20}>
+            <Col flex="1 1 200px">
+              <FormItemTitle
+                title={'下钻维度配置'}
+                subTitle={'配置下钻维度后，将可以在指标卡中进行下钻'}
+              />
+            </Col>
+
+            <Col flex="0 1 75px">
+              <Button
+                type="primary"
+                onClick={() => {
+                  setMetricRelationModalOpenState(true);
+                }}
+              >
+                设 置
+              </Button>
+            </Col>
+          </Row>
+        </FormItem>
+        <Divider />
+        <FormItem label={<FormItemTitle title={'数据格式化'} />} name="dataFormatType">
+          <Radio.Group buttonStyle="solid" size="middle">
+            <Radio.Button value="">默认</Radio.Button>
+            <Radio.Button value="decimal">小数</Radio.Button>
+            <Radio.Button value="percent">百分比</Radio.Button>
+          </Radio.Group>
+        </FormItem>
+
+        {(isPercentState || isDecimalState) && (
+          <FormItem
+            label={
+              <FormItemTitle
+                title={'小数位数'}
+                subTitle={`对小数位数进行设置，如保留两位，0.021252 -> 0.02${
+                  isPercentState ? '%' : ''
+                }`}
+              />
+            }
+            name={['dataFormat', 'decimalPlaces']}
+          >
+            <InputNumber placeholder="请输入需要保留小数位数" style={{ width: '300px' }} />
+          </FormItem>
+        )}
+        {isPercentState && (
+          <>
+            <FormItem
+              label={
+                <FormItemTitle
+                  title={'原始值是否乘以100'}
+                  subTitle={'如 原始值0.001 ->展示值0.1% '}
+                />
+              }
+              name={['dataFormat', 'needMultiply100']}
+              valuePropName="checked"
+            >
+              <Switch />
+            </FormItem>
+          </>
+        )}
+      </>
+    );
+  };
+  const renderFooter = () => {
+    if (!hasMeasuresState) {
+      return <Button onClick={onCancel}>取消</Button>;
+    }
+    if (currentStep === 1) {
+      return (
+        <>
+          <Button style={{ float: 'left' }} onClick={backward}>
+            上一步
+          </Button>
+          <Button onClick={onCancel}>取消</Button>
+          <Button type="primary" onClick={handleSave}>
+            完成
+          </Button>
+        </>
+      );
+    }
+    return (
+      <>
+        <Button onClick={onCancel}>取消</Button>
+        <Button type="primary" onClick={handleSave}>
+          下一步
+        </Button>
+      </>
+    );
+  };
+  return (
+    <>
+      {hasMeasuresState ? (
+        <>
+          <div className={styles.infoCard}>
+            <div className={styles.infoCardTitle}>
+              <span style={{ flex: 'auto' }}>{MetricSettingWording[settingKey]}</span>
+
+              <span style={{ flex: 'none' }}>
+                <Button
+                  size="middle"
+                  type="link"
+                  key="backListBtn"
+                  onClick={() => {
+                    history.back();
+                  }}
+                >
+                  <Space>
+                    <ArrowLeftOutlined />
+                    返回列表页
+                  </Space>
+                </Button>
+              </span>
+            </div>
+            <div className={styles.infoCardContainer}>
+              <Form
+                className={styles.supersonicForm}
+                {...formLayout}
+                form={form}
+                initialValues={{
+                  ...formValRef.current,
+                  dataFormatType: '',
+                }}
+                onValuesChange={(value, values: any) => {
+                  const { dataFormatType } = values;
+                  if (dataFormatType === 'percent') {
+                    setIsPercentState(true);
+                    setIsDecimalState(false);
+                  }
+                  if (dataFormatType === 'decimal') {
+                    setIsPercentState(false);
+                    setIsDecimalState(true);
+                  }
+                  if (!dataFormatType) {
+                    setIsPercentState(false);
+                    setIsDecimalState(false);
+                  }
+                }}
+              >
+                {renderContent()}
+              </Form>
+            </div>
+            <div className={styles.infoCardFooter}>
+              <div className={styles.infoCardFooterContainer}>
+                <Button type="primary" onClick={handleSave}>
+                  保 存
+                </Button>
+              </div>
+            </div>
+          </div>
+          <DimensionAndMetricRelationModal
+            metricItem={metricItem}
+            relationsInitialValue={drillDownDimensionsConfig}
+            open={metricRelationModalOpenState}
+            onCancel={() => {
+              setMetricRelationModalOpenState(false);
+            }}
+            onSubmit={(relations) => {
+              setDrillDownDimensions(relations);
+              setMetricRelationModalOpenState(false);
+            }}
+            onRefreshRelationData={() => {
+              queryDrillDownDimension(metricItem?.id);
+            }}
+          />
+        </>
+      ) : (
+        <Result
+          style={{ background: '#fff' }}
+          status="warning"
+          subTitle="当前数据源缺少度量，无法创建指标。请前往数据源配置中，将字段设置为度量"
+          extra={
+            <Button
+              type="primary"
+              key="console"
+              onClick={() => {
+                history.replace(`/model/${domainId}/${modelId || metricItem?.modelId}/dataSource`);
+                onCancel?.();
+              }}
+            >
+              去创建
+            </Button>
+          }
+        />
+      )}
+    </>
+  );
+};
+
+export default MetricInfoCreateForm;

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

@@ -0,0 +1,540 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Form,
+  Button,
+  Input,
+  Select,
+  Radio,
+  Switch,
+  InputNumber,
+  message,
+  Result,
+  Row,
+  Col,
+  Space,
+  Divider,
+  Tooltip,
+  Tag,
+} from 'antd';
+
+import MetricMeasuresFormTable from '../../components/MetricMeasuresFormTable';
+import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE, TAG_DEFINE_TYPE } from '../../constant';
+import { formLayout } from '@/components/FormHelper/utils';
+import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import styles from '../../components/style.less';
+import {
+  getMetricsToCreateNewMetric,
+  getModelDetail,
+  getDrillDownDimension,
+  batchCreateTag,
+  batchDeleteTag,
+} from '../../service';
+import MetricMetricFormTable from '../../components/MetricMetricFormTable';
+import MetricFieldFormTable from '../../components/MetricFieldFormTable';
+import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
+import TableTitleTooltips from '../../components/TableTitleTooltips';
+import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../../service';
+import { MetricSettingKey, MetricSettingWording } from '../constants';
+import { ISemantic } from '../../data';
+import { history } from 'umi';
+
+export type CreateFormProps = {
+  datasourceId?: number;
+  domainId: number;
+  modelId: number;
+  metricItem: any;
+  settingKey: MetricSettingKey;
+  onCancel?: () => void;
+  onSubmit?: (values: any) => void;
+};
+
+const queryParamsTypeParamsKey = {
+  [METRIC_DEFINE_TYPE.MEASURE]: 'metricDefineByMeasureParams',
+  [METRIC_DEFINE_TYPE.METRIC]: 'metricDefineByMetricParams',
+  [METRIC_DEFINE_TYPE.FIELD]: 'metricDefineByFieldParams',
+};
+
+const MetricInfoCreateSqlConfig: React.FC<CreateFormProps> = ({
+  datasourceId,
+  modelId,
+  metricItem,
+  onSubmit,
+}) => {
+  const isEdit = !!metricItem?.id;
+  const [currentStep, setCurrentStep] = useState(0);
+  const formValRef = useRef({} as any);
+  const [form] = Form.useForm();
+  const updateFormVal = (val: any) => {
+    const formVal = {
+      ...formValRef.current,
+      ...val,
+    };
+    formValRef.current = formVal;
+  };
+
+  const [classMeasureList, setClassMeasureList] = useState<ISemantic.IMeasure[]>([]);
+
+  const [exprTypeParamsState, setExprTypeParamsState] = useState<{
+    [METRIC_DEFINE_TYPE.MEASURE]: ISemantic.IMeasureTypeParams;
+    [METRIC_DEFINE_TYPE.METRIC]: ISemantic.IMetricTypeParams;
+    [METRIC_DEFINE_TYPE.FIELD]: ISemantic.IFieldTypeParams;
+  }>({
+    [METRIC_DEFINE_TYPE.MEASURE]: {
+      measures: [],
+      expr: '',
+    },
+    [METRIC_DEFINE_TYPE.METRIC]: {
+      metrics: [],
+      expr: '',
+    },
+    [METRIC_DEFINE_TYPE.FIELD]: {
+      fields: [],
+      expr: '',
+    },
+  } as any);
+
+  // const [exprTypeParamsState, setExprTypeParamsState] = useState<ISemantic.IMeasure[]>([]);
+
+  const [defineType, setDefineType] = useState(METRIC_DEFINE_TYPE.MEASURE);
+
+  const [createNewMetricList, setCreateNewMetricList] = useState<ISemantic.IMetricItem[]>([]);
+  const [fieldList, setFieldList] = useState<ISemantic.IFieldTypeParamsItem[]>([]);
+
+  const [drillDownDimensions, setDrillDownDimensions] = useState<
+    ISemantic.IDrillDownDimensionItem[]
+  >([]);
+
+  const [drillDownDimensionsConfig, setDrillDownDimensionsConfig] = useState<
+    ISemantic.IDrillDownDimensionItem[]
+  >([]);
+
+  const queryModelDetail = async () => {
+    const { code, data } = await getModelDetail({ modelId: modelId || metricItem?.modelId });
+    if (code === 200) {
+      if (Array.isArray(data?.modelDetail?.fields)) {
+        if (Array.isArray(metricItem?.metricDefineByFieldParams?.fields)) {
+          const fieldList = data.modelDetail.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
+            const { fieldName } = item;
+            if (
+              metricItem?.metricDefineByFieldParams?.fields.find(
+                (measureParamsItem: ISemantic.IFieldTypeParamsItem) =>
+                  measureParamsItem.fieldName === fieldName,
+              )
+            ) {
+              return {
+                ...item,
+                orderNumber: 9999,
+              };
+            }
+            return {
+              ...item,
+              orderNumber: 0,
+            };
+          });
+
+          const sortList = fieldList.sort(
+            (
+              a: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
+              b: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
+            ) => b.orderNumber - a.orderNumber,
+          );
+          setFieldList(sortList);
+        } else {
+          setFieldList(data.modelDetail.fields);
+        }
+      }
+      if (Array.isArray(data?.modelDetail?.measures)) {
+        if (Array.isArray(metricItem?.metricDefineByMeasureParams?.measures)) {
+          const measureList = data.modelDetail.measures.map((item: ISemantic.IMeasure) => {
+            const { bizName } = item;
+            if (
+              metricItem?.metricDefineByMeasureParams?.measures.find(
+                (measureParamsItem: ISemantic.IMeasure) => measureParamsItem.bizName === bizName,
+              )
+            ) {
+              return {
+                ...item,
+                orderNumber: 9999,
+              };
+            }
+            return {
+              ...item,
+              orderNumber: 0,
+            };
+          });
+          const sortMeasureList = measureList.sort(
+            (
+              a: ISemantic.IMeasure & { orderNumber: number },
+              b: ISemantic.IMeasure & { orderNumber: number },
+            ) => b.orderNumber - a.orderNumber,
+          );
+          setClassMeasureList(sortMeasureList);
+        } else {
+          setClassMeasureList(data.modelDetail.measures);
+        }
+
+        return;
+      }
+    }
+    setClassMeasureList([]);
+  };
+
+  const queryDrillDownDimension = async (metricId: number) => {
+    const { code, data, msg } = await getDrillDownDimension(metricId);
+    if (code === 200 && Array.isArray(data)) {
+      setDrillDownDimensionsConfig(data);
+    }
+    if (code !== 200) {
+      message.error(msg);
+    }
+    return [];
+  };
+
+  useEffect(() => {
+    queryModelDetail();
+    queryMetricsToCreateNewMetric();
+  }, []);
+
+  const initData = () => {
+    const {
+      id,
+      name,
+      bizName,
+      description,
+      sensitiveLevel,
+      typeParams,
+      isTag,
+      dataFormat,
+      dataFormatType,
+      alias,
+      classifications,
+      metricDefineType,
+      metricDefineByMeasureParams,
+      metricDefineByMetricParams,
+      metricDefineByFieldParams,
+    } = metricItem;
+    const initValue = {
+      id,
+      name,
+      bizName,
+      sensitiveLevel,
+      description,
+      classifications,
+      isTag,
+      // isPercent,
+      dataFormatType: dataFormatType || '',
+      alias: alias && alias.trim() ? alias.split(',') : [],
+      dataFormat: dataFormat || {
+        decimalPlaces: 2,
+        needMultiply100: false,
+      },
+    };
+    const editInitFormVal = {
+      ...formValRef.current,
+      ...initValue,
+    };
+    if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
+      const { measures, expr } = metricDefineByMeasureParams || {};
+      setExprTypeParamsState({
+        ...exprTypeParamsState,
+        [METRIC_DEFINE_TYPE.MEASURE]: {
+          measures: measures || [],
+          expr: expr || '',
+        },
+      });
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
+      const { metrics, expr } = metricDefineByMetricParams || {};
+      setExprTypeParamsState({
+        ...exprTypeParamsState,
+        [METRIC_DEFINE_TYPE.METRIC]: {
+          metrics: metrics || [],
+          expr: expr || '',
+        },
+      });
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
+      const { fields, expr } = metricDefineByFieldParams || {};
+      setExprTypeParamsState({
+        ...exprTypeParamsState,
+        [METRIC_DEFINE_TYPE.FIELD]: {
+          fields: fields || [],
+          expr: expr || '',
+        },
+      });
+    }
+    updateFormVal(editInitFormVal);
+    form.setFieldsValue(initValue);
+    setDefineType(metricDefineType);
+
+    queryDrillDownDimension(metricItem?.id);
+  };
+
+  useEffect(() => {
+    if (isEdit) {
+      initData();
+    }
+  }, [metricItem]);
+
+  const isEmptyConditions = (
+    metricDefineType: METRIC_DEFINE_TYPE,
+    metricDefineParams:
+      | ISemantic.IMeasureTypeParams
+      | ISemantic.IMetricTypeParams
+      | ISemantic.IFieldTypeParams,
+  ) => {
+    if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
+      const { measures } = (metricDefineParams as ISemantic.IMeasureTypeParams) || {};
+      if (!(Array.isArray(measures) && measures.length > 0)) {
+        message.error('请添加一个度量');
+        return true;
+      }
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
+      const { metrics } = (metricDefineParams as ISemantic.IMetricTypeParams) || {};
+      if (!(Array.isArray(metrics) && metrics.length > 0)) {
+        message.error('请添加一个指标');
+        return true;
+      }
+    }
+    if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
+      const { fields } = (metricDefineParams as ISemantic.IFieldTypeParams) || {};
+      if (!(Array.isArray(fields) && fields.length > 0)) {
+        message.error('请添加一个字段');
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const saveMetric = async (fieldsValue: any) => {
+    const queryParams = {
+      modelId: isEdit ? metricItem.modelId : modelId,
+      relateDimension: {
+        ...(metricItem?.relateDimension || {}),
+        drillDownDimensions,
+      },
+      ...fieldsValue,
+    };
+    const { alias, dataFormatType } = queryParams;
+    queryParams.alias = Array.isArray(alias) ? alias.join(',') : '';
+    if (!queryParams[queryParamsTypeParamsKey[defineType]]?.expr) {
+      message.error('请输入度量表达式');
+      return;
+    }
+    if (!dataFormatType) {
+      delete queryParams.dataFormat;
+    }
+    if (isEmptyConditions(defineType, queryParams[queryParamsTypeParamsKey[defineType]])) {
+      return;
+    }
+
+    let saveMetricQuery = createMetric;
+    if (queryParams.id) {
+      saveMetricQuery = updateMetric;
+    }
+    const { code, msg, data } = await saveMetricQuery(queryParams);
+    if (code === 200) {
+      if (queryParams.isTag) {
+        queryBatchExportTag(data.id || metricItem?.id);
+      }
+
+      if (metricItem?.id && !queryParams.isTag) {
+        queryBatchDelete(metricItem);
+      }
+      message.success('编辑指标成功');
+      onSubmit?.(queryParams);
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryBatchDelete = async (metricItem: ISemantic.IMetricItem) => {
+    const { code, msg } = await batchDeleteTag([
+      {
+        itemIds: [metricItem.id],
+        tagDefineType: TAG_DEFINE_TYPE.METRIC,
+      },
+    ]);
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryBatchExportTag = async (id: number) => {
+    const { code, msg } = await batchCreateTag([
+      { itemId: id, tagDefineType: TAG_DEFINE_TYPE.METRIC },
+    ]);
+
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryMetricsToCreateNewMetric = async () => {
+    const { code, data } = await getMetricsToCreateNewMetric({
+      modelId: modelId || metricItem?.modelId,
+    });
+    if (code === 200) {
+      if (Array.isArray(metricItem?.metricDefineByMetricParams?.metrics)) {
+        const fieldList = data.map((item: ISemantic.IMetricTypeParamsItem) => {
+          const { bizName } = item;
+          if (
+            metricItem?.metricDefineByMetricParams?.metrics.find(
+              (measureParamsItem: ISemantic.IMetricTypeParamsItem) =>
+                measureParamsItem.bizName === bizName,
+            )
+          ) {
+            return {
+              ...item,
+              orderNumber: 9999,
+            };
+          }
+          return {
+            ...item,
+            orderNumber: 0,
+          };
+        });
+
+        const sortList = fieldList.sort(
+          (
+            a: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
+            b: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
+          ) => b.orderNumber - a.orderNumber,
+        );
+        setCreateNewMetricList(sortList);
+      } else {
+        setCreateNewMetricList(data);
+      }
+    } else {
+      message.error('获取指标标签失败');
+    }
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          padding: '0 0 20px 24px',
+          // borderBottom: '1px solid #eee',
+        }}
+      >
+        <Radio.Group
+          buttonStyle="solid"
+          value={defineType}
+          onChange={(e) => {
+            setDefineType(e.target.value);
+          }}
+        >
+          <Radio.Button value={METRIC_DEFINE_TYPE.MEASURE}>按度量</Radio.Button>
+          <Radio.Button value={METRIC_DEFINE_TYPE.METRIC}>按指标</Radio.Button>
+          <Radio.Button value={METRIC_DEFINE_TYPE.FIELD}>按字段</Radio.Button>
+        </Radio.Group>
+      </div>
+      {defineType === METRIC_DEFINE_TYPE.MEASURE && (
+        <>
+          <MetricMeasuresFormTable
+            datasourceId={datasourceId}
+            typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.MEASURE]}
+            measuresList={classMeasureList}
+            onFieldChange={(measures: ISemantic.IMeasure[]) => {
+              // setClassMeasureList(measures);
+              setExprTypeParamsState((prevState) => {
+                return {
+                  ...prevState,
+                  [METRIC_DEFINE_TYPE.MEASURE]: {
+                    ...prevState[METRIC_DEFINE_TYPE.MEASURE],
+                    measures,
+                  },
+                };
+              });
+            }}
+            onSqlChange={(expr: string) => {
+              setExprTypeParamsState((prevState) => {
+                return {
+                  ...prevState,
+                  [METRIC_DEFINE_TYPE.MEASURE]: {
+                    ...prevState[METRIC_DEFINE_TYPE.MEASURE],
+                    expr,
+                  },
+                };
+              });
+            }}
+          />
+        </>
+      )}
+      {defineType === METRIC_DEFINE_TYPE.METRIC && (
+        <>
+          <p className={styles.desc}>
+            基于
+            <Tag color="#2499ef14" className={styles.markerTag}>
+              已有
+            </Tag>
+            指标来衍生新的指标
+          </p>
+
+          <MetricMetricFormTable
+            typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.METRIC]}
+            metricList={createNewMetricList}
+            onFieldChange={(metrics: ISemantic.IMetricTypeParamsItem[]) => {
+              setExprTypeParamsState((prevState) => {
+                return {
+                  ...prevState,
+                  [METRIC_DEFINE_TYPE.METRIC]: {
+                    ...prevState[METRIC_DEFINE_TYPE.METRIC],
+                    metrics,
+                  },
+                };
+              });
+            }}
+            onSqlChange={(expr: string) => {
+              setExprTypeParamsState((prevState) => {
+                return {
+                  ...prevState,
+                  [METRIC_DEFINE_TYPE.METRIC]: {
+                    ...prevState[METRIC_DEFINE_TYPE.METRIC],
+                    expr,
+                  },
+                };
+              });
+            }}
+          />
+        </>
+      )}
+      {defineType === METRIC_DEFINE_TYPE.FIELD && (
+        <>
+          <MetricFieldFormTable
+            typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.FIELD]}
+            fieldList={fieldList}
+            onFieldChange={(fields: ISemantic.IFieldTypeParamsItem[]) => {
+              setExprTypeParamsState((prevState) => {
+                return {
+                  ...prevState,
+                  [METRIC_DEFINE_TYPE.FIELD]: {
+                    ...prevState[METRIC_DEFINE_TYPE.FIELD],
+                    fields,
+                  },
+                };
+              });
+            }}
+            onSqlChange={(expr: string) => {
+              setExprTypeParamsState((prevState) => {
+                return {
+                  ...prevState,
+                  [METRIC_DEFINE_TYPE.FIELD]: {
+                    ...prevState[METRIC_DEFINE_TYPE.FIELD],
+                    expr,
+                  },
+                };
+              });
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MetricInfoCreateSqlConfig;

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/constants.ts

@@ -0,0 +1,11 @@
+export enum MetricSettingKey {
+  BASIC = 'BASIC',
+  SQL_CONFIG = 'SQLCONFIG',
+  DIMENSION_CONFIG = 'DIMENSION_CONFIG',
+}
+
+export const MetricSettingWording = {
+  [MetricSettingKey.BASIC]: '基本信息',
+  [MetricSettingKey.SQL_CONFIG]: '表达式',
+  [MetricSettingKey.DIMENSION_CONFIG]: '下钻维度配置',
+};

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

@@ -1,7 +1,12 @@
 import React from 'react';
+import { Outlet } from 'umi';
 
-const market: React.FC = ({ children }) => {
-  return <>{children}</>;
+const market: React.FC = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
 };
 
 export default market;

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

@@ -168,6 +168,76 @@
   }
 }
 
+.metricEditWrapper {
+  // height: calc(100vh - 56px);
+  // overflow: scroll;
+  .metricDetailTab {
+    :global {
+      .ant-tabs-nav {
+        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;
+        color: #344767;
+        font-weight: 500;
+      }
+    }
+  }
+  .metricDetail {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding: 0px;
+    background-color: transparent;
+    height: 100%;
+    .tabContainer {
+      padding: 24px;
+      // height: 100%;
+      min-height: calc(100vh - 78px);
+      width: calc(100vw - 350px);
+      background-color: #fafafb;
+    }
+    .metricInfoContent {
+      padding: 25px;
+      .title {
+        position: relative;
+        margin-bottom: 12px;
+        color: #0e73ff;
+        font-weight: bold;
+        font-size: 16px;
+        &::before {
+          position: absolute;
+          top: 10px;
+          left: -10px;
+          display: block;
+          width: 3px;
+          height: 14px;
+          font-size: 0;
+          background: #0e73ff;
+          border: 1px solid #0e73ff;
+          border-radius: 2px;
+          content: '';
+        }
+      }
+    }
+    .siderContainer {
+      width: 350px;
+      min-height: calc(100vh - 78px);
+      // margin: 10px 20px 20px 0;
+      // background-color: rgb(255, 255, 255);
+      border-radius: 6px;
+      padding: 24px 0 24px 24px;
+      // 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;
+    }
+  }
+}
+
 .metricDetailWrapper {
   height: calc(100vh - 56px);
   overflow: scroll;
@@ -194,9 +264,12 @@
     width: 100%;
     padding: 0px;
     background-color: transparent;
+    height: 100%;
     .tabContainer {
+      height: 100%;
+      min-height: calc(100vh - 78px);
       width: calc(100vw - 450px);
-      background-color: rgb(240, 242, 245);
+      background-color: #fafafb;
     }
     .metricInfoContent {
       padding: 25px;
@@ -246,8 +319,19 @@
 }
 
 .metricInfoSider {
-  padding: 24px;
+  padding: 20px;
   color: #344767;
+  background-color: #fff;
+  height: 100%;
+  border: 1px solid #e6ebf1;
+  border-radius: 6px;
+  .createTitle {
+    margin-bottom: 10px;
+    color:#344767;
+    font-weight: 500;
+    font-size: 16px;
+    font-family: var(--tencent-font-family);
+  }
   .gotoMetricListIcon {
     color: #3182ce;
     cursor: pointer;
@@ -256,6 +340,7 @@
     }
   }
   .title {
+    margin-bottom: 20px;
     .name {
       font-weight: 600;
       font-size: 18px;
@@ -287,11 +372,16 @@
     opacity: 1;
   }
   .sectionContainer {
-    margin-top: 20px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: scroll;
+
+
     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;
@@ -420,3 +510,70 @@
     }
   }
 }
+
+.settingList {
+  list-style: none;
+  margin: 0px;
+  position: relative;
+  padding: 0px;
+  li {
+    -webkit-tap-highlight-color: transparent;
+    background-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    border-radius: 0px;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    min-width: 0px;
+    box-sizing: border-box;
+    text-align: left;
+    padding: 8px 16px;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    &.active {
+      background-color: rgba(22, 119, 255, 0.08);
+      .icon {
+        color: rgb(22, 119, 255);
+      }
+      .content {
+        .text {
+          color: rgb(22, 119, 255);
+        }
+      }
+    }
+    .icon {
+      min-width: 32px;
+      color: #344767;
+      flex-shrink: 0;
+      display: inline-flex;
+    }
+    .content {
+      flex: 1 1 auto;
+      min-width: 0px;
+      margin-top: 4px;
+      margin-bottom: 4px;
+      .text {
+        margin: 0px;
+        color: #344767;
+        font-size: 16px;
+        // line-height: 1.57;
+        // font-family: var(--tencent-font-family);
+        font-weight: 600;
+        display: block;
+      }
+    }
+    &:hover {
+      text-decoration: none;
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+}
+

webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx

@@ -1,31 +1,39 @@
-import { Popover, message, Space } from 'antd';
+import { message } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { connect, history, useParams } from 'umi';
+import { history, useParams, useModel } from '@umijs/max';
 import DomainListTree from './components/DomainList';
-
 import styles from './components/style.less';
-import type { StateType } from './model';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { ISemantic } from './data';
 import { getDomainList, getModelList } from './service';
-// import ChatSettingTab from './ChatSetting/ChatSettingTab';
 import DomainManagerTab from './components/DomainManagerTab';
-import type { Dispatch } from 'umi';
 
 type Props = {
   mode: 'domain';
-  domainManger: StateType;
-  dispatch: Dispatch;
 };
 
-const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) => {
+const OverviewContainer: React.FC<Props> = ({ mode }) => {
   const params: any = useParams();
   const domainId = params.domainId;
   const modelId = params.modelId;
-
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+  const metricModel = useModel('SemanticModel.metricData');
+  const databaseModel = useModel('SemanticModel.databaseData');
+  const { selectDomainId, domainList, setSelectDomain, setDomainList } = domainModel;
+  const {
+    selectModelId,
+    modelList,
+    MrefreshModelList,
+    setSelectModel,
+    setModelTableHistoryParams,
+  } = modelModel;
+  const { MrefreshDimensionList } = dimensionModel;
+  const { MrefreshMetricList } = metricModel;
+  const { MrefreshDatabaseList } = databaseModel;
   const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? 'overview' : '';
-  const { selectDomainId, selectModelId, domainList } = domainManger;
-  const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
+  // const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
   const [isModel, setIsModel] = useState<boolean>(false);
   const [collapsedState, setCollapsedState] = useState(true);
   const [activeKey, setActiveKey] = useState<string>(menuKey);
@@ -39,24 +47,13 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
         return item.parentId === 0;
       })[0];
       if (firstRootNode) {
-        const { id, name } = firstRootNode;
-        dispatch({
-          type: 'domainManger/setSelectDomain',
-          selectDomainId: id,
-          selectDomainName: name,
-          domainData: firstRootNode,
-        });
+        const { id } = firstRootNode;
+        setSelectDomain(firstRootNode);
         setActiveKey(menuKey);
         pushUrlMenu(id, 0, menuKey);
       }
     } else {
-      const { id, name } = targetNode;
-      dispatch({
-        type: 'domainManger/setSelectDomain',
-        selectDomainId: id,
-        selectDomainName: name,
-        domainData: targetNode,
-      });
+      setSelectDomain(targetNode);
     }
   };
 
@@ -64,10 +61,7 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
     const { code, data, msg } = await getDomainList();
     if (code === 200) {
       initSelectedDomain(data);
-      dispatch({
-        type: 'domainManger/setDomainList',
-        payload: { domainList: data },
-      });
+      setDomainList(data);
     } else {
       message.error(msg);
     }
@@ -75,22 +69,10 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
 
   useEffect(() => {
     initProjectTree();
-    dispatch({
-      type: 'domainManger/queryDatabaseList',
-    });
+    MrefreshDatabaseList();
     return () => {
-      dispatch({
-        type: 'domainManger/setSelectDomain',
-        selectDomainId: 0,
-        selectDomainName: '',
-        domainData: undefined,
-      });
-      dispatch({
-        type: 'domainManger/setSelectModel',
-        selectModelId: 0,
-        selectModelName: '',
-        modelData: undefined,
-      });
+      setSelectDomain(undefined);
+      setSelectModel(undefined);
     };
   }, []);
 
@@ -102,26 +84,15 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
   }, [selectDomainId]);
 
   const queryModelList = async () => {
-    const { code, data } = await getModelList(selectDomainId);
-    if (code === 200) {
-      setModelList(data);
-      const model = data.filter((item: any) => {
-        return `${item.id}` === modelId;
-      })[0];
-      if (model) {
-        const { id, name } = model;
-        dispatch({
-          type: 'domainManger/setSelectModel',
-          selectModelId: id,
-          selectModelName: name,
-          modelData: model,
-        });
-        setActiveKey(menuKey);
-        setIsModel(true);
-        pushUrlMenu(selectDomainId, id, menuKey);
-      }
-    } else {
-      message.error('获取模型列表失败!');
+    const list = await MrefreshModelList(selectDomainId);
+    const model = list.filter((item: any) => {
+      return `${item.id}` === modelId;
+    })[0];
+    if (model) {
+      setSelectModel(model);
+      setActiveKey(menuKey);
+      setIsModel(true);
+      pushUrlMenu(model.domainId, model.id, menuKey);
     }
   };
 
@@ -144,18 +115,8 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
       return;
     }
     initModelConfig();
-    dispatch({
-      type: 'domainManger/queryDimensionList',
-      payload: {
-        modelId: selectModelId,
-      },
-    });
-    dispatch({
-      type: 'domainManger/queryMetricList',
-      payload: {
-        modelId: selectModelId,
-      },
-    });
+    MrefreshDimensionList({ modelId: selectModelId });
+    MrefreshMetricList({ modelId: selectModelId });
   }, [selectModelId]);
 
   const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
@@ -163,32 +124,21 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
   };
 
   const handleModelChange = (model?: ISemantic.IModelItem) => {
-    // queryModelList();
+    console.log(model, 1111);
     if (!model) {
       return;
     }
     if (`${model.id}` === `${selectModelId}`) {
       initModelConfig();
     }
-    const { id, name } = model;
-    dispatch({
-      type: 'domainManger/setSelectModel',
-      selectModelId: id,
-      selectModelName: name,
-      modelData: model,
-    });
+    setSelectModel(model);
   };
 
   const cleanModelInfo = (domainId) => {
     setIsModel(false);
     setActiveKey('overview');
     pushUrlMenu(domainId, 0, 'overview');
-    dispatch({
-      type: 'domainManger/setSelectModel',
-      selectModelId: 0,
-      selectModelName: '',
-      modelData: undefined,
-    });
+    setSelectModel(undefined);
   };
 
   const handleCollapsedBtn = () => {
@@ -203,19 +153,11 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
             <DomainListTree
               createDomainBtnVisible={mode === 'domain' ? true : false}
               onTreeSelected={(domainData: ISemantic.IDomainItem) => {
-                const { id, name } = domainData;
+                const { id } = domainData;
                 cleanModelInfo(id);
-                dispatch({
-                  type: 'domainManger/setSelectDomain',
-                  selectDomainId: id,
-                  selectDomainName: name,
-                  domainData,
-                });
-                dispatch({
-                  type: 'domainManger/setModelTableHistoryParams',
-                  payload: {
-                    [id]: {},
-                  },
+                setSelectDomain(domainData);
+                setModelTableHistoryParams({
+                  [id]: {},
                 });
               }}
               onTreeDataUpdate={() => {
@@ -232,7 +174,6 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
           >
             {collapsedState ? <LeftOutlined /> : <RightOutlined />}
           </div>
-          {/* <RightOutlined /> */}
         </div>
         <div className={styles.content}>
           {selectDomainId ? (
@@ -243,6 +184,7 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
                 modelList={modelList}
                 handleModelChange={(model) => {
                   handleModelChange(model);
+                  MrefreshModelList(selectDomainId);
                 }}
                 onBackDomainBtnClick={() => {
                   cleanModelInfo(selectDomainId);
@@ -262,6 +204,4 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(OverviewContainer);
+export default OverviewContainer;

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticFlows/components/XflowJsonSchemaFormDrawerForm.tsx

@@ -3,26 +3,22 @@ import { Drawer } from 'antd';
 import { WorkspacePanel, useXFlowApp, useModelAsync, XFlowGraphCommands } from '@antv/xflow';
 import { useJsonSchemaFormModel } from '@antv/xflow-extension/es/canvas-json-schema-form/service';
 import { NS_DATA_SOURCE_RELATION_MODAL_OPEN_STATE } from '../ConfigModelService';
-import { connect } from 'umi';
 import { DATASOURCE_NODE_RENDER_ID } from '../constant';
 import DataSourceRelationFormDrawer from './DataSourceRelationFormDrawer';
 import ModelCreateForm from '../../Datasource/components/ModelCreateForm';
-// import ClassModelTypeModal from '../../components/ClassDataSourceTypeModal1';
 import { GraphApi } from '../service';
 import { SemanticNodeType } from '../../enum';
-import type { StateType } from '../../model';
 import DataSource from '../../Datasource';
 
 export type CreateFormProps = {
   controlMapService: any;
   formSchemaService: any;
   formValueUpdateService: any;
-  domainManger: StateType;
+  selectDomainId:number
 };
 
 const XflowJsonSchemaFormDrawerForm: React.FC<CreateFormProps> = (props) => {
-  const { domainManger } = props;
-  const { selectDomainId } = domainManger;
+
   const [visible, setVisible] = useState(false);
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [dataSourceItem, setDataSourceItem] = useState<any>();
@@ -91,7 +87,7 @@ const XflowJsonSchemaFormDrawerForm: React.FC<CreateFormProps> = (props) => {
   return (
     <WorkspacePanel position={{}}>
       <DataSourceRelationFormDrawer
-        domainId={domainManger.selectDomainId}
+        domainId={props.selectDomainId}
         nodeDataSource={nodeDataSource}
         onClose={() => {
           handleDataSourceRelationDrawerClose();
@@ -136,7 +132,6 @@ const XflowJsonSchemaFormDrawerForm: React.FC<CreateFormProps> = (props) => {
       >
         <DataSource
           initialValues={dataSourceItem}
-          domainId={Number(domainManger?.selectDomainId)}
           onSubmitSuccess={(dataSourceInfo: any) => {
             setCreateModalVisible(false);
             const { targetCell, targetData } = state;
@@ -174,6 +169,4 @@ const XflowJsonSchemaFormDrawerForm: React.FC<CreateFormProps> = (props) => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(XflowJsonSchemaFormDrawerForm);
+export default XflowJsonSchemaFormDrawerForm

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticFlows/index.tsx

@@ -27,8 +27,7 @@ import { useMenuConfig } from './ConfigMenu';
 import { useToolbarConfig } from './ConfigToolbar';
 /** 配置Dnd组件面板 */
 import * as dndPanelConfig from './ConfigDndPanel';
-import { connect } from 'umi';
-import type { StateType } from '../model';
+import { useModel } from '@umijs/max';
 import './index.less';
 import XflowJsonSchemaFormDrawer from './components/XflowJsonSchemaFormDrawer';
 import { getViewInfoList } from '../service';
@@ -38,12 +37,17 @@ import '@antv/xflow/dist/index.css';
 
 import { registerEdgeTool } from './ReactNodes/ToolTipsNode';
 
-export interface IProps {
-  domainManger: StateType;
-}
+export interface IProps {}
 
 export const SemanticFlow: React.FC<IProps> = (props) => {
-  const { domainManger } = props;
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const { selectDomain } = domainModel;
+  const { selectModel } = modelModel;
+  const domainManger: any = {
+    ...selectDomain,
+    ...selectModel,
+  };
 
   const graphHooksConfig = useGraphHookConfig(props);
   const toolbarConfig = useToolbarConfig();
@@ -148,6 +152,4 @@ export const SemanticFlow: React.FC<IProps> = (props) => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(SemanticFlow);
+export default SemanticFlow;

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticFlows/utils.tsx

@@ -1,6 +1,5 @@
 import type { NsGraph } from '@antv/xflow';
 import { uuidv4 } from '@antv/xflow';
-import type { StateType } from '../model';
 import { GraphApi } from './service';
 import { NODE_WIDTH, NODE_HEIGHT } from './constant';
 import moment from 'moment';
@@ -51,7 +50,7 @@ export const computedSingerNodesEdgesPosition = ({ nodes, edges }: NsGraph.IGrap
 
 export const addClassInfoAsDataSourceParents = (
   { nodes = [], edges = [] }: NsGraph.IGraphData,
-  domainManger: StateType,
+  domainManger: any,
 ) => {
   const { selectDomainId, selectDomainName } = domainManger;
   const sourceId = `classNodeId-${selectDomainId}`;

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphLegend.tsx

@@ -1,15 +1,11 @@
 import { Space, Checkbox } from 'antd';
 import type { CheckboxValueType } from 'antd/es/checkbox/Group';
 import React, { useState, useEffect } from 'react';
-
-import { connect } from 'umi';
-import type { StateType } from '../../model';
 import styles from '../style.less';
 
 type Props = {
   legendOptions: LegendOptionsItem[];
   value?: string[];
-  domainManger: StateType;
   onChange?: (ids: CheckboxValueType[]) => void;
   defaultCheckAll?: boolean;
   [key: string]: any;
@@ -78,6 +74,4 @@ const GraphLegend: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(GraphLegend);
+export default GraphLegend;

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphToolBar.tsx

@@ -2,11 +2,7 @@ import { Button, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import React from 'react';
 
-import { connect } from 'umi';
-import type { StateType } from '../../model';
-
 type Props = {
-  domainManger: StateType;
   onClick: (params?: { eventName?: string }) => void;
   [key: string]: any;
 };
@@ -61,6 +57,4 @@ const GraphToolBar: React.FC<Props> = ({ onClick }) => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(GraphToolBar);
+export default GraphToolBar

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/NodeInfoDrawer.tsx

@@ -2,8 +2,6 @@ import { Button, Drawer, message, Row, Col, Divider, Tag, Space, Popconfirm } fr
 import React, { useState, useEffect, ReactNode } from 'react';
 import { SemanticNodeType } from '../../enum';
 import { deleteDimension, deleteMetric, deleteDatasource } from '../../service';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
 import moment from 'moment';
 import styles from '../style.less';
 import TransTypeTag from '../../components/TransTypeTag';
@@ -11,7 +9,6 @@ import { SENSITIVE_LEVEL_ENUM } from '../../constant';
 
 type Props = {
   nodeData: any;
-  domainManger: StateType;
   onNodeChange: (params?: { eventName?: string }) => void;
   onEditBtnClick?: (nodeData: any) => void;
   [key: string]: any;
@@ -47,13 +44,11 @@ const DescriptionItem = ({ title, content }: DescriptionItemProps) => (
 
 const NodeInfoDrawer: React.FC<Props> = ({
   nodeData,
-  domainManger,
   onNodeChange,
   onEditBtnClick,
   ...restProps
 }) => {
   const [infoList, setInfoList] = useState<InfoListItem[]>([]);
-  const { selectModelName } = domainManger;
 
   useEffect(() => {
     if (!nodeData) {
@@ -87,7 +82,7 @@ const NodeInfoDrawer: React.FC<Props> = ({
           {
             label: '所属模型',
             value: modelName,
-            content: <Tag>{modelName || selectModelName}</Tag>,
+            content: <Tag>{modelName}</Tag>,
           },
 
           {
@@ -266,6 +261,4 @@ const NodeInfoDrawer: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(NodeInfoDrawer);
+export default NodeInfoDrawer

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { connect } from 'umi';
-import type { StateType } from '../model';
-import type { Dispatch } from 'umi';
+import { useModel } from 'umi';
 import {
   typeConfigs,
   formatterRelationData,
@@ -37,12 +35,9 @@ import GraphLegendVisibleModeItem from './components/GraphLegendVisibleModeItem'
 import ModelRelationFormDrawer from './components/ModelRelationFormDrawer';
 import ControlToolBar from './components/ControlToolBar';
 
-type Props = {
-  domainManger: StateType;
-  dispatch: Dispatch;
-};
+type Props = {};
 
-const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
+const SemanticGraph: React.FC<Props> = ({}) => {
   const ref = useRef(null);
   const dataSourceRef = useRef<ISemantic.IDomainSchemaRelaList>([]);
   const [graphData, setGraphData] = useState<TreeGraphData>();
@@ -63,7 +58,15 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
 
   const [dataSourceInfoList, setDataSourceInfoList] = useState<IDataSource.IDataSourceItem[]>([]);
 
-  const { dimensionList, metricList, selectModelId: modelId, selectDomainId } = domainManger;
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+  const metricModel = useModel('SemanticModel.metricData');
+
+  const { selectDomainId, selectDomainName } = domainModel;
+  const { selectModelId: modelId } = modelModel;
+  const { MdimensionList: dimensionList, MrefreshDimensionList } = dimensionModel;
+  const { MmetricList: metricList, MrefreshMetricList } = metricModel;
 
   const dimensionListRef = useRef<ISemantic.IDimensionItem[]>([]);
   const metricListRef = useRef<ISemantic.IMetricItem[]>([]);
@@ -134,7 +137,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
 
     const graphRootData = {
       id: 'root',
-      name: domainManger.selectDomainName,
+      name: selectDomainName,
       children: relationData,
     };
     return graphRootData;
@@ -211,7 +214,6 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
   const saveRelationConfig = async (domainId: number, graphData: any) => {
     const configData = {
       id: relationConfig?.id,
-      // modelId: domainManger.selectModelId,
       domainId: domainId,
       type: 'modelEdgeRelation',
       config: JSON.stringify(graphData),
@@ -1050,20 +1052,10 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
           updateGraphData();
           setInfoDrawerVisible(false);
           if (eventName === SemanticNodeType.METRIC) {
-            dispatch({
-              type: 'domainManger/queryMetricList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshMetricList({ modelId });
           }
           if (eventName === SemanticNodeType.DIMENSION) {
-            dispatch({
-              type: 'domainManger/queryDimensionList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshDimensionList({ modelId });
           }
         }}
       />
@@ -1078,12 +1070,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
           onSubmit={() => {
             setCreateDimensionModalVisible(false);
             updateGraphData();
-            dispatch({
-              type: 'domainManger/queryDimensionList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshDimensionList({ modelId });
           }}
           onCancel={() => {
             setCreateDimensionModalVisible(false);
@@ -1101,12 +1088,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
           onSubmit={() => {
             setCreateMetricModalVisible(false);
             updateGraphData();
-            dispatch({
-              type: 'domainManger/queryMetricList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshMetricList({ modelId });
           }}
           onCancel={() => {
             setCreateMetricModalVisible(false);
@@ -1134,18 +1116,8 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
             setConfirmModalOpenState(false);
             updateGraphData();
             graphShowTypeState === SemanticNodeType.DIMENSION
-              ? dispatch({
-                  type: 'domainManger/queryDimensionList',
-                  payload: {
-                    modelId,
-                  },
-                })
-              : dispatch({
-                  type: 'domainManger/queryMetricList',
-                  payload: {
-                    modelId,
-                  },
-                });
+              ? MrefreshDimensionList({ modelId })
+              : MrefreshMetricList({ modelId });
           }}
           onCancelClick={() => {
             setConfirmModalOpenState(false);
@@ -1154,7 +1126,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
         />
       }
       <ModelRelationFormDrawer
-        domainId={domainManger.selectDomainId}
+        domainId={selectDomainId}
         nodeModel={nodeModel}
         relationData={currentRelationDataItem}
         onClose={() => {
@@ -1176,6 +1148,4 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DomainManger);
+export default SemanticGraph;

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraphCanvas.tsx

@@ -8,12 +8,12 @@ import { SemanticNodeType } from './enum';
 import SemanticGraph from './SemanticGraph';
 
 type Props = {
-  domainManger: StateType;
+
 };
 
-const SemanticGraphCanvas: React.FC<Props> = ({ domainManger }) => {
+const SemanticGraphCanvas: React.FC<Props> = ({  }) => {
   // const [graphShowType, setGraphShowType] = useState<SemanticNodeType>(SemanticNodeType.DIMENSION);
-  const { selectDomainId } = domainManger;
+
   return (
     <div className={styles.semanticGraphCanvas}>
       {/* <div className={styles.toolbar}>
@@ -46,6 +46,4 @@ const SemanticGraphCanvas: React.FC<Props> = ({ domainManger }) => {
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(SemanticGraphCanvas);
+export default SemanticGraphCanvas;

webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx

@@ -1,11 +1,9 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
+import { message, Button, Space, Popconfirm } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import { StatusEnum } from '../../enum';
-import type { Dispatch } from 'umi';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
+import { useModel } from '@umijs/max';
 import { deleteView, updateView, getViewList, getAllModelByDomainId } from '../../service';
 import ViewCreateFormModal from './ViewCreateFormModal';
 import moment from 'moment';
@@ -17,12 +15,12 @@ import ViewSearchFormModal from './ViewSearchFormModal';
 type Props = {
   disabledEdit?: boolean;
   modelList: ISemantic.IModelItem[];
-  dispatch: Dispatch;
-  domainManger: StateType;
 };
 
-const DataSetTable: React.FC<Props> = ({ disabledEdit = false, domainManger }) => {
-  const { selectDomainId } = domainManger;
+const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const { selectDomainId } = domainModel;
+
   const [viewItem, setViewItem] = useState<ISemantic.IViewItem>();
   const [saveLoading, setSaveLoading] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
@@ -254,6 +252,4 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false, domainManger }) =
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DataSetTable);
+export default DataSetTable;

webapp/packages/supersonic-fe/src/pages/SemanticModel/View/index.tsx

@@ -1,16 +1,11 @@
 import React from 'react';
 import { ISemantic } from '../data';
-import { connect } from 'umi';
-import type { Dispatch } from 'umi';
-import type { StateType } from '../model';
 import DataSetTable from './components/DataSetTable';
 
 type Props = {
   disabledEdit?: boolean;
   modelList: ISemantic.IModelItem[];
   onModelChange?: (model?: ISemantic.IModelItem) => void;
-  domainManger: StateType;
-  dispatch: Dispatch;
 };
 
 const View: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange }) => {
@@ -25,6 +20,4 @@ const View: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(View);
+export default View

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

@@ -2,9 +2,7 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Button, Space, Popconfirm, Input, Tag, Select } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
-import { connect } from 'umi';
-import type { StateType } from '../model';
+import { useModel } from '@umijs/max';
 import { StatusEnum } from '../enum';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
 import {
@@ -22,13 +20,15 @@ import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
 import { ColumnsConfig } from './TableColumnRender';
 import styles from './style.less';
 
-type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
-};
+type Props = {};
 
-const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
-  const { selectModelId: modelId, selectDomainId: domainId } = domainManger;
+const ClassDimensionTable: React.FC<Props> = ({}) => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+  const { selectDomainId: domainId } = domainModel;
+  const { selectModelId: modelId } = modelModel;
+  const { MrefreshDimensionList } = dimensionModel;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
   const [dataSourceList, setDataSourceList] = useState<IDataSource.IDataSourceItem[]>([]);
@@ -103,12 +103,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     setLoading(false);
     if (code === 200) {
       queryDimensionList({ ...filterParams, ...pagination });
-      dispatch({
-        type: 'domainManger/queryDimensionList',
-        payload: {
-          modelId,
-        },
-      });
+      MrefreshDimensionList({ modelId });
       return;
     }
     message.error(msg);
@@ -131,12 +126,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     setLoading(false);
     if (code === 200) {
       queryDimensionList({ ...filterParams, ...pagination });
-      dispatch({
-        type: 'domainManger/queryDimensionList',
-        payload: {
-          modelId,
-        },
-      });
+      MrefreshDimensionList({ modelId });
       return;
     }
     message.error(msg);
@@ -447,12 +437,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           onSubmit={() => {
             setCreateModalVisible(false);
             queryDimensionList({ ...filterParams, ...defaultPagination });
-            dispatch({
-              type: 'domainManger/queryDimensionList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshDimensionList({ modelId });
             return;
           }}
           onCancel={() => {
@@ -466,22 +451,13 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           open={dimensionValueSettingModalVisible}
           dimensionItem={dimensionItem}
           onCancel={() => {
-            dispatch({
-              type: 'domainManger/queryDimensionList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshDimensionList({ modelId });
+
             setDimensionValueSettingModalVisible(false);
           }}
           onSubmit={() => {
             queryDimensionList({ ...filterParams, ...defaultPagination });
-            dispatch({
-              type: 'domainManger/queryDimensionList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshDimensionList({ modelId });
             setDimensionValueSettingModalVisible(false);
           }}
         />
@@ -489,6 +465,4 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ClassDimensionTable);
+export default ClassDimensionTable;

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

@@ -2,10 +2,8 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Button, Space, Popconfirm, Input, Select, Tag } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
 import { StatusEnum } from '../enum';
-import { connect, history } from 'umi';
-import type { StateType } from '../model';
+import { useModel } from '@umijs/max';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
 import {
   queryMetric,
@@ -25,12 +23,16 @@ import { ColumnsConfig } from './TableColumnRender';
 
 type Props = {
   onEmptyMetricData?: () => void;
-  dispatch: Dispatch;
-  domainManger: StateType;
 };
 
-const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, dispatch }) => {
-  const { selectModelId: modelId, selectDomainId } = domainManger;
+const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const metricModel = useModel('SemanticModel.metricData');
+  const { selectDomainId } = domainModel;
+  const { selectModelId: modelId } = modelModel;
+  const { MrefreshMetricList } = metricModel;
+
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -60,12 +62,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, di
     });
     if (code === 200) {
       queryMetricList({ ...filterParams, ...defaultPagination });
-      dispatch({
-        type: 'domainManger/queryMetricList',
-        payload: {
-          modelId,
-        },
-      });
+      MrefreshMetricList({ modelId });
       return;
     }
     message.error(msg);
@@ -87,12 +84,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, di
     setLoading(false);
     if (code === 200) {
       queryMetricList({ ...filterParams, ...defaultPagination });
-      dispatch({
-        type: 'domainManger/queryMetricList',
-        payload: {
-          modelId,
-        },
-      });
+      MrefreshMetricList({ modelId });
       return;
     }
     message.error(msg);
@@ -108,12 +100,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, di
     });
     if (code === 200) {
       queryMetricList({ ...filterParams, ...defaultPagination });
-      dispatch({
-        type: 'domainManger/queryMetricList',
-        payload: {
-          modelId,
-        },
-      });
+      MrefreshMetricList({ modelId });
       return;
     }
     message.error(msg);
@@ -151,7 +138,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, di
     }
   };
 
-  const columnsConfig = ColumnsConfig();
+  const columnsConfig = ColumnsConfig({ indicatorInfo: { url: '/model/metric/edit/' } });
 
   const columns: ProColumns[] = [
     {
@@ -481,12 +468,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, di
           onSubmit={() => {
             setCreateModalVisible(false);
             queryMetricList({ ...filterParams, ...defaultPagination });
-            dispatch({
-              type: 'domainManger/queryMetricList',
-              payload: {
-                modelId,
-              },
-            });
+            MrefreshMetricList({ modelId });
           }}
           onCancel={() => {
             setCreateModalVisible(false);
@@ -496,6 +478,4 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, di
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ClassMetricTable);
+export default ClassMetricTable;

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

@@ -1,11 +1,8 @@
 import { Drawer, Modal, Card, Row, Col, message } from 'antd';
 import { ConsoleSqlOutlined, CoffeeOutlined } from '@ant-design/icons';
 import React, { useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
-import { connect } from 'umi';
 import ModelCreateForm from '../Datasource/components/ModelCreateForm';
-import { excuteSql, getModelDetail } from '../service';
-import type { StateType } from '../model';
+import { getModelDetail } from '../service';
 import DataSource from '../Datasource';
 import { IDataSource, ISemantic } from '../data';
 import styles from './style.less';
@@ -17,8 +14,6 @@ type Props = {
   onTypeChange?: (type: 'fast' | 'normal') => void;
   onSubmit?: () => void;
   onCancel?: () => void;
-  dispatch: Dispatch;
-  domainManger: StateType;
 };
 
 const ClassModelTypeModal: React.FC<Props> = ({
@@ -26,17 +21,12 @@ const ClassModelTypeModal: React.FC<Props> = ({
   onTypeChange,
   onSubmit,
   modelItem: modelBasicItem,
-  domainManger,
   onCancel,
-  dispatch,
 }) => {
-  const { selectDomainId } = domainManger;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
-
   const [dataSourceModalVisible, setDataSourceModalVisible] = useState(false);
   const [fastModeSql, setFastModeSql] = useState<string>('');
   const [sql, setSql] = useState<string>('');
-
   const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState<boolean>(false);
   const [dataSourceEditOpen, setDataSourceEditOpen] = useState<boolean>(false);
   const [currentDatabaseId, setCurrentDatabaseId] = useState<number>();
@@ -77,22 +67,12 @@ const ClassModelTypeModal: React.FC<Props> = ({
   const queryDataBaseExcuteSql = (tableName: string) => {
     const sql = `select * from ${tableName}`;
     setFastModeSql(sql);
-
-    dispatch({
-      type: 'domainManger/queryDataBaseExcuteSql',
-      payload: {
-        sql,
-        domainId: selectDomainId,
-        tableName,
-      },
-    });
   };
   const handleCancel = () => {
     onCancel?.();
   };
 
   useEffect(() => {
-    // queryTableColumnListByScript(modelItem);
     setSql(modelItem?.modelDetail?.sqlQuery);
 
     const modelDetailFields = modelItem?.modelDetail?.fields;
@@ -135,7 +115,7 @@ const ClassModelTypeModal: React.FC<Props> = ({
               cover={
                 <CoffeeOutlined
                   width={240}
-                  style={{ paddingTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
+                  style={{ marginTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
                 />
               }
             >
@@ -154,7 +134,7 @@ const ClassModelTypeModal: React.FC<Props> = ({
               style={{ height: 220 }}
               cover={
                 <ConsoleSqlOutlined
-                  style={{ paddingTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
+                  style={{ marginTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
                 />
               }
             >
@@ -233,6 +213,4 @@ const ClassModelTypeModal: React.FC<Props> = ({
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ClassModelTypeModal);
+export default ClassModelTypeModal;

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

@@ -4,8 +4,6 @@ import type { TransferItem } from 'antd/es/transfer';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import difference from 'lodash/difference';
 import React, { useState, useEffect } from 'react';
-import { connect } from 'umi';
-import type { StateType } from '../model';
 import TransTypeTag from './TransTypeTag';
 import TableTitleTooltips from '../components/TableTitleTooltips';
 import { ISemantic } from '../data';
@@ -23,7 +21,6 @@ interface RecordType {
 
 type Props = {
   metricItem: ISemantic.IMetricItem;
-  domainManger: StateType;
   relationsInitialValue?: ISemantic.IDrillDownDimensionItem[];
   onChange: (relations: ISemantic.IDrillDownDimensionItem[]) => void;
 };
@@ -31,11 +28,9 @@ type Props = {
 const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
   metricItem,
   relationsInitialValue,
-  domainManger,
   onChange,
 }) => {
   const [targetKeys, setTargetKeys] = useState<string[]>([]);
-  const { selectModelId: modelId } = domainManger;
   const [checkedMap, setCheckedMap] = useState<Record<string, ISemantic.IDrillDownDimensionItem>>(
     {},
   );
@@ -47,7 +42,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
   }, [metricItem, relationsInitialValue]);
 
   const queryDimensionList = async () => {
-    const { code, data, msg } = await getDimensionInModelCluster(metricItem?.modelId || modelId);
+    const { code, data, msg } = await getDimensionInModelCluster(metricItem?.modelId);
     if (code === 200 && Array.isArray(data)) {
       setDimensionList(data);
     } else {
@@ -220,7 +215,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
           selectedKeys: listSelectedKeys,
           disabled: listDisabled,
         }) => {
-          const columns = direction === 'left' ? leftColumns : rightColumns;
+          const columns: any = direction === 'left' ? leftColumns : rightColumns;
           const rowSelection: TableRowSelection<TransferItem> = {
             getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
             onSelectAll(selected, selectedRows) {
@@ -277,6 +272,4 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DimensionMetricRelationTableTransfer);
+export default DimensionMetricRelationTableTransfer;

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

@@ -4,9 +4,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { ISemantic } from '../data';
 import CommonEditTable from './CommonEditTable';
 import { updateDimension, mockDimensionValuesAlias } from '../service';
-import { connect } from 'umi';
 import DimensionValueSettingForm from './Entity/DimensionValueSettingForm';
-import type { StateType } from '../model';
 
 export type CreateFormProps = {
   dimensionValueSettingList: ISemantic.IDimensionValueSettingItem[];
@@ -14,7 +12,6 @@ export type CreateFormProps = {
   dimensionItem: ISemantic.IDimensionItem;
   open: boolean;
   onSubmit: (values?: any) => void;
-  domainManger: StateType;
 };
 
 type TableDataSource = { techName: string; bizName: string; alias?: string[] };
@@ -24,11 +21,9 @@ const DimensionValueSettingModal: React.FC<CreateFormProps> = ({
   open,
   dimensionItem,
   dimensionValueSettingList,
-  domainManger,
   onSubmit,
 }) => {
   const [tableDataSource, setTableDataSource] = useState<TableDataSource[]>([]);
-  const { selectDomainId, selectModelId: modelId } = domainManger;
   const [dimValueMaps, setDimValueMaps] = useState<ISemantic.IDimensionValueSettingItem[]>([]);
   const [llmLoading, setLlmLoading] = useState<boolean>(false);
   const [menuKey, setMenuKey] = useState<string>('default');
@@ -49,7 +44,6 @@ const DimensionValueSettingModal: React.FC<CreateFormProps> = ({
     }
     const queryParams = {
       ...dimensionItem,
-      domainId: selectDomainId,
       ...fieldsValue,
     };
     const { code, msg } = await updateDimension(queryParams);
@@ -215,6 +209,4 @@ const DimensionValueSettingModal: React.FC<CreateFormProps> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DimensionValueSettingModal);
+export default DimensionValueSettingModal;

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

@@ -1,11 +1,9 @@
 import { DownOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Input, message, Tree, Popconfirm, Space, Tooltip, Row, Col, Button } from 'antd';
+import { Input, message, Tree, Popconfirm, Tooltip, Row, Col, Button } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 import { useEffect, useState } from 'react';
 import type { FC, Key } from 'react';
-import { connect } from 'umi';
-import type { Dispatch } from 'umi';
-import type { StateType } from '../model';
+import { useModel } from '@umijs/max';
 import { createDomain, updateDomain, deleteDomain } from '../service';
 import { treeParentKeyLists } from '../utils';
 import DomainInfoForm from './DomainInfoForm';
@@ -17,11 +15,7 @@ import { ISemantic } from '../data';
 const { Search } = Input;
 
 type DomainListProps = {
-  selectDomainId: number;
-  selectDomainName: string;
-  domainList: ISemantic.IDomainItem[];
   createDomainBtnVisible?: boolean;
-  dispatch: Dispatch;
   onCreateDomainBtnClick?: () => void;
   onTreeSelected?: (targetNodeData: ISemantic.IDomainItem) => void;
   onTreeDataUpdate?: () => void;
@@ -43,8 +37,6 @@ const projectTreeFlat = (projectTree: DataNode[], filterValue: string): DataNode
 };
 
 const DomainListTree: FC<DomainListProps> = ({
-  selectDomainId,
-  domainList,
   createDomainBtnVisible = true,
   onCreateDomainBtnClick,
   onTreeSelected,
@@ -56,6 +48,8 @@ const DomainListTree: FC<DomainListProps> = ({
   const [filterValue, setFliterValue] = useState<string>('');
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
   const [classList, setClassList] = useState<ISemantic.IDomainItem[]>([]);
+  const domainModel = useModel('SemanticModel.domainData');
+  const { selectDomainId, domainList } = domainModel;
 
   useEffect(() => {
     const treeData = addPathInTreeData(constructorClassTreeFromList(domainList));
@@ -68,7 +62,7 @@ const DomainListTree: FC<DomainListProps> = ({
     setFliterValue(value);
   };
 
-  const handleSelect = (selectedKeys: string, projectName: string) => {
+  const handleSelect = (selectedKeys: string) => {
     if (`${selectedKeys}` === `${selectDomainId}`) {
       return;
     }
@@ -135,7 +129,7 @@ const DomainListTree: FC<DomainListProps> = ({
         <span
           className={styles.projectItemTitle}
           onClick={() => {
-            handleSelect(id, name);
+            handleSelect(id);
           }}
         >
           {name}
@@ -195,11 +189,11 @@ const DomainListTree: FC<DomainListProps> = ({
     <div className={styles.domainList}>
       <div className={styles.searchContainer}>
         <Row style={{ gap: 10 }}>
-          <Col flex="1 1 215px">
+          <Col flex="1 1 150px">
             <Search
               allowClear
               className={styles.search}
-              placeholder="请输入主题域名称"
+              placeholder="请输入主题域"
               onSearch={onSearch}
             />
           </Col>
@@ -245,14 +239,4 @@ const DomainListTree: FC<DomainListProps> = ({
   );
 };
 
-export default connect(
-  ({
-    domainManger: { selectDomainId, selectDomainName, domainList },
-  }: {
-    domainManger: StateType;
-  }) => ({
-    selectDomainId,
-    selectDomainName,
-    domainList,
-  }),
-)(DomainListTree);
+export default DomainListTree;

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

@@ -1,26 +1,18 @@
 import { Tabs, Breadcrumb, Space, Radio } from 'antd';
 import React, { useRef, useEffect, useState } from 'react';
-import { connect, history } from 'umi';
-
+import { history, useModel } from '@umijs/max';
 import ClassDimensionTable from './ClassDimensionTable';
 import ClassMetricTable from './ClassMetricTable';
 import PermissionSection from './Permission/PermissionSection';
-// import ClassTagTable from '../Insights/components/ClassTagTable';
 import TagObjectTable from '../Insights/components/TagObjectTable';
 import TermTable from '../components/Term/TermTable';
 import OverView from './OverView';
 import styles from './style.less';
-import type { StateType } from '../model';
 import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
 import { ISemantic } from '../data';
 import SemanticGraphCanvas from '../SemanticGraphCanvas';
-// import HeadlessFlows from '../HeadlessFlows';
-// import SemanticFlows from '../SemanticFlows';
 import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
 import View from '../View';
-// import DatabaseTable from '../components/Database/DatabaseTable';
-
-import type { Dispatch } from 'umi';
 
 type Props = {
   isModel: boolean;
@@ -29,28 +21,24 @@ type Props = {
   handleModelChange: (model?: ISemantic.IModelItem) => void;
   onBackDomainBtnClick?: () => void;
   onMenuChange?: (menuKey: string) => void;
-  domainManger: StateType;
-  dispatch: Dispatch;
 };
 const DomainManagerTab: React.FC<Props> = ({
   isModel,
   activeKey,
   modelList,
-  domainManger,
   handleModelChange,
   onBackDomainBtnClick,
   onMenuChange,
 }) => {
   const initState = useRef<boolean>(false);
   const defaultTabKey = 'metric';
-  const {
-    selectDomainId,
-    selectModelId,
-    selectModelName,
-    selectDomainName,
-    domainData,
-    domainList,
-  } = domainManger;
+
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+
+  const { selectDomainId, selectDomainName, selectDomain: domainData, domainList } = domainModel;
+  const { selectModelId, selectModelName } = modelModel;
+
   useEffect(() => {
     initState.current = false;
   }, [selectModelId]);
@@ -238,7 +226,7 @@ const DomainManagerTab: React.FC<Props> = ({
               </Radio.Group>
             ) : undefined,
         }}
-        destroyInactiveTabPane
+        // destroyInactiveTabPane
         size="large"
         onChange={(menuKey: string) => {
           onMenuChange?.(menuKey);
@@ -248,6 +236,4 @@ const DomainManagerTab: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DomainManagerTab);
+export default DomainManagerTab;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx

@@ -3,8 +3,6 @@ import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
 import type { TransferItem } from 'antd/es/transfer';
 import difference from 'lodash/difference';
 import React from 'react';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
 import type { IChatConfig } from '../../data';
 import TransTypeTag from '../TransTypeTag';
 import { SemanticNodeType, TransType } from '../../enum';
@@ -17,7 +15,6 @@ interface RecordType {
 }
 
 type Props = {
-  domainManger: StateType;
   knowledgeInfosMap?: IChatConfig.IKnowledgeInfosItemMap;
   onKnowledgeInfosMapChange?: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
   [key: string]: any;
@@ -83,7 +80,7 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
           onItemSelect,
           selectedKeys: listSelectedKeys,
         }) => {
-          const columns = direction === 'left' ? leftColumns : rightColumns;
+          const columns:any = direction === 'left' ? leftColumns : rightColumns;
           const rowSelection: TableRowSelection<TransferItem> = {
             onSelectAll(selected, selectedRows) {
               const treeSelectedKeys = selectedRows.map(({ key }) => key);
@@ -119,6 +116,4 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DimensionMetricVisibleTableTransfer);
+export default DimensionMetricVisibleTableTransfer;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingForm.tsx

@@ -1,12 +1,11 @@
-import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import type { ForwardRefRenderFunction } from 'react';
+import { useState, useEffect } from 'react';
 import { Form, Switch, Space, Button, Tooltip, message, Select } from 'antd';
 import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import { useModel } from '@umijs/max';
 import { RedoOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import DisabledWheelNumberInput from '@/components/DisabledWheelNumberInput';
 import { formLayout } from '@/components/FormHelper/utils';
-import { ProCard } from  '@ant-design/pro-components';
-import { connect } from 'umi';
+import { ProCard } from '@ant-design/pro-components';
 import {
   DictTaskState,
   KnowledgeConfigTypeEnum,
@@ -26,7 +25,6 @@ import {
 } from '../../service';
 import type { ISemantic } from '../../data';
 import type { StateType } from '../../model';
-import { isString } from 'lodash';
 import styles from '../style.less';
 import CommonEditList from '../../components/CommonEditList';
 
@@ -34,7 +32,6 @@ type Props = {
   dataItem: ISemantic.IDimensionItem | ISemantic.ITagItem;
   type?: KnowledgeConfigTypeEnum;
   onSubmit?: () => void;
-  domainManger: StateType;
 };
 
 const FormItem = Form.Item;
@@ -42,11 +39,10 @@ const FormItem = Form.Item;
 const DimensionValueSettingForm: React.FC<Props> = ({
   dataItem,
   type = KnowledgeConfigTypeEnum.DIMENSION,
-  domainManger,
 }) => {
   const [form] = Form.useForm();
-  const { selectDomainId } = domainManger;
-  const exchangeFields = ['blackList', 'whiteList'];
+  const domainModel = useModel('SemanticModel.domainData');
+  const { selectDomainId } = domainModel;
   const [dimensionVisible, setDimensionVisible] = useState<boolean>(false);
   const [taskItemState, setTaskItemState] = useState<ISemantic.IDictKnowledgeTaskItem>();
   const [saveLoading, setSaveLoading] = useState<boolean>(false);
@@ -484,6 +480,4 @@ const DimensionValueSettingForm: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DimensionValueSettingForm);
+export default DimensionValueSettingForm;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/RecommendedQuestionsSection.tsx

@@ -1,18 +1,17 @@
 import { message } from 'antd';
 import React, { useState, useEffect } from 'react';
-import { connect } from 'umi';
+import { useModel } from '@umijs/max';
 import type { StateType } from '../../model';
 import { getDomainExtendConfig, addDomainExtend, editDomainExtend } from '../../service';
-import { ProCard } from  '@ant-design/pro-components';
+import { ProCard } from '@ant-design/pro-components';
 
 import TextAreaCommonEditList from '../../components/CommonEditList/TextArea';
 
-type Props = {
-  domainManger: StateType;
-};
+type Props = {};
 
-const RecommendedQuestionsSection: React.FC<Props> = ({ domainManger }) => {
-  const { selectModelId: modelId } = domainManger;
+const RecommendedQuestionsSection: React.FC<Props> = ({}) => {
+  const modelModel = useModel('SemanticModel.modelData');
+  const { selectModelId: modelId } = modelModel;
 
   const [questionData, setQuestionData] = useState<string[]>([]);
   const [currentRecordId, setCurrentRecordId] = useState<number>(0);
@@ -85,6 +84,4 @@ const RecommendedQuestionsSection: React.FC<Props> = ({ domainManger }) => {
     </div>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(RecommendedQuestionsSection);
+export default RecommendedQuestionsSection;

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

@@ -41,10 +41,10 @@ import { history } from 'umi';
 
 export type CreateFormProps = {
   datasourceId?: number;
-  domainId: number;
-  modelId: number;
+  domainId?: number;
+  modelId?: number;
   createModalVisible: boolean;
-  metricItem: any;
+  metricItem?: ISemantic.IMetricItem;
   onCancel?: () => void;
   onSubmit?: (values: any) => void;
 };

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Input, Space, Tag } from 'antd';
+import { Input, Space, Tag, Divider } from 'antd';
 import { ProTable } from '@ant-design/pro-components';
 import { ProCard } from '@ant-design/pro-components';
 import SqlEditor from '@/components/SqlEditor';
@@ -94,7 +94,7 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
     {
       dataIndex: 'constraint',
       title: '限定条件',
-      width: 250,
+      width: 350,
       tooltip:
         '该限定条件用于在计算指标时限定口径，作用于度量，所用于过滤的维度必须在创建模型的时候被标记为日期或者维度，不需要加where关键字。比如：维度A="值1" and 维度B="值2"',
       render: (_: any, record: any) => {
@@ -103,6 +103,7 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
           <TextArea
             placeholder="请输入限定条件"
             value={constraint}
+            style={{ height: 42 }}
             disabled={!selectedKeysMap[bizName]}
             onChange={(event) => {
               const { value } = event.target;
@@ -129,7 +130,7 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
     {
       dataIndex: 'agg',
       title: '聚合函数',
-      width: 80,
+      width: 150,
     },
   ];
 
@@ -201,12 +202,13 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
             },
           }}
           pagination={{ defaultPageSize: 10 }}
-          size="small"
+          // size="small"
           options={false}
           tableAlertRender={false}
-          scroll={{ y: 500 }}
+          scroll={{ y: 700 }}
           rowSelection={rowSelection}
         />
+        <Divider style={{ marginBottom: 0 }} />
         <ProCard
           title={<FormLabelRequire title="表达式" />}
           // tooltip="由于度量已自带聚合函数，因此通过度量创建指标时，表达式中无需再写聚合函数，如

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

@@ -3,10 +3,8 @@ import { ProTable } from '@ant-design/pro-components';
 import { message, Button, Space, Popconfirm, Input } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import { StatusEnum } from '../enum';
-import type { Dispatch } from 'umi';
-import { connect, history } from 'umi';
-import type { StateType } from '../model';
-import { deleteModel, updateModel } from '../service';
+import { useModel } from '@umijs/max';
+import { deleteModel, updateModel, batchUpdateModelStatus } from '../service';
 import ClassModelTypeModal from './ClassModelTypeModal';
 import { ColumnsConfig } from './TableColumnRender';
 import TableHeaderFilter from './TableHeaderFilter';
@@ -18,18 +16,14 @@ type Props = {
   disabledEdit?: boolean;
   modelList: ISemantic.IModelItem[];
   onModelChange?: (model?: ISemantic.IModelItem) => void;
-  dispatch: Dispatch;
-  domainManger: StateType;
 };
 
-const ModelTable: React.FC<Props> = ({
-  modelList,
-  disabledEdit = false,
-  onModelChange,
-  dispatch,
-  domainManger,
-}) => {
-  const { selectDomainId, modelTableHistoryParams } = domainManger;
+const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange }) => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const { selectDomainId } = domainModel;
+  const { modelTableHistoryParams, setModelTableHistoryParams } = modelModel;
+
   const [modelItem, setModelItem] = useState<ISemantic.IModelItem>();
   const [saveLoading, setSaveLoading] = useState<boolean>(false);
   const [filterParams, setFilterParams] = useState<Record<string, any>>({});
@@ -63,12 +57,9 @@ const ModelTable: React.FC<Props> = ({
   }, []);
 
   const dipatchParams = (params: Record<string, any>) => {
-    dispatch({
-      type: 'domainManger/setModelTableHistoryParams',
-      payload: {
-        [selectDomainId]: {
-          ...params,
-        },
+    setModelTableHistoryParams({
+      [selectDomainId]: {
+        ...params,
       },
     });
   };
@@ -81,17 +72,19 @@ const ModelTable: React.FC<Props> = ({
     }
   };
 
-  const updateModelStatus = async (modelData: ISemantic.IModelItem) => {
-    setSaveLoading(true);
-    const { code, msg } = await updateModel({
-      ...modelData,
+  const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    const { code, msg } = await batchUpdateModelStatus({
+      ids,
+      status,
     });
-    setSaveLoading(false);
     if (code === 200) {
       onModelChange?.();
-    } else {
-      message.error(msg);
+      return;
     }
+    message.error(msg);
   };
 
   const columnsConfig = ColumnsConfig();
@@ -178,10 +171,7 @@ const ModelTable: React.FC<Props> = ({
                 type="link"
                 key="editStatusOfflineBtn"
                 onClick={() => {
-                  updateModelStatus({
-                    ...record,
-                    status: StatusEnum.OFFLINE,
-                  });
+                  queryBatchUpdateStatus([record.id], StatusEnum.OFFLINE);
                 }}
               >
                 停用
@@ -191,10 +181,7 @@ const ModelTable: React.FC<Props> = ({
                 type="link"
                 key="editStatusOnlineBtn"
                 onClick={() => {
-                  updateModelStatus({
-                    ...record,
-                    status: StatusEnum.ONLINE,
-                  });
+                  queryBatchUpdateStatus([record.id], StatusEnum.ONLINE);
                 }}
               >
                 启用
@@ -308,6 +295,4 @@ const ModelTable: React.FC<Props> = ({
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(ModelTable);
+export default ModelTable;

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

@@ -1,16 +1,11 @@
 import React from 'react';
 import { ISemantic } from '../data';
-import { connect } from 'umi';
-import type { Dispatch } from 'umi';
-import type { StateType } from '../model';
 import ModelTable from './ModelTable';
 
 type Props = {
   disabledEdit?: boolean;
   modelList: ISemantic.IModelItem[];
   onModelChange?: (model?: ISemantic.IModelItem) => void;
-  domainManger: StateType;
-  dispatch: Dispatch;
 };
 
 const OverView: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange }) => {
@@ -21,6 +16,4 @@ const OverView: React.FC<Props> = ({ modelList, disabledEdit = false, onModelCha
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(OverView);
+export default OverView

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx

@@ -2,33 +2,27 @@ import React, { useState, useEffect } from 'react';
 import { Form, Input, Switch, message } from 'antd';
 import SelectPartner from '@/components/SelectPartner';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
-import { connect } from 'umi';
-import type { Dispatch } from 'umi';
-import type { StateType } from '../../model';
+import { useModel } from '@umijs/max';
 import FormItemTitle from '@/components/FormHelper/FormItemTitle';
 import { updateDomain, updateModel, getDomainDetail, getModelDetail } from '../../service';
 
 import styles from '../style.less';
 type Props = {
   permissionTarget: 'model' | 'domain';
-  dispatch: Dispatch;
-  domainManger: StateType;
   onSubmit?: (data?: any) => void;
   onValuesChange?: (value, values) => void;
 };
 
 const FormItem = Form.Item;
 
-const PermissionAdminForm: React.FC<Props> = ({
-  permissionTarget,
-  domainManger,
-  onValuesChange,
-}) => {
+const PermissionAdminForm: React.FC<Props> = ({ permissionTarget, onValuesChange }) => {
   const [form] = Form.useForm();
   const [isOpenState, setIsOpenState] = useState<boolean>(true);
   const [classDetail, setClassDetail] = useState<any>({});
-  const { selectModelId: modelId, selectDomainId } = domainManger;
-  const { APP_TARGET } = process.env;
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const { selectDomainId } = domainModel;
+  const { selectModelId: modelId } = modelModel;
 
   const queryClassDetail = async () => {
     const selectId = permissionTarget === 'model' ? modelId : selectDomainId;
@@ -146,6 +140,4 @@ const PermissionAdminForm: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(PermissionAdminForm);
+export default PermissionAdminForm;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateDrawer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Button, message, Form, Space, Drawer, Input } from 'antd';
 import { ProCard } from '@ant-design/pro-components';
-import { connect } from 'umi';
+import { useModel } from 'umi';
 import { createGroupAuth, updateGroupAuth } from '../../service';
 import PermissionCreateForm from './PermissionCreateForm';
 import type { StateType } from '../../model';
@@ -12,7 +12,6 @@ import { wrapperTransTypeAndId } from '../../utils';
 import styles from '../style.less';
 
 type Props = {
-  domainManger: StateType;
   permissonData: any;
   onCancel: () => void;
   visible: boolean;
@@ -21,13 +20,19 @@ type Props = {
 const FormItem = Form.Item;
 const TextArea = Input.TextArea;
 const PermissionCreateDrawer: React.FC<Props> = ({
-  domainManger,
   visible,
   permissonData,
   onCancel,
   onSubmit,
 }) => {
-  const { dimensionList, metricList, selectModelId: modelId } = domainManger;
+  const modelModel = useModel('SemanticModel.modelData');
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+  const metricModel = useModel('SemanticModel.metricData');
+
+  const { selectModelId: modelId } = modelModel;
+  const { MdimensionList: dimensionList } = dimensionModel;
+  const { MmetricList: metricList } = metricModel;
+
   const [form] = Form.useForm();
   const basicInfoFormRef = useRef<any>(null);
   const [selectedDimensionKeyList, setSelectedDimensionKeyList] = useState<string[]>([]);
@@ -217,6 +222,4 @@ const PermissionCreateDrawer: React.FC<Props> = ({
   );
 };
 
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(PermissionCreateDrawer);
+export default PermissionCreateDrawer;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionSection.tsx

@@ -1,16 +1,11 @@
 import { Space } from 'antd';
 import React from 'react';
-import type { Dispatch } from 'umi';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
-import { ProCard } from  '@ant-design/pro-components';
+import { ProCard } from '@ant-design/pro-components';
 import PermissionTable from './PermissionTable';
 import PermissionAdminForm from './PermissionAdminForm';
 
 type Props = {
   permissionTarget: 'model' | 'domain';
-  dispatch: Dispatch;
-  domainManger: StateType;
 };
 
 const PermissionSection: React.FC<Props> = ({ permissionTarget }) => {
@@ -27,6 +22,4 @@ const PermissionSection: React.FC<Props> = ({ permissionTarget }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(PermissionSection);
+export default PermissionSection;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx

@@ -2,24 +2,29 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Button, Space, Popconfirm, Tooltip } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import type { Dispatch } from 'umi';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
+import { useModel } from '@umijs/max';
 import { getGroupAuthInfo, removeGroupAuth } from '../../service';
 import { getOrganizationTree } from '@/components/SelectPartner/service';
 import { getAllUser } from '@/components/SelectTMEPerson/service';
 import PermissionCreateDrawer from './PermissionCreateDrawer';
 import { findDepartmentTree } from '@/pages/SemanticModel/utils';
 
-type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
-};
+type Props = {};
 
-const PermissionTable: React.FC<Props> = ({ domainManger }) => {
+const PermissionTable: React.FC<Props> = ({}) => {
   const { APP_TARGET } = process.env;
   const isInner = APP_TARGET === 'inner';
-  const { dimensionList, metricList, selectModelId: modelId } = domainManger;
+
+  const modelModel = useModel('SemanticModel.modelData');
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+  const metricModel = useModel('SemanticModel.metricData');
+  const allUserModel = useModel('allUserData');
+  const { allUserList, MrefreshUserList } = allUserModel;
+
+  const { selectModelId: modelId } = modelModel;
+  const { MdimensionList: dimensionList } = dimensionModel;
+  const { MmetricList: metricList } = metricModel;
+
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
 
   const [permissonData, setPermissonData] = useState<any>({});
@@ -59,16 +64,19 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
   };
 
   const queryTmePersonData = async () => {
-    const { code, data } = await getAllUser();
-    if (code === 200 || Number(code) === 0) {
-      setTmePerson(data);
-    }
+    const list = await MrefreshUserList();
+
+    setTmePerson(list);
   };
   useEffect(() => {
     if (isInner) {
       queryDepartmentData();
     }
-    queryTmePersonData();
+    if (Array.isArray(allUserList) && allUserList.length > 0) {
+      setTmePerson(allUserList);
+    } else {
+      queryTmePersonData();
+    }
   }, []);
 
   const columns: ProColumns[] = [
@@ -273,6 +281,4 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(PermissionTable);
+export default PermissionTable;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Term/TermTable.tsx

@@ -2,10 +2,9 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Button, Space, Popconfirm, Typography } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
+import { useModel } from '@umijs/max';
 import { getTermList, saveOrUpdate, deleteTerm } from '../../service';
-
+import dayjs from 'dayjs';
 import styles from '../style.less';
 import { ISemantic } from '../../data';
 import { ColumnsConfig } from '../../components/TableColumnRender';
@@ -13,12 +12,11 @@ import TermCreateForm from './TermCreateForm';
 
 const { Paragraph } = Typography;
 
-type Props = {
-  domainManger: StateType;
-};
+type Props = {};
 
-const TermTable: React.FC<Props> = ({ domainManger }) => {
-  const { selectDomainId } = domainManger;
+const TermTable: React.FC<Props> = ({}) => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const { selectDomainId } = domainModel;
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [termItem, setTermItem] = useState<ISemantic.ITermItem>();
 
@@ -96,7 +94,7 @@ const TermTable: React.FC<Props> = ({ domainManger }) => {
       dataIndex: 'alias',
       title: '近义词',
       search: false,
-      render: (_: string[]) => {
+      render: (_) => {
         const alias = Array.isArray(_) ? _.join(',') : '-';
         return (
           <Paragraph ellipsis={{ tooltip: alias, rows: 3 }} style={{ width: 350, marginBottom: 0 }}>
@@ -106,11 +104,24 @@ const TermTable: React.FC<Props> = ({ domainManger }) => {
       },
     },
 
+    {
+      dataIndex: 'createdBy',
+      title: '创建人',
+      search: false,
+    },
+    {
+      dataIndex: 'updatedAt',
+      title: '更新时间',
+      search: false,
+      render: (value: any) => {
+        return value && value !== '-' ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-';
+      },
+    },
+
     {
       dataIndex: 'description',
       title: '描述',
       search: false,
-      render: columnsConfig.description.render,
     },
 
     {
@@ -194,6 +205,4 @@ const TermTable: React.FC<Props> = ({ domainManger }) => {
     </>
   );
 };
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(TermTable);
+export default TermTable;

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

@@ -13,7 +13,7 @@
     position: relative;
     .sider {
       flex: 0 0 auto;
-      width: 285px;
+      width: 250px;
       border-right: 5px solid #eee;
       position: relative;
       transition: all 0.2s,background 0s;
@@ -81,7 +81,7 @@
         }
       }
       .search {
-        width: 205px;
+        width: 175px;
         margin: 10px 0 10px 16px;
       }
     
@@ -235,7 +235,7 @@
   width: 100%;
   overflow: hidden;
   .searchContainer {
-    width: 280px;
+    width: 250px;
     padding:3px 0;
     border-bottom: 1px solid #eee;
   }
@@ -369,12 +369,12 @@
 
 .desc {
   margin: 0;
-  padding: 25px;
+  // padding: 25px;
   color: #667085;
   font-size: 14px;
-  border-bottom: 1px solid #eee;
-  border-top: 1px solid #eee;
-  margin-bottom: 10px;
+  // border-bottom: 1px solid #eee;
+  // border-top: 1px solid #eee;
+  // margin-bottom: 10px;
   .markerTag {
     color: #2499ef;
     font-size: 14px;
@@ -398,4 +398,90 @@
     width: max-content;
     display: flex;
   }
-}
+}
+
+
+.infoCard {
+    min-height: 100%;
+    background-color: rgb(255, 255, 255);
+    color: rgb(38, 38, 38);
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    position: relative;
+    border: 1px solid rgb(230, 235, 241);
+    border-radius: 4px;
+    box-shadow: inherit;
+    .infoCardTitle {
+      display: flex;
+      border-bottom: 1px solid #e6ebf1;
+      padding: 20px 20px 20px 40px;
+      align-items: center;
+      color: rgb(38, 38, 38);
+      margin: 0px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.57;
+      font-family: "tencentFont", sans-serif;
+    }
+    .infoCardContainer {
+      padding: 20px;
+      height: calc(100vh - 260px);
+      overflow: scroll;
+    }
+    .infoCardFooter {
+      border-top: 1px solid #e6ebf1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex: 0 0 auto;
+      padding: 20px;
+      .infoCardFooterContainer {
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: wrap;
+        // width: 100%;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+}
+
+.supersonicForm {
+  padding: 0 20px;
+  :global {
+    .ant-input-search .ant-input-search-button {
+      height: 42px;
+    }
+    .ant-form-item .ant-form-item-label > label {
+      color:#262626;
+    }
+    .ant-form-item-label {
+      font-family: "tencentFont", sans-serif;
+    }
+    .ant-input {
+      padding: 9px 14px 9px 12px;
+    }
+    .ant-select {
+      &.ant-select-single {
+        height: auto;
+      }
+      &.ant-select-multiple {
+        .ant-select-selector {
+          padding: 6px 14px 6px 12px;
+         }
+      }
+    .ant-select-selector {
+      padding: 5px 14px 5px 12px;
+      .ant-select-selection-placeholder {
+        padding: 0px 8px 0px 8px;
+      }
+      .ant-select-selection-overflow-item {
+        .ant-select-selection-item {
+          color: rgb(22, 119, 255);
+          background-color: rgb(230, 244, 255);
+        }
+      }
+    }
+  }
+  }
+}
+

webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts

@@ -285,6 +285,7 @@ export declare namespace ISemantic {
     hasAdminRes: boolean;
     type: string;
     classifications: string[];
+    isTag: 0 | 1;
     // typeParams: IMeasureTypeParams;
     metricDefineType: METRIC_DEFINE_TYPE;
     metricDefineByMeasureParams: IMeasureTypeParams;

webapp/packages/supersonic-fe/src/pages/SemanticModel/model.ts

@@ -1,197 +0,0 @@
-import type { Reducer, Effect } from 'umi';
-import { message } from 'antd';
-import { ISemantic } from './data';
-import { getDimensionList, queryMetric, excuteSql, getDatabaseList } from './service';
-
-export type StateType = {
-  current: number;
-  pageSize: number;
-  selectModelId: number;
-  selectDomainId: number;
-  selectDomainName: string;
-  selectModelName: string;
-  dimensionList: ISemantic.IDimensionList;
-  metricList: ISemantic.IMetricList;
-  searchParams: Record<string, any>;
-  dataBaseResultColsMap: any;
-  databaseConfigList: any[];
-  domainData?: ISemantic.IDomainItem;
-  modelData?: ISemantic.IDomainItem;
-  domainList: ISemantic.IDomainItem[];
-  modelTableHistoryParams?: Record<string, any>;
-};
-
-export type ModelType = {
-  namespace: string;
-  state: StateType;
-  effects: {
-    queryDimensionList: Effect;
-    queryMetricList: Effect;
-    queryDataBaseExcuteSql: Effect;
-    queryDatabaseList: Effect;
-  };
-  reducers: {
-    setSelectDomain: Reducer<StateType>;
-    setSelectModel: Reducer<StateType>;
-    setDomainList: Reducer<StateType>;
-    setPagination: Reducer<StateType>;
-    setDimensionList: Reducer<StateType>;
-    setDataBaseScriptColumn: Reducer<StateType>;
-    setDatabaseConfigList: Reducer<StateType>;
-    setMetricList: Reducer<StateType>;
-    setModelTableHistoryParams: Reducer<StateType>;
-    reset: Reducer<StateType>;
-  };
-};
-
-export const defaultState: StateType = {
-  current: 1,
-  pageSize: 20,
-  selectDomainId: 0,
-  selectModelId: 0,
-  modelData: undefined,
-  selectDomainName: '',
-  selectModelName: '',
-  searchParams: {},
-  dimensionList: [],
-  metricList: [],
-  domainData: undefined,
-  dataBaseResultColsMap: {},
-  databaseConfigList: [],
-  domainList: [],
-  modelTableHistoryParams: {},
-};
-
-const Model: ModelType = {
-  namespace: 'domainManger',
-
-  state: defaultState,
-  effects: {
-    *queryDimensionList({ payload }, { call, put }) {
-      const { code, data, msg } = yield call(getDimensionList, payload);
-      if (code === 200) {
-        yield put({ type: 'setDimensionList', payload: { dimensionList: data.list } });
-      } else {
-        message.error(msg);
-      }
-    },
-    *queryMetricList({ payload }, { call, put }) {
-      const { code, data, msg } = yield call(queryMetric, payload);
-      if (code === 200) {
-        yield put({ type: 'setMetricList', payload: { metricList: data.list } });
-      } else {
-        message.error(msg);
-      }
-    },
-    *queryDataBaseExcuteSql({ payload }, { call, put, select }) {
-      const { tableName } = payload;
-      if (!tableName) {
-        return;
-      }
-      const isExists = yield select((state: any) => {
-        return state.domainManger.dataBaseResultColsMap[tableName];
-      });
-      if (isExists) {
-        return;
-      }
-      const { code, data, msg } = yield call(excuteSql, payload);
-      if (code === 200) {
-        const resultList = data.resultList.map((item, index) => {
-          return {
-            ...item,
-            index,
-          };
-        });
-        const scriptColumns = data.columns;
-        yield put({
-          type: 'setDataBaseScriptColumn',
-          payload: { resultList, scriptColumns, tableName },
-        });
-      } else {
-        message.error(msg);
-      }
-    },
-    *queryDatabaseList({}, { call, put }) {
-      const { code, data, msg } = yield call(getDatabaseList);
-      if (code === 200) {
-        yield put({
-          type: 'setDatabaseConfigList',
-          payload: { databaseConfigList: data },
-        });
-      } else {
-        message.error(msg);
-      }
-    },
-  },
-  reducers: {
-    setSelectDomain(state = defaultState, action) {
-      return {
-        ...state,
-        selectDomainId: action.selectDomainId,
-        selectDomainName: action.selectDomainName,
-        domainData: action.domainData,
-      };
-    },
-    setSelectModel(state = defaultState, action) {
-      return {
-        ...state,
-        selectModelId: action.selectModelId,
-        selectModelName: action.selectModelName,
-        modelData: action.modelData,
-      };
-    },
-    setDomainList(state = defaultState, action) {
-      return {
-        ...state,
-        ...action.payload,
-      };
-    },
-    setPagination(state = defaultState, action) {
-      return {
-        ...state,
-        ...action.payload,
-      };
-    },
-    setDimensionList(state = defaultState, action) {
-      return {
-        ...state,
-        ...action.payload,
-      };
-    },
-    setMetricList(state = defaultState, action) {
-      return {
-        ...state,
-        ...action.payload,
-      };
-    },
-    setDataBaseScriptColumn(state = defaultState, action) {
-      return {
-        ...state,
-        dataBaseResultColsMap: {
-          ...state.dataBaseResultColsMap,
-          [action.payload.tableName]: { ...action.payload },
-        },
-      };
-    },
-    setDatabaseConfigList(state = defaultState, action) {
-      return {
-        ...state,
-        ...action.payload,
-      };
-    },
-    setModelTableHistoryParams(state = defaultState, action) {
-      return {
-        ...state,
-        modelTableHistoryParams: {
-          ...state.modelTableHistoryParams,
-          ...action.payload,
-        },
-      };
-    },
-    reset() {
-      return defaultState;
-    },
-  },
-};
-
-export default Model;

webapp/packages/supersonic-fe/src/pages/SemanticModel/models/databaseData.ts

@@ -0,0 +1,25 @@
+import { ISemantic } from '../data';
+import { useState } from 'react';
+import { getDatabaseList } from '../service';
+
+export default function Database() {
+  const [databaseConfigList, setDatabaseConfigList] = useState<ISemantic.IDatabaseItemList>([]);
+  const queryDatabaseList = async () => {
+    const { code, data } = await getDatabaseList();
+    if (code === 200) {
+      setDatabaseConfigList(data);
+    } else {
+      setDatabaseConfigList([]);
+    }
+  };
+
+  const refreshDatabaseList = async () => {
+    return await queryDatabaseList();
+  };
+
+  return {
+    databaseConfigList,
+    setDatabaseConfigList,
+    MrefreshDatabaseList: refreshDatabaseList,
+  };
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/models/dimensionData.ts

@@ -0,0 +1,27 @@
+import { message } from 'antd';
+import { ISemantic } from '../data';
+import { useState } from 'react';
+import { getDimensionList, queryMetric, excuteSql, getDatabaseList } from '../service';
+
+export default function Dimension() {
+  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
+
+  const queryDimensionList = async (params: any) => {
+    const { code, data, msg } = await getDimensionList({
+      ...params,
+    });
+    const { list } = data || {};
+    if (code === 200) {
+      setDimensionList(list);
+    } else {
+      message.error(msg);
+      setDimensionList([]);
+    }
+  };
+
+  const refreshDimensionList = async (params: any) => {
+    return await queryDimensionList(params);
+  };
+
+  return { MdimensionList: dimensionList, MrefreshDimensionList: refreshDimensionList };
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/models/domainData.ts

@@ -0,0 +1,16 @@
+import { ISemantic } from '../data';
+import { useState } from 'react';
+
+export default function Domain() {
+  const [selectDomain, setSelectDomain] = useState<ISemantic.IDomainItem>();
+  const [domainList, setDomainList] = useState<ISemantic.IDomainItem[]>([]);
+
+  return {
+    selectDomain,
+    selectDomainId: selectDomain?.id,
+    selectDomainName: selectDomain?.name,
+    domainList,
+    setSelectDomain,
+    setDomainList,
+  };
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/models/metricData.ts

@@ -0,0 +1,31 @@
+import { message } from 'antd';
+import { ISemantic } from '../data';
+import { useState } from 'react';
+import { queryMetric, excuteSql, getDatabaseList } from '../service';
+
+export default function Metric() {
+  const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>([]);
+
+  const queryMetricList = async (params: any) => {
+    const { code, data, msg } = await queryMetric({
+      ...params,
+    });
+    const { list } = data || {};
+    if (code === 200) {
+      setMetricList(list);
+    } else {
+      message.error(msg);
+      setMetricList([]);
+    }
+  };
+
+  const refreshMetricList = async (params: any) => {
+    return await queryMetricList(params);
+  };
+
+  return {
+    MmetricList: metricList,
+    MrefreshMetricList: refreshMetricList,
+    MqueryMetricList: queryMetricList,
+  };
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/models/modelData.ts

@@ -0,0 +1,44 @@
+import { ISemantic } from '../data';
+import { message } from 'antd';
+import { useState } from 'react';
+import { getModelList } from '../service';
+
+export default function Model() {
+  const [selectModel, setSelectModel] = useState<ISemantic.IModelItem>();
+  const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
+  const [modelTableHistoryParams, setModelTableHistoryParams] = useState<Record<string, any>>({});
+
+  const mergeParams = (params: Record<string, any>) => {
+    setModelTableHistoryParams({
+      ...modelTableHistoryParams,
+      ...params,
+    });
+  };
+
+  const queryModelList = async (domainId: number) => {
+    const { code, data } = await getModelList(domainId);
+    if (code === 200) {
+      setModelList(data);
+      return data;
+    } else {
+      message.error('获取模型列表失败!');
+    }
+    return [];
+  };
+
+  const MrefreshModelList = async (domainId: number) => {
+    return await queryModelList(domainId);
+  };
+
+  return {
+    selectModel,
+    selectModelId: selectModel?.id,
+    selectModelName: selectModel?.name,
+    modelList,
+    queryModelList,
+    MrefreshModelList,
+    setSelectModel,
+    setModelTableHistoryParams: mergeParams,
+    modelTableHistoryParams,
+  };
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts

@@ -406,6 +406,13 @@ export function updateModel(data: any): Promise<any> {
   });
 }
 
+export function batchUpdateModelStatus(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}model/batchUpdateStatus`, {
+    method: 'POST',
+    data,
+  });
+}
+
 export function deleteModel(modelId: number): Promise<any> {
   return request(`${process.env.API_BASE_URL}model/deleteModel/${modelId}`, {
     method: 'DELETE',