From 66ed71141684bf528d4dbb226b75411f84710555 Mon Sep 17 00:00:00 2001
From: tristanliu <tristanliu@tencent.com>
Date: Sat, 30 Nov 2024 17:55:50 +0800
Subject: [PATCH] [improvement][headless-fe] Revamped the interaction for
 semantic modeling routing and successfully implemented the switching between
 dimension and dataset management.

---
 .../packages/supersonic-fe/config/routes.ts   |  17 +
 .../pages/SemanticModel/Dimension/Detail.tsx  | 101 +++++
 .../src/pages/SemanticModel/Metric/Detail.tsx |   7 +-
 .../src/pages/SemanticModel/Metric/Edit.tsx   |  24 +-
 .../components/MetricInfoCreateForm.tsx       | 383 ++++++++---------
 .../src/pages/SemanticModel/ModelManager.tsx  |   4 +-
 .../pages/SemanticModel/PageBreadcrumb.tsx    |  57 ++-
 .../View/components/DataSetTable.tsx          |   9 +-
 .../View/components/DatasetCreateForm.tsx     | 397 +++++++-----------
 .../SemanticModel/View/components/Detail.tsx  |  82 ++--
 .../View/components/ViewCreateFormModal.tsx   |   1 -
 .../components/ViewModelConfigTransfer.tsx    |   2 +-
 .../components/ClassDimensionTable.tsx        |  31 +-
 .../components/ClassMetricTable.tsx           |   9 +-
 .../DetailContainer/DetailSider.tsx           |  54 ++-
 .../components/DetailContainer/style.less     |  14 +-
 .../components/DimensionInfoForm.tsx          | 343 +++++++++++++++
 .../components/TableColumnRender.tsx          |  35 +-
 .../src/pages/SemanticModel/index.tsx         |   7 +
 .../SemanticModel/models/dimensionData.ts     |   8 +-
 .../pages/SemanticModel/models/domainData.ts  |  21 +-
 .../pages/SemanticModel/models/modelData.ts   |  14 +-
 .../src/pages/SemanticModel/service.ts        |   3 -
 .../src/pages/SemanticModel/utils.tsx         |  24 +-
 24 files changed, 1106 insertions(+), 541 deletions(-)
 create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/Detail.tsx
 create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoForm.tsx

diff --git a/webapp/packages/supersonic-fe/config/routes.ts b/webapp/packages/supersonic-fe/config/routes.ts
index 8f91deed4..03f2cd484 100644
--- 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',
+        //   },
+        // ],
+      },
     ],
   },
 
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/Detail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/Detail.tsx
new file mode 100644
index 000000000..56ec85a1c
--- /dev/null
+++ 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;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
index 1d76f26a9..d927eb203 100644
--- 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}>
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx
index 359ff1ef4..0c70217fe 100644
--- 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}
+          />
+        }
       />
     </>
   );
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx
index 075ccd2fe..46a0b14f1 100644
--- 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 (
+    return (
+      <>
         <div
           style={{
+            display: settingKey === MetricSettingKey.SQL_CONFIG ? 'block' : 'none',
             marginLeft: '-24px',
           }}
         >
@@ -607,211 +614,211 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
             </>
           )}
         </div>
-      );
-    }
 
