diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
index 500ef3979..3f676b76c 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
@@ -6,6 +6,8 @@ import FormItemTitle from '@/components/FormHelper/FormItemTitle';
 import DisabledWheelNumberInput from '@/components/DisabledWheelNumberInput';
 import { ConfigParametersItem } from '../System/types';
 import { TransType } from './enum';
+import { isString, isBoolean } from 'lodash';
+import { ReactNode } from 'react';
 
 const FormItem = Form.Item;
 const { TextArea } = Input;
@@ -134,10 +136,12 @@ export const findLeafNodesFromDomainList = (
   return leafNodes;
 };
 
-export const genneratorFormItemList = (itemList: ConfigParametersItem[]) => {
-  return itemList.map((item) => {
-    const { dataType, name, comment, placeholder, description, require, value } = item;
-
+export const genneratorFormItemList = (itemList: ConfigParametersItem[], form) => {
+  const list = itemList.reduce((itemList: ReactNode[], item) => {
+    const { dataType, name, comment, placeholder, description, require, visible } = item;
+    if (visible === false) {
+      return itemList;
+    }
     let defaultItem = <Input />;
     switch (dataType) {
       case 'string':
@@ -158,7 +162,7 @@ export const genneratorFormItemList = (itemList: ConfigParametersItem[]) => {
         );
         break;
       case 'bool':
-        return (
+        itemList.push(
           <FormItem
             name={name}
             label={comment}
@@ -174,12 +178,19 @@ export const genneratorFormItemList = (itemList: ConfigParametersItem[]) => {
             }}
           >
             <Switch />
-          </FormItem>
+          </FormItem>,
         );
+        return itemList;
       case 'list': {
         const { candidateValues = [] } = item;
-        const options = candidateValues.map((value) => {
-          return { label: value, value };
+        const options = candidateValues.map((item: string | { label: string; value: string }) => {
+          if (isString(item)) {
+            return { label: item, value: item };
+          }
+          if (item?.label) {
+            return item;
+          }
+          return { label: item, value: item };
         });
         defaultItem = (
           <Select style={{ width: '100%' }} options={options} placeholder={placeholder} />
@@ -190,7 +201,8 @@ export const genneratorFormItemList = (itemList: ConfigParametersItem[]) => {
         defaultItem = <Input placeholder={placeholder} />;
         break;
     }
-    return (
+
+    itemList.push(
       <FormItem
         name={name}
         key={name}
@@ -198,9 +210,11 @@ export const genneratorFormItemList = (itemList: ConfigParametersItem[]) => {
         label={<FormItemTitle title={comment} subTitle={description} />}
       >
         {defaultItem}
-      </FormItem>
+      </FormItem>,
     );
-  });
+    return itemList;
+  }, []);
+  return [...list];
 };
 
 export const wrapperTransTypeAndId = (exTransType: TransType, id: number) => {
diff --git a/webapp/packages/supersonic-fe/src/pages/System/index.tsx b/webapp/packages/supersonic-fe/src/pages/System/index.tsx
index 71363ba1e..a3d4a2ae5 100644
--- a/webapp/packages/supersonic-fe/src/pages/System/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/System/index.tsx
@@ -1,29 +1,18 @@
 import styles from './style.less';
-import {
-  Button,
-  Form,
-  Input,
-  InputNumber,
-  message,
-  Space,
-  Switch,
-  Select,
-  Divider,
-  Anchor,
-  Row,
-  Col,
-} from 'antd';
-import React, { useState, useEffect } from 'react';
+import { Button, Form, message, Space, Divider, Anchor, Row, Col } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
 import { getSystemConfig, saveSystemConfig } from '@/services/user';
 import { ProCard } from '@ant-design/pro-components';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
-import { ConfigParametersItem, SystemConfig } from './types';
-import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import { ConfigParametersItem, SystemConfig, dependenciesItem } from './types';
+
 import { groupBy } from 'lodash';
 import { genneratorFormItemList } from '../SemanticModel/utils';
 
 const FormItem = Form.Item;
-const { TextArea } = Input;
+
+type Admin = string[];
+
 const System: React.FC = () => {
   const [systemConfig, setSystemConfig] = useState<Record<string, ConfigParametersItem[]>>({});
   const [anchorItems, setAnchorItems] = useState<{ key: string; href: string; title: string }[]>(
@@ -31,6 +20,10 @@ const System: React.FC = () => {
   );
   const [configSource, setConfigSource] = useState<SystemConfig>();
 
+  const configMap = useRef<Record<string, ConfigParametersItem>>();
+
+  const [configIocDepMap, setConfigIocDepMap] = useState<any>({});
+
   useEffect(() => {
     querySystemConfig();
   }, []);
@@ -39,23 +32,80 @@ const System: React.FC = () => {
     const { code, data, msg } = await getSystemConfig();
     if (code === 200 && data) {
       const { parameters = [], admins = [] } = data;
-      const groupByConfig = groupBy(parameters, 'module');
-      const anchor = Object.keys(groupByConfig).map((key: string) => {
-        return {
-          key,
-          href: `#${key}`,
-          title: key,
-        };
-      });
-      setAnchorItems(anchor);
-      setSystemConfig(groupByConfig);
-      setInitData(admins, parameters);
+
+      const parametersMap = parameters.reduce(
+        (configReduceMap: Record<string, ConfigParametersItem>, item: ConfigParametersItem) => {
+          return {
+            ...configReduceMap,
+            [item.name]: item,
+          };
+        },
+        {},
+      );
+
+      configMap.current = parametersMap;
+
+      groupConfigAndSet(parameters);
+
+      initDepConfig(parameters, admins);
+
       setConfigSource(data);
     } else {
       message.error(msg);
     }
   };
 
+  const initDepConfig = (parameters: ConfigParametersItem[], admins: Admin) => {
+    const iocMap = getDepIoc(parameters);
+    const initFormValues = setInitData(admins, parameters);
+    Object.keys(initFormValues).forEach((itemName) => {
+      const targetDep = iocMap[itemName] || {};
+      const excuteStack = Object.values(targetDep);
+      if (Array.isArray(excuteStack)) {
+        excuteDepConfig(itemName, initFormValues);
+      }
+    });
+
+    setConfigIocDepMap(iocMap);
+  };
+
+  const groupConfigAndSet = (parameters: ConfigParametersItem[]) => {
+    const groupByConfig = groupBy(parameters, 'module');
+    const anchor = Object.keys(groupByConfig).map((key: string) => {
+      return {
+        key,
+        href: `#${key}`,
+        title: key,
+      };
+    });
+    setAnchorItems(anchor);
+    setSystemConfig(groupByConfig);
+  };
+
+  const getDepIoc = (parameters: ConfigParametersItem[]) => {
+    const iocMap: Record<string, Record<string, ConfigParametersItem>> = {};
+    parameters.forEach((item) => {
+      const { name: itemName, dependencies } = item;
+      if (Array.isArray(dependencies)) {
+        dependencies.forEach((depItem) => {
+          const { name } = depItem;
+
+          if (iocMap[name]) {
+            iocMap[name] = {
+              ...iocMap[name],
+              [itemName]: item,
+            };
+          } else {
+            iocMap[name] = {
+              [itemName]: item,
+            };
+          }
+        });
+      }
+    });
+    return iocMap;
+  };
+
   const setInitData = (admins: string[], systemConfigParameters: ConfigParametersItem[]) => {
     const fieldsValue = systemConfigParameters.reduce(
       (fields, item) => {
@@ -68,6 +118,7 @@ const System: React.FC = () => {
       { admins },
     );
     form.setFieldsValue(fieldsValue);
+    return fieldsValue;
   };
 
   const querySaveSystemConfig = async () => {
@@ -93,6 +144,49 @@ const System: React.FC = () => {
     }
   };
 
+  const excuteDepConfig = (itemName: string, formValues: Record<string, any>) => {
+    const targetDep = configIocDepMap[itemName] || {};
+    const excuteStack = Object.values(targetDep);
+    if (!Array.isArray(excuteStack)) {
+      return;
+    }
+    const tempConfigMap: any = { ...configMap.current };
+    const currentFormValues = formValues;
+    const showStateList: boolean[] = [];
+    const hasValueFieldsSetDefaultValueList: any[] = [];
+    excuteStack.forEach((configItem: any) => {
+      const { dependencies, name: configItemName } = configItem;
+      dependencies.forEach((item: dependenciesItem) => {
+        const { name, setDefaultValue } = item;
+        const currentDepValue = currentFormValues[name];
+        const showIncludesValue = item.show?.includesValue;
+        if (Array.isArray(showIncludesValue)) {
+          showStateList.push(showIncludesValue.includes(currentDepValue));
+        }
+        if (setDefaultValue && currentDepValue) {
+          hasValueFieldsSetDefaultValueList.push({
+            excuteItem: configItemName,
+            ...item,
+          });
+        }
+      });
+      const visible = showStateList.every((item) => item);
+      tempConfigMap[configItemName].visible = visible;
+    });
+
+    const lastSetDefaultValueItem =
+      hasValueFieldsSetDefaultValueList[hasValueFieldsSetDefaultValueList.length - 1];
+    const lastSetDefaultValue = lastSetDefaultValueItem?.setDefaultValue;
+
+    if (lastSetDefaultValue) {
+      const targetValue = lastSetDefaultValue[currentFormValues[lastSetDefaultValueItem.name]];
+      if (targetValue) {
+        form.setFieldValue(lastSetDefaultValueItem.excuteItem, targetValue);
+      }
+    }
+    groupConfigAndSet(Object.values(tempConfigMap));
+  };
+
   return (
     <>
       <div style={{ margin: '40px auto', width: 1200 }}>
@@ -113,11 +207,21 @@ const System: React.FC = () => {
                 </Space>
               }
             >
-              <Form form={form} layout="vertical" className={styles.form}>
+              <Form
+                form={form}
+                layout="vertical"
+                className={styles.form}
+                onValuesChange={(value, values) => {
+                  const valueKey = Object.keys(value)[0];
+                  excuteDepConfig(valueKey, values);
+                }}
+              >
                 <FormItem name="admins" label="管理员">
                   <SelectTMEPerson placeholder="请邀请团队成员" />
                 </FormItem>
+
                 <Divider />
+
                 <Space direction="vertical" style={{ width: '100%' }} size={35}>
                   {Object.keys(systemConfig).map((key: string) => {
                     const itemList = systemConfig[key];
@@ -128,7 +232,7 @@ const System: React.FC = () => {
                         bordered
                         id={key}
                       >
-                        {genneratorFormItemList(itemList)}
+                        {genneratorFormItemList(itemList, form)}
                       </ProCard>
                     );
                   })}
diff --git a/webapp/packages/supersonic-fe/src/pages/System/types.ts b/webapp/packages/supersonic-fe/src/pages/System/types.ts
index 9cd8f7010..6249fabf5 100644
--- a/webapp/packages/supersonic-fe/src/pages/System/types.ts
+++ b/webapp/packages/supersonic-fe/src/pages/System/types.ts
@@ -1,3 +1,11 @@
+export type dependenciesItem = {
+  name: string;
+  show: {
+    includesValue: string[];
+  };
+  setDefaultValue: Record<string, any>;
+};
+
 export type ConfigParametersItem = {
   dataType: string;
   name: string;
@@ -8,6 +16,7 @@ export type ConfigParametersItem = {
   description: string;
   require?: boolean;
   placeholder?: string;
+  dependencies: dependenciesItem[];
 };
 
 export type SystemConfig = {