diff --git a/webapp/packages/supersonic-fe/config/routes.ts b/webapp/packages/supersonic-fe/config/routes.ts
index 40a120873..892d34366 100644
--- a/webapp/packages/supersonic-fe/config/routes.ts
+++ b/webapp/packages/supersonic-fe/config/routes.ts
@@ -22,12 +22,12 @@ const ROUTES = [
     component: './ChatPage',
     envEnableList: [ENV_KEY.CHAT],
   },
-  {
-    path: '/chatSetting/model/:domainId?/:modelId?/:menuKey?',
-    component: './SemanticModel/ChatSetting/ChatSetting',
-    name: 'chatSetting',
-    envEnableList: [ENV_KEY.CHAT],
-  },
+  // {
+  //   path: '/chatSetting/model/:domainId?/:modelId?/:menuKey?',
+  //   component: './SemanticModel/ChatSetting/ChatSetting',
+  //   name: 'chatSetting',
+  //   envEnableList: [ENV_KEY.CHAT],
+  // },
   {
     path: '/agent',
     name: 'agent',
@@ -40,7 +40,6 @@ const ROUTES = [
     name: 'semanticModel',
     envEnableList: [ENV_KEY.SEMANTIC],
   },
-
   {
     path: '/database',
     name: 'database',
@@ -86,6 +85,12 @@ const ROUTES = [
     hideInMenu: true,
     component: './Login',
   },
+  {
+    path: '/system',
+    name: 'system',
+    hideInMenu: true,
+    component: './System',
+  },
   {
     path: '/',
     redirect: APP_TARGET === 'inner' ? '/model' : '/chat',
diff --git a/webapp/packages/supersonic-fe/package.json b/webapp/packages/supersonic-fe/package.json
index f09d513e4..7c28a2010 100644
--- a/webapp/packages/supersonic-fe/package.json
+++ b/webapp/packages/supersonic-fe/package.json
@@ -28,7 +28,7 @@
     "prettier": "prettier -c --write \"src/**/*\"",
     "start": "npm run start:osdev",
     "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none APP_TARGET=inner umi dev",
-    "start:osdev": "cross-env REACT_APP_ENV=dev PORT=9000 MOCK=none APP_TARGET=opensource umi dev",
+    "start:osdev": "cross-env NODE_OPTIONS=--openssl-legacy-provider REACT_APP_ENV=dev PORT=9000 MOCK=none APP_TARGET=opensource umi dev",
     "start:no-mock": "cross-env MOCK=none umi dev",
     "start:no-ui": "cross-env UMI_UI=none umi dev",
     "start:pre": "cross-env REACT_APP_ENV=pre umi dev",
diff --git a/webapp/packages/supersonic-fe/src/components/FormHelper/FormItemTitle.tsx b/webapp/packages/supersonic-fe/src/components/FormHelper/FormItemTitle.tsx
index 70343c3f3..09bca627f 100644
--- a/webapp/packages/supersonic-fe/src/components/FormHelper/FormItemTitle.tsx
+++ b/webapp/packages/supersonic-fe/src/components/FormHelper/FormItemTitle.tsx
@@ -1,6 +1,7 @@
 import { Space } from 'antd';
+import { ReactNode } from 'react';
 export interface IProps {
-  title: string;
+  title: string | ReactNode;
   subTitle?: string;
 }
 
diff --git a/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx b/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx
index 96427ab1f..3c84e8f0e 100644
--- a/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx
+++ b/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx
@@ -1,8 +1,9 @@
 import { Space } from 'antd';
-import React from 'react';
-import { useModel } from 'umi';
+import React, { useEffect, useState } from 'react';
+import { useModel, history } from 'umi';
 import Avatar from './AvatarDropdown';
-
+import { SettingOutlined } from '@ant-design/icons';
+import { getSystemConfig } from '@/services/user';
 import styles from './index.less';
 import cx from 'classnames';
 
@@ -10,14 +11,29 @@ export type SiderTheme = 'light' | 'dark';
 
 const GlobalHeaderRight: React.FC = () => {
   const { initialState } = useModel('@@initialState');
+  const [hasSettingPermisson, setHasSettingPermisson] = useState<boolean>(false);
+  useEffect(() => {
+    querySystemConfig();
+  }, []);
 
   if (!initialState || !initialState.settings) {
     return null;
   }
+  const { currentUser = {} } = initialState as any;
 
-  const { navTheme, layout } = initialState.settings;
+  const { layout } = initialState.settings;
   let className = styles.right;
 
+  const querySystemConfig = async () => {
+    const { code, data } = await getSystemConfig();
+    if (code === 200) {
+      const { admins } = data;
+      if (admins.includes(currentUser?.staffName)) {
+        setHasSettingPermisson(true);
+      }
+    }
+  };
+
   if (layout === 'top' || layout === 'mix') {
     className = cx(styles.right, styles.dark);
   }
@@ -25,8 +41,19 @@ const GlobalHeaderRight: React.FC = () => {
   function handleLogin() {}
 
   return (
-    <Space className={className}>
+    <Space className={className} style={{ marginRight: -8 }}>
       <Avatar onClickLogin={handleLogin} />
+      {hasSettingPermisson && (
+        <span
+          className={styles.action}
+          style={{ padding: 20 }}
+          onClick={() => {
+            history.push(`/system`);
+          }}
+        >
+          <SettingOutlined />
+        </span>
+      )}
     </Space>
   );
 };
diff --git a/webapp/packages/supersonic-fe/src/global.less b/webapp/packages/supersonic-fe/src/global.less
index 6b09c9430..28d25ced7 100644
--- a/webapp/packages/supersonic-fe/src/global.less
+++ b/webapp/packages/supersonic-fe/src/global.less
@@ -28,6 +28,8 @@ html,
 body,
 #root {
   height: 100%;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Microsoft YaHei,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  -webkit-font-smoothing:antialiased;
 }
 
 .colorWeak {
diff --git a/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts b/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
index 07f2ac053..7e6b5a776 100644
--- a/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
+++ b/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
@@ -14,6 +14,7 @@ export default {
   'menu.chatSetting': '问答设置',
   'menu.plugin': '插件市场',
   'menu.login': '登录',
+  'menu.system': '系统设置',
   'menu.chat': '问答对话',
   'menu.agent': '智能助理',
 };
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
index 059d76c6b..9eed5d3a6 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
@@ -1,10 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { Form, Button, Modal, Steps, message } from 'antd';
 import DataSourceBasicForm from './DataSourceBasicForm';
 import FieldForm from './DataSourceFieldForm';
 import { formLayout } from '@/components/FormHelper/utils';
 import { EnumDataSourceType } from '../constants';
-// import type { DataInstanceItem } from '../data';
 import styles from '../style.less';
 import { createDatasource, updateDatasource, getColumns } from '../../service';
 import type { Dispatch } from 'umi';
@@ -17,13 +16,15 @@ export type CreateFormProps = {
   dispatch: Dispatch;
   createModalVisible: boolean;
   sql?: string;
-  databaseItem?: any;
+  databaseId?: number;
   dataSourceItem: IDataSource.IDataSourceItem;
   onCancel?: () => void;
   onSubmit?: (dataSourceInfo: any) => void;
   scriptColumns?: any[] | undefined;
   basicInfoFormMode?: 'normal' | 'fast';
   onDataBaseTableChange?: (tableName: string) => void;
+  onDataSourceBtnClick?: () => void;
+  // modalSolt: ReactNode;
 };
 const { Step } = Steps;
 
@@ -41,8 +42,10 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
   sql = '',
   onSubmit,
   dataSourceItem,
-  databaseItem,
+  databaseId,
   basicInfoFormMode,
+  onDataSourceBtnClick,
+  children,
 }) => {
   const isEdit = !!dataSourceItem?.id;
   const [fields, setFields] = useState<any[]>([]);
@@ -145,7 +148,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
     );
     return classify;
   };
-  const handleNext = async () => {
+  const handleNext = async (saveState: boolean = false) => {
     const fieldsValue = await form.validateFields();
 
     const fieldsClassify = getFieldsClassify(fields);
@@ -155,7 +158,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       ...fieldsClassify,
     };
     updateFormVal(submitForm);
-    if (currentStep < 1) {
+    if (!saveState && currentStep < 1) {
       forward();
     } else {
       setSaveLoading(true);
@@ -163,7 +166,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       const queryParams = {
         ...submitForm,
         sqlQuery: sql,
-        databaseId: databaseItem?.key || dataSourceItem?.databaseId || formDatabaseId,
+        databaseId: databaseId || dataSourceItem?.databaseId || formDatabaseId,
         queryType: basicInfoFormMode === 'fast' ? 'table_query' : 'sql_query',
         tableQuery: dbName && tableName ? `${dbName}.${tableName}` : '',
         modelId: isEdit ? dataSourceItem.modelId : modelId,
@@ -191,7 +194,6 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       return {
         ...oldItem,
         bizName: nameEn,
-        // name,
         sqlType: type,
       };
     });
@@ -264,7 +266,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
     } else {
       initFields([], fieldColumns);
     }
-  }, [dataSourceItem]);
+  }, [dataSourceItem, fieldColumns]);
 
   const handleFieldChange = (fieldName: string, data: any) => {
     const result = fields.map((field) => {
@@ -285,7 +287,6 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
     const { code, data, msg } = await getColumns(databaseId, dbName, tableName);
     if (code === 200) {
       const list = data?.resultList || [];
-      // setTableNameList(list);
       const columns = list.map((item: any) => {
         const { dataType, name } = item;
         return {
@@ -293,7 +294,6 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
           type: dataType,
         };
       });
-      // setFields(columns);
       initFields([], columns);
       setFieldColumns(columns);
       return columns;
@@ -327,14 +327,25 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
           <Button style={{ float: 'left' }} onClick={backward}>
             上一步
           </Button>
-          <Button onClick={onCancel}>取消</Button>
+          <Button onClick={onCancel}>取 消</Button>
+          <Button
+            type="primary"
+            onClick={() => {
+              onDataSourceBtnClick?.();
+            }}
+          >
+            数据源编辑
+          </Button>
+
           <Button
             type="primary"
             loading={saveLoading}
-            onClick={handleNext}
+            onClick={() => {
+              handleNext(true);
+            }}
             disabled={hasEmptyNameField}
           >
-            完成
+            保 存
           </Button>
         </>
       );
@@ -342,9 +353,26 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
     return (
       <>
         <Button onClick={onCancel}>取消</Button>
-        <Button type="primary" onClick={handleNext}>
+        <Button
+          type="primary"
+          onClick={() => {
+            handleNext();
+          }}
+        >
           下一步
         </Button>
+        {isEdit && (
+          <Button
+            type="primary"
+            loading={saveLoading}
+            onClick={() => {
+              handleNext(true);
+            }}
+            // disabled={hasEmptyNameField}
+          >
+            保 存
+          </Button>
+        )}
       </>
     );
   };
@@ -383,6 +411,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
       >
         {renderContent()}
       </Form>
+      {children}
     </Modal>
   );
 };
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx
index 1a601d47b..e58486d2c 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx
@@ -18,7 +18,7 @@ import FullScreen from '@/components/FullScreen';
 import SqlEditor from '@/components/SqlEditor';
 import type { TaskResultItem, TaskResultColumn } from '../data';
 import { excuteSql } from '@/pages/SemanticModel/service';