-    return (
-      <>
-        <FormItem hidden={true} name="id" label="ID">
-          <Input placeholder="id" />
-        </FormItem>
-        <Row gutter={20}>
-          <Col span={12}>
-            <FormItem
-              name="name"
-              label="指标名称"
-              rules={[{ required: true, message: '请输入指标名称' }]}
-            >
-              <Input placeholder="名称不可重复" />
-            </FormItem>
-          </Col>
-          <Col span={12}>
-            <FormItem
-              name="bizName"
-              label="英文名称"
-              rules={[{ required: true, message: '请输入英文名称' }]}
-            >
-              <Input placeholder="名称不可重复" disabled={isEdit} />
-            </FormItem>
-          </Col>
-        </Row>
-        <Row gutter={20}>
-          <Col span={12}>
-            <FormItem
-              name="sensitiveLevel"
-              label="敏感度"
-              rules={[{ required: true, message: '请选择敏感度' }]}
-            >
-              <Select placeholder="请选择敏感度">
-                {SENSITIVE_LEVEL_OPTIONS.map((item) => (
-                  <Option key={item.value} value={item.value}>
-                    {item.label}
-                  </Option>
-                ))}
-              </Select>
-            </FormItem>
-          </Col>
-          <Col span={12}>
-            <FormItem name="classifications" label="分类">
-              <Select
-                mode="tags"
-                placeholder="支持手动输入及选择"
-                tokenSeparators={[',']}
-                maxTagCount={9}
-                options={tagOptions}
-              />
-            </FormItem>
-          </Col>
-        </Row>
-
-        <FormItem
-          name="description"
-          label={
-            <TableTitleTooltips
-              title="业务口径"
-              overlayInnerStyle={{ width: 600 }}
-              tooltips={
-                <>
-                  <p>
-                    在录入指标时，请务必详细填写指标口径。口径描述对于理解指标的含义、计算方法和使用场景至关重要。一个清晰、准确的口径描述可以帮助其他用户更好地理解和使用该指标，避免因为误解而导致错误的数据分析和决策。在填写口径时，建议包括以下信息：
-                  </p>
-                  <p>1. 指标的计算方法：详细说明指标是如何计算的，包括涉及的公式、计算步骤等。</p>
-                  <p>2. 数据来源：描述指标所依赖的数据来源，包括数据表、字段等信息。</p>
-                  <p>3. 使用场景：说明该指标适用于哪些业务场景，以及如何在这些场景中使用该指标。</p>
-                  <p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
-                  <p>
-                    请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握指标的核心要点。
-                  </p>
-                </>
-              }
-            />
-          }
-          rules={[{ required: true, message: '请输入业务口径' }]}
-        >
-          <TextArea placeholder="请输入业务口径" style={{ minHeight: 173 }} />
-        </FormItem>
-
-        <FormItem label="别名">
+        <div style={{ display: settingKey === MetricSettingKey.BASIC ? 'block' : 'none' }}>
+          <FormItem hidden={true} name="id" label="ID">
+            <Input placeholder="id" />
+          </FormItem>
           <Row gutter={20}>
-            <Col flex="1 1 200px">
-              <FormItem name="alias" noStyle>
+            <Col span={12}>
+              <FormItem
+                name="name"
+                label="指标名称"
+                rules={[{ required: true, message: '请输入指标名称' }]}
+              >
+                <Input placeholder="名称不可重复" />
+              </FormItem>
+            </Col>
+            <Col span={12}>
+              <FormItem
+                name="bizName"
+                label="英文名称"
+                rules={[{ required: true, message: '请输入英文名称' }]}
+              >
+                <Input placeholder="名称不可重复" disabled={isEdit} />
+              </FormItem>
+            </Col>
+          </Row>
+          <Row gutter={20}>
+            <Col span={12}>
+              <FormItem
+                name="sensitiveLevel"
+                label="敏感度"
+                rules={[{ required: true, message: '请选择敏感度' }]}
+              >
+                <Select placeholder="请选择敏感度">
+                  {SENSITIVE_LEVEL_OPTIONS.map((item) => (
+                    <Option key={item.value} value={item.value}>
+                      {item.label}
+                    </Option>
+                  ))}
+                </Select>
+              </FormItem>
+            </Col>
+            <Col span={12}>
+              <FormItem name="classifications" label="分类">
                 <Select
-                  style={{ maxWidth: 500 }}
                   mode="tags"
-                  placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
+                  placeholder="支持手动输入及选择"
                   tokenSeparators={[',']}
                   maxTagCount={9}
+                  options={tagOptions}
                 />
               </FormItem>
             </Col>
-            {isEdit && (
-              <Col flex="0 1 75px">
-                <Tooltip title="智能填充将根据指标相关信息，使用大语言模型获取指标别名">
-                  <Button
-                    type="primary"
-                    loading={llmLoading}
-                    style={{ top: '5px' }}
-                    onClick={() => {
-                      generatorMetricAlias();
-                    }}
-                  >
-                    智能填充
-                  </Button>
-                </Tooltip>
-              </Col>
-            )}
           </Row>
-        </FormItem>
-        <Divider />
-        <FormItem
-          name="isTag"
-          valuePropName="checked"
-          hidden={!!!process.env.SHOW_TAG}
-          getValueFromEvent={(value) => {
-            return value === true ? 1 : 0;
-          }}
-          getValueProps={(value) => {
-            return {
-              checked: value === 1,
-            };
-          }}
-        >
-          <Row gutter={20}>
-            <Col flex="1 1 200px">
-              <FormItemTitle
-                title={`设为标签`}
-                subTitle={`如果勾选，代表取值都是一种'标签'，可用作对实体的圈选`}
-              />
-            </Col>
 
-            <Col flex="0 1 75px">
-              <Switch />
-            </Col>
-          </Row>
-          <Divider />
-        </FormItem>
-
-        <FormItem>
-          <Row gutter={20}>
-            <Col flex="1 1 200px">
-              <FormItemTitle
-                title={'下钻维度配置'}
-                subTitle={'配置下钻维度后，将可以在指标卡中进行下钻'}
-              />
-            </Col>
-
-            <Col flex="0 1 75px">
-              <Button
-                type="primary"
-                onClick={() => {
-                  setMetricRelationModalOpenState(true);
-                }}
-              >
-                设 置
-              </Button>
-            </Col>
-          </Row>
-        </FormItem>
-        <Divider />
-        <FormItem label={<FormItemTitle title={'数据格式化'} />} name="dataFormatType">
-          <Radio.Group buttonStyle="solid" size="middle">
-            <Radio.Button value="">默认</Radio.Button>
-            <Radio.Button value="decimal">小数</Radio.Button>
-            <Radio.Button value="percent">百分比</Radio.Button>
-          </Radio.Group>
-        </FormItem>
-
-        {(isPercentState || isDecimalState) && (
           <FormItem
+            name="description"
             label={
-              <FormItemTitle
-                title={'小数位数'}
-                subTitle={`对小数位数进行设置，如保留两位，0.021252 -> 0.02${
-                  isPercentState ? '%' : ''
-                }`}
+              <TableTitleTooltips
+                title="业务口径"
+                overlayInnerStyle={{ width: 600 }}
+                tooltips={
+                  <>
+                    <p>
+                      在录入指标时，请务必详细填写指标口径。口径描述对于理解指标的含义、计算方法和使用场景至关重要。一个清晰、准确的口径描述可以帮助其他用户更好地理解和使用该指标，避免因为误解而导致错误的数据分析和决策。在填写口径时，建议包括以下信息：
+                    </p>
+                    <p>1. 指标的计算方法：详细说明指标是如何计算的，包括涉及的公式、计算步骤等。</p>
+                    <p>2. 数据来源：描述指标所依赖的数据来源，包括数据表、字段等信息。</p>
+                    <p>
+                      3. 使用场景：说明该指标适用于哪些业务场景，以及如何在这些场景中使用该指标。
+                    </p>
+                    <p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
+                    <p>
+                      请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握指标的核心要点。
+                    </p>
+                  </>
+                }
               />
             }
-            name={['dataFormat', 'decimalPlaces']}
+            rules={[{ required: true, message: '请输入业务口径' }]}
           >
-            <InputNumber placeholder="请输入需要保留小数位数" style={{ width: '300px' }} />
+            <TextArea placeholder="请输入业务口径" style={{ minHeight: 173 }} />
           </FormItem>
-        )}
-        {isPercentState && (
-          <>
+
+          <FormItem label="别名">
+            <Row gutter={20}>
+              <Col flex="1 1 200px">
+                <FormItem name="alias" noStyle>
+                  <Select
+                    style={{ maxWidth: 500 }}
+                    mode="tags"
+                    placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
+                    tokenSeparators={[',']}
+                    maxTagCount={9}
+                  />
+                </FormItem>
+              </Col>
+              {isEdit && (
+                <Col flex="0 1 75px">
+                  <Tooltip title="智能填充将根据指标相关信息，使用大语言模型获取指标别名">
+                    <Button
+                      type="primary"
+                      loading={llmLoading}
+                      style={{ top: '5px' }}
+                      onClick={() => {
+                        generatorMetricAlias();
+                      }}
+                    >
+                      智能填充
+                    </Button>
+                  </Tooltip>
+                </Col>
+              )}
+            </Row>
+          </FormItem>
+          <Divider />
+          <FormItem
+            name="isTag"
+            valuePropName="checked"
+            hidden={!!!process.env.SHOW_TAG}
+            getValueFromEvent={(value) => {
+              return value === true ? 1 : 0;
+            }}
+            getValueProps={(value) => {
+              return {
+                checked: value === 1,
+              };
+            }}
+          >
+            <Row gutter={20}>
+              <Col flex="1 1 200px">
+                <FormItemTitle
+                  title={`设为标签`}
+                  subTitle={`如果勾选，代表取值都是一种'标签'，可用作对实体的圈选`}
+                />
+              </Col>
+
+              <Col flex="0 1 75px">
+                <Switch />
+              </Col>
+            </Row>
+            <Divider />
+          </FormItem>
+
+          <FormItem>
+            <Row gutter={20}>
+              <Col flex="1 1 200px">
+                <FormItemTitle
+                  title={'下钻维度配置'}
+                  subTitle={'配置下钻维度后，将可以在指标卡中进行下钻'}
+                />
+              </Col>
+
+              <Col flex="0 1 75px">
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    setMetricRelationModalOpenState(true);
+                  }}
+                >
+                  设 置
+                </Button>
+              </Col>
+            </Row>
+          </FormItem>
+          <Divider />
+          <FormItem label={<FormItemTitle title={'数据格式化'} />} name="dataFormatType">
+            <Radio.Group buttonStyle="solid" size="middle">
+              <Radio.Button value="">默认</Radio.Button>
+              <Radio.Button value="decimal">小数</Radio.Button>
+              <Radio.Button value="percent">百分比</Radio.Button>
+            </Radio.Group>
+          </FormItem>
+
+          {(isPercentState || isDecimalState) && (
             <FormItem
               label={
                 <FormItemTitle
-                  title={'原始值是否乘以100'}
-                  subTitle={'如 原始值0.001 ->展示值0.1% '}
+                  title={'小数位数'}
+                  subTitle={`对小数位数进行设置，如保留两位，0.021252 -> 0.02${
+                    isPercentState ? '%' : ''
+                  }`}
                 />
               }
-              name={['dataFormat', 'needMultiply100']}
-              valuePropName="checked"
+              name={['dataFormat', 'decimalPlaces']}
             >
-              <Switch />
+              <InputNumber placeholder="请输入需要保留小数位数" style={{ width: '300px' }} />
             </FormItem>
-          </>
-        )}
+          )}
+          {isPercentState && (
+            <>
+              <FormItem
+                label={
+                  <FormItemTitle
+                    title={'原始值是否乘以100'}
+                    subTitle={'如 原始值0.001 ->展示值0.1% '}
+                  />
+                }
+                name={['dataFormat', 'needMultiply100']}
+                valuePropName="checked"
+              >
+                <Switch />
+              </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?.();
               }}
             >
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx
index fd91435e5..a3a2ef629 100644
--- 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);
       }}
     />
   );
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx
index 828455c86..9bda8c329 100644
--- 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,
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
index 7f39127f4..a2e48a0fd 100644
--- 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);
               }}
             >
               编辑
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx
index 5e15035f7..bbb7e8949 100644
--- 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,224 +9,153 @@ 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 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 [selectedModelItem, setSelectedModelItem] = useState<ISemantic.IModelItem | undefined>(
+      modelList[0],
+    );
+    const [form] = Form.useForm();
+    const configTableRef = useRef<any>();
 
