Refactor translator module (#1932)

* [improvement][Chat] Support agent permission management #1143 * [improvement][chat]Iterate LLM prompts of parsing and correction. * [improvement][headless]Clean code logic of headless core. * (fix) (chat) 记忆管理更新不生效 (#1912) * [improvement][headless-fe] Added null-check conditions to the data formatting function. * [improvement][headless]Clean code logic of headless translator. * [improvement][headless-fe] Added permissions management for agents. * [improvement][headless-fe] Unified the assistant's permission settings interaction to match the system style. * [improvement](Dict)Support returns dict task list of dimensions by page * [improvement][headless-fe] Revised the interaction for semantic modeling routing and implemented the initial version of metric management switching. * [improvement][launcher]Set system property `s2.test` in junit tests in order to facilitate conditional breakpoints. * [improvement][headless] add validateAndQuery interface in SqlQueryApiController * [improvement][launcher]Use API to get element ID avoiding hard-code. * [improvement][launcher]Support DuckDB database and refactor translator code structure. --------- Co-authored-by: lxwcodemonkey <jolunoluo@tencent.com> Co-authored-by: tristanliu <tristanliu@tencent.com> Co-authored-by: daikon12 <1059907724@qq.com> Co-authored-by: lexluo09 <39718951+lexluo09@users.noreply.github.com>
2025-12-20 06:34:55 +00:00 · 2024-11-30 00:27:33 +08:00
parent 224c114d20
commit 593597fe26
155 changed files with 3757 additions and 3551 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Outlet } from '@umijs/max';
+
+const Dimension: React.FC = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default Dimension;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/style.less
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx
@@ -1,12 +1,31 @@
-import React from 'react';
-import OverviewContainer from './OverviewContainer';
+import React, { useState } from 'react';
+import { history, useParams, useModel } from '@umijs/max';
+import DomainManagerTab from './components/DomainManagerTab';

 type Props = {};
