[improvement][headless-fe] Revamped the interaction for semantic modeling routing and successfully implemented the switching between dimension and dataset management.

2025-12-20 06:34:55 +00:00 · 2024-11-30 17:55:50 +08:00
parent b4669cf110
commit 66ed711416
24 changed files with 1106 additions and 541 deletions
--- a/webapp/packages/supersonic-fe/config/routes.ts
+++ b/webapp/packages/supersonic-fe/config/routes.ts
@@ -95,6 +95,12 @@ const ROUTES = [
        path: '/model/dataset/:domainId/:datasetId',
        component: './SemanticModel/View/components/Detail',
        envEnableList: [ENV_KEY.SEMANTIC],
+        routes: [
+          {
+            path: '/model/dataset/:domainId/:datasetId/:menuKey',
+            component: './SemanticModel/View/components/Detail',
+          },
+        ],
      },
      {
        path: '/model/metric/:domainId/:modelId/:metricId',
@@ -107,6 +113,17 @@ const ROUTES = [
        //   },
        // ],
      },
+      {
+        path: '/model/dimension/:domainId/:modelId/:dimensionId',
+        component: './SemanticModel/Dimension/Detail',
+        envEnableList: [ENV_KEY.SEMANTIC],
+        // routes: [
+        //   {
+        //     path: '/model/manager/:domainId/:modelId/:menuKey',
+        //     component: './SemanticModel/ModelManager',
+        //   },
+        // ],
+      },
    ],
  },

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/Detail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/Detail.tsx
@@ -0,0 +1,101 @@
+import { message } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { useParams, useModel, Helmet } from '@umijs/max';
+import { BASE_TITLE } from '@/common/constants';
+import { ISemantic } from '../data';
+import { getDimensionList } 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 DimensionInfoForm from '../components/DimensionInfoForm';
+import DetailFormWrapper from '@/pages/SemanticModel/components/DetailContainer/DetailFormWrapper';
+
+type Props = Record<string, any>;
+
+const DataSetDetail: React.FC<Props> = () => {
+  const settingList = [
+    {
+      icon: <ProjectOutlined />,
+      key: 'basic',
+      text: '基本信息',
+    },
+  ];
+  const params: any = useParams();
+  const detailId = params.dimensionId;
+  const modelId = params.modelId;
+  const domainId = params.domainId;
+  const menuKey = params.menuKey;
+  const [detailData, setDetailData] = useState<ISemantic.IDimensionItem>();
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+  const { setSelectDimension } = dimensionModel;
+  const [activeMenu, setActiveMenu] = useState<any>(() => {
+    if (menuKey) {
+      const target = settingList.find((item) => item.key === menuKey);
+      if (target) {
+        return target;
+      }
+    }
+
+    return settingList[0];
+  });
+  const detailFormRef = useRef<any>();
+
+  useEffect(() => {
+    return () => {
+      setSelectDimension(undefined);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!detailId) {
+      return;
+    }
+    queryDetailData(detailId);
+  }, [detailId]);
+
+  const queryDetailData = async (id: number) => {
+    const { code, data, msg } = await getDimensionList({ ids: [id] });
+    if (code === 200) {
+      const target = data?.list?.[0];
+      setDetailData(target);
+      setSelectDimension(target);
+      return;
+    }
+    message.error(msg);
+  };
+
+  return (
+    <>
+      <Helmet title={`[数据集]${detailData?.name}-${BASE_TITLE}`} />
+      <DetailContainer
+        siderNode={
+          <DetailSider
+            menuKey={activeMenu.key}
+            menuList={settingList}
+            detailData={detailData}
+            onMenuKeyChange={(key: string, menu) => {
+              setActiveMenu(menu);
+            }}
+          />
+        }
+        containerNode={
+          <DetailFormWrapper
+            currentMenu={activeMenu}
+            onSave={() => {
+              detailFormRef.current.onSave();
+            }}
+          >
+            <DimensionInfoForm
+              ref={detailFormRef}
+              modelId={modelId}
+              domainId={domainId}
+              dimensionItem={detailData}
+            />
+          </DetailFormWrapper>
+        }
+      />
+    </>
+  );
+};
+
+export default DataSetDetail;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
@@ -33,6 +33,9 @@ const MetricDetail: React.FC<Props> = () => {
  }, [metricId]);

  const queryMetricData = async (metricId: string) => {
+    if (!metricId) {
+      return;
+    }
    const { code, data, msg } = await getMetricData(metricId);
    if (code === 200) {
      setMetircData({ ...data });
@@ -104,7 +107,9 @@ const MetricDetail: React.FC<Props> = () => {

  return (
    <>
-      <Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
+      <Helmet
+        title={`${metircData?.id ? `[指标]${metircData?.name}-${BASE_TITLE}` : '新建指标'}`}
+      />
      <div className={styles.metricDetailWrapper}>
        <div className={styles.metricDetail}>
          <div className={styles.siderContainer}>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx
@@ -14,7 +14,9 @@ type Props = Record<string, any>;

 const MetricDetail: React.FC<Props> = () => {
  const params: any = useParams();
-  const metricId = params.metricId;
+  const metricId = +params.metricId;
+  const modelId = +params.modelId;
+  const domainId = +params.domainId;
  const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
  const metricModel = useModel('SemanticModel.metricData');
  const { setSelectMetric } = metricModel;
@@ -33,7 +35,10 @@ const MetricDetail: React.FC<Props> = () => {
    };
  }, []);

-  const queryMetricData = async (metricId: string) => {
+  const queryMetricData = async (metricId: number) => {
+    if (!metricId) {
+      return;
+    }
    const { code, data, msg } = await getMetricData(metricId);
    if (code === 200) {
      setMetircData({ ...data });
@@ -58,7 +63,11 @@ const MetricDetail: React.FC<Props> = () => {

  return (
    <>
-      <Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
+      <Helmet
+        title={`${
+          metircData?.id ? `[指标]${metircData?.name}-${BASE_TITLE}` : `新建指标-${BASE_TITLE}`
+        }`}
+      />
      <DetailContainer
        siderNode={
          <DetailSider
@@ -70,7 +79,14 @@ const MetricDetail: React.FC<Props> = () => {
            }}
          />
        }
-        containerNode={<MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />}
+        containerNode={
+          <MetricInfoCreateForm
+            settingKey={settingKey}
+            metricItem={metircData}
+            modelId={metircData?.modelId || modelId}
+            domainId={metircData?.domainId || domainId}
+          />
+        }
      />
    </>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx
@@ -37,9 +37,12 @@ import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../.
 import { MetricSettingKey, MetricSettingWording } from '../constants';
 import { ISemantic } from '../../data';
 import { history } from '@umijs/max';
+import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
 import globalStyles from '@/global.less';

 export type CreateFormProps = {
+  modelId: number;
+  domainId: number;
  datasourceId?: number;
  metricItem: any;
  settingKey: MetricSettingKey;
@@ -58,6 +61,8 @@ const queryParamsTypeParamsKey = {
 };

 const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
+  modelId,
+  domainId,
  datasourceId,
  onCancel,
  settingKey,
@@ -65,8 +70,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
  onSubmit,
 }) => {
  const isEdit = !!metricItem?.id;
-  const domainId = metricItem?.domainId;
-  const modelId = metricItem?.modelId;
  const formValRef = useRef({} as any);
  const [form] = Form.useForm();
  const updateFormVal = (val: any) => {
@@ -381,6 +384,9 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
      }
      message.success('编辑指标成功');
      onSubmit?.(queryParams);
+      if (!isEdit) {
+        toModelList(domainId, modelId!, 'metric');
+      }
      return;
    }
    message.error(msg);
@@ -480,10 +486,11 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
  };

  const renderContent = () => {
-    if (settingKey === MetricSettingKey.SQL_CONFIG) {
    return (
+      <>
        <div
          style={{
+            display: settingKey === MetricSettingKey.SQL_CONFIG ? 'block' : 'none',
            marginLeft: '-24px',
          }}
        >
@@ -607,11 +614,8 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
            </>
          )}
        </div>
-      );
-    }

-    return (
-      <>
+        <div style={{ display: settingKey === MetricSettingKey.BASIC ? 'block' : 'none' }}>
          <FormItem hidden={true} name="id" label="ID">
            <Input placeholder="id" />
          </FormItem>
@@ -677,7 +681,9 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
                    </p>
                    <p>1. 指标的计算方法：详细说明指标是如何计算的，包括涉及的公式、计算步骤等。</p>
                    <p>2. 数据来源：描述指标所依赖的数据来源，包括数据表、字段等信息。</p>
-                  <p>3. 使用场景：说明该指标适用于哪些业务场景，以及如何在这些场景中使用该指标。</p>
+                    <p>
+                      3. 使用场景：说明该指标适用于哪些业务场景，以及如何在这些场景中使用该指标。
+                    </p>
                    <p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
                    <p>
                      请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握指标的核心要点。
@@ -812,6 +818,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
              </FormItem>
            </>
          )}
+        </div>
      </>
    );
  };
@@ -892,15 +899,13 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
        <Result
          style={{ background: '#fff' }}
          status="warning"
-          subTitle="当前数据源缺少度量，无法创建指标。请前往数据源配置中，将字段设置为度量"
+          subTitle="当前数据模型缺少度量，无法创建指标。请前往模型配置中，将字段设置为度量"
          extra={
            <Button
              type="primary"
              key="console"
              onClick={() => {
-                history.replace(
-                  `/model/domain/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
-                );
+                toDomainList(domainId, 'menuKey');
                onCancel?.();
              }}
            >
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx
@@ -22,7 +22,7 @@ const ModelManager: React.FC<Props> = ({}) => {

  const initModelConfig = () => {
    const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
-    toModelList(selectDomainId, selectModelId, currentMenuKey);
+    toModelList(selectDomainId, selectModelId!, currentMenuKey);
    setActiveKey(currentMenuKey);
  };

@@ -41,7 +41,7 @@ const ModelManager: React.FC<Props> = ({}) => {
      modelList={modelList}
      onMenuChange={(menuKey) => {
        setActiveKey(menuKey);
-        toModelList(selectDomainId, selectModelId, menuKey);
+        toModelList(selectDomainId, selectModelId!, menuKey);
      }}
    />
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx
@@ -1,7 +1,12 @@
 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 {
+  HomeOutlined,
+  FundViewOutlined,
+  BarChartOutlined,
+  LineChartOutlined,
+} from '@ant-design/icons';
 import styles from './components/style.less';
 import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';

@@ -9,8 +14,10 @@ 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 dimensionModel = useModel('SemanticModel.dimensionData');
+  const { selectDomainId, selectDomainName, selectDataSet, setSelectDataSet } = domainModel;
  const { selectModelId, selectModelName, setSelectModel } = modelModel;
+  const { selectDimension, setSelectDimension } = dimensionModel;

  const { selectMetric, setSelectMetric } = metricModel;

@@ -20,6 +27,9 @@ const PageBreadcrumb: React.FC = () => {
        <Space
          onClick={() => {
            setSelectModel(undefined);
+            setSelectDimension(undefined);
+            setSelectMetric(undefined);
+            setSelectDataSet(undefined);
            toDomainList(selectDomainId, 'overview');
          }}
        >
@@ -30,6 +40,23 @@ const PageBreadcrumb: React.FC = () => {
    },
  ];

+  if (selectDataSet) {
+    items.push(
+      {
+        type: 'separator',
+        separator: '/',
+      },
+      {
+        title: (
+          <Space onClick={() => {}}>
+            <FundViewOutlined style={{ position: 'relative', top: '2px' }} />
+            <span>{selectDataSet.name}</span>
+          </Space>
+        ),
+      },
+    );
+  }
+
  if (selectModelName) {
    items.push(
      {
@@ -40,8 +67,13 @@ const PageBreadcrumb: React.FC = () => {
        title: (
          <Space
            onClick={() => {
+              setSelectDimension(undefined);
              setSelectMetric(undefined);
-              toModelList(selectDomainId, selectModelId);
+              if (selectDimension) {
+                toModelList(selectDomainId, selectModelId!, 'dimension');
+                return;
+              }
+              toModelList(selectDomainId, selectModelId!, 'metric');
            }}
          >
            <FundViewOutlined style={{ position: 'relative', top: '2px' }} />
@@ -52,6 +84,23 @@ const PageBreadcrumb: React.FC = () => {
    );
  }

+  if (selectDimension) {
+    items.push(
+      {
+        type: 'separator',
+        separator: '/',
+      },
+      {
+        title: (
+          <Space onClick={() => {}}>
+            <BarChartOutlined style={{ position: 'relative', top: '2px' }} />
+            <span>{selectDimension.name}</span>
+          </Space>
+        ),
+      },
+    );
+  }
+
  if (selectMetric?.name) {
    items.push(
      {
@@ -61,7 +110,7 @@ const PageBreadcrumb: React.FC = () => {
      {
        title: selectMetric?.name ? (
          <Space>
-            <FundViewOutlined style={{ position: 'relative', top: '2px' }} />
+            <LineChartOutlined style={{ position: 'relative', top: '2px' }} />
            <span>{selectMetric.name}</span>
          </Space>
        ) : undefined,
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
@@ -91,7 +91,7 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
        return (
          <a
            onClick={() => {
-              toDatasetEditPage(record.domainId, record.id);
+              toDatasetEditPage(record.domainId, record.id, 'relation');
              // setEditFormStep(1);
              // setViewItem(record);
              // setCreateDataSourceModalOpen(true);
@@ -145,9 +145,10 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
            <a
              key="metricEditBtn"
              onClick={() => {
-                setEditFormStep(0);
-                setViewItem(record);
-                setCreateDataSourceModalOpen(true);
+                toDatasetEditPage(record.domainId, record.id);
+                // setEditFormStep(0);
+                // setViewItem(record);
+                // setCreateDataSourceModalOpen(true);
              }}
            >
              编辑
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Form, Button, Modal, Input, Select, Steps, Spin, Space } from 'antd';
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Spin, Space } from 'antd';
+import type { Ref } from 'react';
 import styles from '../../components/style.less';
 import { message } from 'antd';
 import { formLayout } from '@/components/FormHelper/utils';
@@ -8,70 +9,56 @@ 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;
+  datasetItem: 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 DatasetCreateForm: React.FC<ModelCreateFormModalProps> = forwardRef(
+  (
+    { activeKey, datasetItem, domainId, onCancel, onSubmit, modelList }: ModelCreateFormModalProps,
+    ref: Ref<any>,
+  ) => {
    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 [form] = Form.useForm();
    const configTableRef = useRef<any>();

+    useImperativeHandle(ref, () => ({
+      onSave: () => {
+        return handleConfirm();
+      },
+    }));
+
+    useEffect(() => {
+      if (Array.isArray(modelList) || !selectedModelItem) {
+        setSelectedModelItem(modelList[0]);
+      }
+    }, [modelList]);
+
    useEffect(() => {
      form.setFieldsValue({
-      ...viewItem,
+        ...datasetItem,
      });
-    // setQueryType(viewItem?.queryType);
-  }, [viewItem]);
+    }, [datasetItem]);

    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]);

@@ -100,15 +87,13 @@ const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
      const viewModelConfigsMap = configTableRef?.current.getViewModelConfigs() || {};

      const queryData: ISemantic.IModelItem = {
-      ...formVals,
+        ...datasetItem,
        ...fieldsValue,
-      queryType,
        dataSetDetail: {
          dataSetModelConfigs: Object.values(viewModelConfigsMap),
        },
        domainId,
      };
-    setFormVals(queryData);
      setSaveLoading(true);
      const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
      setSaveLoading(false);
@@ -119,66 +104,12 @@ const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
      }
    };

-  // 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>
@@ -190,7 +121,6 @@ const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
                      value={selectedModelItem?.id}
                      placeholder="请选择模型，获取当前模型下指标维度信息"
                      onChange={(val) => {
-                      console.log(val, 211111111);
                        setDimensionList(undefined);
                        setMetricList(undefined);
                        const modelItem = modelList.find((item) => item.id === val);
@@ -205,7 +135,7 @@ const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
                dimensionList={dimensionList}
                metricList={metricList}
                modelItem={selectedModelItem}
-              viewItem={viewItem}
+                viewItem={datasetItem}
                ref={configTableRef}
              />
            </Spin>
@@ -256,34 +186,17 @@ const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
    };

    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;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/Detail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/Detail.tsx
@@ -1,16 +1,14 @@
 import { message, Form } from 'antd';
-import React, { useState, useEffect } from 'react';
-import { getMetricData } from '../../service';
+import React, { useState, useEffect, useRef } from 'react';
 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 { 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>;

@@ -29,16 +27,28 @@ const DataSetDetail: React.FC<Props> = () => {
  ];
  const params: any = useParams();
  const detailId = params.datasetId;
-  const [detailData, setDetailData] = useState<ISemantic.IMetricItem>();
+  const menuKey = params.menuKey;
+  const [detailData, setDetailData] = useState<ISemantic.IDatasetItem>();
  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 { selectDomainId, setSelectDataSet } = domainModel;
+  const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
+  const [activeMenu, setActiveMenu] = useState<any>(() => {
+    if (menuKey) {
+      const target = settingList.find((item) => item.key === menuKey);
+      if (target) {
+        return target;
+      }
+    }

-  const [form] = Form.useForm();
+    return settingList[0];
+  });
+  const detailFormRef = useRef<any>();
+
+  useEffect(() => {
+    return () => {
+      setSelectDataSet(undefined);
+    };
+  }, []);

  useEffect(() => {
    if (!detailId) {
@@ -47,26 +57,27 @@ const DataSetDetail: React.FC<Props> = () => {
    queryDetailData(detailId);
  }, [detailId]);

-  // useEffect(() => {
-  //   if (!selectDomainId) {
-  //     return;
-  //   }
-  //   queryDomainAllModel();
-  // }, [selectDomainId]);
+  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 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 });
+      setDetailData(data);
+      setSelectDataSet(data);
      return;
    }
    message.error(msg);
@@ -78,11 +89,11 @@ const DataSetDetail: React.FC<Props> = () => {
      <DetailContainer
        siderNode={
          <DetailSider
-            menuKey={'basic'}
+            menuKey={activeMenu.key}
            menuList={settingList}
            detailData={detailData}
            onMenuKeyChange={(key: string, menu) => {
-              setSettingKey(key);
+              // setSettingKey(key);
              setActiveMenu(menu);
            }}
          />
@@ -91,22 +102,15 @@ const DataSetDetail: React.FC<Props> = () => {
          <DetailFormWrapper
            currentMenu={activeMenu}
            onSave={() => {
-              console.log(form.getFieldsValue());
+              detailFormRef.current.onSave();
            }}
          >
            <DatasetCreateForm
-              form={form}
+              ref={detailFormRef}
              activeKey={activeMenu.key}
              domainId={selectDomainId}
-              viewItem={detailData}
+              datasetItem={detailData}
              modelList={modelList}
-              onSubmit={() => {
-                // queryDataSetList();
-                // setCreateDataSourceModalOpen(false);
-              }}
-              onCancel={() => {
-                // setCreateDataSourceModalOpen(false);
-              }}
            />
          </DetailFormWrapper>
        }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewCreateFormModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewCreateFormModal.tsx
@@ -165,7 +165,6 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
      </>
    );
  };
-
  const renderContent = () => {
    return (
      <>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewModelConfigTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewModelConfigTransfer.tsx
@@ -161,7 +161,7 @@ const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
        setSelectedTransferKeys(transferKeys);
        setViewModelConfigsMap(viewConfigMap);
      }
-    }, [queryType]);
+    }, [queryType, viewItem]);

    useEffect(() => {
      if (queryType !== TransType.METRIC) {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
@@ -2,7 +2,7 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { message, Button, Space, Popconfirm, Input, Tag, Select } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
-import { useModel } from '@umijs/max';
+import { useModel, history } from '@umijs/max';
 import { StatusEnum, SemanticNodeType } from '../enum';
 import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
 import {
@@ -19,6 +19,7 @@ import TableHeaderFilter from '@/components/TableHeaderFilter';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
 import { ColumnsConfig } from './TableColumnRender';
 import BatchSensitiveLevelModal from '@/components/BatchCtrlDropDownButton/BatchSensitiveLevelModal';
+import { toDimensionEditPage } from '@/pages/SemanticModel/utils';
 import styles from './style.less';

 type Props = {};
@@ -80,6 +81,9 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
  };

  const queryDataSourceList = async () => {
+    if (!domainId) {
+      return;
+    }
    const { code, data, msg } = await getModelList(domainId);
    if (code === 200) {
      setDataSourceList(data);
@@ -94,7 +98,7 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {

  useEffect(() => {
    queryDataSourceList();
-  }, [modelId]);
+  }, [domainId]);

  const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
    if (Array.isArray(ids) && ids.length === 0) {
@@ -137,7 +141,17 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
    message.error(msg);
  };

-  const columnsConfig = ColumnsConfig();
+  // const columnsConfig = ColumnsConfig();
+  const columnsConfig = ColumnsConfig({
+    indicatorInfo: {
+      url: '/model/dimension/:domainId/:modelId/:indicatorId',
+      onNameClick: (record) => {
+        const { id } = record;
+        toDimensionEditPage(domainId, modelId!, id);
+        return false;
+      },
+    },
+  });

  const columns: ProColumns[] = [
    {
@@ -216,8 +230,10 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
              key="dimensionEditBtn"
              type="link"
              onClick={() => {
-                setDimensionItem(record);
-                setCreateModalVisible(true);
+                // setDimensionItem(record);
+                // setCreateModalVisible(true);
+                const { id } = record;
+                toDimensionEditPage(domainId, modelId!, id);
              }}
            >
              编辑
@@ -423,8 +439,9 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
            key="create"
            type="primary"
            onClick={() => {
-              setDimensionItem(undefined);
-              setCreateModalVisible(true);
+              toDimensionEditPage(domainId, modelId!, 0);
+              // setDimensionItem(undefined);
+              // setCreateModalVisible(true);
            }}
          >
            创建维度
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
@@ -146,8 +146,8 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
  const columnsConfig = ColumnsConfig({
    indicatorInfo: {
      url: '/model/metric/:domainId/:modelId/:indicatorId',
-      onNameClick: (record: ISemantic.IMetricItem) => {
-        setSelectMetric(record);
+      onNameClick: (record) => {
+        setSelectMetric(record as ISemantic.IMetricItem);
      },
    },
  });
@@ -460,8 +460,9 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
            key="create"
            type="primary"
            onClick={() => {
-              setMetricItem(undefined);
-              setCreateModalVisible(true);
+              toMetricEditPage(selectDomainId, modelId!, 0);
+              // setMetricItem(undefined);
+              // setCreateModalVisible(true);
            }}
          >
            创建指标
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailSider.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailSider.tsx
@@ -35,7 +35,12 @@ const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKey
          <div className={styles.title}>
            <div className={styles.name}>
              <Space>
+                {detailData?.isCollect !== undefined ? (
                  <IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
+                ) : (
+                  <div style={{ width: 15 }}></div>
+                )}
+
                {detailData?.name}
                {detailData?.hasAdminRes && (
                  <span
@@ -94,6 +99,7 @@ const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKey
                </Space>
              </span>
            </div>
+            {detailData?.modelName && (
              <div className={styles.item}>
                <span className={styles.itemLable}>所属模型: </span>
                <span className={styles.itemValue}>
@@ -116,6 +122,8 @@ const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKey
                  </Space>
                </span>
              </div>
+            )}
+
            <div className={styles.item}>
              <span className={styles.itemLable}>创建人: </span>
              <span className={styles.itemValue}>{detailData?.createdBy}</span>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/style.less
@@ -9,13 +9,13 @@
        height: 100%;
        .tabContainer {
          padding: 12px;
-          min-height: calc(100vh - 78px);
+          min-height: calc(100vh - 105px);
          width: calc(100vw - 350px);
          background-color: #fafafb;
        }
        .siderContainer {
-          width: 350px;
-          min-height: calc(100vh - 78px);
+          width: 320px;
+          min-height: calc(100vh - 105px);
          border-radius: 6px;
          padding: 12px 0 12px 12px;
        }
@@ -27,13 +27,16 @@


  .DetailInfoSider {
-    padding: 20px;
+    padding: 10px;
    color: #344767;
    background-color: #fff;
    height: 100%;
    border: 1px solid #e6ebf1;
    border-radius: 6px;
    .createTitle {
+      display: flex;
+      margin-left: 10px;
+      min-height: 47px;
      margin-bottom: 10px;
      color:#344767;
      font-weight: 500;
@@ -48,7 +51,8 @@
      }
    }
    .title {
-      margin-bottom: 20px;
+      margin: 10px 0;
+      min-height: 47px;
      .name {
        font-weight: 600;
        font-size: 18px;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoForm.tsx
@@ -0,0 +1,343 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import type { Ref } from 'react';
+import { Button, Form, Input, Select, Row, Col, Space, Tooltip, Switch } from 'antd';
+import { SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
+import { formLayout } from '@/components/FormHelper/utils';
+import SqlEditor from '@/components/SqlEditor';
+import { ISemantic } from '../data';
+import {
+  DIM_OPTIONS,
+  EnumDataSourceType,
+  PARTITION_TIME_FORMATTER,
+  DATE_FORMATTER,
+} from '@/pages/SemanticModel/Datasource/constants';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import {
+  createDimension,
+  updateDimension,
+  mockDimensionAlias,
+  batchCreateTag,
+  batchDeleteTag,
+} from '../service';
+import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import { message } from 'antd';
+import { toModelList } from '@/pages/SemanticModel/utils';
+
+export type CreateFormProps = {
+  modelId: number;
+  domainId: number;
+  dimensionItem?: ISemantic.IDimensionItem;
+  onCancel: () => void;
+  onSubmit?: (values?: any) => void;
+};
+
+const FormItem = Form.Item;
+const { Option } = Select;
+
+const { TextArea } = Input;
+
+const DimensionInfoForm: React.FC<CreateFormProps> = forwardRef(
+  (
+    { modelId, domainId, dimensionItem, onSubmit: handleUpdate }: CreateFormProps,
+    ref: Ref<any>,
+  ) => {
+    const isEdit = !!dimensionItem?.id;
+    const [dimensionValueSettingList, setDimensionValueSettingList] = useState<
+      ISemantic.IDimensionValueSettingItem[]
+    >([]);
+    const [form] = Form.useForm();
+    const { setFieldsValue, resetFields } = form;
+    const [llmLoading, setLlmLoading] = useState<boolean>(false);
+    const [formData, setFormData] = useState<ISemantic.IDimensionItem>();
+
+    useImperativeHandle(ref, () => ({
+      onSave: () => {
+        return handleSubmit();
+      },
+    }));
+
+    const handleSubmit = async (dimValueMaps?: ISemantic.IDimensionValueSettingItem[]) => {
+      const fieldsValue = await form.validateFields();
+      await saveDimension({
+        ...fieldsValue,
+        dimValueMaps: dimValueMaps || dimensionValueSettingList,
+        alias: Array.isArray(fieldsValue.alias) ? fieldsValue.alias.join(',') : '',
+      });
+    };
+
+    const saveDimension = async (fieldsValue: any) => {
+      const queryParams = {
+        modelId: isEdit ? dimensionItem.modelId : modelId,
+        type: 'categorical',
+        ...fieldsValue,
+      };
+      let saveDimensionQuery = createDimension;
+      if (queryParams.id) {
+        saveDimensionQuery = updateDimension;
+      }
+      const { code, msg, data } = await saveDimensionQuery(queryParams);
+      if (code === 200) {
+        if (queryParams.isTag) {
+          queryBatchExportTag(data.id || dimensionItem?.id);
+        }
+        if (dimensionItem?.id && !queryParams.isTag) {
+          queryBatchDeleteTag(dimensionItem);
+        }
+        if (!isEdit) {
+          toModelList(domainId, modelId, 'dimension');
+        }
+        message.success('保存维度成功');
+
+        return;
+      }
+      message.error(msg);
+    };
+
+    const queryBatchDeleteTag = async (dimensionItem: ISemantic.IDimensionItem) => {
+      const { code, msg } = await batchDeleteTag([
+        {
+          itemIds: [dimensionItem.id],
+          tagDefineType: TAG_DEFINE_TYPE.DIMENSION,
+        },
+      ]);
+      if (code === 200) {
+        return;
+      }
+      message.error(msg);
+    };
+
+    const queryBatchExportTag = async (id: number) => {
+      const { code, msg } = await batchCreateTag([
+        { itemId: id, tagDefineType: TAG_DEFINE_TYPE.DIMENSION },
+      ]);
+
+      if (code === 200) {
+        return;
+      }
+      message.error(msg);
+    };
+
+    const setFormVal = () => {
+      if (dimensionItem) {
+        const { alias } = dimensionItem;
+        const dimensionData = {
+          ...dimensionItem,
+          alias: alias && alias.trim() ? alias.split(',') : [],
+        };
+        setFieldsValue(dimensionData);
+        setFormData(dimensionData);
+      }
+    };
+
+    useEffect(() => {
+      if (dimensionItem) {
+        setFormVal();
+        if (Array.isArray(dimensionItem.dimValueMaps)) {
+          setDimensionValueSettingList(dimensionItem.dimValueMaps);
+        } else {
+          setDimensionValueSettingList([]);
+        }
+      } else {
+        resetFields();
+      }
+    }, [dimensionItem]);
+
+    const generatorDimensionAlias = async () => {
+      const fieldsValue = await form.validateFields();
+      setLlmLoading(true);
+      const { code, data } = await mockDimensionAlias({
+        ...dimensionItem,
+        ...fieldsValue,
+        alias: fieldsValue.alias?.join(','),
+      });
+      setLlmLoading(false);
+      const formAlias = form.getFieldValue('alias');
+      setLlmLoading(false);
+      if (code === 200) {
+        form.setFieldValue('alias', Array.from(new Set([...formAlias, ...data])));
+      } else {
+        message.error('大语言模型解析异常');
+      }
+    };
+
+    const renderContent = () => {
+      return (
+        <>
+          <FormItem hidden={true} name="id" label="ID">
+            <Input placeholder="id" />
+          </FormItem>
+          <FormItem
+            name="name"
+            label="维度名称"
+            rules={[{ required: true, message: '请输入维度名称' }]}
+          >
+            <Input placeholder="名称不可重复" />
+          </FormItem>
+          <FormItem
+            hidden={isEdit}
+            name="bizName"
+            label="英文名称"
+            rules={[{ required: true, message: '请输入英文名称' }]}
+          >
+            <Input placeholder="名称不可重复" disabled={isEdit} />
+          </FormItem>
+          <FormItem label="别名">
+            <Row>
+              <Col flex="1 1 200px">
+                <FormItem name="alias" noStyle>
+                  <Select
+                    mode="tags"
+                    placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
+                    tokenSeparators={[',']}
+                    maxTagCount={9}
+                  />
+                </FormItem>
+              </Col>
+              {isEdit && (
+                <Col flex="0 1 75px">
+                  <Button
+                    type="link"
+                    size="small"
+                    loading={llmLoading}
+                    style={{ top: '2px' }}
+                    onClick={() => {
+                      generatorDimensionAlias();
+                    }}
+                  >
+                    <Space>
+                      智能填充
+                      <Tooltip title="智能填充将根据维度相关信息，使用大语言模型获取维度别名">
+                        <InfoCircleOutlined />
+                      </Tooltip>
+                    </Space>
+                  </Button>
+                </Col>
+              )}
+            </Row>
+          </FormItem>
+          <FormItem
+            name="type"
+            label="类型"
+            rules={[{ required: true, message: '请选择维度类型' }]}
+          >
+            <Select placeholder="请选择维度类型">
+              {DIM_OPTIONS.map((item) => (
+                <Option key={item.value} value={item.value}>
+                  {item.label}
+                </Option>
+              ))}
+            </Select>
+          </FormItem>
+          {formData?.type &&
+            [EnumDataSourceType.PARTITION_TIME, EnumDataSourceType.TIME].includes(
+              formData.type as EnumDataSourceType,
+            ) && (
+              <FormItem
+                name={['ext', 'time_format']}
+                label="时间格式"
+                rules={[{ required: true, message: '请选择时间格式' }]}
+                tooltip="请选择数据库中时间字段对应格式"
+              >
+                <Select placeholder="请选择维度类型">
+                  {(formData?.type === EnumDataSourceType.TIME
+                    ? DATE_FORMATTER
+                    : PARTITION_TIME_FORMATTER
+                  ).map((item) => (
+                    <Option key={item} value={item}>
+                      {item}
+                    </Option>
+                  ))}
+                </Select>
+              </FormItem>
+            )}
+
+          <FormItem
+            name="semanticType"
+            label="类型"
+            hidden={true}
+            // rules={[{ required: true, message: '请选择维度类型' }]}
+          >
+            <Select placeholder="请选择维度类型">
+              {['CATEGORY', 'ID', 'DATE'].map((item) => (
+                <Option key={item} value={item}>
+                  {item}
+                </Option>
+              ))}
+            </Select>
+          </FormItem>
+          <FormItem
+            name="sensitiveLevel"
+            label="敏感度"
+            rules={[{ required: true, message: '请选择敏感度' }]}
+          >
+            <Select placeholder="请选择敏感度">
+              {SENSITIVE_LEVEL_OPTIONS.map((item) => (
+                <Option key={item.value} value={item.value}>
+                  {item.label}
+                </Option>
+              ))}
+            </Select>
+          </FormItem>
+          {/* <FormItem name="commonDimensionId" label="公共维度">
+          <Select placeholder="请绑定公共维度" allowClear options={commonDimensionOptions} />
+        </FormItem> */}
+          {/* <FormItem name="defaultValues" label="默认值">
+          <InfoTagList />
+        </FormItem> */}
+          <Form.Item
+            hidden={!!!process.env.SHOW_TAG}
+            label={
+              <FormItemTitle
+                title={`设为标签`}
+                subTitle={`如果勾选，代表维度的取值都是一种'标签'，可用作对实体的圈选`}
+              />
+            }
+            name="isTag"
+            valuePropName="checked"
+            getValueFromEvent={(value) => {
+              return value === true ? 1 : 0;
+            }}
+            getValueProps={(value) => {
+              return {
+                checked: value === 1,
+              };
+            }}
+          >
+            <Switch />
+          </Form.Item>
+          <FormItem
+            name="description"
+            label="维度描述"
+            rules={[{ required: true, message: '请输入维度描述' }]}
+          >
+            <TextArea placeholder="请输入维度描述" />
+          </FormItem>
+          <FormItem
+            name="expr"
+            label="表达式"
+            tooltip="表达式中的字段必须在创建模型的时候被标记为日期或者维度"
+            rules={[{ required: true, message: '请输入表达式' }]}
+          >
+            <SqlEditor height={'150px'} />
+          </FormItem>
+        </>
+      );
+    };
+
+    return (
+      <>
+        <Form
+          {...formLayout}
+          form={form}
+          onValuesChange={(value, values) => {
+            setFormData(values);
+          }}
+        >
+          {renderContent()}
+        </Form>
+      </>
+    );
+  },
+);
+
+export default DimensionInfoForm;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
@@ -13,7 +13,7 @@ import IndicatorStar, { StarType } from '../components/IndicatorStar';
 interface IndicatorInfo {
  url?: string;
  starType?: StarType;
-  onNameClick?: (record: ISemantic.IMetricItem) => void | boolean;
+  onNameClick?: (record: ISemantic.IMetricItem | ISemantic.IDimensionItem) => void | boolean;
 }

 interface ColumnsConfigParams {
@@ -116,18 +116,43 @@ export const ColumnsConfig = (params?: ColumnsConfigParams) => {
    },
    dimensionInfo: {
      render: (_, record: ISemantic.IDimensionItem) => {
-        const { name, alias, bizName } = record;
+        const { name, alias, bizName, id, domainId, modelId } = record;
+        let url = `/demension/detail/${id}`;
+        if (params?.indicatorInfo) {
+          url = replaceRouteParams(params.indicatorInfo.url || '', {
+            domainId: `${domainId}`,
+            modelId: `${modelId}`,
+            indicatorId: `${id}`,
+          });
+        }
        return (
          <>
            <div>
              <Space>
-                <span style={{ fontWeight: 500 }}>{name}</span>
+                <a
+                  className={styles.textLink}
+                  style={{ fontWeight: 500 }}
+                  onClick={(event: any) => {
+                    if (params?.indicatorInfo?.onNameClick) {
+                      const state = params.indicatorInfo.onNameClick(record);
+                      if (state === false) {
+                        return;
+                      }
+                    }
+                    history.push(url);
+                    event.preventDefault();
+                    event.stopPropagation();
+                  }}
+                >
+                  {name}
+                </a>
+                {/* <span style={{ fontWeight: 500 }}>{name}</span> */}
              </Space>
            </div>
            <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
              {bizName}
            </div>
-            {renderAliasAndClassifications(alias, undefined)}
+            {alias && renderAliasAndClassifications(alias, undefined)}
          </>
        );
      },
@@ -174,7 +199,7 @@ export const ColumnsConfig = (params?: ColumnsConfigParams) => {
            <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
              {bizName}
            </div>
-            {renderAliasAndClassifications(alias, classifications)}
+            {alias && renderAliasAndClassifications(alias, classifications)}
          </>
        );
      },
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/index.tsx
@@ -24,6 +24,13 @@ const SemanticModel: React.FC<Props> = ({}) => {

  const { selectMetric, setSelectMetric } = metricModel;

+  // useEffect(() => {
+
+  //   return () => {
+  //     setSelectMetric(undefined);
+  //   }
+  // }, [])
+
  const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
    const targetNode = domainList.filter((item: any) => {
      return `${item.id}` === domainId;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/dimensionData.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/dimensionData.ts
@@ -5,6 +5,7 @@ import { getDimensionList } from '../service';

 export default function Dimension() {
  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
+  const [selectDimension, setSelectDimension] = useState<ISemantic.IDimensionItem>();

  const queryDimensionList = async (params: any) => {
    const { code, data, msg } = await getDimensionList({
@@ -23,5 +24,10 @@ export default function Dimension() {
    return await queryDimensionList(params);
  };

-  return { MdimensionList: dimensionList, MrefreshDimensionList: refreshDimensionList };
+  return {
+    MdimensionList: dimensionList,
+    MrefreshDimensionList: refreshDimensionList,
+    selectDimension,
+    setSelectDimension,
+  };
 }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/domainData.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/domainData.ts
@@ -1,18 +1,37 @@
 import { ISemantic } from '../data';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useModel } from '@umijs/max';

 export default function Domain() {
  const [selectDomain, setSelectDomain] = useState<ISemantic.IDomainItem>(
    {} as ISemantic.IDomainItem,
  );
+  const [selectDataSet, setSelectDataSet] = useState<ISemantic.IDatasetItem>();
  const [domainList, setDomainList] = useState<ISemantic.IDomainItem[]>([]);

+  const modelModel = useModel('SemanticModel.modelData');
+  const metricModel = useModel('SemanticModel.metricData');
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+
+  const { setSelectModel } = modelModel;
+  const { setSelectDimension } = dimensionModel;
+  const { setSelectMetric } = metricModel;
+
+  useEffect(() => {
+    setSelectModel(undefined);
+    setSelectDimension(undefined);
+    setSelectMetric(undefined);
+    setSelectDataSet(undefined);
+  }, [selectDomain]);
+
  return {
    selectDomain,
+    selectDataSet,
    selectDomainId: selectDomain?.id,
    selectDomainName: selectDomain?.name,
    domainList,
    setSelectDomain,
+    setSelectDataSet,
    setDomainList,
  };
 }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/modelData.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/modelData.ts
@@ -1,6 +1,7 @@
 import { ISemantic } from '../data';
 import { message } from 'antd';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useModel } from '@umijs/max';
 import { getModelList } from '../service';

 export default function Model() {
@@ -8,6 +9,17 @@ export default function Model() {
  const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
  const [modelTableHistoryParams, setModelTableHistoryParams] = useState<Record<string, any>>({});

+  const metricModel = useModel('SemanticModel.metricData');
+  const dimensionModel = useModel('SemanticModel.dimensionData');
+
+  const { setSelectDimension } = dimensionModel;
+  const { setSelectMetric } = metricModel;
+
+  useEffect(() => {
+    setSelectDimension(undefined);
+    setSelectMetric(undefined);
+  }, [selectModel]);
+
  const mergeParams = (params: Record<string, any>) => {
    setModelTableHistoryParams({
      ...modelTableHistoryParams,
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
@@ -50,9 +50,6 @@ export function getDimensionList(data: any): Promise<any> {
      ...(modelId ? { modelIds: [modelId] } : {}),
    },
  };
-  if (getRunningEnv() === 'chat') {
-    return request.post(`${process.env.CHAT_API_BASE_URL}conf/dimension/page`, queryParams);
-  }
  return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
 }

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
@@ -253,10 +253,26 @@ 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 toMetricEditPage = (
+  domainId: number,
+  modelId: number,
+  metircId: number,
+  menuKey?: string,
+) => {
+  history.push(`/model/metric/${domainId}/${modelId}/${metircId}${menuKey ? `/${menuKey}` : ''}`);
 };

-export const toDatasetEditPage = (domainId: number, datasetId: number) => {
-  history.push(`/model/dataset/${domainId}/${datasetId}`);
+export const toDatasetEditPage = (domainId: number, datasetId: number, menuKey?: string) => {
+  history.push(`/model/dataset/${domainId}/${datasetId}${menuKey ? `/${menuKey}` : ''}`);
+};
+
+export const toDimensionEditPage = (
+  domainId: number,
+  modelId: number,
+  dimensionId: number,
+  menuKey?: string,
+) => {
+  history.push(
+    `/model/dimension/${domainId}/${modelId}/${dimensionId}${menuKey ? `/${menuKey}` : ''}`,
+  );
 };