[improvement][headless-fe] code stash

webapp/packages/supersonic-fe/config/routes.ts

@@ -91,6 +91,11 @@ const ROUTES = [
           },
         ],
       },
+      {
+        path: '/model/dataset/:domainId/:datasetId',
+        component: './SemanticModel/View/components/Detail',
+        envEnableList: [ENV_KEY.SEMANTIC],
+      },
       {
         path: '/model/metric/:domainId/:modelId/:metricId',
         component: './SemanticModel/Metric/Edit',
@@ -102,101 +107,8 @@ const ROUTES = [
         //   },
         // ],
       },
-      // {
-      //   path: '/model/manager/',
-      //   component: './SemanticModel/OverviewContainer',
-      //   routes: [
-      //     {
-      //       path: '/model/manager/:domainId/:modelId',
-      //       component: './SemanticModel/ModelManager',
-      //       routes: [
-      //         {
-      //           path: '/model/manager/:domainId/:modelId/:menuKey',
-      //           component: './SemanticModel/ModelManager',
-      //         },
-      //       ],
-      //     },
-      //   ],
-      // },
-      // {
-      //   path: '/model/:domainId',
-      //   component: './SemanticModel/DomainManager',
-      //   envEnableList: [ENV_KEY.SEMANTIC],
-      //   routes: [
-      //     {
-      //       path: '/model/:domainId/:menuKey',
-      //       component: './SemanticModel/DomainManager',
-      //     },
-      //   ],
-      // },
-      // {
-      //   path: '/model/manager/:domainId/:modelId',
-      //   component: './SemanticModel/ModelManager',
-      //   envEnableList: [ENV_KEY.SEMANTIC],
-      //   routes: [
-      //     {
-      //       path: '/model/manager/:domainId/:modelId/:menuKey',
-      //       component: './SemanticModel/ModelManager',
-      //     },
-      //   ],
-      // },
-
-      // {
-      //   path: '/model/:domainId/:modelId/:menuKey',
-      //   component: './SemanticModel/DomainManager',
-      //   envEnableList: [ENV_KEY.SEMANTIC],
-      // },
-      // {
-      //   path: '/model/:domainId/:modelId/metric',
-      //   component: './SemanticModel/components/ModelMetric',
-      //   envEnableList: [ENV_KEY.SEMANTIC],
-      //   routes: [
-      //     {
-      //       path: '/model/:domainId/:modelId/metric/list',
-      //       component: './SemanticModel/components/ClassMetricTable',
-      //       envEnableList: [ENV_KEY.SEMANTIC],
-      //     },
-      //   ],
-      // },
     ],
   },