-import DataSourceCreateForm from './DataSourceCreateForm';
+// import DataSourceCreateForm from './DataSourceCreateForm';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../../model';
 import styles from '../style.less';
@@ -29,13 +29,19 @@ import 'ace-builds/src-min-noconflict/theme-monokai';
 import 'ace-builds/src-min-noconflict/mode-sql';
 import { IDataSource, ISemantic } from '../../data';
 
+export type DataSourceSubmitData = {
+  sql: string;
+  databaseId: number;
+  columns: any[];
+};
+
 type IProps = {
   domainManger: StateType;
   dispatch: Dispatch;
   dataSourceItem: IDataSource.IDataSourceItem;
   onUpdateSql?: (sql: string) => void;
   sql?: string;
-  onSubmitSuccess?: (dataSourceInfo: any) => void;
+  onSubmitSuccess?: (dataSourceInfo: DataSourceSubmitData) => void;
 };
 
 type ResultTableItem = Record<string, any>;
@@ -48,7 +54,7 @@ type ResultColItem = {
 
 type ScreenSize = 'small' | 'middle' | 'large';
 
-type JdbcSourceItems = {
+type DatabaseItem = {
   label: string;
   key: number;
 };
@@ -60,7 +66,7 @@ const SqlDetail: React.FC<IProps> = ({
   sql = '',
   onUpdateSql,
 }) => {
-  const { databaseConfigList, selectModelId: modelId } = domainManger;
+  const { databaseConfigList } = domainManger;
   const [resultTable, setResultTable] = useState<ResultTableItem[]>([]);
   const [resultTableLoading, setResultTableLoading] = useState(false);
   const [resultCols, setResultCols] = useState<ResultColItem[]>([]);
@@ -69,9 +75,9 @@ const SqlDetail: React.FC<IProps> = ({
     pageSize: 20,
     total: 0,
   });
-  const [jdbcSourceItems, setJdbcSourceItems] = useState<JdbcSourceItems[]>([]);
-  const [currentJdbcSourceItem, setCurrentJdbcSourceItem] = useState<JdbcSourceItems>();
-  const [dataSourceModalVisible, setDataSourceModalVisible] = useState(false);
+  const [dataBaseItems, setDataBaseItems] = useState<DatabaseItem[]>([]);
+  const [currentDatabaseItem, setCurrentDatabaseItem] = useState<DatabaseItem>();
+  // const [dataSourceModalVisible, setDataSourceModalVisible] = useState(false);
 
   const [tableScroll, setTableScroll] = useState({
     scrollToFirstRowOnChange: true,
@@ -107,7 +113,7 @@ const SqlDetail: React.FC<IProps> = ({
         disabled: !item.hasUsePermission,
       };
     });
-    setJdbcSourceItems(list);
+    setDataBaseItems(list);
     let targetDataBase = list[0];
     if (dataSourceItem?.id) {
       const { databaseId } = dataSourceItem;
@@ -116,12 +122,12 @@ const SqlDetail: React.FC<IProps> = ({
         targetDataBase = target;
       }
     }
-    setCurrentJdbcSourceItem(targetDataBase);
+    setCurrentDatabaseItem(targetDataBase);
   }, [dataSourceItem, databaseConfigList]);
 
   useEffect(() => {
     setRunState(undefined);
-  }, [currentJdbcSourceItem]);
+  }, [currentDatabaseItem, sql]);
 
   function creatCalcItem(key: string, data: string) {
     const line = document.createElement('div'); // 需要每条数据一行，这样避免数据换行的时候获得的宽度不准确
@@ -223,18 +229,16 @@ const SqlDetail: React.FC<IProps> = ({
   };
 
   const separateSql = async (value: string) => {
-    if (!currentJdbcSourceItem?.key) {
+    if (!currentDatabaseItem?.key) {
       return;
     }
     setResultTableLoading(true);
     const { code, data, msg } = await excuteSql({
       sql: value,
-      // modelId,
-      id: currentJdbcSourceItem.key,
+      id: currentDatabaseItem.key,
     });
     setResultTableLoading(false);
     if (code === 200) {
-      // setDataSourceResult(data);
       fetchTaskResult(data);
       setRunState(true);
     } else {
@@ -268,13 +272,13 @@ const SqlDetail: React.FC<IProps> = ({
     return isPartial ? separateSql(partialSql) : separateSql(sql);
   };
 
-  const showDataSetModal = () => {
-    setDataSourceModalVisible(true);
-  };
+  // const showDataSetModal = () => {
+  //   setDataSourceModalVisible(true);
+  // };
 
-  const startCreatDataSource = async () => {
-    showDataSetModal();
-  };
+  // const startCreatDataSource = async () => {
+  //   showDataSetModal();
+  // };
 
   const updateNormalResScroll = () => {
     const node = resultInnerWrap?.current;
@@ -386,14 +390,14 @@ const SqlDetail: React.FC<IProps> = ({
           <Tooltip title="数据类型">
             <Dropdown
               menu={{
-                items: jdbcSourceItems,
+                items: dataBaseItems,
                 onClick: (e) => {
                   const value = e.key;
-                  const target: any = jdbcSourceItems.filter((item: any) => {
+                  const target: any = dataBaseItems.filter((item: any) => {
                     return item.key === Number(value);
                   })[0];
                   if (target) {
-                    setCurrentJdbcSourceItem(target);
+                    setCurrentDatabaseItem(target);
                   }
                 },
               }}
@@ -402,7 +406,7 @@ const SqlDetail: React.FC<IProps> = ({
               <Button style={{ marginRight: '15px', minWidth: '140px' }}>
                 <Space>
                   <CloudServerOutlined className={styles.sqlOprIcon} style={{ marginRight: 0 }} />
-                  <span>{currentJdbcSourceItem?.label}</span>
+                  <span>{currentDatabaseItem?.label}</span>
                 </Space>
               </Button>
             </Dropdown>
@@ -464,7 +468,7 @@ const SqlDetail: React.FC<IProps> = ({
         <div className={`${styles.sqlBottmWrap} ${screenSize}`}>
           <div className={styles.sqlResultWrap}>
             <div className={styles.sqlToolBar}>
-              {
+              {/* {
                 <Button
                   className={styles.sqlToolBtn}
                   type="primary"
@@ -473,7 +477,21 @@ const SqlDetail: React.FC<IProps> = ({
                 >
                   生成数据源
                 </Button>
-              }
+              } */}
+              <Button
+                className={styles.sqlToolBtn}
+                type="primary"
+                onClick={() => {
+                  onSubmitSuccess?.({
+                    columns: scriptColumns,
+                    databaseId: currentDatabaseItem?.key || 0,
+                    sql,
+                  });
+                }}
+                disabled={!runState}
+              >
+                完成
+              </Button>
               <Button
                 className={styles.sqlToolBtn}
                 type="primary"
@@ -498,23 +516,6 @@ const SqlDetail: React.FC<IProps> = ({
           </div>
         </div>
       </SplitPane>
-
-      {dataSourceModalVisible && (
-        <DataSourceCreateForm
-          sql={sql}
-          databaseItem={currentJdbcSourceItem}
-          dataSourceItem={dataSourceItem}
-          scriptColumns={scriptColumns}
-          onCancel={() => {
-            setDataSourceModalVisible(false);
-          }}
-          onSubmit={(dataSourceInfo: any) => {
-            setDataSourceModalVisible(false);
-            onSubmitSuccess?.(dataSourceInfo);
-          }}
-          createModalVisible={dataSourceModalVisible}
-        />
-      )}
     </>
   );
 };
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx
index 64dcd6653..b94388ed0 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Tabs } from 'antd';
-import SqlDetail from './SqlDetail';
+import SqlDetail, { DataSourceSubmitData } from './SqlDetail';
 
 import styles from '../style.less';
 
@@ -22,7 +22,7 @@ type TableRef = {
 
 type Props = {
   initialValues: any;
-  onSubmitSuccess?: (dataSourceInfo: any) => void;
+  onSubmitSuccess?: (dataSourceInfo: DataSourceSubmitData) => void;
 };
 
 const { TabPane } = Tabs;
@@ -105,7 +105,6 @@ const SqlSide: React.FC<Props> = ({ initialValues, onSubmitSuccess }) => {
           })}
         </Tabs>
       </div>
-      {/* </SplitPane> */}
     </>
   );
 };
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/index.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/index.tsx
index cc4c353fc..0a4cdb346 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/index.tsx
@@ -4,10 +4,11 @@ import SqlSide from './components/SqlSide';
 import Pane from 'react-split-pane/lib/Pane';
 import styles from './style.less';
 import { RightOutlined, LeftOutlined } from '@ant-design/icons';
+import { DataSourceSubmitData } from './components/SqlDetail';
 
 type Props = {
   initialValues: any;
-  onSubmitSuccess?: (dataSourceInfo: any) => void;
+  onSubmitSuccess?: (dataSourceInfo: DataSourceSubmitData) => void;
 };
 
 const DEFAULT_RIGHT_SIZE = '300px';
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
index 5fa073809..31ecd3a58 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
@@ -1,26 +1,50 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { message, Space, Popconfirm, Tag, Spin, Dropdown } from 'antd';
+import {
+  message,
+  Space,
+  Popconfirm,
+  Tag,
+  Spin,
+  Dropdown,
+  DatePicker,
+  Popover,
+  Button,
+  Radio,
+} from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
 import { connect, history, useModel } from 'umi';
 import type { StateType } from '../model';
 import { SENSITIVE_LEVEL_ENUM } from '../constant';
-import { queryMetric, deleteMetric, batchUpdateMetricStatus } from '../service';
+import {
+  queryMetric,
+  deleteMetric,
+  batchUpdateMetricStatus,
+  batchDownloadMetric,
+} from '../service';
 import MetricFilter from './components/MetricFilter';
 import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
 import MetricCardList from './components/MetricCardList';
 import NodeInfoDrawer from '../SemanticGraph/components/NodeInfoDrawer';
 import { SemanticNodeType, StatusEnum } from '../enum';
-import moment from 'moment';
+import moment, { Moment } from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
+import {
+  PlaySquareOutlined,
+  StopOutlined,
+  CloudDownloadOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
 
 type Props = {
   dispatch: Dispatch;
   domainManger: StateType;
 };
 
+const { RangePicker } = DatePicker;
+
 type QueryMetricListParams = {
   id?: string;
   name?: string;
@@ -51,6 +75,12 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
   });
   const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
+  const [popoverOpenState, setPopoverOpenState] = useState<boolean>(false);
+  const [pickerType, setPickerType] = useState<string>('day');
+
+  const dateRangeRef = useRef<any>([]);
+  const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
+
   const actionRef = useRef<ActionType>();
 
   useEffect(() => {
@@ -122,6 +152,24 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     }
   };
 
+  const downloadMetricQuery = async (ids: React.Key[], dateStringList: string[]) => {
+    if (Array.isArray(ids) && ids.length > 0) {
+      setDownloadLoading(true);
+      const [startDate, endDate] = dateStringList;
+      await batchDownloadMetric({
+        metricIds: ids,
+        dateInfo: {
+          dateMode: 'BETWEEN',
+          startDate,
+          endDate,
+          period: pickerType.toUpperCase(),
+        },
+      });
+      setDownloadLoading(false);
+      setPopoverOpenState(false);
+    }
+  };
+
   const handleMetricEdit = (metricItem: ISemantic.IMetricItem) => {
     setMetricItem(metricItem);
     setCreateModalVisible(true);
@@ -139,8 +187,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
         return (
           <a
             onClick={() => {
-              // setMetricItem(record);
-              // setInfoDrawerVisible(true);
               history.push(`/metric/detail/${record.id}`);
             }}
           >
@@ -297,14 +343,25 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     }),
   };
 
-  const dropdownButtonItems = [
+  const dropdownButtonItems: any[] = [
     {
       key: 'batchStart',
       label: '批量启用',
+      icon: <PlaySquareOutlined />,
     },
     {
       key: 'batchStop',
       label: '批量停用',
+      icon: <StopOutlined />,
+    },
+    {
+      key: 'batchDownload',
+      // label: '批量下载',
+      label: <a>批量下载</a>,
+      icon: <CloudDownloadOutlined />,
+    },
+    {
+      type: 'divider',
     },
     {
       key: 'batchDelete',
@@ -318,6 +375,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           <a>批量删除</a>
         </Popconfirm>
       ),
+      icon: <DeleteOutlined />,
     },
   ];
 
@@ -329,11 +387,69 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       case 'batchStop':
         queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
         break;
+      case 'batchDownload':
+        setPopoverOpenState(true);
       default:
         break;
     }
   };
-
+  const popoverConfig = {
+    title: '选择下载区间',
+    content: (
+      <Space direction="vertical">
+        <Radio.Group
+          size="small"
+          value={pickerType}
+          onChange={(e) => {
+            setPickerType(e.target.value);
+          }}
+        >
+          <Radio.Button value="day">按日</Radio.Button>
+          <Radio.Button value="week">按周</Radio.Button>
+          <Radio.Button value="month">按月</Radio.Button>
+        </Radio.Group>
+        <RangePicker
+          style={{ paddingBottom: 5 }}
+          onChange={(date) => {
+            dateRangeRef.current = date;
+            return;
+          }}
+          picker={pickerType as any}
+          allowClear={true}
+        />
+        <div style={{ marginTop: 20 }}>
+          <Space>
+            <Button
+              type="primary"
+              loading={downloadLoading}
+              onClick={() => {
+                const [startMoment, endMoment] = dateRangeRef.current;
+                let searchDateRange = [
+                  startMoment?.format('YYYY-MM-DD'),
+                  endMoment?.format('YYYY-MM-DD'),
+                ];
+                if (pickerType === 'week') {
+                  searchDateRange = [
+                    startMoment?.startOf('isoWeek').format('YYYY-MM-DD'),
+                    endMoment?.startOf('isoWeek').format('YYYY-MM-DD'),
+                  ];
+                }
+                if (pickerType === 'month') {
+                  searchDateRange = [
+                    startMoment?.startOf('month').format('YYYY-MM-DD'),
+                    endMoment?.startOf('month').format('YYYY-MM-DD'),
+                  ];
+                }
+                downloadMetricQuery(selectedRowKeys, searchDateRange);
+              }}
+            >
+              下载
+            </Button>
+          </Space>
+        </div>
+      </Space>
+    ),
+  };
   return (
     <>
       <div className={styles.metricFilterWrapper}>
@@ -383,12 +499,21 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
               ...rowSelection,
             }}
             toolBarRender={() => [
-              <Dropdown.Button
+              <Popover
+                content={popoverConfig?.content}
+                title={popoverConfig?.title}
+                trigger="click"
                 key="ctrlBtnList"
-                menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
+                open={popoverOpenState}
+                placement="bottomLeft"
+                onOpenChange={(open: boolean) => {
+                  setPopoverOpenState(open);
+                }}
               >
-                批量操作
-              </Dropdown.Button>,
+                <Dropdown.Button menu={{ items: dropdownButtonItems, onClick: onMenuClick }}>
+                  批量操作
+                </Dropdown.Button>
+              </Popover>,
             ]}
             loading={loading}
             onChange={(data: any) => {
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricCardList.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricCardList.tsx
index dd062cd8f..673a972cf 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricCardList.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricCardList.tsx
@@ -104,7 +104,7 @@ const MetricCardList: React.FC<Props> = ({
   };
 
   return (
-    <div style={{ padding: '0px 20px 20px' }}>
+    <div style={{ padding: '20px' }}>
       <CheckCard.Group value={currentNodeData.id} defaultValue={undefined}>
         {metricList &&
           metricList.map((metricItem: ISemantic.IMetricItem) => {
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTable.tsx
index c4e3cebae..663d435bc 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTable.tsx
@@ -146,7 +146,7 @@ const ClassDataSourceTable: React.FC<Props> = ({ dispatch, domainManger }) => {
           </Button>,
         ]}
       />
-      {
+      {createDataSourceModalOpen && (
         <ClassDataSourceTypeModal
           open={createDataSourceModalOpen}
           onCancel={() => {
@@ -157,7 +157,7 @@ const ClassDataSourceTable: React.FC<Props> = ({ dispatch, domainManger }) => {
             actionRef.current?.reload();
           }}
         />
-      }
+      )}
     </>
   );
 };
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
index 531732971..1ca970b67 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
@@ -2,8 +2,9 @@ import { Button, Drawer, Result, Modal, Card, Row, Col } from 'antd';
 import { ConsoleSqlOutlined, CoffeeOutlined } from '@ant-design/icons';
 import React, { useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
-import { history, connect } from 'umi';
+import { connect } from 'umi';
 import DataSourceCreateForm from '../Datasource/components/DataSourceCreateForm';
+import { excuteSql } from '../service';
 import type { StateType } from '../model';
 import DataSource from '../Datasource';
 import { IDataSource } from '../data';
@@ -33,8 +34,12 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
 
   const [dataSourceModalVisible, setDataSourceModalVisible] = useState(false);
   const [fastModeSql, setFastModeSql] = useState<string>('');
+  const [sql, setSql] = useState<string>('');
 
-  const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
+  const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState<boolean>(false);
+  const [dataSourceEditOpen, setDataSourceEditOpen] = useState<boolean>(false);
+  const [currentDatabaseId, setCurrentDatabaseId] = useState<number>();
+  const [scriptColumns, setScriptColumns] = useState<any[]>([]);
 
   useEffect(() => {
     if (!dataSourceItem || !open) {
@@ -65,6 +70,28 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
     onCancel?.();
   };
 
+  useEffect(() => {
+    queryTableColumnListByScript(dataSourceItem);
+  }, [dataSourceItem]);
+
+  const fetchTaskResult = (params) => {
+    setScriptColumns(params.columns);
+  };
+
+  const queryTableColumnListByScript = async (dataSource: IDataSource.IDataSourceItem) => {
+    if (!dataSource) {
+      return;
+    }
+    const { code, data, msg } = await excuteSql({
+      sql: dataSource.datasourceDetail?.sqlQuery,
+      id: dataSource.databaseId,
+    });
+    if (code === 200) {
+      fetchTaskResult(data);
+      setSql(dataSource?.datasourceDetail?.sqlQuery);
+    }
+  };
+
   return (
     <>
       <Modal
@@ -140,25 +167,47 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
         />
       )}
       {createModalVisible && (
-        <Drawer
-          width={'100%'}
-          destroyOnClose
-          title="数据源编辑"
-          open={true}
-          onClose={() => {
+        <DataSourceCreateForm
+          sql={sql}
+          databaseId={currentDatabaseId}
+          basicInfoFormMode="normal"
+          dataSourceItem={dataSourceItem}
+          scriptColumns={scriptColumns}
+          onCancel={() => {
             setCreateModalVisible(false);
             handleCancel();
           }}
-          footer={null}
+          onSubmit={() => {
+            setCreateModalVisible(false);
+            onSubmit?.();
+          }}
+          createModalVisible={createModalVisible}
+          onDataSourceBtnClick={() => {
+            setDataSourceEditOpen(true);
+          }}
         >
-          <DataSource
-            initialValues={dataSourceItem}
-            onSubmitSuccess={() => {
-              setCreateModalVisible(false);
-              onSubmit?.();
+          <Drawer
+            width={'100%'}
+            title="数据源编辑"
+            open={dataSourceEditOpen}
+            onClose={() => {
+              setDataSourceEditOpen(false);
             }}
-          />
-        </Drawer>
+            footer={null}
+          >
+            <DataSource
+              initialValues={dataSourceItem}
+              onSubmitSuccess={(dataSourceInfo) => {
+                const { columns, sql, databaseId } = dataSourceInfo;
+                setSql(sql);
+                setScriptColumns(columns);
+                setCurrentDatabaseId(databaseId);
+                onSubmit?.();
+                setDataSourceEditOpen(false);
+              }}
+            />
+          </Drawer>
+        </DataSourceCreateForm>
       )}
     </>
   );
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 a1bc7fa7b..779abf73f 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
@@ -423,6 +423,12 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           open={dimensionValueSettingModalVisible}
           dimensionItem={dimensionItem}
           onCancel={() => {
+            dispatch({
+              type: 'domainManger/queryDimensionList',
+              payload: {
+                modelId,
+              },
+            });
             setDimensionValueSettingModalVisible(false);
           }}
           onSubmit={() => {
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonEditList/index.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonEditList/index.tsx
index 6b5128a57..6a9737849 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonEditList/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/CommonEditList/index.tsx
@@ -61,7 +61,7 @@ const CommonEditList: React.FC<Props> = ({ title, defaultCollapse = false, value
             activeKey ? (
               <Button
                 key="saveBtn"
-                type="primary"
+                type="link"
                 onClick={() => {
                   if (!currentRecord && !currentSql) {
                     setActiveKey(undefined);
@@ -98,7 +98,7 @@ const CommonEditList: React.FC<Props> = ({ title, defaultCollapse = false, value
               </Button>
             ) : (
               <Button
-                type="primary"
+                type="link"
                 key="createBtn"
                 onClick={() => {
                   setCurrentRecord(undefined);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseSection.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseSection.tsx
deleted file mode 100644
index adf64efe5..000000000
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseSection.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Space } from 'antd';
-import React, { useRef } from 'react';
-import type { Dispatch } from 'umi';
-import { connect } from 'umi';
-import type { StateType } from '../../model';
-import ProCard from '@ant-design/pro-card';
-import DatabaseCreateForm from './DatabaseCreateForm';
-
-type Props = {
-  dispatch: Dispatch;
-  domainManger: StateType;
-};
-
-const DatabaseSection: React.FC<Props> = ({ domainManger, dispatch }) => {
-  const { selectDomainId, dataBaseConfig } = domainManger;
-
-  const entityCreateRef = useRef<any>({});
-
-  return (
-    <div style={{ width: 800, margin: '0 auto' }}>
-      <Space direction="vertical" style={{ width: '100%' }} size={20}>
-        <ProCard title="数据库设置" bordered>
-          <DatabaseCreateForm
-            ref={entityCreateRef}
-            dataBaseConfig={dataBaseConfig}
-            domainId={Number(selectDomainId)}
-            onSubmit={() => {
-              dispatch({
-                type: 'domainManger/queryDatabaseByDomainId',
-                payload: {
-                  domainId: selectDomainId,
-                },
-              });
-            }}
-          />
-        </ProCard>
-      </Space>
-    </div>
-  );
-};
-export default connect(({ domainManger }: { domainManger: StateType }) => ({
-  domainManger,
-}))(DatabaseSection);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionValueSettingModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionValueSettingModal.tsx
index 18bc00f6d..0d9a8e992 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionValueSettingModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionValueSettingModal.tsx
@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Modal, message, Space, Tooltip } from 'antd';
+import { Button, Modal, message, Space, Tooltip, Tabs } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { ISemantic } from '../data';
 import CommonEditTable from './CommonEditTable';
 import { updateDimension, mockDimensionValuesAlias } from '../service';
 import { connect } from 'umi';
+import DimensionValueSettingForm from './Entity/DimensionValueSettingForm';
 import type { StateType } from '../model';
 
 export type CreateFormProps = {
   dimensionValueSettingList: ISemantic.IDimensionValueSettingItem[];
   onCancel: () => void;
-  dimensionItem?: ISemantic.IDimensionItem;
+  dimensionItem: ISemantic.IDimensionItem;
   open: boolean;
   onSubmit: (values?: any) => void;
   domainManger: StateType;
@@ -18,7 +19,7 @@ export type CreateFormProps = {
 
 type TableDataSource = { techName: string; bizName: string; alias?: string[] };
 
-const DimensionInfoModal: React.FC<CreateFormProps> = ({
+const DimensionValueSettingModal: React.FC<CreateFormProps> = ({
   onCancel,
   open,
   dimensionItem,
@@ -27,9 +28,10 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
   onSubmit,
 }) => {
   const [tableDataSource, setTableDataSource] = useState<TableDataSource[]>([]);
-  const { selectDomainId } = domainManger;
+  const { selectDomainId, selectModelId: modelId } = domainManger;
   const [dimValueMaps, setDimValueMaps] = useState<ISemantic.IDimensionValueSettingItem[]>([]);
   const [llmLoading, setLlmLoading] = useState<boolean>(false);
+  const [menuKey, setMenuKey] = useState<string>('default');
 
   useEffect(() => {
     setTableDataSource(dimensionValueSettingList);
@@ -74,29 +76,33 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
   const renderFooter = () => {
     return (
       <>
-        <Button
-          type="primary"
-          loading={llmLoading}
-          onClick={() => {
-            generatorDimensionValue();
-          }}
-        >
-          <Space>
-            智能填充
-            <Tooltip title="智能填充将根据维度相关信息，使用大语言模型获取可能被使用的维度值">
-              <InfoCircleOutlined />
-            </Tooltip>
-          </Space>
-        </Button>
         <Button onClick={onCancel}>取消</Button>
-        <Button
-          type="primary"
-          onClick={() => {
-            handleSubmit();
-          }}
-        >
-          完成
-        </Button>
+        {menuKey === 'default' && (
+          <>
+            <Button
+              type="primary"
+              loading={llmLoading}
+              onClick={() => {
+                generatorDimensionValue();
+              }}
+            >
+              <Space>
+                智能填充
+                <Tooltip title="智能填充将根据维度相关信息，使用大语言模型获取可能被使用的维度值">
+                  <InfoCircleOutlined />
+                </Tooltip>
+              </Space>
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => {
+                handleSubmit();
+              }}
+            >
+              完成
+            </Button>
+          </>
+        )}
       </>
     );
   };
@@ -154,6 +160,38 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
       },
     },
   ];
+
+  const tabItem = [
+    {
+      label: '维度值填充',
+      key: 'default',
+      children: (
+        <CommonEditTable
+          tableDataSource={tableDataSource}
+          columnList={columns}
+          onDataSourceChange={(tableData) => {
+            const dimValueMaps = tableData.map((item: TableDataSource) => {
+              return {
+                ...item,
+              };
+            });
+
+            setDimValueMaps(dimValueMaps);
+          }}
+        />
+      ),
+    },
+    {
+      label: '维度值设置',
+      key: 'setting',
+      children: <DimensionValueSettingForm modelId={modelId} dimensionItem={dimensionItem} />,
+    },
+  ];
+
+  const handleMenuChange = (key: string) => {
+    setMenuKey(key);
+  };
+
   return (
     <Modal
       width={1200}
@@ -165,18 +203,12 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
       footer={renderFooter()}
       onCancel={onCancel}
     >
-      <CommonEditTable
-        tableDataSource={tableDataSource}
-        columnList={columns}
-        onDataSourceChange={(tableData) => {
-          const dimValueMaps = tableData.map((item: TableDataSource) => {
-            return {
-              ...item,
-              // alias: item.alias ? `${item.alias}`.split(',') : [],
-            };
-          });
-
-          setDimValueMaps(dimValueMaps);
+      <Tabs
+        items={tabItem}
+        size="large"
+        activeKey={menuKey}
+        onChange={(menuKey: string) => {
+          handleMenuChange(menuKey);
         }}
       />
     </Modal>
@@ -185,4 +217,4 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
 
 export default connect(({ domainManger }: { domainManger: StateType }) => ({
   domainManger,
-}))(DimensionInfoModal);
+}))(DimensionValueSettingModal);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionAndMetricVisibleModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionAndMetricVisibleModal.tsx
deleted file mode 100644
index cc9395a80..000000000
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionAndMetricVisibleModal.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Modal, message, Tabs, Button } from 'antd';
-
-import { addDomainExtend, editDomainExtend } from '../../service';
-import DimensionMetricVisibleTransfer from './DimensionMetricVisibleTransfer';
-import { IChatConfig } from '../../data';
-import DimensionValueSettingForm from './DimensionValueSettingForm';
-import { TransType } from '../../enum';
-import { wrapperTransTypeAndId, formatRichEntityDataListToIds } from './utils';
-
-type Props = {
-  domainId: number;
-  entityData: any;
-  chatConfigKey: string;
-  settingSourceList: any[];
-  onCancel: () => void;
-  visible: boolean;
-  onSubmit: (params?: { isSilenceSubmit?: boolean }) => void;
-};
-
-const dimensionConfig = {
-  blackIdListKey: 'blackDimIdList',
-  visibleIdListKey: 'whiteDimIdList',
-  modalTitle: '问答可见信息',
-  titles: ['不可见维度/指标', '可见维度/指标'],
-};
-
-const DimensionAndMetricVisibleModal: React.FC<Props> = ({
-  domainId,
-  visible,
-  entityData = {},
-  chatConfigKey,
-  settingSourceList,
-  onCancel,
-  onSubmit,
-}) => {
-  const [selectedKeyList, setSelectedKeyList] = useState<string[]>([]);
-  const settingTypeConfig = dimensionConfig;
-  const formatEntityData = formatRichEntityDataListToIds(entityData);
-  const [knowledgeInfosMap, setKnowledgeInfosMap] = useState<IChatConfig.IKnowledgeInfosItemMap>(
-    {},
-  );
-
-  const [activeKey, setActiveKey] = useState<string>('visibleSetting');
-  const formRef = useRef<any>();
-
-  const [globalKnowledgeConfigInitialValues, setGlobalKnowledgeConfigInitialValues] =
-    useState<IChatConfig.IKnowledgeConfig>();
-
-  useEffect(() => {
-    if (entityData?.visibility && Array.isArray(settingSourceList)) {
-      const { whiteDimIdList, whiteMetricIdList } = entityData.visibility;
-      const dimensionIdString = whiteDimIdList.map((dimensionId: number) => {
-        return wrapperTransTypeAndId(TransType.DIMENSION, dimensionId);
-      });
-      const metricIdString = whiteMetricIdList.map((metricId: number) => {
-        return wrapperTransTypeAndId(TransType.METRIC, metricId);
-      });
-      setSelectedKeyList([...dimensionIdString, ...metricIdString]);
-    }
-    if (entityData?.globalKnowledgeConfig) {
-      setGlobalKnowledgeConfigInitialValues(entityData.globalKnowledgeConfig);
-    }
-    if (Array.isArray(entityData?.knowledgeInfos)) {
-      const infoMap = entityData.knowledgeInfos.reduce(
-        (maps: IChatConfig.IKnowledgeInfosItemMap, item: IChatConfig.IKnowledgeInfosItem) => {
-          const { bizName } = item;
-          maps[bizName] = item;
-          return maps;
-        },
-        {},
-      );
-      setKnowledgeInfosMap(infoMap);
-    }
-  }, [entityData, settingSourceList]);
-
-  const saveEntity = async (submitData: any, isSilenceSubmit = false) => {
-    const { selectedKeyList, knowledgeInfosMap } = submitData;
-    const globalKnowledgeConfigFormFields = await formRef?.current?.getFormValidateFields?.();
-    let globalKnowledgeConfig = entityData.globalKnowledgeConfig;
-    if (globalKnowledgeConfigFormFields) {
-      globalKnowledgeConfig = globalKnowledgeConfigFormFields;
-    }
-    const { id, modelId } = entityData;
-    let saveDomainExtendQuery = addDomainExtend;
-    if (id) {
-      saveDomainExtendQuery = editDomainExtend;
-    }
-
-    const blackIdListMap = settingSourceList.reduce(
-      (ids, item) => {
-        const { id, transType } = item;
-        if (!selectedKeyList.includes(wrapperTransTypeAndId(transType, id))) {
-          if (transType === TransType.DIMENSION) {
-            ids.blackDimIdList.push(id);
-          }
-          if (transType === TransType.METRIC) {
-            ids.blackMetricIdList.push(id);
-          }
-        }
-        return ids;
-      },
-      {
-        blackDimIdList: [],
-        blackMetricIdList: [],
-      },
-    );
-
-    const knowledgeInfos = Object.keys(knowledgeInfosMap).reduce(
-      (infoList: IChatConfig.IKnowledgeInfosItem[], key: string) => {
-        const target = knowledgeInfosMap[key];
-        if (target.searchEnable) {
-          infoList.push(target);
-        }
-        return infoList;
-      },
-      [],
-    );
-
-    const params = {
-      ...formatEntityData,
-      visibility: blackIdListMap,
-      knowledgeInfos,
-      ...(globalKnowledgeConfig ? { globalKnowledgeConfig } : {}),
-    };
-
-    const { code, msg } = await saveDomainExtendQuery({
-      [chatConfigKey]: params,
-      id,
-      modelId,
-    });
-    if (code === 200) {
-      if (!isSilenceSubmit) {
-        message.success('保存成功');
-      }
-      onSubmit?.({ isSilenceSubmit });
-      return;
-    }
-    message.error(msg);
-  };
-
-  const handleTransferChange = (newTargetKeys: string[]) => {
-    setSelectedKeyList(newTargetKeys);
-  };
-
-  const renderFooter = () => {
-    return (
-      <>
-        <Button onClick={onCancel}>取消</Button>
-        <Button
-          type="primary"
-          onClick={() => {
-            saveEntity({ selectedKeyList, knowledgeInfosMap });
-          }}
-        >
-          完成
-        </Button>
-      </>
-    );
-  };
-
-  const tabItem = [
-    {
-      label: '可见设置',
-      key: 'visibleSetting',
-      children: (
-        <DimensionMetricVisibleTransfer
-          onKnowledgeInfosMapChange={(knowledgeInfos) => {
-            setKnowledgeInfosMap(knowledgeInfos);
-            saveEntity({ selectedKeyList, knowledgeInfosMap: knowledgeInfos }, true);
-          }}
-          knowledgeInfosMap={knowledgeInfosMap}
-          titles={settingTypeConfig.titles}
-          sourceList={settingSourceList}
-          targetList={selectedKeyList}
-          onChange={(newTargetKeys) => {
-            handleTransferChange(newTargetKeys);
-            saveEntity({ selectedKeyList: newTargetKeys, knowledgeInfosMap }, true);
-          }}
-        />
-      ),
-    },
-    {
-      label: '全局维度值过滤',
-      key: 'dimensionValueFilter',
-      children: (
-        <div style={{ margin: '0 auto', width: '975px' }}>
-          <DimensionValueSettingForm
-            initialValues={globalKnowledgeConfigInitialValues}
-            ref={formRef}
-          />
-        </div>
-      ),
-    },
-  ];
-
-  return (
-    <>
-      <Modal
-        width={1500}
-        destroyOnClose
-        title={settingTypeConfig.modalTitle}
-        maskClosable={false}
-        open={visible}
-        footer={activeKey === 'visibleSetting' ? false : renderFooter()}
-        // footer={false}
-        onCancel={onCancel}
-      >
-        <Tabs
-          items={tabItem}
-          defaultActiveKey="visibleSetting"
-          onChange={(key) => {
-            setActiveKey(key);
-          }}
-        />
-      </Modal>
-    </>
-  );
-};
-
-export default DimensionAndMetricVisibleModal;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleForm.tsx
deleted file mode 100644
index ac8a92f7c..000000000
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleForm.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useState, forwardRef } from 'react';
-import type { ForwardRefRenderFunction } from 'react';
-import { Form, Button } from 'antd';
-import FormItemTitle from '@/components/FormHelper/FormItemTitle';
-import { formLayout } from '@/components/FormHelper/utils';
-import DimensionAndMetricVisibleModal from './DimensionAndMetricVisibleModal';
-import { TransType } from '../../enum';
-import { wrapperTransTypeAndId } from './utils';
-
-type Props = {
-  entityData: any;
-  chatConfigKey: string;
-  metricList: any[];
-  dimensionList: any[];
-  domainId: number;
-  onSubmit: (params?: any) => void;
-};
-
-const FormItem = Form.Item;
-
-const DimensionMetricVisibleForm: ForwardRefRenderFunction<any, Props> = ({
-  domainId,
-  metricList,
-  dimensionList,
-  entityData,
-  chatConfigKey,
-  onSubmit,
-}) => {
-  const [dimensionModalVisible, setDimensionModalVisible] = useState(false);
-  return (
-    <>
-      <Form {...formLayout}>
-        <FormItem
-          label={
-            <FormItemTitle title={'可见维度/指标'} subTitle={'设置可见后，将允许在问答中被使用'} />
-          }
-        >
-          <Button
-            type="primary"
-            onClick={() => {
-              setDimensionModalVisible(true);
-            }}
-          >
-            设 置
-          </Button>
-        </FormItem>
-      </Form>
-      {dimensionModalVisible && (
-        <DimensionAndMetricVisibleModal
-          domainId={domainId}
-          entityData={entityData}
-          chatConfigKey={chatConfigKey}
-          settingSourceList={[
-            ...dimensionList.map((item) => {
-              const transType = TransType.DIMENSION;
-              const { id } = item;
-              return {
-                ...item,
-                transType,
-                key: wrapperTransTypeAndId(transType, id),
-              };
-            }),
-            ...metricList.map((item) => {
-              const transType = TransType.METRIC;
-              const { id } = item;
-              return {
-                ...item,
-                transType,
-                key: wrapperTransTypeAndId(transType, id),
-              };
-            }),
-          ]}
-          visible={dimensionModalVisible}
-          onCancel={() => {
-            setDimensionModalVisible(false);
-          }}
-          onSubmit={(params) => {
-            onSubmit?.();
-            if (!params?.isSilenceSubmit) {
-              setDimensionModalVisible(false);
-            }
-          }}
-        />
-      )}
-    </>
-  );
-};
-
-export default forwardRef(DimensionMetricVisibleForm);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
index f7f169784..1dffa5992 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
@@ -37,96 +37,96 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
   onKnowledgeInfosMapChange,
   ...restProps
 }) => {
-  const { selectModelId: modelId } = domainManger;
-  const [dimensionValueSettingModalVisible, setDimensionValueSettingModalVisible] =
-    useState<boolean>(false);
-  const [currentRecord, setCurrentRecord] = useState<RecordType>({} as RecordType);
-  const [currentDimensionSettingFormData, setCurrentDimensionSettingFormData] =
-    useState<IChatConfig.IKnowledgeConfig>();
+  // const { selectModelId: modelId } = domainManger;
+  // const [dimensionValueSettingModalVisible, setDimensionValueSettingModalVisible] =
+  //   useState<boolean>(false);
+  // const [currentRecord, setCurrentRecord] = useState<RecordType>({} as RecordType);
+  // const [currentDimensionSettingFormData, setCurrentDimensionSettingFormData] =
+  //   useState<IChatConfig.IKnowledgeConfig>();
 
-  const [recordLoadingMap, setRecordLoadingMap] = useState<Record<string, boolean>>({});
+  // const [recordLoadingMap, setRecordLoadingMap] = useState<Record<string, boolean>>({});
 
-  const [taskStateMap, setTaskStateMap] = useState<TaskStateMap>({});
+  // const [taskStateMap, setTaskStateMap] = useState<TaskStateMap>({});
 
-  useEffect(() => {
-    queryDictLatestTaskList();
-  }, []);
+  // useEffect(() => {
+  //   queryDictLatestTaskList();
+  // }, []);
 
-  const updateKnowledgeInfosMap = (record: RecordType, updateData: Record<string, any>) => {
-    const { bizName, id } = record;
-    const knowledgeMap = {
-      ...knowledgeInfosMap,
-    };
-    const target = knowledgeMap[bizName];
-    if (target) {
-      knowledgeMap[bizName] = {
-        ...target,
-        ...updateData,
-      };
-    } else {
-      knowledgeMap[bizName] = {
-        itemId: id,
-        bizName,
-        ...updateData,
-      };
-    }
-    onKnowledgeInfosMapChange?.(knowledgeMap);
-  };
+  // const updateKnowledgeInfosMap = (record: RecordType, updateData: Record<string, any>) => {
+  //   const { bizName, id } = record;
+  //   const knowledgeMap = {
+  //     ...knowledgeInfosMap,
+  //   };
+  //   const target = knowledgeMap[bizName];
+  //   if (target) {
+  //     knowledgeMap[bizName] = {
+  //       ...target,
+  //       ...updateData,
+  //     };
+  //   } else {
+  //     knowledgeMap[bizName] = {
+  //       itemId: id,
+  //       bizName,
+  //       ...updateData,
+  //     };
+  //   }
+  //   onKnowledgeInfosMapChange?.(knowledgeMap);
+  // };
 
-  const queryDictLatestTaskList = async () => {
-    const { code, data } = await searchDictLatestTaskList({
-      modelId,
-    });
-    if (code !== 200) {
-      message.error('获取字典导入任务失败!');
-      return;
-    }
-    const tastMap = data.reduce(
-      (stateMap: TaskStateMap, item: { dimId: number; status: DictTaskState }) => {
-        const { dimId, status } = item;
-        stateMap[dimId] = status;
-        return stateMap;
-      },
-      {},
-    );
-    setTaskStateMap(tastMap);
-  };
+  // const queryDictLatestTaskList = async () => {
+  //   const { code, data } = await searchDictLatestTaskList({
+  //     modelId,
+  //   });
+  //   if (code !== 200) {
+  //     message.error('获取字典导入任务失败!');
+  //     return;
+  //   }
+  //   const tastMap = data.reduce(
+  //     (stateMap: TaskStateMap, item: { dimId: number; status: DictTaskState }) => {
+  //       const { dimId, status } = item;
+  //       stateMap[dimId] = status;
+  //       return stateMap;
+  //     },
+  //     {},
+  //   );
+  //   setTaskStateMap(tastMap);
+  // };
 
-  const createDictTaskQuery = async (recordData: RecordType) => {
-    setRecordLoadingMap({
-      ...recordLoadingMap,
-      [recordData.id]: true,
-    });
-    const { code } = await createDictTask({
-      updateMode: 'REALTIME_ADD',
-      modelAndDimPair: {
-        [modelId]: [recordData.id],
-      },
-    });
-    setRecordLoadingMap({
-      ...recordLoadingMap,
-      [recordData.id]: false,
-    });
-    if (code !== 200) {
-      message.error('字典导入任务创建失败!');
-      return;
-    }
-    setTimeout(() => {
-      queryDictLatestTaskList();
-    }, 2000);
-  };
+  // const createDictTaskQuery = async (recordData: RecordType) => {
+  //   setRecordLoadingMap({
+  //     ...recordLoadingMap,
+  //     [recordData.id]: true,
+  //   });
+  //   const { code } = await createDictTask({
+  //     updateMode: 'REALTIME_ADD',
+  //     modelAndDimPair: {
+  //       [modelId]: [recordData.id],
+  //     },
+  //   });
+  //   setRecordLoadingMap({
+  //     ...recordLoadingMap,
+  //     [recordData.id]: false,
+  //   });
+  //   if (code !== 200) {
+  //     message.error('字典导入任务创建失败!');
+  //     return;
+  //   }
+  //   setTimeout(() => {
+  //     queryDictLatestTaskList();
+  //   }, 2000);
+  // };
 
-  const deleteDictTask = async (recordData: RecordType) => {
-    const { code } = await createDictTask({
-      updateMode: 'REALTIME_DELETE',
-      modelAndDimPair: {
-        [modelId]: [recordData.id],
-      },
-    });
-    if (code !== 200) {
-      message.error('删除字典导入任务创建失败!');
-    }
-  };
+  // const deleteDictTask = async (recordData: RecordType) => {
+  //   const { code } = await createDictTask({
+  //     updateMode: 'REALTIME_DELETE',
+  //     modelAndDimPair: {
+  //       [modelId]: [recordData.id],
+  //     },
+  //   });
+  //   if (code !== 200) {
+  //     message.error('删除字典导入任务创建失败!');
+  //   }
+  // };
 
   let rightColumns: ColumnsType<RecordType> = [
     {
@@ -141,104 +141,104 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
         return <TransTypeTag type={type} />;
       },
     },
-    {
-      dataIndex: 'y',
-      title: (
-        <TableTitleTooltips
-          title="维度值可见"
-          tooltips="勾选可见后，维度值将在搜索时可以被联想出来"
-        />
-      ),
-      width: 120,
-      render: (_: any, record: RecordType) => {
-        const { type, bizName } = record;
-        return type === TransType.DIMENSION ? (
-          <Checkbox
-            checked={knowledgeInfosMap?.[bizName]?.searchEnable}
-            onChange={(e: CheckboxChangeEvent) => {
-              updateKnowledgeInfosMap(record, { searchEnable: e.target.checked });
-              if (!e.target.checked) {
-                deleteDictTask(record);
-              }
-            }}
-            onClick={(event) => {
-              event.stopPropagation();
-            }}
-          />
-        ) : (
-          <></>
-        );
-      },
-    },
-    {
-      dataIndex: 'taskState',
-      width: 130,
-      title: (
-        <Space>
-          导入字典状态
-          <span
-            className={styles.taskStateRefreshIcon}
-            onClick={() => {
-              queryDictLatestTaskList();
-            }}
-          >
-            <Tooltip title="刷新字典任务状态">
-              <RedoOutlined />
-            </Tooltip>
-          </span>
-        </Space>
-      ),
-      render: (_, record) => {
-        const { id, type } = record;
-        const target = taskStateMap[id];
-        if (type === TransType.DIMENSION && target) {
-          return DictTaskState[target] || '未知状态';
-        }
-        return '--';
-      },
-    },
-    {
-      title: '操作',
-      dataIndex: 'x',
-      render: (_: any, record: RecordType) => {
-        const { type, bizName, id } = record;
-        return type === TransType.DIMENSION ? (
-          <Space>
-            <Button
-              style={{ padding: 0 }}
-              key="importDictBtn"
-              type="link"
-              disabled={!knowledgeInfosMap?.[bizName]?.searchEnable}
-              loading={!!recordLoadingMap[id]}
-              onClick={(event) => {
-                createDictTaskQuery(record);
-                event.stopPropagation();
-              }}
-            >
-              导入字典
-            </Button>
-            <Button
-              style={{ padding: 0 }}
-              key="editable"
-              type="link"
-              disabled={!knowledgeInfosMap?.[bizName]?.searchEnable}
-              onClick={(event) => {
-                setCurrentRecord(record);
-                setCurrentDimensionSettingFormData(
-                  knowledgeInfosMap?.[bizName]?.knowledgeAdvancedConfig,
-                );
-                setDimensionValueSettingModalVisible(true);
-                event.stopPropagation();
-              }}
-            >
-              可见维度值设置
-            </Button>
-          </Space>
-        ) : (
-          <></>
-        );
-      },
-    },
+    // {
+    //   dataIndex: 'y',
+    //   title: (
+    //     <TableTitleTooltips
+    //       title="维度值可见"
+    //       tooltips="勾选可见后，维度值将在搜索时可以被联想出来"
+    //     />
+    //   ),
+    //   width: 120,
+    //   render: (_: any, record: RecordType) => {
+    //     const { type, bizName } = record;
+    //     return type === TransType.DIMENSION ? (
+    //       <Checkbox
+    //         checked={knowledgeInfosMap?.[bizName]?.searchEnable}
+    //         onChange={(e: CheckboxChangeEvent) => {
+    //           updateKnowledgeInfosMap(record, { searchEnable: e.target.checked });
+    //           if (!e.target.checked) {
+    //             deleteDictTask(record);
+    //           }
+    //         }}
+    //         onClick={(event) => {
+    //           event.stopPropagation();
+    //         }}
+    //       />
+    //     ) : (
+    //       <></>
+    //     );
+    //   },
+    // },
+    // {
+    //   dataIndex: 'taskState',
+    //   width: 130,
+    //   title: (
+    //     <Space>
+    //       导入字典状态
+    //       <span
+    //         className={styles.taskStateRefreshIcon}
+    //         onClick={() => {
+    //           queryDictLatestTaskList();
+    //         }}
+    //       >
+    //         <Tooltip title="刷新字典任务状态">
+    //           <RedoOutlined />
+    //         </Tooltip>
+    //       </span>
+    //     </Space>
+    //   ),
+    //   render: (_, record) => {
+    //     const { id, type } = record;
+    //     const target = taskStateMap[id];
+    //     if (type === TransType.DIMENSION && target) {
+    //       return DictTaskState[target] || '未知状态';
+    //     }
+    //     return '--';
+    //   },
+    // },
+    // {
+    //   title: '操作',
+    //   dataIndex: 'x',
+    //   render: (_: any, record: RecordType) => {
+    //     const { type, bizName, id } = record;
+    //     return type === TransType.DIMENSION ? (
+    //       <Space>
+    //         <Button
+    //           style={{ padding: 0 }}
+    //           key="importDictBtn"
+    //           type="link"
+    //           disabled={!knowledgeInfosMap?.[bizName]?.searchEnable}
+    //           loading={!!recordLoadingMap[id]}
+    //           onClick={(event) => {
+    //             createDictTaskQuery(record);
+    //             event.stopPropagation();
+    //           }}
+    //         >
+    //           导入字典
+    //         </Button>
+    //         <Button
+    //           style={{ padding: 0 }}
+    //           key="editable"
+    //           type="link"
+    //           disabled={!knowledgeInfosMap?.[bizName]?.searchEnable}
+    //           onClick={(event) => {
+    //             setCurrentRecord(record);
+    //             setCurrentDimensionSettingFormData(
+    //               knowledgeInfosMap?.[bizName]?.knowledgeAdvancedConfig,
+    //             );
+    //             setDimensionValueSettingModalVisible(true);
+    //             event.stopPropagation();
+    //           }}
+    //         >
+    //           可见维度值设置
+    //         </Button>
+    //       </Space>
+    //     ) : (
+    //       <></>
+    //     );
+    //   },
+    // },
   ];
 
   const leftColumns: ColumnsType<RecordType> = [
@@ -299,7 +299,7 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
           );
         }}
       </Transfer>
-      <DimensionValueSettingModal
+      {/* <DimensionValueSettingModal
         visible={dimensionValueSettingModalVisible}
         initialValues={currentDimensionSettingFormData}
         onSubmit={(formValues) => {
@@ -309,12 +309,11 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
         onCancel={() => {
           setDimensionValueSettingModalVisible(false);
         }}
-      />
+      /> */}
     </>
   );
 };
 
-// export default DimensionMetricVisibleTableTransfer;
 export default connect(({ domainManger }: { domainManger: StateType }) => ({
   domainManger,
 }))(DimensionMetricVisibleTableTransfer);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingForm.tsx
index adaf1a58a..7521fe483 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingForm.tsx
@@ -1,29 +1,117 @@
-import { useEffect, forwardRef, useImperativeHandle } from 'react';
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import type { ForwardRefRenderFunction } from 'react';
-import { Form, Input } from 'antd';
-
+import { Form, Input, Switch, Space, Button, Divider, Tooltip, message } from 'antd';
+import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import { RedoOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { formLayout } from '@/components/FormHelper/utils';
+import { DictTaskState, TransType } from '../../enum';
+import {
+  getDomainExtendDetailConfig,
+  addDomainExtend,
+  editDomainExtend,
+  searchDictLatestTaskList,
+  createDictTask,
+} from '../../service';
+import type { IChatConfig, ISemantic } from '../../data';
 import { isString } from 'lodash';
 import styles from '../style.less';
 import CommonEditList from '../../components/CommonEditList';
+
 type Props = {
-  initialValues: any;
+  modelId: number;
+  dimensionItem: ISemantic.IDimensionItem;
   onSubmit?: () => void;
 };
 
+type TaskStateMap = Record<string, DictTaskState>;
+
 const FormItem = Form.Item;
 
-const EntityCreateForm: ForwardRefRenderFunction<any, Props> = ({ initialValues }, ref) => {
+const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
+  { modelId, dimensionItem },
+  ref,
+) => {
   const [form] = Form.useForm();
 
   const exchangeFields = ['blackList', 'whiteList'];
+  const [modelRichConfigData, setModelRichConfigData] = useState<IChatConfig.IConfig>();
+  const [dimensionVisible, setDimensionVisible] = useState<boolean>(false);
+  const [taskStateMap, setTaskStateMap] = useState<TaskStateMap>({});
+  const [saveLoading, setSaveLoading] = useState<boolean>(false);
+  const [refreshLoading, setRefreshLoading] = useState<boolean>(false);
+
+  const queryThemeListData: any = async () => {
+    const { code, data } = await getDomainExtendDetailConfig({
+      modelId,
+    });
+
+    if (code === 200) {
+      setModelRichConfigData(data);
+      const targetKnowledgeInfos = data?.chatAggRichConfig?.knowledgeInfos || [];
+      const targetConfig = targetKnowledgeInfos.find(
+        (item: IChatConfig.IKnowledgeInfosItem) => item.itemId === dimensionItem.id,
+      );
+      if (targetConfig) {
+        const { knowledgeAdvancedConfig, searchEnable } = targetConfig;
+        setDimensionVisible(searchEnable);
+        const { blackList, whiteList, ruleList } = knowledgeAdvancedConfig;
+        form.setFieldsValue({
+          blackList: blackList.join(','),
+          whiteList: whiteList.join(','),
+          ruleList: ruleList || [],
+        });
+      }
+      return;
+    }
+
+    message.error('获取问答设置信息失败');
+  };
+
+  useEffect(() => {
+    queryThemeListData();
+    queryDictLatestTaskList();
+  }, []);
+
+  const taskRender = (dimension: ISemantic.IDimensionItem) => {
+    const { id, type } = dimension;
+    const target = taskStateMap[id];
+    if (type === TransType.DIMENSION && target) {
+      return DictTaskState[target] || '未知状态';
+    }
+    return '--';
+  };
+
+  const queryDictLatestTaskList = async () => {
+    setRefreshLoading(true);
+    const { code, data } = await searchDictLatestTaskList({
+      modelId,
+    });
+    setRefreshLoading(false);
+    if (code !== 200) {
+      message.error('获取字典导入任务失败!');
+      return;
+    }
+    const tastMap = data.reduce(
+      (stateMap: TaskStateMap, item: { dimId: number; status: DictTaskState }) => {
+        const { dimId, status } = item;
+        stateMap[dimId] = status;
+        return stateMap;
+      },
+      {},
+    );
+    setTaskStateMap(tastMap);
+  };
 
   const getFormValidateFields = async () => {
     const fields = await form.validateFields();
     const fieldValue = Object.keys(fields).reduce((formField, key: string) => {
       const targetValue = fields[key];
-      if (isString(targetValue) && exchangeFields.includes(key)) {
-        formField[key] = targetValue.split(',');
+      if (exchangeFields.includes(key)) {
+        if (isString(targetValue)) {
+          formField[key] = targetValue.split(',');
+        } else {
+          formField[key] = [];
+        }
       } else {
         formField[key] = targetValue;
       }
@@ -34,47 +122,201 @@ const EntityCreateForm: ForwardRefRenderFunction<any, Props> = ({ initialValues
     };
   };
 
-  useEffect(() => {
-    form.resetFields();
-    if (!initialValues) {
-      return;
-    }
-    const fieldValue = Object.keys(initialValues).reduce((formField, key: string) => {
-      const targetValue = initialValues[key];
-      if (Array.isArray(targetValue) && exchangeFields.includes(key)) {
-        formField[key] = targetValue.join(',');
-      } else {
-        formField[key] = targetValue;
-      }
-      return formField;
-    }, {});
-    form.setFieldsValue({
-      ...fieldValue,
-    });
-  }, [initialValues]);
-
   useImperativeHandle(ref, () => ({
     getFormValidateFields,
   }));
 
+  const createDictTaskQuery = async (dimension: ISemantic.IDimensionItem) => {
+    const { code } = await createDictTask({
+      updateMode: 'REALTIME_ADD',
+      modelAndDimPair: {
+        [modelId]: [dimension.id],
+      },
+    });
+
+    if (code !== 200) {
+      message.error('字典导入任务创建失败!');
+      return;
+    }
+    setTimeout(() => {
+      queryDictLatestTaskList();
+    }, 2000);
+  };
+
+  const saveEntity = async (searchEnable = dimensionVisible) => {
+    setSaveLoading(true);
+    const globalKnowledgeConfigFormFields: any = await getFormValidateFields();
+    const tempData = { ...modelRichConfigData };
+    const targetKnowledgeInfos = modelRichConfigData?.chatAggRichConfig?.knowledgeInfos;
+    let knowledgeInfos: IChatConfig.IKnowledgeInfosItem[] = [];
+    if (Array.isArray(targetKnowledgeInfos)) {
+      knowledgeInfos = targetKnowledgeInfos.reduce(
+        (
+          knowledgeInfosList: IChatConfig.IKnowledgeInfosItem[],
+          item: IChatConfig.IKnowledgeInfosItem,
+        ) => {
+          if (item.itemId === dimensionItem.id) {
+            knowledgeInfosList.push({
+              ...item,
+              knowledgeAdvancedConfig: {
+                ...item.knowledgeAdvancedConfig,
+                ...globalKnowledgeConfigFormFields,
+              },
+              searchEnable,
+            });
+          } else {
+            knowledgeInfosList.push({
+              ...item,
+            });
+          }
+          return knowledgeInfosList;
+        },
+        [],
+      );
+    }
+
+    const { id, modelId, chatAggRichConfig } = tempData;
+    const saveParams = {
+      id,
+      modelId,
+      chatAggConfig: {
+        ...chatAggRichConfig,
+        knowledgeInfos,
+      },
+    };
+    let saveDomainExtendQuery = addDomainExtend;
+    if (id) {
+      saveDomainExtendQuery = editDomainExtend;
+    }
+
+    const { code, msg } = await saveDomainExtendQuery({
+      ...saveParams,
+    });
+    setSaveLoading(false);
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
   return (
     <>
-      <Form {...formLayout} form={form} layout="vertical" className={styles.form}>
-        <FormItem name="blackList" label="黑名单">
-          <Input placeholder="多个维度值用英文逗号隔开" />
-        </FormItem>
+      <Form
+        {...formLayout}
+        form={form}
+        style={{ margin: '0 30px 30px 30px' }}
+        layout="vertical"
+        className={styles.form}
+      >
+        <FormItem
+          style={{ marginTop: 15, marginBottom: -30 }}
+          label={
+            <FormItemTitle
+              title={
+                <>
+                  <Space>
+                    <span style={{ fontSize: 16 }}>维度值可见</span>
+                    <Switch
+                      defaultChecked
+                      size="small"
+                      checked={dimensionVisible}
+                      onChange={(value) => {
+                        saveEntity(value);
+                        setDimensionVisible(value);
+                      }}
+                    />
+                  </Space>
+                </>
+              }
+              subTitle={'设置可见后，维度值将在搜索时可以被联想出来'}
+            />
+          }
+        >
+          {dimensionVisible && (
+            <Space size={20} style={{ marginBottom: 20 }}>
+              <Button
+                type="link"
+                size="small"
+                style={{ padding: 0 }}
+                onClick={(event) => {
+                  createDictTaskQuery(dimensionItem);
+                  event.stopPropagation();
+                }}
+              >
+                <Tooltip title="立即将维度值导入字典">
+                  <Space>
+                    立即导入字典 <InfoCircleOutlined />
+                  </Space>
+                </Tooltip>
+              </Button>
 
-        <FormItem name="whiteList" label="白名单">
-          <Input placeholder="多个维度值用英文逗号隔开" />
-        </FormItem>
+              <Tooltip title="刷新字典任务状态">
+                <Space>
+                  <Button
+                    style={{ cursor: 'pointer' }}
+                    type="text"
+                    loading={refreshLoading}
+                    onClick={() => {
+                      queryDictLatestTaskList();
+                    }}
+                  >
+                    导入状态
+                    <RedoOutlined />:
+                  </Button>
+                </Space>
+              </Tooltip>
 
-        <FormItem name="ruleList">
-          {/* <SqlEditor height={'150px'} /> */}
-          <CommonEditList title="过滤规则" />
+              <span>{taskRender(dimensionItem)}</span>
+            </Space>
+          )}
         </FormItem>
+        {dimensionVisible && (
+          <>
+            <Divider
+              style={{
+                marginBottom: 35,
+              }}
+            />
+            <div style={{ padding: 20, border: '1px solid #eee', borderRadius: 10 }}>
+              <div
+                style={{
+                  color: '#2f374c',
+                  fontSize: 16,
+                  display: 'flex',
+                  marginBottom: 20,
+                }}
+              >
+                <span style={{ flex: 'auto' }}>维度值过滤</span>
+                <span style={{ marginLeft: 'auto' }}>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      saveEntity();
+                    }}
+                    loading={saveLoading}
+                  >
+                    保 存
+                  </Button>
+                </span>
+              </div>
+
+              <FormItem name="blackList" label="黑名单">
+                <Input placeholder="多个维度值用英文逗号隔开" />
+              </FormItem>
+
+              <FormItem name="whiteList" label="白名单">
+                <Input placeholder="多个维度值用英文逗号隔开" />
+              </FormItem>
+
+              <FormItem name="ruleList">
+                <CommonEditList title="过滤规则" />
+              </FormItem>
+            </div>
+          </>
+        )}
       </Form>
     </>
   );
 };
 
-export default forwardRef(EntityCreateForm);
+export default forwardRef(DimensionValueSettingForm);
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingModal.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingModal.tsx
deleted file mode 100644
index f803f636b..000000000
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionValueSettingModal.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useRef } from 'react';
-import { Button, Modal } from 'antd';
-import DimensionValueSettingForm from './DimensionValueSettingForm';
-
-type Props = {
-  initialValues: any;
-  onCancel?: () => void;
-  visible: boolean;
-  onSubmit?: (params?: any) => void;
-};
-const DimensionValueSettingModal: React.FC<Props> = ({
-  initialValues,
-  visible,
-  onCancel,
-  onSubmit,
-}) => {
-  const formRef = useRef<any>();
-
-  const handleSubmit = async () => {
-    const formValues = await formRef.current.getFormValidateFields();
-    onSubmit?.(formValues);
-  };
-
-  const renderFooter = () => {
-    return (
-      <>
-        <Button onClick={onCancel}>取消</Button>
-        <Button
-          type="primary"
-          onClick={() => {
-            handleSubmit();
-          }}
-        >
-          完成
-        </Button>
-      </>
-    );
-  };
-  return (
-    <>
-      <Modal
-        width={600}
-        destroyOnClose
-        title={'维度值设置'}
-        maskClosable={false}
-        open={visible}
-        footer={renderFooter()}
-        onCancel={onCancel}
-      >
-        <DimensionValueSettingForm initialValues={initialValues} ref={formRef} />
-      </Modal>
-    </>
-  );
-};
-
-export default DimensionValueSettingModal;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySection.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySection.tsx
index c26295f43..9ce09d274 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySection.tsx
@@ -8,7 +8,6 @@ import ProCard from '@ant-design/pro-card';
 
 import DefaultSettingForm from './DefaultSettingForm';
 import type { IChatConfig } from '../../data';
-import DimensionMetricVisibleForm from './DimensionMetricVisibleForm';
 import { ChatConfigType } from '../../enum';
 
 type Props = {
@@ -19,7 +18,6 @@ type Props = {
 
 const EntitySection: React.FC<Props> = ({
   domainManger,
-  dispatch,
   chatConfigType = ChatConfigType.DETAIL,
 }) => {
   const { selectDomainId, selectModelId: modelId, dimensionList, metricList } = domainManger;
@@ -59,28 +57,6 @@ const EntitySection: React.FC<Props> = ({
   return (
     <div style={{ width: 800, margin: '0 auto' }}>
       <Space direction="vertical" style={{ width: '100%' }} size={20}>
-        <ProCard bordered title="问答可见">
-          <DimensionMetricVisibleForm
-            chatConfigKey={
-              chatConfigType === ChatConfigType.DETAIL ? 'chatDetailConfig' : 'chatAggConfig'
-            }
-            entityData={entityData || {}}
-            domainId={Number(selectDomainId)}
-            metricList={metricList}
-            dimensionList={dimensionList}
-            onSubmit={(params: any = {}) => {
-              if (params.from === 'dimensionSearchVisible') {
-                dispatch({
-                  type: 'domainManger/queryDimensionList',
-                  payload: {
-                    domainId: selectDomainId,
-                  },
-                });
-              }
-              queryThemeListData();
-            }}
-          />
-        </ProCard>
         <ProCard bordered title="默认设置">
           <DefaultSettingForm
             domainId={Number(selectDomainId)}
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
index dea4e1723..2c173bbaf 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
@@ -57,7 +57,7 @@ const ModelTable: React.FC<Props> = ({
     },
     {
       dataIndex: 'name',
-      title: '指标名称',
+      title: '模型名称',
       search: false,
       render: (_, record) => {
         return (
@@ -73,9 +73,9 @@ const ModelTable: React.FC<Props> = ({
     },
     {
       dataIndex: 'key',
-      title: '指标搜索',
+      title: '模型搜索',
       hideInTable: true,
-      renderFormItem: () => <Input placeholder="请输入ID/指标名称/字段名称/标签" />,
+      renderFormItem: () => <Input placeholder="请输入ID/模型名称/字段名称/标签" />,
     },
     {
       dataIndex: 'alias',
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx
index ea8613b19..e116b1bde 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx
@@ -1,17 +1,9 @@
-import { CheckCard } from '@ant-design/pro-components';
-import React, { useState } from 'react';
-import { Button, Dropdown, message, Popconfirm } from 'antd';
-import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
+import React from 'react';
 import { ISemantic } from '../data';
 import { connect } from 'umi';
-import icon from '../../../assets/icon/cloudEditor.svg';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../model';
-import { formatNumber } from '../../../utils/utils';
-import { deleteModel } from '../service';
-import ModelCreateFormModal from './ModelCreateFormModal';
 import ModelTable from './ModelTable';
-import styles from './style.less';
 
 type Props = {
   disabledEdit?: boolean;
@@ -21,136 +13,10 @@ type Props = {
   dispatch: Dispatch;
 };
 
-const OverView: React.FC<Props> = ({
-  modelList,
-  disabledEdit = false,
-  onModelChange,
-  domainManger,
-}) => {
-  // const { selectDomainId, selectModelId } = domainManger;
-  // const [currentModel, setCurrentModel] = useState<any>({});
-  // const [modelCreateFormModalVisible, setModelCreateFormModalVisible] = useState<boolean>(false);
-
-  // const descNode = (model: ISemantic.IDomainItem) => {
-  //   const { metricCnt, dimensionCnt } = model;
-  //   return (
-  //     <div className={styles.overviewExtraContainer}>
-  //       <div className={styles.extraWrapper}>
-  //         <div className={styles.extraStatistic}>
-  //           <div className={styles.extraTitle}>维度数</div>
-  //           <div className={styles.extraValue}>
-  //             <span className="ant-statistic-content-value">{formatNumber(dimensionCnt || 0)}</span>
-  //           </div>
-  //         </div>
-  //       </div>
-  //       <div className={styles.extraWrapper}>
-  //         <div className={styles.extraStatistic}>
-  //           <div className={styles.extraTitle}>指标数</div>
-  //           <div className={styles.extraValue}>
-  //             <span className="ant-statistic-content-value">{formatNumber(metricCnt || 0)}</span>
-  //           </div>
-  //         </div>
-  //       </div>
-  //     </div>
-  //   );
-  // };
-
-  // const extraNode = (model: ISemantic.IDomainItem) => {
-  //   return (
-  //     <Dropdown
-  //       placement="top"
-  //       menu={{
-  //         onClick: ({ key, domEvent }) => {
-  //           domEvent.stopPropagation();
-  //           if (key === 'edit') {
-  //             setCurrentModel(model);
-  //             setModelCreateFormModalVisible(true);
-  //           }
-  //         },
-  //         items: [
-  //           {
-  //             label: '编辑',
-  //             key: 'edit',
-  //           },
-  //           {
-  //             label: (
-  //               <Popconfirm
-  //                 title="确认删除？"
-  //                 okText="是"
-  //                 cancelText="否"
-  //                 onConfirm={async () => {
-  //                   const { code, msg } = await deleteModel(model.id);
-  //                   if (code === 200) {
-  //                     onModelChange?.();
-  //                   } else {
-  //                     message.error(msg);
-  //                   }
-  //                 }}
-  //               >
-  //                 <a key="modelDeleteBtn">删除</a>
-  //               </Popconfirm>
-  //             ),
-  //             key: 'delete',
-  //           },
-  //         ],
-  //       }}
-  //     >
-  //       <EllipsisOutlined
-  //         style={{ fontSize: 22, color: 'rgba(0,0,0,0.5)' }}
-  //         onClick={(e) => e.stopPropagation()}
-  //       />
-  //     </Dropdown>
-  //   );
-  // };
-
+const OverView: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange }) => {
   return (
-    <div style={{ padding: '0px 20px 20px' }}>
+    <div style={{ padding: '20px' }}>
       <ModelTable modelList={modelList} disabledEdit={disabledEdit} onModelChange={onModelChange} />
-      {/* {!disabledEdit && (
-        <div style={{ paddingBottom: '20px' }}>
-          <Button
-            onClick={() => {
-              setModelCreateFormModalVisible(true);
-            }}
-            type="primary"
-          >
-            <PlusOutlined />
-            新增模型
-          </Button>
-        </div>
-      )}
-
-      <CheckCard.Group value={selectModelId} defaultValue={selectModelId}>
-        {modelList &&
-          modelList.map((model: ISemantic.IDomainItem) => {
-            return (
-              <CheckCard
-                avatar={icon}
-                title={`${model.name}`}
-                key={model.id}
-                value={model.id}
-                description={descNode(model)}
-                extra={!disabledEdit && extraNode(model)}
-                onClick={() => {
-                  onModelChange?.(model);
-                }}
-              />
-            );
-          })}
-      </CheckCard.Group> */}
-      {/* {modelCreateFormModalVisible && (
-        <ModelCreateFormModal
-          domainId={selectDomainId}
-          basicInfo={currentModel}
-          onSubmit={() => {
-            setModelCreateFormModalVisible(false);
-            onModelChange?.();
-          }}
-          onCancel={() => {
-            setModelCreateFormModalVisible(false);
-          }}
-        />
-      )} */}
     </div>
   );
 };
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
index 2657a4e6e..eb43d8a3f 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
@@ -210,7 +210,11 @@
 .classTable {
   :global {
     .ant-pro-table-search-query-filter {
-      padding-left: 0 !important;
+      // padding-left: 0 !important;
+      margin-bottom: 0;
+    }
+    .ant-pro-table-list-toolbar-container {
+      padding-top: 0;
     }
     .ant-table-tbody > tr.ant-table-row-selected > td {
       background: none;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
index 8434ab62c..07c60d53a 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
@@ -278,10 +278,11 @@ export declare namespace IChatConfig {
 
   interface IConfig {
     id: any;
-    domainId: number;
-    domainName: string;
+    modelId: number;
+    modelName: string;
     chatAggRichConfig: IChatRichConfig;
     chatDetailRichConfig: IChatRichConfig;
+    recommendedQuestions: { question: string }[];
     bizName: string;
     statusEnum: string;
     createdBy: string;
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
index 6e60a3c14..843b79a32 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
@@ -1,6 +1,4 @@
 import request from 'umi-request';
-import axios from 'axios';
-import { AUTH_TOKEN_KEY } from '@/common/constants';
 import moment from 'moment';
 
 const getRunningEnv = () => {
@@ -128,6 +126,16 @@ export function batchUpdateDimensionStatus(data: any): Promise<any> {
   });
 }
 
+export async function batchDownloadMetric(data: any): Promise<any> {
+  const response = await request.post(`${process.env.API_BASE_URL}query/download/batch`, {
+    responseType: 'blob',
+    getResponse: true,
+    data,
+  });
+
+  downloadStruct(response.data);
+}
+
 export function mockMetricAlias(data: any): Promise<any> {
   return request.post(`${process.env.API_BASE_URL}metric/mockMetricAlias`, {
     data,
diff --git a/webapp/packages/supersonic-fe/src/pages/System/constants.ts b/webapp/packages/supersonic-fe/src/pages/System/constants.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/System/index.tsx b/webapp/packages/supersonic-fe/src/pages/System/index.tsx
new file mode 100644
index 000000000..6fbd8a604
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/System/index.tsx
@@ -0,0 +1,138 @@
+import styles from './style.less';
+import { Button, Form, Input, InputNumber, message, Space, Switch, Divider } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { getSystemConfig, saveSystemConfig } from '@/services/user';
+import ProCard from '@ant-design/pro-card';
+import SelectTMEPerson from '@/components/SelectTMEPerson';
+import { SystemConfigParametersItem, SystemConfig } from './types';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+const System: React.FC = () => {
+  const [systemConfig, setSystemConfig] = useState<SystemConfigParametersItem[]>([]);
+
+  const [configSource, setConfigSource] = useState<SystemConfig>();
+
+  useEffect(() => {
+    querySystemConfig();
+  }, []);
+  const [form] = Form.useForm();
+  const querySystemConfig = async () => {
+    const { code, data, msg } = await getSystemConfig();
+    if (code === 200) {
+      const { parameters, admins } = data;
+      setSystemConfig(parameters);
+      setInitData(admins, parameters);
+      setConfigSource(data);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const setInitData = (admins: string[], systemConfig: SystemConfigParametersItem[]) => {
+    const fieldsValue = systemConfig.reduce(
+      (fields, item) => {
+        const { name, value } = item;
+        return {
+          ...fields,
+          [name]: value,
+        };
+      },
+      { admins },
+    );
+    form.setFieldsValue(fieldsValue);
+  };
+
+  const querySaveSystemConfig = async () => {
+    const submitData = await form.validateFields();
+    const { code, msg } = await saveSystemConfig({
+      ...configSource,
+      admins: submitData.admins,
+      parameters: systemConfig.map((item) => {
+        const { name } = item;
+        if (submitData[name] !== undefined) {
+          return {
+            ...item,
+            value: submitData[name],
+          };
+        }
+        return item;
+      }),
+    });
+    if (code === 200) {
+      message.success('保存成功');
+    } else {
+      message.error(msg);
+    }
+  };
+
+  return (
+    <>
+      <div style={{ margin: '40px auto', width: 800 }}>
+        <ProCard
+          title="系统设置"
+          extra={
+            <Space>
+              <Button
+                type="primary"
+                onClick={() => {
+                  querySaveSystemConfig();
+                }}
+              >
+                保 存
+              </Button>
+            </Space>
+          }
+        >
+          <Form form={form} layout="vertical" className={styles.form}>
+            <FormItem name="admins" label="管理员">
+              <SelectTMEPerson placeholder="请邀请团队成员" />
+            </FormItem>
+            <Divider />
+            {systemConfig.map((item: SystemConfigParametersItem) => {
+              const { dataType, name, comment } = item;
+              let defaultItem = <Input />;
+              switch (dataType) {
+                case 'string':
+                  defaultItem = <TextArea placeholder="" style={{ height: 100 }} />;
+                  break;
+                case 'number':
+                  defaultItem = <InputNumber style={{ width: '100%' }} />;
+                  break;
+                case 'bool':
+                  return (
+                    <FormItem
+                      name={name}
+                      label={comment}
+                      key={name}
+                      valuePropName="checked"
+                      getValueFromEvent={(value) => {
+                        return value === true ? 'true' : 'false';
+                      }}
+                      getValueProps={(value) => {
+                        return {
+                          checked: value === 'true',
+                        };
+                      }}
+                    >
+                      <Switch />
+                    </FormItem>
+                  );
+                default:
+                  defaultItem = <Input />;
+                  break;
+              }
+              return (
+                <FormItem name={name} label={comment} key={name}>
+                  {defaultItem}
+                </FormItem>
+              );
+            })}
+          </Form>
+        </ProCard>
+      </div>
+    </>
+  );
+};
+
+export default System;
diff --git a/webapp/packages/supersonic-fe/src/pages/System/services.ts b/webapp/packages/supersonic-fe/src/pages/System/services.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/System/style.less b/webapp/packages/supersonic-fe/src/pages/System/style.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/packages/supersonic-fe/src/pages/System/types.ts b/webapp/packages/supersonic-fe/src/pages/System/types.ts
new file mode 100644
index 000000000..66d5e1070
--- /dev/null
+++ b/webapp/packages/supersonic-fe/src/pages/System/types.ts
@@ -0,0 +1,13 @@
+export type SystemConfigParametersItem = {
+  dataType: string;
+  name: string;
+  comment: string;
+  value: string;
+};
+
+export type SystemConfig = {
+  id: number;
+  admin: string;
+  admins: string[];
+  parameters: SystemConfigParametersItem[];
+};
diff --git a/webapp/packages/supersonic-fe/src/services/user.ts b/webapp/packages/supersonic-fe/src/services/user.ts
index 83b5ca0d7..1612e6257 100644
--- a/webapp/packages/supersonic-fe/src/services/user.ts
+++ b/webapp/packages/supersonic-fe/src/services/user.ts
@@ -7,3 +7,16 @@ export async function query() {
 export async function queryCurrentUser() {
   return request<Result<API.CurrentUser>>(`${process.env.AUTH_API_BASE_URL}user/getCurrentUser`);
 }
+
+export function getSystemConfig(): Promise<any> {
+  return request(`${process.env.API_BASE_URL}parameter`, {
+    method: 'get',
+  });
+}
+
+export function saveSystemConfig(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}parameter`, {
+    method: 'post',
+    data,
+  });
+}