diff --git a/webapp/packages/chat-sdk/src/ShowCase/service.ts b/webapp/packages/chat-sdk/src/ShowCase/service.ts
index a94ff5677..c1c0b1452 100644
--- a/webapp/packages/chat-sdk/src/ShowCase/service.ts
+++ b/webapp/packages/chat-sdk/src/ShowCase/service.ts
@@ -5,8 +5,9 @@ import { ShowCaseType } from './type';
 const prefix = isMobile ? '/openapi' : '/api';
 
 export function queryShowCase(agentId: number, current: number, pageSize: number) {
-  return axios.post<ShowCaseType>(
-    `${prefix}/chat/manage/queryShowCase?agentId=${agentId}`,
-    { current, pageSize }
-  );
+  return axios.post<ShowCaseType>(`${prefix}/chat/manage/queryShowCase?agentId=${agentId}`, {
+    current,
+    pageSize,
+    userName: 'jerryjzhang',
+  });
 }
diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
index 247dfe58a..0374d0087 100644
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
@@ -313,7 +313,7 @@ const ChatMsg: React.FC<Props> = ({
       ) : (
         <div>
           {getMsgContent()}
-          {(isMultipleMetric || existDrillDownDimension) && (
+          {(isMultipleMetric || existDrillDownDimension) && !isSimpleMode && (
             <div
               className={`${prefixCls}-bottom-tools ${
                 getMsgContentType() === MsgContentTypeEnum.METRIC_CARD
diff --git a/webapp/packages/supersonic-fe/src/global.less b/webapp/packages/supersonic-fe/src/global.less
index 3b29cfc82..bd601cc08 100644
--- a/webapp/packages/supersonic-fe/src/global.less
+++ b/webapp/packages/supersonic-fe/src/global.less
@@ -144,6 +144,11 @@ ol {
     font-size: 30px;
   }
 }
+.ant-form {
+  .ant-spin .ant-spin-dot {
+    font-size: 30px;
+  }
+}
 
 .ant-menu-root>.ant-menu-item.ant-menu-item-selected {
   color: var(--tme-primary-color);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelBasicForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelBasicForm.tsx
index 87d3f791a..f7ed29bdd 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelBasicForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelBasicForm.tsx
@@ -191,10 +191,7 @@ const ModelBasicForm: React.FC<Props> = ({
       <FormItem name="description" label="模型描述">
         <TextArea placeholder="请输入模型描述" />
       </FormItem>
-      <FormItem
-        name={['ext', 'usId']}
-        label="上游任务ID"
-      >
+      <FormItem name={['ext', 'usId']} label="上游任务ID">
         <Select
           mode="tags"
           placeholder="输入ID后回车确认，多ID输入、复制粘贴支持英文逗号自动分隔"
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelCreateForm.tsx
index 714cce1ea..5922b574b 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelCreateForm.tsx
@@ -286,7 +286,7 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
       return;
     }
     const columnFields: any[] = columns.map((item: IDataSource.IExecuteSqlColumn) => {
-      const { type, nameEn, comment, name } = item;
+      const { type, nameEn, comment } = item;
       const oldItem =
         fieldsClassifyList.find((oItem) => {
           return oItem.fieldName === item.nameEn;
@@ -296,7 +296,6 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
         bizName: nameEn,
         fieldName: nameEn,
         dataType: type,
-        name: name || comment,
         comment,
       };
     });
@@ -407,9 +406,9 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
     if (code === 200) {
       const list = data?.resultList || [];
       const columns = list.map((item: any, index: number) => {
-        const { dataType, name } = item;
+        const { dataType, name, comment } = item;
         return {
-          ...item,
+          comment,
           nameEn: name,
           type: dataType,
         };
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelFieldForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelFieldForm.tsx
index 732ef1270..99ad7a6c4 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelFieldForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelFieldForm.tsx
@@ -111,7 +111,6 @@ const ModelFieldForm: React.FC<Props> = ({
               const isCreateName = getCreateFieldName(value);
               const editState = !isUndefined(record[isCreateName]) ? !!record[isCreateName] : true;
               const { name, comment } = record;
-              // handleFieldChange(record, 'type', value);
               onFieldChange(record.bizName, {
                 ...record,
                 type: value,
@@ -255,8 +254,8 @@ const ModelFieldForm: React.FC<Props> = ({
       dataIndex: 'fastCreate',
       width: 200,
       render: (_: any, record: FieldItem) => {
-        const { type, name, comment } = record;
-        const inputValue = name || comment;
+        const { type, name } = record;
+        const inputValue = name;
         if (
           [
             EnumDataSourceType.PRIMARY,
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx
new file mode 100644
index 000000000..f81b3bba7
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx
@@ -0,0 +1,57 @@
+import { message } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { getMetricData } from '../service';
+import { useParams } from '@umijs/max';
+import styles from './style.less';
+import { ISemantic } from '../data';
+import MetricInfoEditSider from './MetricInfoEditSider';
+import MetricInfoCreateForm from './components/MetricInfoCreateForm';
+import { MetricSettingKey } from './constants';
+
+type Props = Record<string, any>;
+
+const MetricDetail: React.FC<Props> = () => {
+  const params: any = useParams();
+  const metricId = params.metricId;
+  const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
+
+  const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
+
+  useEffect(() => {
+    if (!metricId) {
+      return;
+    }
+    queryMetricData(metricId);
+  }, [metricId]);
+
+  const queryMetricData = async (metricId: string) => {
+    const { code, data, msg } = await getMetricData(metricId);
+    if (code === 200) {
+      setMetircData({ ...data });
+      return;
+    }
+    message.error(msg);
+  };
+
+  return (
+    <>
+      <div className={styles.metricWrapper}>
+        <div className={styles.metricDetail}>
+          {/* <div className={styles.siderContainer}>
+            <MetricInfoEditSider
+              onSettingKeyChange={(key: string) => {
+                setSettingKey(key);
+              }}
+              metircData={metircData}
+            />
+          </div> */}
+          <div className={styles.tabContainer}>
+            <MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MetricDetail;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
index b0f34b9c6..7d9f57bb4 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
@@ -1,3 +1,18 @@
+
+.metricWrapper {
+  width: 100%;
+  margin-left: auto;
+  box-sizing: border-box;
+  margin-right: auto;
+  padding-left: 16px;
+  padding-right: 16px;
+  position: relative;
+  min-height: calc(-110px + 100vh);
+  display: flex;
+  flex-direction: column;
+}
+
+
 .metricFilterWrapper {
   margin: 20px;
   padding: 20px;
@@ -169,8 +184,6 @@
 }
 
 .metricEditWrapper {
-  // height: calc(100vh - 56px);
-  // overflow: scroll;
   .metricDetailTab {
     :global {
       .ant-tabs-nav {
@@ -197,7 +210,6 @@
     height: 100%;
     .tabContainer {
       padding: 24px;
-      // height: 100%;
       min-height: calc(100vh - 78px);
       width: calc(100vw - 350px);
       background-color: #fafafb;
@@ -228,12 +240,8 @@
     .siderContainer {
       width: 350px;
       min-height: calc(100vh - 78px);
-      // margin: 10px 20px 20px 0;
-      // background-color: rgb(255, 255, 255);
       border-radius: 6px;
       padding: 24px 0 24px 24px;
-      // box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px,
-      //   rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
     }
   }
 }