-const DomainManager: React.FC<Props> = () => {
+
+const DomainManager: React.FC<Props> = ({}) => {
+  const defaultTabKey = 'overview';
+  const params: any = useParams();
+  const domainModel = useModel('SemanticModel.domainData');
+
+  const { selectDomainId } = domainModel;
+  const menuKey = params.menuKey ? params.menuKey : defaultTabKey;
+
+  const [activeKey, setActiveKey] = useState<string>(menuKey);
+
+  const pushUrlMenu = (domainId: number, menuKey: string) => {
+    history.push(`/model/domain/${domainId}/${menuKey}`);
+  };
+
  return (
-    <>
-      <OverviewContainer mode={'domain'} />
-    </>
+    <DomainManagerTab
+      activeKey={activeKey}
+      onMenuChange={(menuKey) => {
+        setActiveKey(menuKey);
+        pushUrlMenu(selectDomainId, menuKey);
+      }}
+    />
  );
 };

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx
@@ -155,7 +155,7 @@ const ClassMetricTable: React.FC<Props> = ({}) => {

  const columnsConfig = ColumnsConfig({
    indicatorInfo: {
-      url: '/tag/detail/',
+      url: '/tag/detail/:indicatorId',
      starType: 'tag',
    },
  });
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx
@@ -1,7 +1,7 @@
 import { message } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { getMetricData } from '../service';
-import { useParams } from '@umijs/max';
+import { useParams, useModel } from '@umijs/max';
 import styles from './style.less';
 import { ISemantic } from '../data';
 import MetricInfoEditSider from './MetricInfoEditSider';
@@ -14,7 +14,8 @@ const MetricDetail: React.FC<Props> = () => {
  const params: any = useParams();
  const metricId = params.metricId;
  const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
-
+  const metricModel = useModel('SemanticModel.metricData');
+  const { selectMetric, setSelectMetric } = metricModel;
  const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);

  useEffect(() => {
@@ -24,10 +25,17 @@ const MetricDetail: React.FC<Props> = () => {
    queryMetricData(metricId);
  }, [metricId]);

+  useEffect(() => {
+    return () => {
+      setSelectMetric(undefined);
+    };
+  }, []);
+
  const queryMetricData = async (metricId: string) => {
    const { code, data, msg } = await getMetricData(metricId);
    if (code === 200) {
      setMetircData({ ...data });
+      setSelectMetric({ ...data });
      return;
    }
    message.error(msg);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx
@@ -904,7 +904,9 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
              type="primary"
              key="console"
              onClick={() => {
-                history.replace(`/model/${domainId}/${modelId || metricItem?.modelId}/dataSource`);
+                history.replace(
+                  `/model/domain/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
+                );
                onCancel?.();
              }}
            >
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { history, useParams, useModel } from '@umijs/max';
+import ModelManagerTab from './components/ModelManagerTab';
+
+type Props = {};
+
+const ModelManager: React.FC<Props> = ({}) => {
+  const defaultTabKey = 'overview';
+  const params: any = useParams();
+  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 { selectDomainId } = domainModel;
+  const { selectModelId, modelList } = modelModel;
+  const { MrefreshDimensionList } = dimensionModel;
+  const { MrefreshMetricList } = metricModel;
+  const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
+  const [activeKey, setActiveKey] = useState<string>(menuKey);
+
+  const initModelConfig = () => {
+    const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
+    pushUrlMenu(selectDomainId, selectModelId, currentMenuKey);
+    setActiveKey(currentMenuKey);
+  };
+
+  useEffect(() => {
+    if (!selectModelId || `${selectModelId}` === `${modelId}`) {
+      return;
+    }
+    initModelConfig();
+    MrefreshDimensionList({ modelId: selectModelId });
+    MrefreshMetricList({ modelId: selectModelId });
+  }, [selectModelId]);
+
+  const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
+    history.push(`/model/domain/manager/${domainId}/${modelId}/${menuKey}`);
+  };
+
+  return (
+    <ModelManagerTab
+      activeKey={activeKey}
+      modelList={modelList}
+      onMenuChange={(menuKey) => {
+        setActiveKey(menuKey);
+        pushUrlMenu(selectDomainId, selectModelId, menuKey);
+      }}
+    />
+  );
+};
+
+export default ModelManager;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx
@@ -1,163 +1,99 @@
-import { message } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { history, useParams, useModel } from '@umijs/max';
+import { history, useParams, useModel, Outlet } from '@umijs/max';
 import DomainListTree from './components/DomainList';
 import styles from './components/style.less';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { ISemantic } from './data';
-import { getDomainList, getDataSetList } from './service';
-import DomainManagerTab from './components/DomainManagerTab';
-import { isArrayOfValues } from '@/utils/utils';

-type Props = {
-  mode: 'domain';
-};
+type Props = {};

-const OverviewContainer: React.FC<Props> = ({ mode }) => {
+const OverviewContainer: React.FC<Props> = ({}) => {
  const defaultTabKey = 'overview';
-  // 'overview'  dataSetManage
  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 { setSelectDomain, setDomainList, selectDomainId } = domainModel;
+  const { setSelectModel, setModelTableHistoryParams, MrefreshModelList } = modelModel;
  const { MrefreshDatabaseList } = databaseModel;
  const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
-  const [isModel, setIsModel] = useState<boolean>(false);
  const [collapsedState, setCollapsedState] = useState(true);
-  const [activeKey, setActiveKey] = useState<string>(menuKey);
-  const [dataSetList, setDataSetList] = useState<ISemantic.IDatasetItem[]>([]);
-
-  const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
-    const targetNode = domainList.filter((item: any) => {
-      return `${item.id}` === domainId;
-    })[0];
-    if (!targetNode) {
-      const firstRootNode = domainList.filter((item: any) => {
-        return item.parentId === 0;
-      })[0];
-      if (firstRootNode) {
-        const { id } = firstRootNode;
-        setSelectDomain(firstRootNode);
-        setActiveKey(menuKey);
-        pushUrlMenu(id, 0, menuKey);
-      }
-    } else {
-      setSelectDomain(targetNode);
-    }
-  };
-
-  const initProjectTree = async () => {
-    const { code, data, msg } = await getDomainList();
-    if (code === 200) {
-      initSelectedDomain(data);
-      setDomainList(data);
-    } else {
-      message.error(msg);
-    }
-  };

  useEffect(() => {
-    initProjectTree();
-    MrefreshDatabaseList();
-    return () => {
-      setSelectDomain(undefined);
-      setSelectModel(undefined);
-    };
-  }, []);
+    if (!selectDomainId || `${domainId}` === `${selectDomainId}`) {
+      return;
+    }
+    pushUrlMenu(selectDomainId, menuKey);
+  }, [selectDomainId]);
+
+  // const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
+  //   const targetNode = domainList.filter((item: any) => {
+  //     return `${item.id}` === domainId;
+  //   })[0];
+  //   if (!targetNode) {
+  //     const firstRootNode = domainList.filter((item: any) => {
+  //       return item.parentId === 0;
+  //     })[0];
+  //     if (firstRootNode) {
+  //       const { id } = firstRootNode;
+  //       setSelectDomain(firstRootNode);
+  //       pushUrlMenu(id, menuKey);
+  //     }
+  //   } else {
+  //     setSelectDomain(targetNode);
+  //   }
+  // };
+
+  // const initProjectTree = async () => {
+  //   const { code, data, msg } = await getDomainList();
+  //   if (code === 200) {
+  //     initSelectedDomain(data);
+  //     setDomainList(data);
+  //   } else {
+  //     message.error(msg);
+  //   }
+  // };
+
+  // useEffect(() => {
+  //   initProjectTree();
+  //   MrefreshDatabaseList();
+  //   return () => {
+  //     setSelectDomain(undefined);
+  //   };
+  // }, []);
+
+  const pushUrlMenu = (domainId: number, menuKey: string) => {
+    history.push(`/model/domain/${domainId}/${menuKey}`);
+  };
+
+  const cleanModelInfo = (domainId) => {
+    pushUrlMenu(domainId, defaultTabKey);
+    setSelectModel(undefined);
+  };
+
+  const handleCollapsedBtn = () => {
+    setCollapsedState(!collapsedState);
+  };

  useEffect(() => {
    if (!selectDomainId) {
      return;
    }
    queryModelList();
-    queryDataSetList();
  }, [selectDomainId]);

-  const queryDataSetList = async () => {
-    const { code, data, msg } = await getDataSetList(selectDomainId);
-    if (code === 200) {
-      setDataSetList(data);
-      if (!isArrayOfValues(data)) {
-        setActiveKey(defaultTabKey);
-      }
-    } else {
-      message.error(msg);
-    }
-  };
-
  const queryModelList = async () => {
    await MrefreshModelList(selectDomainId);
  };

-  useEffect(() => {
-    if (!selectDomainId) {
-      return;
-    }
-    setIsModel(false);
-  }, [domainList, selectDomainId]);
-
-  const initModelConfig = () => {
-    setIsModel(true);
-    const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
-    pushUrlMenu(selectDomainId, selectModelId, currentMenuKey);
-    setActiveKey(currentMenuKey);
-  };
-
-  useEffect(() => {
-    if (!selectModelId) {
-      return;
-    }
-    initModelConfig();
-    MrefreshDimensionList({ modelId: selectModelId });
-    MrefreshMetricList({ modelId: selectModelId });
-  }, [selectModelId]);
-
-  const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
-    history.push(`/model/${domainId}/${modelId || 0}/${menuKey}`);
-  };
-
-  const handleModelChange = (model?: ISemantic.IModelItem) => {
-    if (!model) {
-      return;
-    }
-    if (`${model.id}` === `${selectModelId}`) {
-      initModelConfig();
-    }
-    setSelectModel(model);
-  };
-
-  const cleanModelInfo = (domainId) => {
-    setIsModel(false);
-    setActiveKey(defaultTabKey);
-    pushUrlMenu(domainId, 0, defaultTabKey);
-    setSelectModel(undefined);
-  };
-
-  const handleCollapsedBtn = () => {
-    setCollapsedState(!collapsedState);
-  };
-
  return (
    <div className={styles.projectBody}>
      <div className={styles.projectManger}>
        <div className={`${styles.sider} ${!collapsedState ? styles.siderCollapsed : ''}`}>
          <div className={styles.treeContainer}>
            <DomainListTree
-              createDomainBtnVisible={mode === 'domain' ? true : false}
              onTreeSelected={(domainData: ISemantic.IDomainItem) => {
                const { id } = domainData;
                cleanModelInfo(id);
@@ -166,9 +102,9 @@ const OverviewContainer: React.FC<Props> = ({ mode }) => {
                  [id]: {},
                });
              }}
-              onTreeDataUpdate={() => {
-                initProjectTree();
-              }}
+              // onTreeDataUpdate={() => {
+              //   // initProjectTree();
+              // }}
            />
          </div>

@@ -182,29 +118,7 @@ const OverviewContainer: React.FC<Props> = ({ mode }) => {
          </div>
        </div>
        <div className={styles.content}>
-          {selectDomainId ? (
-            <>
-              <DomainManagerTab
-                isModel={isModel}
-                activeKey={activeKey}
-                modelList={modelList}
-                dataSetList={dataSetList}
-                handleModelChange={(model) => {
-                  handleModelChange(model);
-                  MrefreshModelList(selectDomainId);
-                }}
-                onBackDomainBtnClick={() => {
-                  cleanModelInfo(selectDomainId);
-                }}
-                onMenuChange={(menuKey) => {
-                  setActiveKey(menuKey);
-                  pushUrlMenu(selectDomainId, selectModelId, menuKey);
-                }}
-              />
-            </>
-          ) : (
-            <h2 className={styles.mainTip}>请选择项目</h2>
-          )}
+          <Outlet />
        </div>
      </div>
    </div>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx
@@ -0,0 +1,78 @@
+import { Outlet } from '@umijs/max';
+import { Tabs, Breadcrumb, Space, Radio } from 'antd';
+import React, { useRef, useEffect, useState } from 'react';
+import { history, useModel } from '@umijs/max';
+import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
+import styles from './components/style.less';
+
+const PageBreadcrumb: React.FC = () => {
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const metricModel = useModel('SemanticModel.metricData');
+  const { selectDomainId, selectDomainName, selectDomain: domainData } = domainModel;
+  const { selectModelId, selectModelName, setSelectModel } = modelModel;
+
+  const { selectMetric, setSelectMetric } = metricModel;
+
+  const items = [
+    {
+      title: (
+        <Space
+          onClick={() => {
+            setSelectModel(undefined);
+            history.push(`/model/domain/${selectDomainId}/overview`);
+          }}
+        >
+          <HomeOutlined />
+          <span>{selectDomainName}</span>
+        </Space>
+      ),
+    },
+  ];
+
+  if (selectModelName) {
+    items.push(
+      {
+        type: 'separator',
+        separator: '/',
+      },
+      {
+        title: (
+          <Space
+            onClick={() => {
+              setSelectMetric(undefined);
+              history.push(`/model/domain/manager/${selectDomainId}/${selectModelId}/`);
+            }}
+          >
+            <FundViewOutlined style={{ position: 'relative', top: '2px' }} />
+            <span>{selectModelName}</span>
+          </Space>
+        ),
+      },
+    );
+  }
+
+  if (selectMetric?.name) {
+    items.push(
+      {
+        type: 'separator',
+        separator: '/',
+      },
+      {
+        title: selectMetric?.name ? (
+          <Space>
+            <FundViewOutlined style={{ position: 'relative', top: '2px' }} />
+            <span>{selectMetric.name}</span>
+          </Space>
+        ) : undefined,
+      },
+    );
+  }
+  return (
+    <>
+      <Breadcrumb className={styles.breadcrumb} separator="" items={items} />
+    </>
+  );
+};
+
+export default PageBreadcrumb;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
@@ -13,12 +13,11 @@ import { ColumnsConfig } from '../../components/TableColumnRender';
 import ViewSearchFormModal from './ViewSearchFormModal';

 type Props = {
-  dataSetList: ISemantic.IDatasetItem[];
+  // dataSetList: ISemantic.IDatasetItem[];
  disabledEdit?: boolean;
-  isCurrent: boolean;
 };

-const DataSetTable: React.FC<Props> = ({ dataSetList, disabledEdit = false, isCurrent }) => {
+const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
  const domainModel = useModel('SemanticModel.domainData');
  const { selectDomainId } = domainModel;

@@ -44,16 +43,15 @@ const DataSetTable: React.FC<Props> = ({ dataSetList, disabledEdit = false, isCu
    }
  };

-  const [viewList, setViewList] = useState<ISemantic.IDatasetItem[]>(dataSetList);
+  const [viewList, setViewList] = useState<ISemantic.IDatasetItem[]>();

  useEffect(() => {
-    setViewList(dataSetList);
-  }, [dataSetList]);
-
-  useEffect(() => {
-    // queryDataSetList();
-    if (isCurrent) queryDomainAllModel();
-  }, [selectDomainId, isCurrent]);
+    if (!selectDomainId) {
+      return;
+    }
+    queryDataSetList();
+    queryDomainAllModel();
+  }, [selectDomainId]);

  const queryDataSetList = async () => {
    setLoading(true);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/index.tsx
@@ -3,15 +3,13 @@ import { ISemantic } from '../data';
 import DataSetTable from './components/DataSetTable';

 type Props = {
-  isCurrent: boolean;
  disabledEdit?: boolean;
-  dataSetList: ISemantic.IDatasetItem[];
 };

-const View: React.FC<Props> = ({ isCurrent, dataSetList, disabledEdit = false }) => {
+const View: React.FC<Props> = ({ disabledEdit = false }) => {
  return (
    <div style={{ padding: '15px 20px' }}>
-      <DataSetTable isCurrent={isCurrent} disabledEdit={disabledEdit} dataSetList={dataSetList} />
+      <DataSetTable disabledEdit={disabledEdit} />
    </div>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
@@ -3,7 +3,7 @@ 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 { StatusEnum, SemanticNodeType } from '../enum';
-import { useModel } from '@umijs/max';
+import { useModel, history } from '@umijs/max';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
 import {
  queryMetric,
@@ -32,7 +32,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
  const metricModel = useModel('SemanticModel.metricData');
  const { selectDomainId } = domainModel;
  const { selectModelId: modelId } = modelModel;
-  const { MrefreshMetricList } = metricModel;
+  const { MrefreshMetricList, selectMetric, setSelectMetric } = metricModel;
  const [batchSensitiveLevelOpenState, setBatchSensitiveLevelOpenState] = useState<boolean>(false);
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
@@ -142,7 +142,14 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
    }
  };

-  const columnsConfig = ColumnsConfig({ indicatorInfo: { url: '/model/metric/edit/' } });
+  const columnsConfig = ColumnsConfig({
+    indicatorInfo: {
+      url: '/model/metric/:domainId/:modelId/:indicatorId',
+      onNameClick: (record: ISemantic.IMetricItem) => {
+        setSelectMetric(record);
+      },
+    },
+  });

  const columns: ProColumns[] = [
    {
@@ -236,8 +243,9 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
              type="link"
              key="metricEditBtn"
              onClick={() => {
-                setMetricItem(record);
-                setCreateModalVisible(true);
+                history.push(`/model/metric/${record.domainId}/${record.modelId}/${record.id}`);
+                // setMetricItem(record);
+                // setCreateModalVisible(true);
              }}
            >
              编辑
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
@@ -1,14 +1,11 @@
-import { DownOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Input, message, Tree, Popconfirm, Tooltip, Row, Col, Button, Menu } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Input, message, Popconfirm, Tooltip, Row, Col, Button, Menu } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 import { useEffect, useState } from 'react';
-import type { FC, Key } from 'react';
+import type { FC } from 'react';
 import { useModel } from '@umijs/max';
 import { createDomain, updateDomain, deleteDomain } from '../service';
-import { treeParentKeyLists } from '../utils';
 import DomainInfoForm from './DomainInfoForm';
-import { constructorClassTreeFromList, addPathInTreeData } from '../utils';
-import { AppstoreOutlined } from '@ant-design/icons';
 import styles from './style.less';
 import { ISemantic } from '../data';

@@ -42,20 +39,15 @@ const DomainListTree: FC<DomainListProps> = ({
  onTreeSelected,
  onTreeDataUpdate,
 }) => {
-  const [projectTree, setProjectTree] = useState<DataNode[]>([]);
  const [projectInfoModalVisible, setProjectInfoModalVisible] = useState<boolean>(false);
  const [domainInfoParams, setDomainInfoParams] = useState<any>({});
  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));
-    setProjectTree(treeData);
    setClassList(domainList);
-    setExpandedKeys(treeParentKeyLists(treeData));
  }, [domainList]);

  const onSearch = (value: any) => {
@@ -67,7 +59,7 @@ const DomainListTree: FC<DomainListProps> = ({
      return;
    }
    const targetNodeData = classList.filter((item: any) => {
-      return item.id === selectedKeys;
+      return `${item.id}` === `${selectedKeys}`;
    })[0];
    onTreeSelected?.(targetNodeData);
  };
@@ -84,20 +76,6 @@ const DomainListTree: FC<DomainListProps> = ({
    }
  };

-  // const createDefaultModelSet = async (domainId: number) => {
-  //   const { code, msg } = await createDomain({
-  //     modelType: 'add',
-  //     type: 'normal',
-  //     parentId: domainId,
-  //     name: '默认模型集',
-  //     bizName: `defaultModelSet_${(Math.random() * 1000000).toFixed(0)}`,
-  //     isUnique: 1,
-  //   });
-  //   if (code !== 200) {
-  //     message.error(msg);
-  //   }
-  // };
-
  const domainSubmit = async (values: any) => {
    if (values.modelType === 'add') {
      const { code, data } = await createDomain(values);
@@ -126,21 +104,19 @@ const DomainListTree: FC<DomainListProps> = ({
    const { id, name, path, hasEditPermission, parentId, hasModel } = node as any;
    const type = parentId === 0 ? 'top' : 'normal';
    return (
-      <div className={styles.projectItem}>
-        <span
-          className={styles.projectItemTitle}
-          onClick={() => {
-            handleSelect(id);
-          }}
-        >
-          {name}
-        </span>
+      <div
+        className={styles.projectItem}
+        // onClick={() => {
+        //   handleSelect(id);
+        // }}
+      >
+        <span className={styles.projectItemTitle}>{name}</span>
        {createDomainBtnVisible && hasEditPermission && (
          <span className={`${styles.operation}  ${styles.rowHover} `}>
            {Array.isArray(path) && path.length < 2 && !hasModel && (
              <PlusOutlined
                className={styles.icon}
-                onClick={() => {
+                onClick={(e) => {
                  setDomainInfoParams({
                    modelType: 'add',
                    type: 'normal',
@@ -148,19 +124,21 @@ const DomainListTree: FC<DomainListProps> = ({
                    parentName: name,
                  });
                  setProjectInfoModalVisible(true);
+                  e.stopPropagation();
                }}
              />
            )}

            <EditOutlined
              className={styles.icon}
-              onClick={() => {
+              onClick={(e) => {
                setDomainInfoParams({
                  modelType: 'edit',
                  type,
                  ...node,
                });
                setProjectInfoModalVisible(true);
+                e.stopPropagation();
              }}
            />
            <Popconfirm
@@ -172,7 +150,12 @@ const DomainListTree: FC<DomainListProps> = ({
              okText="是"
              cancelText="否"
            >
-              <DeleteOutlined className={styles.icon} />
+              <DeleteOutlined
+                className={styles.icon}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
            </Popconfirm>
          </span>
        )}
@@ -180,14 +163,14 @@ const DomainListTree: FC<DomainListProps> = ({
    );
  };

-  const projectRenderTree = filterValue ? projectTreeFlat(projectTree, filterValue) : projectTree;
-
-  const handleExpand = (_expandedKeys: Key[]) => {
-    setExpandedKeys(_expandedKeys as string[]);
-  };
-
  const items = domainList
-    .filter((domain) => domain.parentId === 0)
+    .filter((domain) => {
+      if (filterValue) {
+        return domain.parentId === 0 && domain.name.includes(filterValue);
+      } else {
+        return domain.parentId === 0;
+      }
+    })
    .map((domain: ISemantic.IDomainItem) => {
      return {
        key: domain.id,
@@ -245,6 +228,12 @@ const DomainListTree: FC<DomainListProps> = ({
              className={styles.search}
              placeholder="请输入名称搜索"
              onSearch={onSearch}
+              onChange={(e) => {
+                const value = e.target.value;
+                if (!value) {
+                  setFliterValue(value);
+                }
+              }}
            />
          </Col>
          {createDomainBtnVisible && (
@@ -265,25 +254,19 @@ const DomainListTree: FC<DomainListProps> = ({
          )}
        </Row>
      </div>
-      <Menu
-        mode="inline"
-        defaultSelectedKeys={['231']}
-        openKeys={stateOpenKeys}
-        onOpenChange={onOpenChange}
-        style={{ width: 256 }}
-        items={items}
-      />
-      {/* <Tree
-        expandedKeys={expandedKeys}
-        onExpand={handleExpand}
-        className={styles.tree}
-        selectedKeys={[selectDomainId]}
-        blockNode={true}
-        switcherIcon={<DownOutlined />}
-        defaultExpandAll={true}
-        treeData={projectRenderTree}
-        titleRender={titleRender}
-      /> */}
+      {selectDomainId && (
+        <Menu
+          mode="inline"
+          defaultSelectedKeys={[`${selectDomainId}`]}
+          openKeys={stateOpenKeys}
+          onOpenChange={onOpenChange}
+          style={{ width: 256 }}
+          items={items}
+          onClick={(info) => {
+            handleSelect(info.key);
+          }}
+        />
+      )}
      {projectInfoModalVisible && (
        <DomainInfoForm
          basicInfo={domainInfoParams}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
@@ -1,44 +1,27 @@
-import { Tabs, Breadcrumb, Space, Radio } from 'antd';
+import { Tabs, Radio } from 'antd';
 import React, { useRef, useEffect, useState } from 'react';
-import { history, useModel } from '@umijs/max';
-import ClassDimensionTable from './ClassDimensionTable';
-import ClassMetricTable from './ClassMetricTable';
+import { useModel } from '@umijs/max';
 import PermissionSection from './Permission/PermissionSection';
 import TagObjectTable from '../Insights/components/TagObjectTable';
 import TermTable from '../components/Term/TermTable';
 import OverView from './OverView';
 import styles from './style.less';
-import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
-import { ISemantic } from '../data';
 import SemanticGraphCanvas from '../SemanticGraphCanvas';
 import View from '../View';

 type Props = {
-  isModel: boolean;
  activeKey: string;
-  modelList: ISemantic.IModelItem[];
-  dataSetList: ISemantic.IDatasetItem[];
-  handleModelChange: (model?: ISemantic.IModelItem) => void;
-  onBackDomainBtnClick?: () => void;
  onMenuChange?: (menuKey: string) => void;
 };
-const DomainManagerTab: React.FC<Props> = ({
-  isModel,
-  activeKey,
-  modelList,
-  dataSetList,
-  handleModelChange,
-  onBackDomainBtnClick,
-  onMenuChange,
-}) => {
+const DomainManagerTab: React.FC<Props> = ({ activeKey, onMenuChange }) => {
  const initState = useRef<boolean>(false);
  const defaultTabKey = 'metric';

  const domainModel = useModel('SemanticModel.domainData');
  const modelModel = useModel('SemanticModel.modelData');

-  const { selectDomainId, selectDomainName, selectDomain: domainData } = domainModel;
-  const { selectModelId, selectModelName } = modelModel;
+  const { selectDomainId, selectDomain: domainData } = domainModel;
+  const { selectModelId, modelList } = modelModel;

  useEffect(() => {
    initState.current = false;
@@ -50,7 +33,7 @@ const DomainManagerTab: React.FC<Props> = ({
      label: '数据集管理',
      key: 'overview',
      hidden: !!domainData?.parentId,
-      children: <View isCurrent={activeKey === 'overview'} dataSetList={dataSetList} />,
+      children: <View />,
    },
    {
      label: '模型管理',
@@ -59,9 +42,9 @@ const DomainManagerTab: React.FC<Props> = ({
        showModelType === 'list' ? (
          <OverView
            modelList={modelList}
-            onModelChange={(model) => {
-              handleModelChange(model);
-            }}
+            // onModelChange={(model) => {
+            //   handleModelChange(model);
+            // }}
          />
        ) : (
          <div style={{ width: '100%' }} key={selectDomainId}>
@@ -98,36 +81,9 @@ const DomainManagerTab: React.FC<Props> = ({
    return item.key !== 'permissonSetting';
  });

-  const isModelItem = [
-    {
-      label: '指标管理',
-      key: 'metric',
-      children: (
-        <ClassMetricTable
-          onEmptyMetricData={() => {
-            if (!initState.current) {
-              initState.current = true;
-              onMenuChange?.('dimenstion');
-            }
-          }}
-        />
-      ),
-    },
-    {
-      label: '维度管理',
-      key: 'dimenstion',
-      children: <ClassDimensionTable />,
-    },
-    {
-      label: '权限管理',
-      key: 'permissonSetting',
-      children: <PermissionSection permissionTarget={'model'} />,
-    },
-  ];
-
  const getActiveKey = () => {
    const key = activeKey || defaultTabKey;
-    const tabItems = !isModel ? tabItem : isModelItem;
+    const tabItems = tabItem;
    const tabItemsKeys = tabItems.map((item) => item.key);
    if (!tabItemsKeys.includes(key)) {
      return tabItemsKeys[0];
@@ -137,47 +93,9 @@ const DomainManagerTab: React.FC<Props> = ({

  return (
    <div>
-      <Breadcrumb
-        className={styles.breadcrumb}
-        separator=""
-        items={[
-          {
-            title: (
-              <Space
-                onClick={() => {
-                  onBackDomainBtnClick?.();
-                }}
-                style={
-                  selectModelName ? { cursor: 'pointer' } : { color: '#296df3', fontWeight: 'bold' }
-                }
-              >
-                <HomeOutlined />
-                <span>{selectDomainName}</span>
-              </Space>
-            ),
-          },
-          {
-            type: 'separator',
-            separator: selectModelName ? '/' : '',
-          },
-          {
-            title: selectModelName ? (
-              <Space
-                onClick={() => {
-                  history.push(`/model/${selectDomainId}/${selectModelId}/`);
-                }}
-                style={{ color: '#296df3' }}
-              >
-                <FundViewOutlined style={{ position: 'relative', top: '2px' }} />
-                <span>{selectModelName}</span>
-              </Space>
-            ) : undefined,
-          },
-        ]}
-      />
      <Tabs
        className={styles.tab}
-        items={!isModel ? tabItem : selectModelId ? isModelItem : []}
+        items={tabItem}
        activeKey={getActiveKey()}
        tabBarExtraContent={{
          right:
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
@@ -900,7 +900,9 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
              type="primary"
              key="console"
              onClick={() => {
-                history.replace(`/model/${domainId}/${modelId || metricItem?.modelId}/dataSource`);
+                history.replace(
+                  `/model/domain/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
+                );
                onCancel?.();
              }}
            >
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelManagerTab.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelManagerTab.tsx
@@ -0,0 +1,88 @@
+import { Tabs, Breadcrumb, Space, Radio } from 'antd';
+import React, { useRef, useEffect, useState } from 'react';
+import { history, useModel } from '@umijs/max';
+import ClassDimensionTable from './ClassDimensionTable';
+import ClassMetricTable from './ClassMetricTable';
+import PermissionSection from './Permission/PermissionSection';
+import TagObjectTable from '../Insights/components/TagObjectTable';
+import TermTable from '../components/Term/TermTable';
+import OverView from './OverView';
+import styles from './style.less';
+import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
+import { ISemantic } from '../data';
+import SemanticGraphCanvas from '../SemanticGraphCanvas';
+import Dimension from '../Dimension';
+import ModelMetric from '../components/ModelMetric';
+import View from '../View';
+
+type Props = {
+  activeKey: string;
+  modelList: ISemantic.IModelItem[];
+  onMenuChange?: (menuKey: string) => void;
+};
+const ModelManagerTab: React.FC<Props> = ({ activeKey, onMenuChange }) => {
+  const initState = useRef<boolean>(false);
+  const defaultTabKey = 'metric';
+  const modelModel = useModel('SemanticModel.modelData');
+
+  const { selectModelId } = modelModel;
+
+  useEffect(() => {
+    initState.current = false;
+  }, [selectModelId]);
+
+  const isModelItem = [
+    {
+      label: '指标管理',
+      key: 'metric',
+      // children: <ModelMetric />,
+      children: (
+        <ClassMetricTable
+          onEmptyMetricData={() => {
+            if (!initState.current) {
+              initState.current = true;
+              onMenuChange?.('dimension');
+            }
+          }}
+        />
+      ),
+    },
+    {
+      label: '维度管理',
+      key: 'dimension',
+      children: <ClassDimensionTable />,
+      // children: <Dimension />,
+    },
+    {
+      label: '权限管理',
+      key: 'permissonSetting',
+      children: <PermissionSection permissionTarget={'model'} />,
+    },
+  ];
+
+  const getActiveKey = () => {
+    const key = activeKey || defaultTabKey;
+    const tabItems = isModelItem;
+    const tabItemsKeys = tabItems.map((item) => item.key);
+    if (!tabItemsKeys.includes(key)) {
+      return tabItemsKeys[0];
+    }
+    return key;
+  };
+
+  return (
+    <div>
+      <Tabs
+        className={styles.tab}
+        items={isModelItem}
+        activeKey={getActiveKey()}
+        size="large"
+        onChange={(menuKey: string) => {
+          onMenuChange?.(menuKey);
+        }}
+      />
+    </div>
+  );
+};
+
+export default ModelManagerTab;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelMetric/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelMetric/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Outlet } from '@umijs/max';
+
+const Dimension: React.FC = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default Dimension;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelMetric/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelMetric/style.less
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
@@ -3,7 +3,7 @@ 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 { useModel } from '@umijs/max';
+import { useModel, history } from '@umijs/max';
 import { deleteModel, batchUpdateModelStatus } from '../service';
 import ClassModelTypeModal from './ClassModelTypeModal';
 import { ColumnsConfig } from './TableColumnRender';
@@ -22,14 +22,14 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
  const domainModel = useModel('SemanticModel.domainData');
  const modelModel = useModel('SemanticModel.modelData');
  const { selectDomainId } = domainModel;
-  const { modelTableHistoryParams, setModelTableHistoryParams } = modelModel;
+  const { modelTableHistoryParams, setModelTableHistoryParams, setSelectModel } = modelModel;

  const [modelItem, setModelItem] = useState<ISemantic.IModelItem>();
  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
  const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
  const [currentPageNumber, setCurrentPageNumber] = useState<number>(1);
  const actionRef = useRef<ActionType>();
-
+  const [isEditing, setIsEditing] = useState<boolean>(false);
  const [tableData, setTableData] = useState<ISemantic.IModelItem[]>([]);
  const params = modelTableHistoryParams?.[selectDomainId];

@@ -100,10 +100,14 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
      title: '模型名称',
      search: false,
      render: (_, record) => {
+        const { domainId, id } = record;
        return (
          <a
            onClick={() => {
-              onModelChange?.(record);
+              setSelectModel(record);
+
+              history.push(`/model/domain/manager/${domainId}/${id}`);
+              // onModelChange?.(record);
            }}
          >
            {_}
@@ -161,6 +165,7 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
              onClick={() => {
                setModelItem(record);
                setCreateDataSourceModalOpen(true);
+                setIsEditing(true);
              }}
            >
              编辑
@@ -209,84 +214,88 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC

  return (
    <>
-      <ProTable
-        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
-        actionRef={actionRef}
-        rowKey="id"
-        search={false}
-        columns={columns}
-        dataSource={tableData}
-        tableAlertRender={() => {
-          return false;
-        }}
-        pagination={{
-          current: currentPageNumber,
-          onChange: (pageNumber) => {
-            setCurrentPageNumber(pageNumber);
-            dipatchParams({
-              ...filterParams,
-              pageNumber: `${pageNumber}`,
-            });
-          },
-        }}
-        headerTitle={
-          <TableHeaderFilter
-            components={[
-              {
-                label: '模型搜索',
-                component: (
-                  <Input.Search
-                    style={{ width: 280 }}
-                    placeholder="请输入模型名称"
-                    defaultValue={params?.key}
-                    onSearch={(value) => {
-                      setCurrentPageNumber(1);
-                      dipatchParams({
-                        ...filterParams,
-                        key: value,
-                        pageNumber: `1`,
-                      });
-                      setFilterParams((preState) => {
-                        return {
-                          ...preState,
+      <div style={{ display: isEditing ? 'none' : 'block' }}>
+        <ProTable
+          className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
+          actionRef={actionRef}
+          rowKey="id"
+          search={false}
+          columns={columns}
+          dataSource={tableData}
+          tableAlertRender={() => {
+            return false;
+          }}
+          pagination={{
+            current: currentPageNumber,
+            onChange: (pageNumber) => {
+              setCurrentPageNumber(pageNumber);
+              dipatchParams({
+                ...filterParams,
+                pageNumber: `${pageNumber}`,
+              });
+            },
+          }}
+          headerTitle={
+            <TableHeaderFilter
+              components={[
+                {
+                  label: '模型搜索',
+                  component: (
+                    <Input.Search
+                      style={{ width: 280 }}
+                      placeholder="请输入模型名称"
+                      defaultValue={params?.key}
+                      onSearch={(value) => {
+                        setCurrentPageNumber(1);
+                        dipatchParams({
+                          ...filterParams,
                          key: value,
-                        };
-                      });
+                          pageNumber: `1`,
+                        });
+                        setFilterParams((preState) => {
+                          return {
+                            ...preState,
+                            key: value,
+                          };
+                        });
+                      }}
+                    />
+                  ),
+                },
+              ]}
+            />
+          }
+          size="small"
+          options={{ reload: false, density: false, fullScreen: false }}
+          toolBarRender={() =>
+            disabledEdit
+              ? [<></>]
+              : [
+                  <Button
+                    key="create"
+                    type="primary"
+                    onClick={() => {
+                      setModelItem(undefined);
+                      setCreateDataSourceModalOpen(true);
                    }}
-                  />
-                ),
-              },
-            ]}
-          />
-        }
-        size="small"
-        options={{ reload: false, density: false, fullScreen: false }}
-        toolBarRender={() =>
-          disabledEdit
-            ? [<></>]
-            : [
-                <Button
-                  key="create"
-                  type="primary"
-                  onClick={() => {
-                    setModelItem(undefined);
-                    setCreateDataSourceModalOpen(true);
-                  }}
-                >
-                  创建模型
-                </Button>,
-              ]
-        }
-      />
+                  >
+                    创建模型
+                  </Button>,
+                ]
+          }
+        />
+      </div>
      {createDataSourceModalOpen && (
        <ClassModelTypeModal
          open={createDataSourceModalOpen}
          modelItem={modelItem}
          onSubmit={() => {
            onModelChange?.();
+            setIsEditing(false);
            setCreateDataSourceModalOpen(false);
          }}
          onCancel={() => {
+            setIsEditing(false);
            setCreateDataSourceModalOpen(false);
          }}
        />
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
@@ -6,31 +6,113 @@ import { history } from '@umijs/max';
 import { ISemantic } from '../data';
 import { isString } from 'lodash';
 import dayjs from 'dayjs';
-import { isArrayOfValues } from '@/utils/utils';
+import { isArrayOfValues, replaceRouteParams } from '@/utils/utils';
 import styles from './style.less';
 import IndicatorStar, { StarType } from '../components/IndicatorStar';

+interface IndicatorInfo {
+  url?: string;
+  starType?: StarType;
+  onNameClick?: (record: ISemantic.IMetricItem) => void | boolean;
+}
+
+interface ColumnsConfigParams {
+  indicatorInfo?: IndicatorInfo;
+}
+
 const { Text, Paragraph } = Typography;

-export const ColumnsConfig: any = (params?: {
-  indicatorInfo?: {
-    url?: string;
-    starType?: StarType;
-  };
-}) => {
+export const ColumnsConfig = (params?: ColumnsConfigParams) => {
+  const renderAliasAndClassifications = (
+    alias: string | undefined,
+    classifications: string[] | undefined,
+  ) => (
+    <div style={{ marginTop: 8 }}>
+      <Space direction="vertical" size={4}>
+        {alias && (
+          <Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
+            <ReadOutlined />
+            <div style={{ width: 'max-content' }}>别名:</div>
+            <span style={{ marginLeft: 2 }}>
+              <Space size={[0, 8]} wrap>
+                {isString(alias) &&
+                  alias.split(',').map((aliasName: string) => (
+                    <Tag
+                      color="#eee"
+                      key={aliasName}
+                      style={{
+                        borderRadius: 44,
+                        maxWidth: 90,
+                        minWidth: 40,
+                        backgroundColor: 'rgba(18, 31, 67, 0.04)',
+                      }}
+                    >
+                      <Text
+                        style={{
+                          maxWidth: 80,
+                          color: 'rgb(95, 116, 141)',
+                          textAlign: 'center',
+                          fontSize: 12,
+                        }}
+                        ellipsis={{ tooltip: aliasName }}
+                      >
+                        {aliasName}
+                      </Text>
+                    </Tag>
+                  ))}
+              </Space>
+            </span>
+          </Space>
+        )}
+
+        {isArrayOfValues(classifications) && (
+          <Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
+            <TagsOutlined />
+            <div style={{ width: 'max-content' }}>分类:</div>
+            <span style={{ marginLeft: 2 }}>
+              <Space size={[0, 8]} wrap>
+                {classifications.map((tag: string) => (
+                  <Tag
+                    color="#eee"
+                    key={tag}
+                    style={{
+                      borderRadius: 44,
+                      maxWidth: 90,
+                      minWidth: 40,
+                      backgroundColor: 'rgba(18, 31, 67, 0.04)',
+                    }}
+                  >
+                    <Text
+                      style={{
+                        maxWidth: 80,
+                        color: 'rgb(95, 116, 141)',
+                        textAlign: 'center',
+                        fontSize: 12,
+                      }}
+                      ellipsis={{ tooltip: tag }}
+                    >
+                      {tag}
+                    </Text>
+                  </Tag>
+                ))}
+              </Space>
+            </span>
+          </Space>
+        )}
+      </Space>
+    </div>
+  );
+
  return {
    description: {
-      render: (_, record: ISemantic.IMetricItem) => {
-        const { description } = record;
-        return (
-          <Paragraph
-            ellipsis={{ tooltip: description, rows: 3 }}
-            style={{ width: 250, marginBottom: 0 }}
-          >
-            {description}
-          </Paragraph>
-        );
-      },
+      render: (_, record: ISemantic.IMetricItem) => (
+        <Paragraph
+          ellipsis={{ tooltip: record.description, rows: 3 }}
+          style={{ width: 250, marginBottom: 0 }}
+        >
+          {record.description}
+        </Paragraph>
+      ),
    },
    dimensionInfo: {
      render: (_, record: ISemantic.IDimensionItem) => {
@@ -45,70 +127,26 @@ export const ColumnsConfig: any = (params?: {
            <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
              {bizName}
            </div>
-
-            {alias && (
-              <div style={{ marginTop: 8 }}>
-                <Space direction="vertical" size={4}>
-                  {alias && (
-                    <Space
-                      size={4}
-                      style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
-                    >
-                      <ReadOutlined />
-                      <div style={{ width: 'max-content' }}>别名:</div>
-                      <span style={{ marginLeft: 2 }}>
-                        <Space size={[0, 8]} wrap>
-                          {isString(alias) &&
-                            alias.split(',').map((aliasName: string) => {
-                              return (
-                                <Tag
-                                  color="#eee"
-                                  key={aliasName}
-                                  style={{
-                                    borderRadius: 44,
-                                    maxWidth: 90,
-                                    minWidth: 40,
-                                    backgroundColor: 'rgba(18, 31, 67, 0.04)',
-                                  }}
-                                >
-                                  <Text
-                                    style={{
-                                      maxWidth: 80,
-                                      color: 'rgb(95, 116, 141)',
-                                      textAlign: 'center',
-                                      fontSize: 12,
-                                    }}
-                                    ellipsis={{ tooltip: aliasName }}
-                                  >
-                                    {aliasName}
-                                  </Text>
-                                </Tag>
-                              );
-                            })}
-                        </Space>
-                      </span>
-                    </Space>
-                  )}
-                </Space>
-              </div>
-            )}
+            {renderAliasAndClassifications(alias, undefined)}
          </>
        );
      },
    },
    indicatorInfo: {
      render: (_, record: ISemantic.IMetricItem) => {
-        const { name, alias, bizName, classifications, id, isCollect } = record;
+        const { name, alias, bizName, classifications, id, isCollect, domainId, modelId } = record;
+
        let url = `/metric/detail/`;
        let starType: StarType = 'metric';
-        if (params) {
-          if (params?.indicatorInfo?.url) {
-            url = params.indicatorInfo.url;
-          }
-          if (params?.indicatorInfo?.starType) {
-            starType = params.indicatorInfo.starType;
-          }
+        if (params?.indicatorInfo) {
+          url = replaceRouteParams(params.indicatorInfo.url || '', {
+            domainId: `${domainId}`,
+            modelId: `${modelId}`,
+            indicatorId: `${id}`,
+          });
+          starType = params.indicatorInfo.starType || 'metric';
        }
+
        return (
          <>
            <div>
@@ -117,202 +155,72 @@ export const ColumnsConfig: any = (params?: {
                  className={styles.textLink}
                  style={{ fontWeight: 500 }}
                  onClick={(event: any) => {
-                    history.push(`${url}${id}`);
+                    if (params?.indicatorInfo?.onNameClick) {
+                      const state = params.indicatorInfo.onNameClick(record);
+                      if (state === false) {
+                        return;
+                      }
+                    }
+                    history.push(url);
                    event.preventDefault();
                    event.stopPropagation();
                  }}
-                  href={`/webapp${url}${id}`}
                >
                  {name}
                </a>
                <IndicatorStar indicatorId={id} type={starType} initState={isCollect} />
-                {/* <Tag
-                color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
-                style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
-              >
-                {SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
-              </Tag> */}
              </Space>
            </div>
            <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
              {bizName}
            </div>
-
-            {(alias || isArrayOfValues(classifications)) && (
-              <div style={{ marginTop: 8 }}>
-                <Space direction="vertical" size={4}>
-                  {alias && (
-                    <Space
-                      size={4}
-                      style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
-                    >
-                      <ReadOutlined />
-                      <div style={{ width: 'max-content' }}>别名:</div>
-                      <span style={{ marginLeft: 2 }}>
-                        <Space size={[0, 8]} wrap>
-                          {isString(alias) &&
-                            alias.split(',').map((aliasName: string) => {
-                              return (
-                                <Tag
-                                  color="#eee"
-                                  key={aliasName}
-                                  style={{
-                                    borderRadius: 44,
-                                    maxWidth: 90,
-                                    minWidth: 40,
-                                    backgroundColor: 'rgba(18, 31, 67, 0.04)',
-                                  }}
-                                >
-                                  <Text
-                                    style={{
-                                      maxWidth: 80,
-                                      color: 'rgb(95, 116, 141)',
-                                      textAlign: 'center',
-                                      fontSize: 12,
-                                    }}
-                                    ellipsis={{ tooltip: aliasName }}
-                                  >
-                                    {aliasName}
-                                  </Text>
-                                </Tag>
-                              );
-                            })}
-                        </Space>
-                      </span>
-                    </Space>
-                  )}
-
-                  {isArrayOfValues(classifications) && (
-                    <Space
-                      size={4}
-                      style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
-                    >
-                      <TagsOutlined />
-                      <div style={{ width: 'max-content' }}>分类:</div>
-                      <span style={{ marginLeft: 2 }}>
-                        <Space size={[0, 8]} wrap>
-                          {classifications.map((tag: string) => {
-                            return (
-                              <Tag
-                                color="#eee"
-                                key={tag}
-                                style={{
-                                  borderRadius: 44,
-                                  maxWidth: 90,
-                                  minWidth: 40,
-                                  backgroundColor: 'rgba(18, 31, 67, 0.04)',
-                                }}
-                              >
-                                <Text
-                                  style={{
-                                    maxWidth: 80,
-                                    color: 'rgb(95, 116, 141)',
-                                    textAlign: 'center',
-                                    fontSize: 12,
-                                  }}
-                                  ellipsis={{ tooltip: tag }}
-                                >
-                                  {tag}
-                                </Text>
-                              </Tag>
-                            );
-                          })}
-                        </Space>
-                      </span>
-                    </Space>
-                  )}
-                  {/* <Space size={10}>
-        <Space
-          size={2}
-          style={{ color: '#5f748d', fontSize: 12, position: 'relative', top: '1px' }}
-        >
-          <FieldNumberOutlined style={{ fontSize: 16, position: 'relative', top: '1px' }} />
-          <span>:</span>
-          <span style={{ marginLeft: 0 }}>{id}</span>
-        </Space>
-        <Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
-          <UserOutlined />
-          <span>:</span>
-          <span style={{ marginLeft: 0 }}>{createdBy}</span>
-        </Space>
-      </Space> */}
-                </Space>
-              </div>
-            )}
+            {renderAliasAndClassifications(alias, classifications)}
          </>
        );
      },
    },
    sensitiveLevel: {
-      render: (_, record: ISemantic.IMetricItem) => {
-        const { sensitiveLevel } = record;
-        return SENSITIVE_LEVEL_COLOR[sensitiveLevel] ? (
-          <Tag
-            color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
-            style={{
-              borderRadius: '40px',
-              padding: '2px 16px',
-              fontSize: '13px',
-              // color: '#8ca3ba',
-            }}
-          >
-            {SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
-          </Tag>
-        ) : (
-          <Tag
-            style={{
-              borderRadius: '40px',
-              padding: '2px 16px',
-              fontSize: '13px',
-            }}
-          >
-            未知
-          </Tag>
-        );
-      },
+      render: (_, record: ISemantic.IMetricItem) => (
+        <Tag
+          color={SENSITIVE_LEVEL_COLOR[record.sensitiveLevel] || 'default'}
+          style={{
+            borderRadius: '40px',
+            padding: '2px 16px',
+            fontSize: '13px',
+          }}
+        >
+          {SENSITIVE_LEVEL_ENUM[record.sensitiveLevel] || '未知'}
+        </Tag>
+      ),
    },
    state: {
      render: (status) => {
-        let tagProps: { color: string; label: string; style?: any } = {
+        const tagProps = {
          color: 'default',
          label: '未知',
          style: {},
        };
        switch (status) {
          case StatusEnum.ONLINE:
-            tagProps = {
-              // color: 'processing',
-              color: 'geekblue',
-              label: '已启用',
-            };
+            tagProps.color = 'geekblue';
+            tagProps.label = '已启用';
            break;
          case StatusEnum.OFFLINE:
-            tagProps = {
-              color: 'default',
-              label: '未启用',
-              style: {
-                color: 'rgb(95, 116, 141)',
-                fontWeight: 400,
-              },
-            };
+            tagProps.color = 'default';
+            tagProps.label = '未启用';
+            tagProps.style = { color: 'rgb(95, 116, 141)', fontWeight: 400 };
            break;
          case StatusEnum.INITIALIZED:
-            tagProps = {
-              color: 'processing',
-              label: '初始化',
-            };
+            tagProps.color = 'processing';
+            tagProps.label = '初始化';
            break;
          case StatusEnum.DELETED:
-            tagProps = {
-              color: 'default',
-              label: '已删除',
-            };
+            tagProps.color = 'default';
+            tagProps.label = '已删除';
            break;
          case StatusEnum.UNAVAILABLE:
-            tagProps = {
-              color: 'default',
-              label: '不可用',
-            };
+            tagProps.color = 'default';
+            tagProps.label = '不可用';
            break;
          default:
            break;
@@ -339,14 +247,12 @@ export const ColumnsConfig: any = (params?: {
      tooltip: '创建人/更新时间',
      width: 180,
      search: false,
-      render: (value: any, record: ISemantic.IMetricItem) => {
-        return (
-          <Space direction="vertical">
-            <span> {record.createdBy}</span>
-            <span>{value && value !== '-' ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-'}</span>
-          </Space>
-        );
-      },
+      render: (value: any, record: ISemantic.IMetricItem) => (
+        <Space direction="vertical">
+          <span> {record.createdBy}</span>
+          <span>{value && value !== '-' ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-'}</span>
+        </Space>
+      ),
    },
  };
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
@@ -6,6 +6,7 @@


  .projectManger {
+    border-top: 1px solid #eee;
    width: 100%;
    min-height: calc(100vh - 56px);
    background-color: #fff;
@@ -163,8 +164,8 @@
    //   }
    // }
    .tab {
-      border-top: 1px solid #eee;
-      margin-top: 10px;
+
+      // margin-top: 10px;
      :global {
        .ant-tabs-tab-btn {
          font-size: 16px;
@@ -338,12 +339,14 @@

 .breadcrumb{
  font-size: 18px;
-  margin: 17px 0 0 20px;
-  padding-bottom: 3px;
+  height: 48px;
+  line-height: 48px;
+  padding: 0 20px;
  :global {
    .ant-breadcrumb-link {
      height: 28px;
      color: #709bf1;
+      cursor: pointer;
      &:hover{
        color: #296df3;
      }
@@ -351,6 +354,14 @@
    .anticon {
      font-size: 18px;
    }
+    li {
+      &:last-child {
+        .ant-breadcrumb-link {
+          color: #296df3;
+        }
+
+      }
+    }
  }
 }

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/index.tsx
@@ -1,7 +1,89 @@
-import React from 'react';
+import { message } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { history, useParams, useModel, Outlet } from '@umijs/max';
+import DomainListTree from './components/DomainList';
+import styles from './components/style.less';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { ISemantic } from './data';
+import { getDomainList, getDataSetList, getModelDetail } from './service';
+import PageBreadcrumb from './PageBreadcrumb';

-const classManager: React.FC = ({ children }) => {
-  return <div>{children}</div>;
+type Props = {};
+
+const SemanticModel: React.FC<Props> = ({}) => {
+  const params: any = useParams();
+  const domainId = params.domainId;
+  const modelId = params.modelId;
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const databaseModel = useModel('SemanticModel.databaseData');
+  const metricModel = useModel('SemanticModel.metricData');
+  const { setSelectDomain, setDomainList, selectDomainId } = domainModel;
+  const { selectModel, setSelectModel, setModelTableHistoryParams, MrefreshModelList } = modelModel;
+  const { MrefreshDatabaseList } = databaseModel;
+
+  const { selectMetric, setSelectMetric } = metricModel;
+
+  const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
+    const targetNode = domainList.filter((item: any) => {
+      return `${item.id}` === domainId;
+    })[0];
+    if (!targetNode) {
+      const firstRootNode = domainList.filter((item: any) => {
+        return item.parentId === 0;
+      })[0];
+      if (firstRootNode) {
+        const { id } = firstRootNode;
+        setSelectDomain(firstRootNode);
+        // pushUrlMenu(id, menuKey);
+      }
+    } else {
+      setSelectDomain(targetNode);
+    }
+  };
+
+  const initProjectTree = async () => {
+    const { code, data, msg } = await getDomainList();
+    if (code === 200) {
+      initSelectedDomain(data);
+      setDomainList(data);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const initModelData = async () => {
+    const { code, data, msg } = await getModelDetail({ modelId });
+    if (code === 200) {
+      setSelectModel(data);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  useEffect(() => {
+    initProjectTree();
+    MrefreshDatabaseList();
+    if (modelId && modelId !== selectModel) {
+      initModelData();
+    }
+
+    return () => {
+      setSelectDomain(undefined);
+    };
+  }, []);
+
+  return (
+    <div>
+      <div style={{ background: '#fff' }}>
+        <PageBreadcrumb />
+      </div>
+      <div>
+        <Outlet />
+        {/* <OverviewContainer /> */}
+      </div>
+    </div>
+  );
 };

-export default classManager;
+export default SemanticModel;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/metricData.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/metricData.ts
@@ -5,6 +5,7 @@ import { queryMetric } from '../service';

 export default function Metric() {
  const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>([]);
+  const [selectMetric, setSelectMetric] = useState<ISemantic.IMetricItem>();

  const queryMetricList = async (params: any) => {
    const { code, data, msg } = await queryMetric({
@@ -25,6 +26,8 @@ export default function Metric() {

  return {
    MmetricList: metricList,
+    setSelectMetric: setSelectMetric,
+    selectMetric: selectMetric,
    MrefreshMetricList: refreshMetricList,
    MqueryMetricList: queryMetricList,
  };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
@@ -453,7 +453,7 @@ export function getUnAvailableItem(data: any): Promise<any> {

 export function getModelDetail(data: any): Promise<any> {
  if (!data.modelId) {
-    return;
+    return {};
  }
  return request.get(`${process.env.API_BASE_URL}model/getModel/${data.modelId}`);
 }
--- a/webapp/packages/supersonic-fe/src/utils/utils.ts
+++ b/webapp/packages/supersonic-fe/src/utils/utils.ts
@@ -502,3 +502,10 @@ export function decryptPassword(encryptPassword: string) {
 export function uniqueArray(arr: any[]) {
  return Array.from(new Set(arr));
 }
+
+// 替换以:开头标记的变量
+export const replaceRouteParams = (template: string, values: Record<string, string>): string => {
+  return template.replace(/:([a-zA-Z0-9_]+)/g, (match, key) => {
+    return values[key] !== undefined ? values[key] : match;
+  });
+};