-  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),
+    useImperativeHandle(ref, () => ({
+      onSave: () => {
+        return handleConfirm();
       },
-      domainId,
+    }));
+
+    useEffect(() => {
+      if (Array.isArray(modelList) || !selectedModelItem) {
+        setSelectedModelItem(modelList[0]);
+      }
+    }, [modelList]);
+
+    useEffect(() => {
+      form.setFieldsValue({
+        ...datasetItem,
+      });
+    }, [datasetItem]);
+
+    const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
+    const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
+
+    useEffect(() => {
+      if (selectedModelItem?.id) {
+        queryDimensionList(selectedModelItem.id);
+        queryMetricList(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);
+      }
     };
-    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 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 handleNext = async () => {
-  //   await form.validateFields();
-  //   forward();
-  // };
+    const handleConfirm = async () => {
+      const fieldsValue = await form.validateFields();
+      const viewModelConfigsMap = configTableRef?.current.getViewModelConfigs() || {};
 
-  // 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 queryData: ISemantic.IModelItem = {
+        ...datasetItem,
+        ...fieldsValue,
+        dataSetDetail: {
+          dataSetModelConfigs: Object.values(viewModelConfigsMap),
+        },
+        domainId,
+      };
+      setSaveLoading(true);
+      const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
+      setSaveLoading(false);
+      if (code === 200) {
+        onSubmit?.(queryData);
+      } else {
+        message.error(msg);
+      }
+    };
 
-  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
+    const renderContent = () => {
+      return (
+        <>
+          <div style={{ display: activeKey === 'relation' ? 'block' : 'none' }}>
+            <Spin spinning={dimensionLoading}>
+              <ViewModelConfigTransfer
+                toolbarSolt={
+                  <Space>
+                    <span>切换模型: </span>
+                    <Select
+                      style={{
+                        minWidth: 150,
+                        textAlign: 'left',
+                      }}
+                      value={selectedModelItem?.id}
+                      placeholder="请选择模型，获取当前模型下指标维度信息"
+                      onChange={(val) => {
+                        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={datasetItem}
+                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) => {
@@ -244,46 +174,29 @@ const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
               maxTagCount={9}
             />
           </FormItem> */}
-          <FormItem name="admins" label={<FormItemTitle title={'责任人'} />}>
-            <SelectTMEPerson placeholder="请邀请团队成员" />
-          </FormItem>
-          <FormItem name="description" label="数据集描述">
-            <Input.TextArea placeholder="数据集描述" />
-          </FormItem>
-        </div>
+            <FormItem name="admins" label={<FormItemTitle title={'责任人'} />}>
+              <SelectTMEPerson placeholder="请邀请团队成员" />
+            </FormItem>
+            <FormItem name="description" label="数据集描述">
+              <Input.TextArea placeholder="数据集描述" />
+            </FormItem>
+          </div>
+        </>
+      );
+    };
+
+    return (
+      <>
+        <Form
+          {...formLayout}
+          form={form}
+          onValuesChange={(value, values) => {}}
+          className={styles.form}
+        >
+          {renderContent()}
+        </Form>
       </>
     );
-  };
-
-  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;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/Detail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/Detail.tsx
index 54b05f062..5cdd3ec6d 100644
--- 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>
         }
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewCreateFormModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewCreateFormModal.tsx
index b7dcad150..6a902bf1d 100644
--- 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 (
       <>
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewModelConfigTransfer.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewModelConfigTransfer.tsx
index e72e1f094..07db92914 100644
--- 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) {
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
index 8d073eb62..a90ef942a 100644
--- 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);
             }}
           >
             创建维度
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
index 395a7a77c..d4e029e8a 100644
--- 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);
             }}
           >
             创建指标
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailSider.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailSider.tsx
index 0cf37d718..3a5ffa83e 100644
--- 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>
-                <IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
+                {detailData?.isCollect !== undefined ? (
+                  <IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
+                ) : (
+                  <div style={{ width: 15 }}></div>
+                )}
+
                 {detailData?.name}
                 {detailData?.hasAdminRes && (
                   <span
@@ -94,28 +99,31 @@ 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}>
-                <Space>
-                  <Tag icon={<PartitionOutlined />} color="#3b5999">
-                    {detailData?.modelName || '模型名为空'}
-                  </Tag>
-                  {detailData?.hasAdminRes && (
-                    <span
-                      className={styles.gotoMetricListIcon}
-                      onClick={() => {
-                        toDomainList(detailData.domainId, 'overview');
-                      }}
-                    >
-                      <Tooltip title="前往模型设置页">
-                        <ExportOutlined />
-                      </Tooltip>
-                    </span>
-                  )}
-                </Space>
-              </span>
-            </div>
+            {detailData?.modelName && (
+              <div className={styles.item}>
+                <span className={styles.itemLable}>所属模型: </span>
+                <span className={styles.itemValue}>
+                  <Space>
+                    <Tag icon={<PartitionOutlined />} color="#3b5999">
+                      {detailData?.modelName || '模型名为空'}
+                    </Tag>
+                    {detailData?.hasAdminRes && (
+                      <span
+                        className={styles.gotoMetricListIcon}
+                        onClick={() => {
+                          toDomainList(detailData.domainId, 'overview');
+                        }}
+                      >
+                        <Tooltip title="前往模型设置页">
+                          <ExportOutlined />
+                        </Tooltip>
+                      </span>
+                    )}
+                  </Space>
+                </span>
+              </div>
+            )}
+
             <div className={styles.item}>
               <span className={styles.itemLable}>创建人: </span>
               <span className={styles.itemValue}>{detailData?.createdBy}</span>
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/style.less
index b2106d5ba..1f7c4df58 100644
--- 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;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoForm.tsx
new file mode 100644
index 000000000..3674fc182
--- /dev/null
+++ 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;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
index efabec3d1..977128f9b 100644
--- 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)}
           </>
         );
       },
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/index.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/index.tsx
index 0390e30ae..11dda227f 100644
--- 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;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/dimensionData.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/dimensionData.ts
index 37a44c049..69d7e81e8 100644
--- 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,
+  };
 }
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/domainData.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/domainData.ts
index bc272b4ec..160bfbc3b 100644
--- 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,
   };
 }
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/modelData.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/models/modelData.ts
index cf84d5ec1..9940ee4ad 100644
--- 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,
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
index 25c5ff1ca..eb29cfa14 100644
--- 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);
 }
 
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
index 00e0a5ca5..22d79983c 100644
--- 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}` : ''}`,
+  );
 };