-  // {
-  //   path: '/model/',
-  //   component: './SemanticModel/DomainManager',
-  //   name: 'semanticModel',
-  //   envEnableList: [ENV_KEY.SEMANTIC],
-  //   routes: [
-  //     {
-  //       path: '/model/:domainId/:modelId',
-  //       component: './SemanticModel/DomainManager',
-  //       envEnableList: [ENV_KEY.SEMANTIC],
-  //     },
-  //     {
-  //       path: '/model/:domainId/:modelId/:menuKey',
-  //       component: './SemanticModel/DomainManager',
-  //       envEnableList: [ENV_KEY.SEMANTIC],
-  //     },
-  //     {
-  //       path: '/model/:domainId/:modelId/metric',
-  //       component: './SemanticModel/components/ModelMetric',
-  //       envEnableList: [ENV_KEY.SEMANTIC],
-  //       routes: [
-  //         {
-  //           path: '/model/:domainId/:modelId/metric/list',
-  //           component: './SemanticModel/components/ClassMetricTable',
-  //           envEnableList: [ENV_KEY.SEMANTIC],
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // },
-
-  // {
-  //   path: '/model/:domainId/:modelId/:menuKey',
-  //   component: './SemanticModel/DomainManager',
-  //   name: 'semanticModel',
-  //   envEnableList: [ENV_KEY.SEMANTIC],
-  // },
 
   {
     path: '/metric',

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

@@ -12,6 +12,7 @@ import { publicPath } from '../config/defaultSettings';
 import { Copilot } from 'supersonic-chat-sdk';
 import { configProviderTheme } from '../config/themeSettings';
 export { request } from './services/request';
+import { BASE_TITLE } from '@/common/constants';
 import { ROUTE_AUTH_CODES } from '../config/routes';
 import AppPage from './pages/index';
 
@@ -106,12 +107,12 @@ export async function getInitialState(): Promise<{
 // }
 
 export function onRouteChange() {
-  const title = window.document.title.split('-SuperSonic')[0];
+  setTimeout(() => {
-  if (!title.includes('SuperSonic')) {
+    let title = window.document.title;
-    window.document.title = `${title}-SuperSonic`;
+    if (!title.toLowerCase().endsWith(BASE_TITLE.toLowerCase())) {
-  } else {
+      window.document.title = `${title}-${BASE_TITLE}`;
-    window.document.title = 'SuperSonic';
+    }
-  }
+  }, 100);
 }
 
 export const layout: RunTimeLayoutConfig = (params) => {

webapp/packages/supersonic-fe/src/common/constants.ts

@@ -3,6 +3,8 @@ export const AUTH_TOKEN_KEY = process.env.APP_TARGET === 'inner' ? 'TME_TOKEN' :
 // 记录上次访问页面
 export const FROM_URL_KEY = 'FROM_URL';
 
+export const BASE_TITLE = 'Supersonic';
+
 export const PRIMARY_COLOR = '#f87653';
 export const CHART_BLUE_COLOR = '#446dff';
 export const CHAT_BLUE = '#1b4aef';

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { history, useParams, useModel } from '@umijs/max';
+import { useParams, useModel } from '@umijs/max';
 import DomainManagerTab from './components/DomainManagerTab';
+import { toDomainList } from '@/pages/SemanticModel/utils';
 
 type Props = {};
 
@@ -14,16 +15,12 @@ const DomainManager: React.FC<Props> = ({}) => {
 
   const [activeKey, setActiveKey] = useState<string>(menuKey);
 
-  const pushUrlMenu = (domainId: number, menuKey: string) => {
-    history.push(`/model/domain/${domainId}/${menuKey}`);
-  };
-
   return (
     <DomainManagerTab
       activeKey={activeKey}
       onMenuChange={(menuKey) => {
         setActiveKey(menuKey);
-        pushUrlMenu(selectDomainId, menuKey);
+        toDomainList(selectDomainId, menuKey);
       }}
     />
   );

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

@@ -540,7 +540,6 @@ const TagInfoCreateForm: React.FC<CreateFormProps> = ({
       forceRender
       width={800}
       style={{ top: 48 }}
-      // styles={{ padding: '32px 40px 48px' }}
       destroyOnClose
       title={`${isEdit ? '编辑' : '新建'}标签`}
       maskClosable={false}

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

@@ -1,7 +1,8 @@
 import { message, Tabs, Button, Space } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
-import { useParams, history } from '@umijs/max';
+import { useParams, history, Helmet } from '@umijs/max';
+import { BASE_TITLE } from '@/common/constants';
 import styles from './style.less';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
@@ -80,7 +81,7 @@ const MetricDetail: React.FC<Props> = () => {
     {
       key: 'metricCaliberInput',
       label: '基础信息',
-      children: <MetricBasicInfo metircData={metircData} onQueryMetricData={queryMetricData} />,
+      children: <MetricBasicInfo metircData={metircData} />,
     },
     {
       key: 'metricTrend',
@@ -103,8 +104,18 @@ const MetricDetail: React.FC<Props> = () => {
 
   return (
     <>
+      <Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
       <div className={styles.metricDetailWrapper}>
         <div className={styles.metricDetail}>
+          <div className={styles.siderContainer}>
+            <MetricInfoSider
+              relationDimensionOptions={relationDimensionOptions}
+              metircData={metircData}
+              onDimensionRelationBtnClick={() => {
+                setMetricRelationModalOpenState(true);
+              }}
+            />
+          </div>
           <div className={styles.tabContainer}>
             <Tabs
               defaultActiveKey="metricCaliberInput"
@@ -130,15 +141,6 @@ const MetricDetail: React.FC<Props> = () => {
               className={styles.metricDetailTab}
             />
           </div>
-          <div className={styles.siderContainer}>
-            <MetricInfoSider
-              relationDimensionOptions={relationDimensionOptions}
-              metircData={metircData}
-              onDimensionRelationBtnClick={() => {
-                setMetricRelationModalOpenState(true);
-              }}
-            />
-          </div>
         </div>
         <DimensionAndMetricRelationModal
           metricItem={metircData}

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

@@ -1,12 +1,14 @@
 import { message } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { getMetricData } from '../service';
-import { useParams, useModel } from '@umijs/max';
+import { useParams, useModel, Helmet } from '@umijs/max';
-import styles from './style.less';
+import { BASE_TITLE } from '@/common/constants';
 import { ISemantic } from '../data';
-import MetricInfoEditSider from './MetricInfoEditSider';
 import MetricInfoCreateForm from './components/MetricInfoCreateForm';
-import { MetricSettingKey } from './constants';
+import DetailContainer from '../components/DetailContainer';
+import DetailSider from '../components/DetailContainer/DetailSider';
+import { ProjectOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
+import { MetricSettingKey, MetricSettingWording } from './constants';
 
 type Props = Record<string, any>;
 
@@ -15,7 +17,7 @@ const MetricDetail: React.FC<Props> = () => {
   const metricId = params.metricId;
   const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
   const metricModel = useModel('SemanticModel.metricData');
-  const { selectMetric, setSelectMetric } = metricModel;
+  const { setSelectMetric } = metricModel;
   const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
 
   useEffect(() => {
@@ -41,23 +43,35 @@ const MetricDetail: React.FC<Props> = () => {
     message.error(msg);
   };
 
+  const settingList = [
+    {
+      icon: <ProjectOutlined />,
+      key: MetricSettingKey.BASIC,
+      text: MetricSettingWording[MetricSettingKey.BASIC],
+    },
+    {
+      icon: <ConsoleSqlOutlined />,
+      key: MetricSettingKey.SQL_CONFIG,
+      text: MetricSettingWording[MetricSettingKey.SQL_CONFIG],
+    },
+  ];
+
   return (
     <>
-      <div className={styles.metricEditWrapper}>
+      <Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
-        <div className={styles.metricDetail}>
+      <DetailContainer
-          <div className={styles.siderContainer}>
+        siderNode={
-            <MetricInfoEditSider
+          <DetailSider
-              onSettingKeyChange={(key: string) => {
+            menuKey={MetricSettingKey.BASIC}
-                setSettingKey(key);
+            menuList={settingList}
-              }}
+            detailData={metircData}
-              metircData={metircData}
+            onMenuKeyChange={(key: string) => {
-            />
+              setSettingKey(key);
-          </div>
+            }}
-          <div className={styles.tabContainer}>
+          />
-            <MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />
+        }
-          </div>
+        containerNode={<MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />}
-        </div>
+      />
-      </div>
     </>
   );
 };

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

@@ -1,57 +0,0 @@
-import { message } from 'antd';
-import React, { useState, useEffect } from 'react';
-import { getMetricData } from '../service';
-import { useParams } from '@umijs/max';
-import styles from './style.less';
-import { ISemantic } from '../data';
-import MetricInfoEditSider from './MetricInfoEditSider';
-import MetricInfoCreateForm from './components/MetricInfoCreateForm';
-import { MetricSettingKey } from './constants';
-
-type Props = Record<string, any>;
-
-const MetricDetail: React.FC<Props> = () => {
-  const params: any = useParams();
-  const metricId = params.metricId;
-  const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
-
-  const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
-
-  useEffect(() => {
-    if (!metricId) {
-      return;
-    }
-    queryMetricData(metricId);
-  }, [metricId]);
-
-  const queryMetricData = async (metricId: string) => {
-    const { code, data, msg } = await getMetricData(metricId);
-    if (code === 200) {
-      setMetircData({ ...data });
-      return;
-    }
-    message.error(msg);
-  };
-
-  return (
-    <>
-      <div className={styles.metricWrapper}>
-        <div className={styles.metricDetail}>
-          {/* <div className={styles.siderContainer}>
-            <MetricInfoEditSider
-              onSettingKeyChange={(key: string) => {
-                setSettingKey(key);
-              }}
-              metircData={metircData}
-            />
-          </div> */}
-          <div className={styles.tabContainer}>
-            <MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default MetricDetail;

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

@@ -152,8 +152,6 @@ const ClassMetricTable: React.FC<Props> = ({}) => {
   };
 
   const handleMetricEdit = (metricItem: ISemantic.IMetricItem) => {
-    // setMetricItem(metricItem);
-    // setCreateModalVisible(true);
     history.push(`/model/metric/edit/${metricItem.id}`);
   };
 

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

@@ -59,15 +59,6 @@ const MetricInfoSider: React.FC<Props> = ({
       <div className={styles.sectionContainer}>
         <hr className={styles.hr} />
         <div className={styles.section}>
-          {/* <div className={styles.sectionTitleBox}>
-            <span className={styles.sectionTitle}>
-              <Space>
-                <ContainerOutlined />
-                基本信息
-              </Space>
-            </span>
-          </div> */}
-
           <div className={styles.item}>
             <span className={styles.itemLable}>敏感度: </span>
             <span className={styles.itemValue}>

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

@@ -1,4 +1,4 @@
-import { Form, Input, Space, Row, Col, Switch, Flex, Tag } from 'antd';
+import { Form, Input, Space, Row, Col } from 'antd';
 import StandardFormRow from '@/components/StandardFormRow';
 import TagSelect from '@/components/TagSelect';
 import React, { ReactNode, useEffect } from 'react';

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

@@ -29,7 +29,6 @@ import {
   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';
@@ -68,7 +67,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
   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) => {
@@ -827,7 +825,10 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
               <span style={{ flex: 'auto' }}>{MetricSettingWording[settingKey]}</span>
 
               <span style={{ flex: 'none' }}>
-                <Button
+                <Button type="primary" onClick={handleSave}>
+                  保 存
+                </Button>
+                {/* <Button
                   size="middle"
                   type="link"
                   key="backListBtn"
@@ -839,7 +840,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
                     <ArrowLeftOutlined />
                     返回列表页
                   </Space>
-                </Button>
+                </Button> */}
               </span>
             </div>
             <div className={styles.infoCardContainer}>
@@ -870,13 +871,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
                 {renderContent()}
               </Form>
             </div>
-            <div className={styles.infoCardFooter}>
-              <div className={styles.infoCardFooterContainer}>
-                <Button type="primary" onClick={handleSave}>
-                  保 存
-                </Button>
-              </div>
-            </div>
           </div>
           <DimensionAndMetricRelationModal
             metricItem={metricItem}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Outlet } from 'umi';
+import { Outlet } from '@umijs/max';
 
 const market: React.FC = () => {
   return (

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

@@ -183,68 +183,7 @@
   }
 }
 
-.metricEditWrapper {
+
-  .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;
-      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);
-      border-radius: 6px;
-      padding: 24px 0 24px 24px;
-    }
-  }
-}
 
 .metricDetailWrapper {
   height: calc(100vh - 56px);
@@ -276,7 +215,8 @@
     .tabContainer {
       height: 100%;
       min-height: calc(100vh - 78px);
-      width: calc(100vw - 450px);
+      // width: calc(100vw - 450px);
+      width: 100%;
       background-color: #fafafb;
     }
     .metricInfoContent {
@@ -305,9 +245,8 @@
     .siderContainer {
       width: 450px;
       min-height: calc(100vh - 78px);
-      margin: 10px 20px 20px 0;
-      background-color: rgb(255, 255, 255);
       border-radius: 6px;
+      padding: 10px 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;
     }
@@ -326,262 +265,5 @@
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.metricInfoSider {
-  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;
-    &:hover {
-      color: #5493ff;
-    }
-  }
-  .title {
-    margin-bottom: 20px;
-    .name {
-      font-weight: 600;
-      font-size: 18px;
-    }
-    .bizName {
-      margin: 5px 0 0 25px;
-      color: #7b809a;
-      font-weight: 400;
-    }
-  }
-  .desc {
-    display: block;
-    margin-top: 8px;
-    color: #7b809a;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 1.9;
-  }
-  .subTitle {
-    margin: 0px;
-    color: rgb(123, 128, 154);
-    font-weight: 700;
-    font-size: 14px;
-    line-height: 1.25;
-    letter-spacing: 0.03333em;
-    text-transform: uppercase;
-    text-decoration: none;
-    vertical-align: unset;
-    opacity: 1;
-  }
-  .sectionContainer {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow: scroll;
 
 
-    overflow: hidden;
-    background-image: none;
-    border-radius: 6px;
-    .section {
-      padding: 16px;
-      color: rgb(52, 71, 103);
-      line-height: 1.25;
-      background: transparent;
-      box-shadow: none;
-      opacity: 1;
-      .sectionTitleBox {
-        padding: 8px 0;
-        color: rgb(52, 71, 103);
-        background: transparent;
-        box-shadow: none;
-        opacity: 1;
-        .sectionTitle {
-          margin: 0px;
-          color: rgb(52, 71, 103);
-          font-weight: 600;
-          font-size: 16px;
-          line-height: 1.625;
-          letter-spacing: 0.0075em;
-          text-transform: capitalize;
-          text-decoration: none;
-          vertical-align: unset;
-          opacity: 1;
-        }
-      }
-
-      .item {
-        display: flex;
-        padding-top: 8px;
-        padding-right: 16px;
-        padding-bottom: 8px;
-        color: rgb(52, 71, 103);
-        background: transparent;
-        box-shadow: none;
-        opacity: 1;
-        .itemLable {
-          min-width: fit-content;
-          margin: 0px;
-          margin-right: 10px;
-          color: #344767;
-          font-weight: 700;
-          font-size: 14px;
-          line-height: 1.5;
-          letter-spacing: 0.02857em;
-          text-transform: capitalize;
-          text-decoration: none;
-          vertical-align: unset;
-          opacity: 1;
-        }
-        .itemValue {
-          margin: 0px;
-          color: #7b809a;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 1.5;
-          letter-spacing: 0.02857em;
-          text-transform: none;
-          text-decoration: none;
-          vertical-align: unset;
-          opacity: 1;
-        }
-      }
-    }
-    .hr {
-      flex-shrink: 0;
-      margin: 0px;
-      border-color: rgb(242, 244, 247);
-      // border-width: 0px 0px thin;
-      border-style: solid;
-    }
-    .ctrlBox {
-      .ctrlList {
-        position: relative;
-        margin: 0px;
-        padding: 8px 0px;
-        list-style: none;
-        background-color: rgb(249, 250, 251);
-        li {
-          position: relative;
-          display: flex;
-          flex-grow: 1;
-          align-items: center;
-          justify-content: flex-start;
-          box-sizing: border-box;
-          min-width: 0px;
-          margin: 4px;
-          padding: 4px 16px;
-          color: inherit;
-          text-align: left;
-          text-decoration: none;
-          vertical-align: middle;
-          background-color: transparent;
-          border: 0px;
-          border-radius: 0px;
-          outline: 0px;
-          cursor: pointer;
-          transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-          appearance: none;
-          user-select: none;
-          -webkit-tap-highlight-color: transparent;
-          -webkit-box-flex: 1;
-          -webkit-box-pack: start;
-          -webkit-box-align: center;
-          &:hover {
-            color: #3182ce;
-            text-decoration: none;
-            background-color: rgba(16, 24, 40, 0.04);
-          }
-        }
-        .ctrlItemIcon {
-          flex-shrink: 0;
-          min-width: unset;
-          margin-right: 5px;
-          font-size: 14px;
-        }
-        .styles.ctrlItemLable {
-          display: block;
-          margin: 0px;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 1.6;
-        }
-      }
-    }
-  }
-}
-
-.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/ModelManager.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { history, useParams, useModel } from '@umijs/max';
 import ModelManagerTab from './components/ModelManagerTab';
+import { toModelList } from '@/pages/SemanticModel/utils';
 
 type Props = {};
 
@@ -21,7 +22,7 @@ const ModelManager: React.FC<Props> = ({}) => {
 
   const initModelConfig = () => {
     const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
-    pushUrlMenu(selectDomainId, selectModelId, currentMenuKey);
+    toModelList(selectDomainId, selectModelId, currentMenuKey);
     setActiveKey(currentMenuKey);
   };
 
@@ -34,17 +35,13 @@ const ModelManager: React.FC<Props> = ({}) => {
     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);
+        toModelList(selectDomainId, selectModelId, menuKey);
       }}
     />
   );

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

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { history, useParams, useModel, Outlet } from '@umijs/max';
+import { 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 { toDomainList } from '@/pages/SemanticModel/utils';
 
 type Props = {};
 
@@ -14,10 +15,8 @@ const OverviewContainer: React.FC<Props> = ({}) => {
   const modelId = params.modelId;
   const domainModel = useModel('SemanticModel.domainData');
   const modelModel = useModel('SemanticModel.modelData');
-  const databaseModel = useModel('SemanticModel.databaseData');
+  const { setSelectDomain, selectDomainId } = domainModel;
-  const { setSelectDomain, setDomainList, selectDomainId } = domainModel;
   const { setSelectModel, setModelTableHistoryParams, MrefreshModelList } = modelModel;
-  const { MrefreshDatabaseList } = databaseModel;
   const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
   const [collapsedState, setCollapsedState] = useState(true);
 
@@ -25,51 +24,11 @@ const OverviewContainer: React.FC<Props> = ({}) => {
     if (!selectDomainId || `${domainId}` === `${selectDomainId}`) {
       return;
     }
-    pushUrlMenu(selectDomainId, menuKey);
+    toDomainList(selectDomainId, menuKey);
   }, [selectDomainId]);
 
-  // const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
+  const cleanModelInfo = (domainId: number) => {
-  //   const targetNode = domainList.filter((item: any) => {
+    toDomainList(domainId, defaultTabKey);
-  //     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);
   };
 
@@ -102,9 +61,6 @@ const OverviewContainer: React.FC<Props> = ({}) => {
                   [id]: {},
                 });
               }}
-              // onTreeDataUpdate={() => {
-              //   // initProjectTree();
-              // }}
             />
           </div>
 

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

@@ -1,9 +1,9 @@
-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';
+import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
 
 const PageBreadcrumb: React.FC = () => {
   const domainModel = useModel('SemanticModel.domainData');
@@ -20,7 +20,7 @@ const PageBreadcrumb: React.FC = () => {
         <Space
           onClick={() => {
             setSelectModel(undefined);
-            history.push(`/model/domain/${selectDomainId}/overview`);
+            toDomainList(selectDomainId, 'overview');
           }}
         >
           <HomeOutlined />
@@ -41,7 +41,7 @@ const PageBreadcrumb: React.FC = () => {
           <Space
             onClick={() => {
               setSelectMetric(undefined);
-              history.push(`/model/domain/manager/${selectDomainId}/${selectModelId}/`);
+              toModelList(selectDomainId, selectModelId);
             }}
           >
             <FundViewOutlined style={{ position: 'relative', top: '2px' }} />

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

@@ -11,6 +11,7 @@ import styles from '../../components/style.less';
 import { ISemantic } from '../../data';
 import { ColumnsConfig } from '../../components/TableColumnRender';
 import ViewSearchFormModal from './ViewSearchFormModal';
+import { toDatasetEditPage } from '@/pages/SemanticModel/utils';
 
 type Props = {
   // dataSetList: ISemantic.IDatasetItem[];
@@ -90,9 +91,10 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
         return (
           <a
             onClick={() => {
-              setEditFormStep(1);
+              toDatasetEditPage(record.domainId, record.id);
-              setViewItem(record);
+              // setEditFormStep(1);
-              setCreateDataSourceModalOpen(true);
+              // setViewItem(record);
+              // setCreateDataSourceModalOpen(true);
             }}
           >
             {name}

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

@@ -0,0 +1,289 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Form, Button, Modal, Input, Select, Steps, Spin, Space } from 'antd';
+import styles from '../../components/style.less';
+import { message } from 'antd';
+import { formLayout } from '@/components/FormHelper/utils';
+import { createView, updateView, getDimensionList, queryMetric } from '../../service';
+import { ISemantic } from '../../data';
+import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import SelectTMEPerson from '@/components/SelectTMEPerson';
+import ViewModelConfigTransfer from './ViewModelConfigTransfer';
+import type { FormInstance } from 'antd';
+
+const FormItem = Form.Item;
+
+export type ModelCreateFormModalProps = {
+  // step: number;
+  form: FormInstance;
+  activeKey: string;
+  domainId: number;
+  viewItem: any;
+  modelList: ISemantic.IModelItem[];
+  onCancel: () => void;
+  onSubmit: (values: any) => void;
+};
+
+const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
+  form,
+  activeKey,
+  viewItem,
+  domainId,
+  onCancel,
+  onSubmit,
+  modelList,
+}) => {
+  const stepWidth: Record<string, number> = {
+    '0': 800,
+    '1': 1200,
+    '2': 800,
+  };
+  // const [currentStep, setCurrentStep] = useState();
+
+  const [formVals, setFormVals] = useState<ISemantic.IModelItem>({
+    ...viewItem,
+    currentModel: modelList[0]?.id,
+  });
+
+  const [queryType, setQueryType] = useState<string>('METRIC');
+
+  const [saveLoading, setSaveLoading] = useState<boolean>(false);
+  const [dimensionLoading, setDimensionLoading] = useState<boolean>(false);
+  // const [modalWidth, setModalWidth] = useState<number>(stepWidth[`${currentStep}`]);
+  const [selectedModelItem, setSelectedModelItem] = useState<ISemantic.IModelItem | undefined>(
+    modelList[0],
+  );
+  // const [form] = Form.useForm();
+  const configTableRef = useRef<any>();
+
+  useEffect(() => {
+    form.setFieldsValue({
+      ...viewItem,
+    });
+    // setQueryType(viewItem?.queryType);
+  }, [viewItem]);
+
+  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
+  const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
+  // const [tagList, setTagList] = useState<ISemantic.ITagItem[]>();
+
+  useEffect(() => {
+    console.log(selectedModelItem, 'selectedModelItemselectedModelItem');
+    if (selectedModelItem?.id) {
+      queryDimensionList(selectedModelItem.id);
+      queryMetricList(selectedModelItem.id);
+      // queryTagList(selectedModelItem.id);
+    }
+  }, [selectedModelItem]);
+
+  const queryDimensionList = async (modelId: number) => {
+    setDimensionLoading(true);
+    const { code, data, msg } = await getDimensionList({ modelId });
+    setDimensionLoading(false);
+    if (code === 200 && Array.isArray(data?.list)) {
+      setDimensionList(data.list);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const queryMetricList = async (modelId: number) => {
+    const { code, data, msg } = await queryMetric({ modelId });
+    if (code === 200 && Array.isArray(data?.list)) {
+      setMetricList(data.list);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const handleConfirm = async () => {
+    const fieldsValue = await form.validateFields();
+    const viewModelConfigsMap = configTableRef?.current.getViewModelConfigs() || {};
+
+    const queryData: ISemantic.IModelItem = {
+      ...formVals,
+      ...fieldsValue,
+      queryType,
+      dataSetDetail: {
+        dataSetModelConfigs: Object.values(viewModelConfigsMap),
+      },
+      domainId,
+    };
+    setFormVals(queryData);
+    setSaveLoading(true);
+    const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
+    setSaveLoading(false);
+    if (code === 200) {
+      onSubmit?.(queryData);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  // const forward = () => {
+  //   setModalWidth(stepWidth[`${currentStep + 1}`]);
+  //   setCurrentStep(currentStep + 1);
+  // };
+  // const backward = () => {
+  //   setModalWidth(stepWidth[`${currentStep - 1}`]);
+  //   setCurrentStep(currentStep - 1);
+  // };
+
+  // const handleNext = async () => {
+  //   await form.validateFields();
+  //   forward();
+  // };
+
+  // const renderFooter = () => {
+  //   if (currentStep === 1) {
+  //     return (
+  //       <>
+  //         <Button style={{ float: 'left' }} onClick={backward}>
+  //           上一步
+  //         </Button>
+  //         <Button
+  //           type="primary"
+  //           loading={saveLoading}
+  //           onClick={() => {
+  //             handleConfirm();
+  //           }}
+  //         >
+  //           保 存
+  //         </Button>
+  //       </>
+  //     );
+  //   }
+  //   return (
+  //     <>
+  //       <Button onClick={onCancel}>取消</Button>
+  //       <Button type="primary" onClick={handleNext}>
+  //         下一步
+  //       </Button>
+  //       <Button
+  //         type="primary"
+  //         loading={saveLoading}
+  //         onClick={() => {
+  //           handleConfirm();
+  //         }}
+  //       >
+  //         保 存
+  //       </Button>
+  //     </>
+  //   );
+  // };
+
+  const renderContent = () => {
+    return (
+      <>
+        <div style={{ display: activeKey === 'relation' ? 'block' : 'none' }}>
+          <Spin spinning={dimensionLoading}>
+            <ViewModelConfigTransfer
+              key={queryType}
+              queryType={queryType}
+              toolbarSolt={
+                <Space>
+                  <span>切换模型: </span>
+                  <Select
+                    style={{
+                      minWidth: 150,
+                      textAlign: 'left',
+                    }}
+                    value={selectedModelItem?.id}
+                    placeholder="请选择模型，获取当前模型下指标维度信息"
+                    onChange={(val) => {
+                      console.log(val, 211111111);
+                      setDimensionList(undefined);
+                      setMetricList(undefined);
+                      const modelItem = modelList.find((item) => item.id === val);
+                      setSelectedModelItem(modelItem);
+                    }}
+                    options={modelList.map((item) => {
+                      return { label: item.name, value: item.id };
+                    })}
+                  />
+                </Space>
+              }
+              dimensionList={dimensionList}
+              metricList={metricList}
+              modelItem={selectedModelItem}
+              viewItem={viewItem}
+              ref={configTableRef}
+            />
+          </Spin>
+        </div>
+        <div style={{ display: activeKey === 'basic' ? 'block' : 'none' }}>
+          <FormItem
+            name="name"
+            label="数据集名称"
+            rules={[{ required: true, message: '请输入数据集名称！' }]}
+          >
+            <Input placeholder="数据集名称不可重复" />
+          </FormItem>
+          <FormItem
+            name="bizName"
+            label="数据集英文名称"
+            rules={[{ required: true, message: '请输入数据集英文名称！' }]}
+          >
+            <Input placeholder="请输入数据集英文名称" />
+          </FormItem>
+          {/* <FormItem
+            name="alias"
+            label="别名"
+            getValueFromEvent={(value) => {
+              return Array.isArray(value) ? value.join(',') : '';
+            }}
+            getValueProps={(value) => {
+              return {
+                value: isString(value) ? value.split(',') : [],
+              };
+            }}
+          >
+            <Select
+              mode="tags"
+              placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
+              tokenSeparators={[',']}
+              maxTagCount={9}
+            />
+          </FormItem> */}
+          <FormItem name="admins" label={<FormItemTitle title={'责任人'} />}>
+            <SelectTMEPerson placeholder="请邀请团队成员" />
+          </FormItem>
+          <FormItem name="description" label="数据集描述">
+            <Input.TextArea placeholder="数据集描述" />
+          </FormItem>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    // <Modal
+    //   width={modalWidth}
+    //   destroyOnClose
+    //   title={'数据集信息'}
+    //   open={true}
+    //   maskClosable={false}
+    //   footer={renderFooter()}
+    //   onCancel={onCancel}
+    // >
+    <>
+      {/* <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
+        <Step title="基本信息" />
+        <Step title="关联信息" />
+      </Steps> */}
+      <Form
+        {...formLayout}
+        form={form}
+        initialValues={{
+          ...formVals,
+        }}
+        onValuesChange={(value, values) => {}}
+        className={styles.form}
+      >
+        {renderContent()}
+      </Form>
+    </>
+    // </Modal>
+  );
+};
+
+export default DatasetCreateForm;

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

@@ -0,0 +1,118 @@
+import { message, Form } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { getMetricData } from '../../service';
+import { useParams, useModel, Helmet } from '@umijs/max';
+import { BASE_TITLE } from '@/common/constants';
+import { ISemantic } from '../../data';
+import { createView, updateView, getAllModelByDomainId, getDataSetDetail } from '../../service';
+import DetailContainer from '@/pages/SemanticModel/components/DetailContainer';
+import DetailSider from '@/pages/SemanticModel/components/DetailContainer/DetailSider';
+import { ProjectOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
+import DatasetCreateForm from './DatasetCreateForm';
+import DetailFormWrapper from '@/pages/SemanticModel/components/DetailContainer/DetailFormWrapper';
+// import { MetricSettingKey, MetricSettingWording } from './constants';
+
+type Props = Record<string, any>;
+
+const DataSetDetail: React.FC<Props> = () => {
+  const settingList = [
+    {
+      icon: <ProjectOutlined />,
+      key: 'basic',
+      text: '基本信息',
+    },
+    {
+      icon: <ConsoleSqlOutlined />,
+      key: 'relation',
+      text: '关联信息',
+    },
+  ];
+  const params: any = useParams();
+  const detailId = params.datasetId;
+  const [detailData, setDetailData] = useState<ISemantic.IMetricItem>();
+  const domainModel = useModel('SemanticModel.domainData');
+  const modelModel = useModel('SemanticModel.modelData');
+  const { modelList } = modelModel;
+  const { selectDomainId } = domainModel;
+  const [settingKey, setSettingKey] = useState<string>();
+  // const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
+  const [activeMenu, setActiveMenu] = useState<any>(settingList[0]);
+
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (!detailId) {
+      return;
+    }
+    queryDetailData(detailId);
+  }, [detailId]);
+
+  // useEffect(() => {
+  //   if (!selectDomainId) {
+  //     return;
+  //   }
+  //   queryDomainAllModel();
+  // }, [selectDomainId]);
+
+  // const queryDomainAllModel = async () => {
+  //   const { code, data, msg } = await getAllModelByDomainId(selectDomainId);
+  //   if (code === 200) {
+  //     setModelList(data);
+  //   } else {
+  //     message.error(msg);
+  //   }
+  // };
+
+  const queryDetailData = async (id: number) => {
+    const { code, data, msg } = await getDataSetDetail(id);
+    if (code === 200) {
+      setDetailData({ ...data });
+      return;
+    }
+    message.error(msg);
+  };
+
+  return (
+    <>
+      <Helmet title={`[数据集]${detailData?.name}-${BASE_TITLE}`} />
+      <DetailContainer
+        siderNode={
+          <DetailSider
+            menuKey={'basic'}
+            menuList={settingList}
+            detailData={detailData}
+            onMenuKeyChange={(key: string, menu) => {
+              setSettingKey(key);
+              setActiveMenu(menu);
+            }}
+          />
+        }
+        containerNode={
+          <DetailFormWrapper
+            currentMenu={activeMenu}
+            onSave={() => {
+              console.log(form.getFieldsValue());
+            }}
+          >
+            <DatasetCreateForm
+              form={form}
+              activeKey={activeMenu.key}
+              domainId={selectDomainId}
+              viewItem={detailData}
+              modelList={modelList}
+              onSubmit={() => {
+                // queryDataSetList();
+                // setCreateDataSourceModalOpen(false);
+              }}
+              onCancel={() => {
+                // setCreateDataSourceModalOpen(false);
+              }}
+            />
+          </DetailFormWrapper>
+        }
+      />
+    </>
+  );
+};
+
+export default DataSetDetail;

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

@@ -262,7 +262,6 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
       <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
         <Step title="基本信息" />
         <Step title="关联信息" />
-        {/* <Step title="进阶设置" /> */}
       </Steps>
       <Form
         {...formLayout}

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, history } from '@umijs/max';
+import { useModel } from '@umijs/max';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
 import {
   queryMetric,
@@ -21,6 +21,7 @@ import TableHeaderFilter from '@/components/TableHeaderFilter';
 import styles from './style.less';
 import { ISemantic } from '../data';
 import { ColumnsConfig } from './TableColumnRender';
+import { toMetricEditPage } from '@/pages/SemanticModel/utils';
 
 type Props = {
   onEmptyMetricData?: () => void;
@@ -32,7 +33,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
   const metricModel = useModel('SemanticModel.metricData');
   const { selectDomainId } = domainModel;
   const { selectModelId: modelId } = modelModel;
-  const { MrefreshMetricList, selectMetric, setSelectMetric } = metricModel;
+  const { MrefreshMetricList, setSelectMetric } = metricModel;
   const [batchSensitiveLevelOpenState, setBatchSensitiveLevelOpenState] = useState<boolean>(false);
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
@@ -243,9 +244,8 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
               type="link"
               key="metricEditBtn"
               onClick={() => {
-                history.push(`/model/metric/${record.domainId}/${record.modelId}/${record.id}`);
+                const { domainId, modelId, id } = record;
-                // setMetricItem(record);
+                toMetricEditPage(domainId, modelId, id);
-                // setCreateModalVisible(true);
               }}
             >
               编辑

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

@@ -0,0 +1,55 @@
+import { Button } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { MenuItem } from './type';
+import styles from './style.less';
+
+type Props = {
+  detailData?: any;
+  currentMenu: MenuItem;
+  onSave?: (data?: any) => void;
+} & { children: React.ReactNode };
+
+const DetailFormWrapper: React.FC<Props> = ({ children, currentMenu, onSave }) => {
+  const [settingKey, setSettingKey] = useState<string>(currentMenu?.key);
+
+  useEffect(() => {
+    if (currentMenu) {
+      setSettingKey(currentMenu.key);
+    }
+  }, [currentMenu]);
+
+  return (
+    <div className={styles.infoCard}>
+      <div className={styles.infoCardTitle}>
+        <span style={{ flex: 'auto' }}>{currentMenu?.text}</span>
+
+        <span style={{ flex: 'none' }}>
+          <Button
+            type="primary"
+            onClick={() => {
+              onSave?.();
+            }}
+          >
+            保 存
+          </Button>
+          {/* <Button
+          size="middle"
+          type="link"
+          key="backListBtn"
+          onClick={() => {
+            history.back();
+          }}
+        >
+          <Space>
+            <ArrowLeftOutlined />
+            返回列表页
+          </Space>
+        </Button> */}
+        </span>
+      </div>
+      <div className={styles.infoCardContainer}>{children}</div>
+    </div>
+  );
+};
+
+export default DetailFormWrapper;

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

@@ -1,60 +1,47 @@
 import { Tag, Space, Tooltip } from 'antd';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import { MetricSettingKey, MetricSettingWording } from './constants';
-import { basePath } from '../../../../config/defaultSettings';
 import {
   ExportOutlined,
   SolutionOutlined,
   PartitionOutlined,
-  ProjectOutlined,
-  ConsoleSqlOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
 import styles from './style.less';
-import { ISemantic } from '../data';
+import IndicatorStar from '../IndicatorStar';
-import IndicatorStar from '../components/IndicatorStar';
+import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
+import { MenuItem } from './type';
 
 type Props = {
-  metircData: ISemantic.IMetricItem;
+  detailData: any;
-  onSettingKeyChange?: (key: MetricSettingKey) => void;
+  menuKey: string;
+  menuList: MenuItem[];
+  onMenuKeyChange?: (key: string, item: MenuItem) => void;
 };
 
-const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }) => {
+const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKeyChange }) => {
-  const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
+  const [settingKey, setSettingKey] = useState<string>(menuKey);
 
-  const settingList = [
+  useEffect(() => {
-    {
+    if (menuKey) {
-      icon: <ProjectOutlined />,
+      setSettingKey(menuKey);
-      key: MetricSettingKey.BASIC,
+    }
-      text: MetricSettingWording[MetricSettingKey.BASIC],
+  }, [menuKey]);
-    },
-    {
-      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.DetailInfoSider}>
       <div className={styles.sectionContainer}>
-        {metircData?.id ? (
+        {detailData?.id ? (
           <div className={styles.title}>
             <div className={styles.name}>
               <Space>
-                <IndicatorStar indicatorId={metircData?.id} initState={metircData?.isCollect} />
+                <IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
-                {metircData?.name}
+                {detailData?.name}
-                {metircData?.hasAdminRes && (
+                {detailData?.hasAdminRes && (
                   <span
                     className={styles.gotoMetricListIcon}
                     onClick={() => {
-                      window.open(`${basePath}model/${metircData.domainId}/${metircData.modelId}/`);
+                      toModelList(detailData.domainId, detailData.modelId);
                     }}
                   >
                     <Tooltip title="前往所属模型指标列表">
@@ -64,7 +51,7 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
                 )}
               </Space>
             </div>
-            {metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
+            {detailData?.bizName && <div className={styles.bizName}>{detailData.bizName}</div>}
           </div>
         ) : (
           <div className={styles.createTitle}>
@@ -78,13 +65,13 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
         <hr className={styles.hr} />
         <div className={styles.section} style={{ padding: '16px 0' }}>
           <ul className={styles.settingList}>
-            {settingList.map((item) => {
+            {menuList.map((item) => {
               return (
                 <li
                   className={item.key === settingKey ? styles.active : ''}
                   key={item.key}
                   onClick={() => {
-                    onSettingKeyChange?.(item.key);
+                    onMenuKeyChange?.(item.key, item);
                     setSettingKey(item.key);
                   }}
                 >
@@ -97,8 +84,7 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
             })}
           </ul>
         </div>
-        {/* <hr className={styles.hr} /> */}
+        {detailData?.id && (
-        {metircData?.id && (
           <div className={styles.section} style={{ marginTop: 'auto' }}>
             <div className={styles.sectionTitleBox}>
               <span className={styles.sectionTitle}>
@@ -113,13 +99,13 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
               <span className={styles.itemValue}>
                 <Space>
                   <Tag icon={<PartitionOutlined />} color="#3b5999">
-                    {metircData?.modelName || '模型名为空'}
+                    {detailData?.modelName || '模型名为空'}
                   </Tag>
-                  {metircData?.hasAdminRes && (
+                  {detailData?.hasAdminRes && (
                     <span
                       className={styles.gotoMetricListIcon}
                       onClick={() => {
-                        window.open(`${basePath}model/${metircData.domainId}/0/overview`);
+                        toDomainList(detailData.domainId, 'overview');
                       }}
                     >
                       <Tooltip title="前往模型设置页">
@@ -132,31 +118,29 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
             </div>
             <div className={styles.item}>
               <span className={styles.itemLable}>创建人: </span>
-              <span className={styles.itemValue}>{metircData?.createdBy}</span>
+              <span className={styles.itemValue}>{detailData?.createdBy}</span>
             </div>
             <div className={styles.item}>
               <span className={styles.itemLable}>创建时间: </span>
               <span className={styles.itemValue}>
-                {metircData?.createdAt
+                {detailData?.createdAt
-                  ? dayjs(metircData?.createdAt).format('YYYY-MM-DD HH:mm:ss')
+                  ? dayjs(detailData?.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
+                {detailData?.createdAt
-                  ? dayjs(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
+                  ? dayjs(detailData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
                   : ''}
               </span>
             </div>
           </div>
         )}
-
-        {/* <hr className={styles.hr} /> */}
       </div>
     </div>
   );
 };
 
-export default MetricInfoEditSider;
+export default DetailSider;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './style.less';
+
+type Props = {
+  siderNode: React.ReactNode;
+  containerNode: React.ReactNode;
+};
+
+const DetailContainer: React.FC<Props> = ({ siderNode, containerNode }) => {
+  return (
+    <>
+      <div className={styles.DetailWrapper}>
+        <div className={styles.Detail}>
+          <div className={styles.siderContainer}>{siderNode}</div>
+          <div className={styles.tabContainer}>{containerNode}</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DetailContainer;

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

@@ -0,0 +1,334 @@
+.DetailWrapper {
+    .Detail {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        padding: 0px;
+        background-color: transparent;
+        height: 100%;
+        .tabContainer {
+          padding: 12px;
+          min-height: calc(100vh - 78px);
+          width: calc(100vw - 350px);
+          background-color: #fafafb;
+        }
+        .siderContainer {
+          width: 350px;
+          min-height: calc(100vh - 78px);
+          border-radius: 6px;
+          padding: 12px 0 12px 12px;
+        }
+      }
+
+  }
+
+
+
+
+  .DetailInfoSider {
+    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;
+      &:hover {
+        color: #5493ff;
+      }
+    }
+    .title {
+      margin-bottom: 20px;
+      .name {
+        font-weight: 600;
+        font-size: 18px;
+      }
+      .bizName {
+        margin: 5px 0 0 25px;
+        color: #7b809a;
+        font-weight: 400;
+      }
+    }
+    .desc {
+      display: block;
+      margin-top: 8px;
+      color: #7b809a;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 1.9;
+    }
+    .subTitle {
+      margin: 0px;
+      color: rgb(123, 128, 154);
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 1.25;
+      letter-spacing: 0.03333em;
+      text-transform: uppercase;
+      text-decoration: none;
+      vertical-align: unset;
+      opacity: 1;
+    }
+    .sectionContainer {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: scroll;
+  
+  
+      overflow: hidden;
+      background-image: none;
+      border-radius: 6px;
+      .section {
+        padding: 16px;
+        color: rgb(52, 71, 103);
+        line-height: 1.25;
+        background: transparent;
+        box-shadow: none;
+        opacity: 1;
+        .sectionTitleBox {
+          padding: 8px 0;
+          color: rgb(52, 71, 103);
+          background: transparent;
+          box-shadow: none;
+          opacity: 1;
+          .sectionTitle {
+            margin: 0px;
+            color: rgb(52, 71, 103);
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 1.625;
+            letter-spacing: 0.0075em;
+            text-transform: capitalize;
+            text-decoration: none;
+            vertical-align: unset;
+            opacity: 1;
+          }
+        }
+  
+        .item {
+          display: flex;
+          padding-top: 8px;
+          padding-right: 16px;
+          padding-bottom: 8px;
+          color: rgb(52, 71, 103);
+          background: transparent;
+          box-shadow: none;
+          opacity: 1;
+          .itemLable {
+            min-width: fit-content;
+            margin: 0px;
+            margin-right: 10px;
+            color: #344767;
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 1.5;
+            letter-spacing: 0.02857em;
+            text-transform: capitalize;
+            text-decoration: none;
+            vertical-align: unset;
+            opacity: 1;
+          }
+          .itemValue {
+            margin: 0px;
+            color: #7b809a;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 1.5;
+            letter-spacing: 0.02857em;
+            text-transform: none;
+            text-decoration: none;
+            vertical-align: unset;
+            opacity: 1;
+          }
+        }
+      }
+      .hr {
+        flex-shrink: 0;
+        margin: 0px;
+        border-color: rgb(242, 244, 247);
+        // border-width: 0px 0px thin;
+        border-style: solid;
+      }
+      .ctrlBox {
+        .ctrlList {
+          position: relative;
+          margin: 0px;
+          padding: 8px 0px;
+          list-style: none;
+          background-color: rgb(249, 250, 251);
+          li {
+            position: relative;
+            display: flex;
+            flex-grow: 1;
+            align-items: center;
+            justify-content: flex-start;
+            box-sizing: border-box;
+            min-width: 0px;
+            margin: 4px;
+            padding: 4px 16px;
+            color: inherit;
+            text-align: left;
+            text-decoration: none;
+            vertical-align: middle;
+            background-color: transparent;
+            border: 0px;
+            border-radius: 0px;
+            outline: 0px;
+            cursor: pointer;
+            transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+            appearance: none;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            -webkit-box-flex: 1;
+            -webkit-box-pack: start;
+            -webkit-box-align: center;
+            &:hover {
+              color: #3182ce;
+              text-decoration: none;
+              background-color: rgba(16, 24, 40, 0.04);
+            }
+          }
+          .ctrlItemIcon {
+            flex-shrink: 0;
+            min-width: unset;
+            margin-right: 5px;
+            font-size: 14px;
+          }
+          .styles.ctrlItemLable {
+            display: block;
+            margin: 0px;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 1.6;
+          }
+        }
+      }
+    }
+  }
+
+
+
+  .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);
+      }
+    }
+  }
+
+
+
+.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: 15px 20px;
+    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;
+    }
+  }
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/type.ts

@@ -0,0 +1,5 @@
+export type MenuItem = {
+  icon: React.ReactNode;
+  key: string;
+  text: string;
+};

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

@@ -11,6 +11,7 @@ import TableHeaderFilter from '@/components/TableHeaderFilter';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
+import { toModelList } from '@/pages/SemanticModel/utils';
 
 type Props = {
   disabledEdit?: boolean;
@@ -105,9 +106,7 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
           <a
             onClick={() => {
               setSelectModel(record);
-
+              toModelList(domainId, id);
-              history.push(`/model/domain/manager/${domainId}/${id}`);
-              // onModelChange?.(record);
             }}
           >
             {_}

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

@@ -136,7 +136,7 @@ export const ColumnsConfig = (params?: ColumnsConfigParams) => {
       render: (_, record: ISemantic.IMetricItem) => {
         const { name, alias, bizName, classifications, id, isCollect, domainId, modelId } = record;
 
-        let url = `/metric/detail/`;
+        let url = `/metric/detail/${id}`;
         let starType: StarType = 'metric';
         if (params?.indicatorInfo) {
           url = replaceRouteParams(params.indicatorInfo.url || '', {

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

@@ -419,7 +419,7 @@
     .infoCardTitle {
       display: flex;
       border-bottom: 1px solid #e6ebf1;
-      padding: 20px 20px 20px 40px;
+      padding: 15px 20px;
       align-items: center;
       color: rgb(38, 38, 38);
       margin: 0px;

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

@@ -2,7 +2,9 @@ import { ISemantic } from '../data';
 import { useState } from 'react';
 
 export default function Domain() {
-  const [selectDomain, setSelectDomain] = useState<ISemantic.IDomainItem>();
+  const [selectDomain, setSelectDomain] = useState<ISemantic.IDomainItem>(
+    {} as ISemantic.IDomainItem,
+  );
   const [domainList, setDomainList] = useState<ISemantic.IDomainItem[]>([]);
 
   return {

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

@@ -628,6 +628,12 @@ export function getDataSetList(domainId: number): Promise<any> {
   });
 }
 
+export function getDataSetDetail(id: number): Promise<any> {
+  return request(`${process.env.API_BASE_URL}dataSet/${id}`, {
+    method: 'GET',
+  });
+}
+
 export function createView(data: any): Promise<any> {
   return request(`${process.env.API_BASE_URL}dataSet`, {
     method: 'POST',

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

@@ -8,6 +8,8 @@ import { ConfigParametersItem } from '../System/types';
 import { TransType } from './enum';
 import { isString, isBoolean } from 'lodash';
 import { ReactNode } from 'react';
+import { history } from '@umijs/max';
+import { openNewPage } from '@/utils/utils';
 
 const FormItem = Form.Item;
 const { TextArea } = Input;
@@ -242,3 +244,19 @@ export const genneratorFormItemList = (itemList: ConfigParametersItem[]) => {
 export const wrapperTransTypeAndId = (exTransType: TransType, id: number) => {
   return `${exTransType}-${id}`;
 };
+
+export const toDomainList = (domainId: number, menuKey: string) => {
+  history.push(`/model/domain/${domainId}/${menuKey}`);
+};
+
+export const toModelList = (domainId: number, modelId: number, menuKey?: string) => {
+  history.push(`/model/domain/manager/${domainId}/${modelId}${menuKey ? `/${menuKey}` : ''}`);
+};
+
+export const toMetricEditPage = (domainId: number, modelId: number, metircId: number) => {
+  history.push(`/model/metric/${domainId}/${modelId}/${metircId}`);
+};
+
+export const toDatasetEditPage = (domainId: number, datasetId: number) => {
+  history.push(`/model/dataset/${domainId}/${datasetId}`);
+};

webapp/packages/supersonic-fe/src/utils/utils.ts

@@ -509,3 +509,9 @@ export const replaceRouteParams = (template: string, values: Record<string, stri
     return values[key] !== undefined ? values[key] : match;
   });
 };
+
+export function openNewPage(url: string) {
+  const newWindow: any = window.open();
+  newWindow.opener = null;
+  newWindow.location.href = url;
+}