diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 94cefa4f..2f9b0654 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -19,5 +19,8 @@ module.exports = {
 
     rules: {
         // override/add rules settings here, such as:
+    },
+    globals: {
+        NodeJS: 'readonly'
     }
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index 2dc2ae7d..ea1e9abf 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@commitlint/config-conventional": "^17.4.0",
     "@types/lodash-es": "^4.17.6",
     "@types/moment": "^2.13.0",
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.14.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vuemap/unplugin-resolver": "^1.0.4",
     "autoprefixer": "^10.4.13",
diff --git a/src/api/comm.ts b/src/api/comm.ts
index 29cf4f11..563871fb 100644
--- a/src/api/comm.ts
+++ b/src/api/comm.ts
@@ -27,4 +27,11 @@ export const deleteSearchHistory = (target:string, id:string) => server.remove<S
 /**
  * 获取当前系统版本
  */
-export const systemVersion = () => server.get<{edition?: string}>('/system/version')
\ No newline at end of file
+export const systemVersion = () => server.get<{edition?: string}>('/system/version')
+
+/**
+ * 聚合查询
+ * @param data 
+ * @returns 
+ */
+export const queryDashboard = (data: Record<string, any>) => server.post(`/dashboard/_multi`, data)
\ No newline at end of file
diff --git a/src/api/device/instance.ts b/src/api/device/instance.ts
index b221d6a8..cac9e9c2 100644
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@@ -315,6 +315,31 @@ export const getGatewayDetail = (id: string) => server.get(`/gateway/device/${id
  */
 export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
 
+/**
+ * 执行功能
+ * @param deviceId 设备id
+ * @param functionId 功能id
+ * @param data 
+ * @returns 
+ */
+export const executeFunctions = (deviceId: string, functionId: string, data: any) => server.post(`/device/invoked/${deviceId}/function/${functionId}`, data)
+
+/**
+ * 读取属性
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const readProperties = (deviceId: string, data: any) => server.post(`/device/instance/${deviceId}/properties/_read`, data)
+
+/**
+ * 设置属性
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const settingProperties = (deviceId: string, data: any) => server.put(`/device/instance/${deviceId}/property`, data)
+
 /**
  * 设备功能-执行
  * @param id 设备id
@@ -322,4 +347,4 @@ export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
  * @param data 
  * @returns 
  */
- export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)
\ No newline at end of file
+ export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)
diff --git a/src/api/link/type.ts b/src/api/link/type.ts
index 887d395f..70e75bcf 100644
--- a/src/api/link/type.ts
+++ b/src/api/link/type.ts
@@ -30,3 +30,9 @@ export const allResources = () => server.get(`/network/resources/alive/_all`);
 
 export const certificates = () =>
     server.get(`/network/certificate/_query/no-paging?paging=false`);
+
+export const save = (data: Object) => server.post(`/network/config`, data);
+
+export const update = (data: Object) => server.patch(`/network/config`, data);
+
+export const detail = (id: string) => server.get(`/network/config/${id}`);
diff --git a/src/api/system/dataSource.ts b/src/api/system/dataSource.ts
index 46a59cff..1698d020 100644
--- a/src/api/system/dataSource.ts
+++ b/src/api/system/dataSource.ts
@@ -3,9 +3,22 @@ import server from '@/utils/request';
 
 // 获取数据源列表
 export const getDataSourceList_api = (data: object) => server.post(`/datasource/config/_query/`, data);
+// 获取数据源信息
+export const getDataSourceInfo_api = (id: string) => server.get(`/datasource/config/${id}`);
 
 // 获取数据库类型字典
 export const getDataTypeDict_api = () => server.get(`/datasource/config/types`);
 
 // 修改数据源状态
-export const changeStatus_api = (id:string, status:'_disable'|'_enable') => server.put(`/datasource/config/${id}/${status}`);
\ No newline at end of file
+export const changeStatus_api = (id: string, status: '_disable' | '_enable') => server.put(`/datasource/config/${id}/${status}`);
+// 新增/更新数据源
+export const saveDataSource_api = (data: any) => data.id ? server.patch(`datasource/config`, data) : server.post(`/datasource/config`, data)
+
+// 删除数据源
+export const delDataSource_api = (id: string) => server.remove(`/datasource/config/${id}`);
+// 获取左侧树
+export const rdbTree_api = (id: string) => server.get(`/datasource/rdb/${id}/tables?includeColumns=false`);
+// 获取右侧表格
+export const rdbTables_api = (id: string,key:string) => server.get(`/datasource/rdb/${id}/table/${key}`);
+// 保存表格
+export const saveTable_api = (id: string,data:object) => server.patch(`/datasource/rdb/${id}/table`,data);
diff --git a/src/components/MonacoEditor/index.vue b/src/components/MonacoEditor/index.vue
index 6762be92..7a22d6b7 100644
--- a/src/components/MonacoEditor/index.vue
+++ b/src/components/MonacoEditor/index.vue
@@ -59,6 +59,20 @@ onMounted(() => {
         emit('update:modelValue', value);
     });
 });
+
+/**
+ * 代码格式化
+ */
+const editorFormat = () => {
+    if (!instance) return;
+    instance.getAction('editor.action.formatDocument')?.run();
+};
+
+watchEffect(() => {
+    setTimeout(() => {
+        editorFormat();
+    }, 300);
+});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts
new file mode 100644
index 00000000..0bd4547a
--- /dev/null
+++ b/src/utils/websocket.ts
@@ -0,0 +1,127 @@
+import { Observable } from 'rxjs'
+import { BASE_API_PATH } from '@/utils/variable';
+import { notification } from 'ant-design-vue';
+import { getToken } from '@/utils/comm';
+
+let ws: any = null
+let count = 0 // 重连计数
+let timer: NodeJS.Timeout = null
+let lockReconnect = false // 避免重复连接
+const total = 100 // 重连总次数
+const subs = {}
+const timeout = 5000
+const tempQueue: any[] = [] // websocket未连接上时，缓存消息列
+
+export const initWebSocket = () => {
+    if (ws) {
+        return ws
+    }
+    const token = getToken()
+    const url = `${document.location.protocol.replace('http', 'ws')}//${document.location.host}${BASE_API_PATH}/messaging/${token}?:X_Access_Token=${token}`;
+    if (count < total) {
+        count += 1
+        ws = new WebSocket(url)
+
+        ws.onopen = () => {
+            count = 0
+            timer = setInterval(heartCheck, 2000)
+            if (tempQueue.length > 0) {
+                for (let i = tempQueue.length - 1; i >= 0; i--) {
+                    ws.send(tempQueue[i])
+                    tempQueue.splice(i, 1)
+                }
+            }
+        }
+
+        ws.onclose = () => {
+            console.log('onerror', count)
+            ws = null
+            reconnect()
+        }
+
+        ws.onmessage = (msg: Record<string, any>) => {
+            const data = JSON.parse(msg.data)
+
+            if (data.type === 'error') {
+                notification.error({ key: 'wserr', message: data.message })
+            }
+
+            if (subs[data.requestId]) {
+                if (data.type === 'complete') {
+                    subs[data.requestId].forEach((item: Record<string, any>) => {
+                        item.complete()
+                    })
+                } else if (data.type === 'result') {
+                    subs[data.requestId].forEach((element: Record<string, any>) => {
+                        element.next(data)
+                    })
+                }
+            }
+        }
+
+        ws.onerror = () => {
+            console.log('onerror', count)
+            ws = null
+            reconnect()
+        }
+
+        return ws
+    }
+}
+
+export const getWebSocket = (id: string, topic: string, parameter: Record<string, any>) => new Observable(subscriber => {
+    if (!subs[id]) {
+        subs[id] = []
+    }
+
+    subs[id].push({
+        next(val: Record<string, any>) {
+            subscriber.next(val)
+        },
+        complete() {
+            subscriber.complete()
+        }
+    })
+
+    const msg = JSON.stringify({ id, topic, parameter, type: 'sub' })
+    const thisWs = initWebSocket()
+    if (thisWs) {
+        if (thisWs.readyState === WebSocket.OPEN) {
+            thisWs.send(msg)
+        } else {
+            tempQueue.push(msg)
+        }
+    }
+
+    return () => {
+        const unsub = JSON.stringify({ id, type: 'unsub' })
+        delete subs[id]
+        if (thisWs) {
+            thisWs.send(unsub)
+        }
+    }
+})
+
+/**
+ * 重连
+ */
+function reconnect() {
+    timer && clearInterval(timer)
+    if (lockReconnect) {
+        return
+    }
+    lockReconnect = true
+    timer = setTimeout(() => {
+        initWebSocket()
+        lockReconnect = false
+    }, timeout * count)
+}
+
+/**
+ * 心跳检测
+ */
+function heartCheck() {
+    if (ws) {
+        ws.send(JSON.stringify({ type: 'ping' }))
+    }
+}
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
index 975d91fd..5aa519c6 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
@@ -72,18 +72,9 @@ const columns = [
     },
 ];
 
-// const dataSource = ref<Record<any, any>[]>(_props.modelValue || []);
-
 const dataSource = computed({
     get: () => {
-        return _props.modelValue || {
-            messageType: undefined,
-            message: {
-                properties: undefined,
-                functionId: undefined,
-                inputs: []
-            }
-        }
+        return _props.modelValue || []
     },
     set: (val: any) => {
         _emit('update:modelValue', val);
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
index 32462129..e9b3d049 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
@@ -1,60 +1,118 @@
 <template>
     <div class="function">
-        <a-form 
-            :layout="'vertical'"
-            ref="formRef"
-            :model="modelRef"
-        >
+        <a-form :layout="'vertical'" ref="formRef" :model="modelRef">
             <a-row :gutter="24">
                 <a-col :span="6">
-                    <a-form-item name="messageType" :rules="{
-                        required: true,
-                        message: '请选择',
-                    }">
-                        <a-select placeholder="请选择" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
-                            <a-select-option value="READ_PROPERTY">读取属性</a-select-option>
-                            <a-select-option value="WRITE_PROPERTY">修改属性</a-select-option>
-                            <a-select-option value="INVOKE_FUNCTION">调用功能</a-select-option>
+                    <a-form-item
+                        name="type"
+                        :rules="{
+                            required: true,
+                            message: '请选择',
+                        }"
+                    >
+                        <a-select
+                            placeholder="请选择"
+                            v-model:value="modelRef.type"
+                            show-search
+                            :filter-option="filterOption"
+                        >
+                            <a-select-option value="READ_PROPERTY"
+                                >读取属性</a-select-option
+                            >
+                            <a-select-option value="WRITE_PROPERTY"
+                                >修改属性</a-select-option
+                            >
+                            <a-select-option value="INVOKE_FUNCTION"
+                                >调用功能</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)">
-                    <a-form-item :name="['message', 'properties']" :rules="{
-                        required: true,
-                        message: '请选择属性',
-                    }">
-                        <a-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
-                            <a-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
+                <a-col
+                    :span="6"
+                    v-if="
+                        ['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
+                            modelRef.type,
+                        )
+                    "
+                >
+                    <a-form-item
+                        name="properties"
+                        :rules="{
+                            required: true,
+                            message: '请选择属性',
+                        }"
+                    >
+                        <a-select
+                            placeholder="请选择属性"
+                            v-model:value="modelRef.properties"
+                            show-search
+                            :filter-option="filterOption"
+                        >
+                            <a-select-option
+                                v-for="i in metadata?.properties || []"
+                                :key="i.id"
+                                :value="i.id"
+                                :label="i.name"
+                                >{{ i.name }}</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="modelRef.messageType === 'WRITE_PROPERTY'">
-                    <a-form-item :name="['message', 'value']" :rules="{
-                        required: true,
-                        message: '请输入值',
-                    }">
-                        <a-input />
+                <a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
+                    <a-form-item
+                        name="propertyValue"
+                        :rules="{
+                            required: true,
+                            message: '请输入值',
+                        }"
+                    >
+                        <a-input v-model:value="propertyValue" />
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
-                    <a-form-item :name="['message', 'functionId']" :rules="{
-                        required: true,
-                        message: '请选择功能',
-                    }">
-                        <a-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
-                            <a-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
+                <a-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
+                    <a-form-item
+                        name="function"
+                        :rules="{
+                            required: true,
+                            message: '请选择功能',
+                        }"
+                    >
+                        <a-select
+                            placeholder="请选择功能"
+                            v-model:value="modelRef.function"
+                            show-search
+                            :filter-option="filterOption"
+                            @change="funcChange"
+                        >
+                            <a-select-option
+                                v-for="i in metadata?.functions || []"
+                                :key="i.id"
+                                :value="i.id"
+                                :label="i.name"
+                                >{{ i.name }}</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
                 <a-col :span="4">
                     <a-button type="primary" @click="saveBtn">发送</a-button>
                 </a-col>
-                <a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
-                    <a-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
-                        required: true,
-                        message: '请输入参数列表',
-                    }">
-                        <EditTable v-model="modelRef.message.inputs"/>
+                <a-col
+                    :span="24"
+                    v-if="
+                        modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
+                    "
+                >
+                    <a-form-item
+                        name="inputs"
+                        label="参数列表"
+                        :rules="{
+                            required: true,
+                            message: '请输入参数列表',
+                        }"
+                    >
+                        <EditTable v-model="modelRef.inputs" />
                     </a-form-item>
                 </a-col>
             </a-row>
@@ -64,9 +122,14 @@
 
 <script lang="ts" setup>
 import { useInstanceStore } from '@/store/instance';
-import EditTable from './EditTable.vue'
+import EditTable from './EditTable.vue';
+import {
+    executeFunctions,
+    readProperties,
+    settingProperties,
+} from '@/api/device/instance';
 
-const instanceStore = useInstanceStore()
+const instanceStore = useInstanceStore();
 
 const formRef = ref();
 
@@ -80,48 +143,78 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 const modelRef = reactive({
-    messageType: undefined,
-    message: {
-        properties: undefined,
-        functionId: undefined,
-        inputs: []
-    }
-})
+    type: undefined,
+    properties: undefined,
+    function: undefined,
+    inputs: [],
+    propertyValue: undefined,
+});
 
 const metadata = computed(() => {
-    return JSON.parse(instanceStore.current?.metadata || '{}')
-})
+    return JSON.parse(instanceStore.current?.metadata || '{}');
+});
 
 const funcChange = (val: string) => {
-    if(val){
-        const arr = metadata.value?.functions.find((item: any) => item.id === val)?.inputs || []
+    if (val) {
+        const arr =
+            metadata.value?.functions.find((item: any) => item.id === val)
+                ?.inputs || [];
         const list = arr.map((item: any) => {
             return {
                 id: item.id,
                 name: item.name,
                 value: undefined,
                 valueType: item?.valueType?.type,
-            }
-        })
-        modelRef.message.inputs = list
+            };
+        });
+        modelRef.inputs = list;
     }
-}
+};
 
 const saveBtn = () => {
-    formRef.value.validate()
-    .then(() => {
-        console.log(toRaw(modelRef))
-    })
-}
-
-defineExpose({ saveBtn })
+    formRef.value.validate().then(async () => {
+        const values = toRaw(modelRef);
+        let _inputs: any[] = [];
+        if (modelRef.inputs.length) {
+            _inputs = modelRef.inputs.filter((i: any) => !i.value);
+            if (_inputs.length) {
+                return;
+            }
+        }
 
+        if (values.type === 'INVOKE_FUNCTION') {
+            const list = (modelRef.inputs || []).filter((it: any) => !!it.value);
+            const obj = {};
+            list.map((it: any) => {
+                obj[it.id] = it.value;
+            });
+            await executeFunctions(
+                instanceStore.current.id || '',
+                values?.function || '',
+                {
+                    ...obj,
+                },
+            );
+        } else {
+            if (values.type === 'READ_PROPERTY') {
+                await readProperties(instanceStore.current?.id || '', [
+                    values.properties,
+                ]);
+            } else {
+                await settingProperties(instanceStore.current?.id || '', {
+                    [values.properties || '']: values.propertyValue,
+                });
+            }
+        }
+    });
+};
 
+defineExpose({ saveBtn });
 </script>
 
 <style lang="less" scoped>
 .function {
-  padding: 15px;
-  background-color: #e7eaec;
+    padding: 15px;
+    background-color: #e7eaec;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/index.vue
index 2a185673..16897d23 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/index.vue
@@ -24,7 +24,7 @@
         <a-col :span="8">
             <div class="right-log">
                 <TitleComponent data="日志" />
-                <div :style="{ marginTop: 10 }">
+                <div :style="{ marginTop: '10px' }">
                     <template v-if="logList.length">
                         <Log v-for="item in logList" :data="item" :key="item.key" />
                     </template>
@@ -61,6 +61,10 @@ const messageArr = computed(() => {
     return arr.map(i => { return {...message[i], key: i}})
 })
 
+const subscribeLog = () => {
+
+}
+
 
 </script>
 
diff --git a/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx b/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
index cd066848..5482befe 100644
--- a/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
+++ b/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
@@ -20,7 +20,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -30,7 +30,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {(data?.data?.properties || []).map((item: any) => (
                                         <Descriptions.Item
@@ -45,7 +45,7 @@ const ManualInspection = defineComponent({
                         </div>
                         {data?.data?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.data?.description}</p>
@@ -60,7 +60,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -70,7 +70,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data.configuration?.provider === 'OneNet' ? (
                                         <>
@@ -105,7 +105,7 @@ const ManualInspection = defineComponent({
                         </div>
                         {data?.configuration?.configuration?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.configuration?.configuration?.description}</p>
@@ -120,7 +120,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -130,7 +130,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data?.configuration?.configuration?.shareCluster ? (
                                         <>
@@ -180,9 +180,9 @@ const ManualInspection = defineComponent({
                                 </Descriptions>
                             </div>
                         </div>
-                        {data?.configuration?.configuration.description ? (
+                        {data?.configuration?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.configuration?.description}</p>
diff --git a/src/views/device/Instance/Detail/Diagnose/Status/index.tsx b/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
index db57848b..f075aea9 100644
--- a/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
+++ b/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
@@ -10,6 +10,7 @@ import { _deploy as _deployProduct } from "@/api/device/product"
 import _ from "lodash"
 import DiagnosticAdvice from './DiagnosticAdvice'
 import ManualInspection from './ManualInspection'
+import { deployDevice } from "@/api/initHome"
 
 type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
 
@@ -29,9 +30,9 @@ const Status = defineComponent({
         const status = ref<'loading' | 'finish'>('loading')
 
         const device = ref(instanceStore.current)
-        const gateway = ref<Partial<Record<string, any>>>() // 网关信息
-        const parent = ref<Partial<Record<string, any>>>() // 父设备
-        const product = ref<Partial<Record<string, any>>>() // 产品
+        const gateway = ref<Partial<Record<string, any>>>({}) // 网关信息
+        const parent = ref<Partial<Record<string, any>>>({}) // 父设备
+        const product = ref<Partial<Record<string, any>>>({}) // 产品
 
         const artificialVisible = ref<boolean>(false)
         const artificialData = ref<Partial<Record<string, any>>>()
@@ -1332,7 +1333,7 @@ const Status = defineComponent({
                         unref(device)?.accessProvider &&
                         gatewayList.includes(unref(device).accessProvider as string)
                     ) {
-                        const response = await queryProtocolDetail(unref(device).protocol, 'MQTT');
+                        const response: any = await queryProtocolDetail(unref(device).protocol, 'MQTT');
                         if (response.status === 200) {
                             if ((response.result?.routes || []).length > 0) {
                                 item.push(
@@ -1521,9 +1522,103 @@ const Status = defineComponent({
                 <TitleComponent data="连接详情" />
                 <Space>
                     {
-                        status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary">一键修复</Button>
+                        status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary" onClick={async () => {
+                            let flag: boolean = true;
+                            if (
+                                Object.keys(unref(gateway)).length > 0 &&
+                                unref(gateway)?.state?.value !== 'enabled'
+                            ) {
+                                const resp = await startGateway(unref(device).accessId || '');
+                                if (resp.status === 200) {
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'gateway',
+                                        name: '设备接入网关',
+                                        desc: '诊断设备接入网关状态是否正常，禁用状态将导致连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (unref(product)?.state !== 1) {
+                                const resp = await _deployProduct(unref(device).productId || '');
+                                if (resp.status === 200) {
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'product',
+                                        name: '产品状态',
+                                        desc: '诊断产品状态是否正常，禁用状态将导致设备连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (unref(device)?.state?.value === 'notActive') {
+                                const resp = await deployDevice(unref(device)?.id || '');
+                                if (resp.status === 200) {
+                                    unref(device).state = { value: 'offline', text: '离线' };
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'device',
+                                        name: '设备状态',
+                                        desc: '诊断设备状态是否正常，禁用状态将导致设备连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (props.providerType === 'network' || props.providerType === 'child-device') {
+                                const address = unref(gateway)?.channelInfo?.addresses || [];
+                                const _label = address.some((i: any) => i.health === -1);
+                                const __label = address.every((i: any) => i.health === 1);
+                                const health = _label ? -1 : __label ? 1 : 0;
+                                if (health === -1 && unref(gateway)?.channelId) {
+                                    const res = await startNetwork(unref(gateway)?.channelId);
+                                    if (res.status === 200) {
+                                        list.value = modifyArrayList(list.value, {
+                                            key: 'network',
+                                            name: '网络组件',
+                                            desc: '诊断网络组件配置是否正确，配置错误将导致设备连接失败',
+                                            status: 'success',
+                                            text: '正常',
+                                            info: null,
+                                        });
+                                    } else {
+                                        flag = false;
+                                    }
+                                }
+                            }
+                            if (props.providerType === 'child-device' && unref(device)?.parentId) {
+                                if (unref(parent)?.state?.value === 'notActive') {
+                                    const resp = await deployDevice(unref(device)?.parentId || '');
+                                    if (resp.status === 200) {
+                                        list.value = modifyArrayList(list.value, {
+                                            key: 'parent-device',
+                                            name: '网关父设备',
+                                            desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
+                                            status: 'success',
+                                            text: '正常',
+                                            info: null,
+                                        });
+                                    } else {
+                                        flag = false;
+                                    }
+                                }
+                            }
+                            if (flag) {
+                                message.success('操作成功！');
+                            }
+                        }}>一键修复</Button>
                     }
-                    <Button>重新诊断</Button>
+                    <Button onClick={() => {
+                        handleSearch()
+                    }}>重新诊断</Button>
                 </Space>
             </div>
             <div class={styles["statusContent"]}>
diff --git a/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue b/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
index dd63a89d..343cb6ef 100644
--- a/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
+++ b/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
@@ -1,6 +1,6 @@
 <template>
     <a-card :hoverable="true" class="card-box">
-        <a-spin :spinning="loading">
+        <!-- <a-spin :spinning="loading"> -->
             <div class="card-container">
                 <div class="header">
                     <div class="title">{{ _props.data.name }}</div>
@@ -24,14 +24,14 @@
                     </div>
                 </div>
                 <div class="value">
-                    <ValueRender :data="data" />
+                    <ValueRender :data="data" :value="_props.data" />
                 </div>
                 <div class="bottom">
                     <div style="color: rgba(0, 0, 0, .65); font-size: 12px">更新时间</div>
-                    <div class="time-value">{{data?.time || '--'}}</div>
+                    <div class="time-value">{{_props?.data?.timeString || '--'}}</div>
                 </div>
             </div>
-        </a-spin>
+        <!-- </a-spin> -->
     </a-card>
 </template>
 
@@ -47,13 +47,14 @@ const _props = defineProps({
         default: () => []
     },
 });
-const loading = ref<boolean>(true);
+// const loading = ref<boolean>(true);
 
-watchEffect(() => {
-    if (_props.data.name) {
-        loading.value = false;
-    }
-});
+// watchEffect(() => {
+//     if (_props.data) {
+//         console.log(_props.data)
+//         loading.value = false;
+//     }
+// });
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/device/Instance/Detail/Running/Property/ValueRender.vue b/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
index c9141b29..0f8cb129 100644
--- a/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
+++ b/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="value">
-        {{value}}
+        {{value?.value || '--'}}
     </div>
 </template>
 
@@ -13,8 +13,8 @@ const _data = defineProps({
         default: () => {},
     },
     value: {
-        type: [Object, String, Number],
-        default: '--'
+        type: Object,
+        default: () => {}
     },
     type: {
         type: String,
@@ -40,6 +40,7 @@ imgMap.set('obj', getImage('/running/obj.png'));
 const imgList = ['.jpg', '.png', '.swf', '.tiff'];
 const videoList = ['.m3u8', '.flv', '.mp4', '.rmvb', '.mvb'];
 const fileList = ['.txt', '.doc', '.xls', '.pdf', '.ppt', '.docx', '.xlsx', '.pptx'];
+
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/device/Instance/Detail/Running/Property/index.vue b/src/views/device/Instance/Detail/Running/Property/index.vue
index d09224e6..5e81cf8a 100644
--- a/src/views/device/Instance/Detail/Running/Property/index.vue
+++ b/src/views/device/Instance/Detail/Running/Property/index.vue
@@ -1,74 +1,95 @@
 <template>
-    <JTable
-        :columns="columns"
-        :dataSource="dataSource"
-        :bodyStyle="{padding: '0 0 0 20px'}"
-    >
-        <template #headerTitle>
-            <a-input-search
-                placeholder="请输入名称"
-                style="width: 300px; margin-bottom: 10px"
-                @search="onSearch"
-                v-model:value="value"
-                :allowClear="true"
-            />
-        </template>
-        <template #card="slotProps">
-            <PropertyCard :data="slotProps" :actions="getActions(slotProps)" />
-        </template>
-        <template #value="slotProps">
-            <ValueRender :data="slotProps" />
-        </template>
-        <template #time="slotProps">
-            {{slotProps.time || '--'}}
-        </template>
-        <template #action="slotProps">
-            <a-space :size="16">
-                <a-tooltip
-                    v-for="i in getActions(slotProps)"
-                    :key="i.key"
-                    v-bind="i.tooltip"
-                >
-                    <a-button
-                        style="padding: 0"
-                        type="link"
-                        :disabled="i.disabled"
-                        @click="i.onClick && i.onClick(slotProps)"
+    <a-spin :spinning="loading">
+        <JTable
+            :columns="columns"
+            :dataSource="dataSource"
+            :bodyStyle="{ padding: '0 0 0 20px' }"
+        >
+            <template #headerTitle>
+                <a-input-search
+                    placeholder="请输入名称"
+                    style="width: 300px; margin-bottom: 10px"
+                    @search="onSearch"
+                    v-model:value="value"
+                    :allowClear="true"
+                />
+            </template>
+            <template #card="slotProps">
+                <PropertyCard
+                    :data="{ ...slotProps, ...propertyValue[slotProps?.id] }"
+                    :actions="getActions(slotProps)"
+                />
+            </template>
+            <template #value="slotProps">
+                <ValueRender
+                    :data="slotProps"
+                    :value="propertyValue[slotProps?.id]"
+                />
+            </template>
+            <template #time="slotProps">
+                {{ propertyValue[slotProps?.id]?.timeString || '--' }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
                     >
-                        <AIcon :type="i.icon" />
-                    </a-button>
-                </a-tooltip>
-            </a-space>
-        </template>
-        <template #paginationRender>
-            <a-pagination
-                size="small"
-                :total="total"
-                :showQuickJumper="false"
-                :showSizeChanger="true"
-                :current="pageIndex + 1"
-                :pageSize="pageSize"
-                :pageSizeOptions="['8', '12', '24', '60', '100']"
-                :show-total="(num) => `第 ${pageIndex * pageSize + 1} - ${(pageIndex + 1) * pageSize > num ? num : (pageIndex + 1) * pageSize} 条/总共 ${num} 条`"
-                @change="pageChange"
-            />
-        </template>
-    </JTable>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            :disabled="i.disabled"
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <AIcon :type="i.icon" />
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+            <template #paginationRender>
+                <a-pagination
+                    size="small"
+                    :total="total"
+                    :showQuickJumper="false"
+                    :showSizeChanger="true"
+                    :current="pageIndex + 1"
+                    :pageSize="pageSize"
+                    :pageSizeOptions="['8', '12', '24', '60', '100']"
+                    :show-total="
+                        (num) =>
+                            `第 ${pageIndex * pageSize + 1} - ${
+                                (pageIndex + 1) * pageSize > num
+                                    ? num
+                                    : (pageIndex + 1) * pageSize
+                            } 条/总共 ${num} 条`
+                    "
+                    @change="pageChange"
+                />
+            </template>
+        </JTable>
+    </a-spin>
     <Save v-if="editVisible" @close="editVisible = false" :data="currentInfo" />
-    <Indicators v-if="indicatorVisible" @close="indicatorVisible = false" :data="currentInfo" />
+    <Indicators
+        v-if="indicatorVisible"
+        @close="indicatorVisible = false"
+        :data="currentInfo"
+    />
 </template>
 
 <script lang="ts" setup>
-import _ from "lodash"
-import { PropertyData } from "../../../typings"
-import PropertyCard from './PropertyCard.vue'
-import ValueRender from './ValueRender.vue'
-import Save from './Save.vue'
-import Indicators from './Indicators.vue'
-import { getProperty } from '@/api/device/instance'
-import { useInstanceStore } from "@/store/instance"
-import { message } from "ant-design-vue"
-
+import _, { groupBy, throttle, toArray } from 'lodash-es';
+import { PropertyData } from '../../../typings';
+import PropertyCard from './PropertyCard.vue';
+import ValueRender from './ValueRender.vue';
+import Save from './Save.vue';
+import Indicators from './Indicators.vue';
+import { getProperty } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import { message } from 'ant-design-vue';
+import { getWebSocket } from '@/utils/websocket';
+import { map } from 'rxjs/operators';
+import { queryDashboard } from '@/api/comm';
 const columns = [
     {
         title: '名称',
@@ -79,7 +100,7 @@ const columns = [
         title: '值',
         dataIndex: 'value',
         key: 'value',
-        scopedSlots: true
+        scopedSlots: true,
     },
     {
         title: '更新时间',
@@ -93,29 +114,35 @@ const columns = [
         key: 'action',
         scopedSlots: true,
     },
-]
+];
 
 const _data = defineProps({
     data: {
         type: Array,
-        default: () => []
-    }
-})
-const value = ref<string>('')
-const dataSource = ref<PropertyData[]>([])
-const _dataSource = ref<PropertyData[]>([])
-const pageIndex = ref<number>(0)
-const pageSize = ref<number>(8)
-const total = ref<number>(0)
-const editVisible = ref<boolean>(false) // 编辑
-const detailVisible = ref<boolean>(false) // 详情
-const currentInfo = ref<Record<string, any>>({})
-const instanceStore = useInstanceStore()
-const indicatorVisible = ref<boolean>(false) // 指标
+        default: () => [],
+    },
+});
+const value = ref<string>('');
+const dataSource = ref<PropertyData[]>([]);
+const _dataSource = ref<PropertyData[]>([]);
+const pageIndex = ref<number>(0);
+const pageSize = ref<number>(8);
+const total = ref<number>(0);
+const editVisible = ref<boolean>(false); // 编辑
+const detailVisible = ref<boolean>(false); // 详情
+const currentInfo = ref<Record<string, any>>({});
+const instanceStore = useInstanceStore();
+const indicatorVisible = ref<boolean>(false); // 指标
+const loading = ref<boolean>(false);
+const propertyValue = ref<Record<string, any>>({});
+
+const subRef = ref();
+
+const list = ref<any[]>([]);
 
 const getActions = (data: Partial<Record<string, any>>) => {
-    const arr = []
-    if(data.expands?.type?.includes('write')){
+    const arr = [];
+    if (data.expands?.type?.includes('write')) {
         arr.push({
             key: 'edit',
             tooltip: {
@@ -123,14 +150,23 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'EditOutlined',
             onClick: () => {
-                editVisible.value = true
-                currentInfo.value = data
+                editVisible.value = true;
+                currentInfo.value = data;
             },
-        })
+        });
     }
-    if((data.expands?.metrics || []).length && ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
-        data.valueType?.type || '',
-    )){
+    if (
+        (data.expands?.metrics || []).length &&
+        [
+            'int',
+            'long',
+            'float',
+            'double',
+            'string',
+            'boolean',
+            'date',
+        ].includes(data.valueType?.type || '')
+    ) {
         arr.push({
             key: 'metrics',
             tooltip: {
@@ -138,12 +174,12 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'ClockCircleOutlined',
             onClick: () => {
-                indicatorVisible.value = true
-                currentInfo.value = data
+                indicatorVisible.value = true;
+                currentInfo.value = data;
             },
-        })
+        });
     }
-    if(data.expands?.type?.includes('read')){
+    if (data.expands?.type?.includes('read')) {
         arr.push({
             key: 'read',
             tooltip: {
@@ -151,14 +187,17 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'SyncOutlined',
             onClick: async () => {
-                if(instanceStore.current.id && data.id){
-                    const resp = await getProperty(instanceStore.current.id, data.id)
-                    if(resp.status === 200){
-                        message.success('操作成功！')
+                if (instanceStore.current.id && data.id) {
+                    const resp = await getProperty(
+                        instanceStore.current.id,
+                        data.id,
+                    );
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
                     }
                 }
             },
-        })
+        });
     }
     arr.push({
         key: 'detail',
@@ -168,56 +207,132 @@ const getActions = (data: Partial<Record<string, any>>) => {
         },
         icon: 'BarsOutlined',
         onClick: () => {
-            detailVisible.value = true
-            currentInfo.value = data
+            detailVisible.value = true;
+            currentInfo.value = data;
         },
-    })
-    return arr
-}
-
-const query = (page: number, size: number, value: string) => {
-    pageIndex.value = page || 0
-    pageSize.value = size || 8
-    const _from = pageIndex.value * pageSize.value
-    const _to = (pageIndex.value + 1) * pageSize.value
-    const arr = _.cloneDeep(_dataSource.value)
-    if(value){
-        const li = arr.filter((i: any) => {
-            return i?.name.indexOf(value) !== -1;
-        })
-        dataSource.value = li.slice(_from, _to)
-        total.value = li.length
-    } else {
-        dataSource.value = arr.slice(_from, _to)
-        total.value = arr.length
-    }
-}
-
-const pageChange = (page: number, size: number) => {
-    if(size === pageSize.value) {
-        query(page - 1, size, value.value)
-    } else {
-        query(0, size, value.value)
-    }
-}
-
-watch(() => _data.data,
-    (newVal) => {
-        if(newVal.length) {
-            _dataSource.value = newVal as PropertyData[]
-             query(0, 8, value.value)
-        }
-}, {
-    deep: true,
-    immediate: true
-})
-
-const onSearch = () => {
-    query(0, 8, value.value)
+    });
+    return arr;
 };
 
+// const valueChange = (arr: Record<string, any>[]) => {
+//     (arr || [])
+//         .sort((a: any, b: any) => a.timestamp - b.timestamp)
+//         .forEach((item: any) => {
+//             const { value } = item;
+//             propertyValue.value[value?.property] = { ...item, ...value };
+//         });
+//     list.value = []
+// };
+
+const subscribeProperty = () => {
+    const id = `instance-info-property-${instanceStore.current.id}-${
+        instanceStore.current.productId
+    }-${dataSource.value.map((i: Record<string, any>) => i.id).join('-')}`;
+    const topic = `/dashboard/device/${instanceStore.current.productId}/properties/realTime`;
+    subRef.value = getWebSocket(id, topic, {
+        deviceId: instanceStore.current.id,
+        properties: dataSource.value.map((i: Record<string, any>) => i.id),
+        history: 1,
+    })
+        ?.pipe(map((res: any) => res.payload))
+        .subscribe((payload) => {
+            list.value = [...list.value, payload];
+            unref(list).sort((a: any, b: any) => a.timestamp - b.timestamp)
+            .forEach((item: any) => {
+                const { value } = item;
+                propertyValue.value[value?.property] = { ...item, ...value };
+            });
+            // list.value = [...list.value, payload];
+            // throttle(valueChange(list.value), 500);
+        });
+};
+
+const getDashboard = async () => {
+    const param = [
+        {
+            dashboard: 'device',
+            object: instanceStore.current.productId,
+            measurement: 'properties',
+            dimension: 'history',
+            params: {
+                deviceId: instanceStore.current.id,
+                history: 1,
+                properties: dataSource.value.map((i: any) => i.id),
+            },
+        },
+    ];
+    loading.value = true;
+    const resp: Record<string, any> = await queryDashboard(param);
+    if (resp.status === 200) {
+        const t1 = (resp.result || []).map((item: any) => {
+            return {
+                timeString: item.data?.timeString,
+                timestamp: item.data?.timestamp,
+                ...item?.data?.value,
+            };
+        });
+        const obj = {};
+        toArray(groupBy(t1, 'property'))
+            .map((item) => {
+                return {
+                    list: item.sort((a, b) => b.timestamp - a.timestamp),
+                    property: item[0].property,
+                };
+            })
+            .forEach((i) => {
+                obj[i.property] = i.list[0];
+            });
+        propertyValue.value = { ...unref(propertyValue), ...obj };
+    }
+    subscribeProperty();
+    loading.value = false;
+};
+
+const query = (page: number, size: number, value: string) => {
+    pageIndex.value = page || 0;
+    pageSize.value = size || 8;
+    const _from = pageIndex.value * pageSize.value;
+    const _to = (pageIndex.value + 1) * pageSize.value;
+    const arr = _.cloneDeep(_dataSource.value);
+    if (unref(value)) {
+        const li = arr.filter((i: any) => {
+            return i?.name.indexOf(unref(value)) !== -1;
+        });
+        dataSource.value = li.slice(_from, _to);
+        total.value = li.length;
+    } else {
+        dataSource.value = arr.slice(_from, _to);
+        total.value = arr.length;
+    }
+    getDashboard();
+};
+
+const pageChange = (page: number, size: number) => {
+    if (size === pageSize.value) {
+        query(page - 1, size, value.value);
+    } else {
+        query(0, size, value.value);
+    }
+};
+
+watch(
+    () => _data.data,
+    (newVal) => {
+        if (newVal.length) {
+            _dataSource.value = newVal as PropertyData[];
+            query(0, 8, value.value);
+        }
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+
+const onSearch = () => {
+    query(0, 8, value.value);
+};
 </script>
 
 <style scoped lang="less">
-    
 </style>
\ No newline at end of file
diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
index 81191769..6150e5ae 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -1,1091 +1,996 @@
 <template>
     <page-container>
         <a-card>
-            <div class="steps-content">
-                <div class="steps-box">
-                    <div>
-                        <a-form
-                            :model="formData"
-                            ref="formRef1"
-                            name="basic"
-                            autocomplete="off"
-                            layout="vertical"
-                        >
-                            <a-row :gutter="[24, 0]">
-                                <a-col :span="12">
-                                    <a-form-item
-                                        label="名称"
-                                        name="name"
-                                        :rules="Rules.name"
-                                    >
-                                        <a-input
-                                            v-model:value="formData.name"
-                                            placeholder="请输入名称"
-                                        />
-                                    </a-form-item>
-                                </a-col>
-                                <a-col :span="12">
-                                    <a-form-item
-                                        label="类型"
-                                        name="type"
-                                        :rules="Rules.type"
-                                    >
-                                        <a-select
-                                            v-model:value="formData.type"
-                                            :options="typeOptions"
-                                            placeholder="请选择类型"
-                                            allowClear
-                                            show-search
-                                            :filter-option="filterOption"
-                                            @change="changeType"
-                                        />
-                                    </a-form-item>
-                                </a-col>
-                                <a-col :span="24">
-                                    <a-form-item
-                                        name="shareCluster"
-                                        :rules="Rules.shareCluster"
-                                    >
-                                        <div class="form-label">
-                                            集群
-                                            <span class="form-label-required"
-                                                >*</span
-                                            >
-                                            <a-tooltip>
-                                                <template #title>
-                                                    <p>
-                                                        共享配置:集群下所有节点共用同一配置
-                                                    </p>
-                                                    <p>
-                                                        独立配置:集群下不同节点使用不同配置
-                                                    </p>
-                                                </template>
-                                                <question-circle-outlined />
-                                            </a-tooltip>
-                                        </div>
+            <div class="container">
+                <a-form
+                    :model="formData"
+                    ref="formRef1"
+                    name="basic"
+                    autocomplete="off"
+                    layout="vertical"
+                >
+                    <a-row :gutter="[24, 0]">
+                        <a-col :span="12">
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="Rules.name"
+                            >
+                                <a-input
+                                    v-model:value="formData.name"
+                                    placeholder="请输入名称"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="类型"
+                                name="type"
+                                :rules="Rules.type"
+                            >
+                                <a-select
+                                    v-model:value="formData.type"
+                                    :options="typeOptions"
+                                    placeholder="请选择类型"
+                                    allowClear
+                                    show-search
+                                    :filter-option="filterOption"
+                                    @change="changeType"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item
+                                name="shareCluster"
+                                :rules="Rules.shareCluster"
+                            >
+                                <div class="form-label">
+                                    集群
+                                    <span class="form-label-required">*</span>
+                                    <a-tooltip>
+                                        <template #title>
+                                            <p>
+                                                共享配置:集群下所有节点共用同一配置
+                                            </p>
+                                            <p>
+                                                独立配置:集群下不同节点使用不同配置
+                                            </p>
+                                        </template>
+                                        <question-circle-outlined />
+                                    </a-tooltip>
+                                </div>
 
-                                        <a-radio-group
-                                            v-model:value="
-                                                formData.shareCluster
+                                <a-radio-group
+                                    v-model:value="formData.shareCluster"
+                                    button-style="solid"
+                                    @change="
+                                        changeShareCluster(
+                                            formData.shareCluster,
+                                        )
+                                    "
+                                >
+                                    <a-radio-button :value="true"
+                                        >共享配置</a-radio-button
+                                    >
+                                    <a-radio-button :value="false"
+                                        >独立配置</a-radio-button
+                                    >
+                                </a-radio-group>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+
+                    <a-form
+                        ref="formRef2"
+                        layout="vertical"
+                        name="dynamic_form_nest_item"
+                        :model="dynamicValidateForm"
+                    >
+                        <div
+                            v-for="(
+                                cluster, index
+                            ) in dynamicValidateForm.cluster"
+                            :key="cluster.id"
+                        >
+                            <a-collapse
+                                v-model:activeKey="activeKey"
+                                class="collapse"
+                            >
+                                <a-collapse-panel
+                                    :key="cluster.id"
+                                    :header="`#${index + 1}.节点`"
+                                >
+                                    <template #extra v-if="!shareCluster">
+                                        <delete-outlined
+                                            @click="removeCluster(cluster)"
+                                        />
+                                    </template>
+                                    <a-row :gutter="[24, 0]">
+                                        <a-col :span="12" v-if="!shareCluster">
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'serverId',
+                                                ]"
+                                            >
+                                                <div class="form-label">
+                                                    节点名称
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                </div>
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.serverId
+                                                    "
+                                                    :options="
+                                                        clustersListIndex[index]
+                                                    "
+                                                    placeholder="请选择节点名称"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    @change="
+                                                        changeServerId(
+                                                            cluster.serverId,
+                                                            index,
+                                                        )
+                                                    "
+                                                >
+                                                </a-select>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible('host', formData.type)
                                             "
-                                            button-style="solid"
-                                            @change="
-                                                changeShareCluster(
-                                                    formData.shareCluster,
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'host',
+                                                ]"
+                                                :rules="Rules.host"
+                                            >
+                                                <div class="form-label">
+                                                    本地地址
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .host
+                                                    "
+                                                    :options="
+                                                        hostOptionsIndex[index]
+                                                    "
+                                                    placeholder="请选择本地地址"
+                                                    allowClear
+                                                    show-search
+                                                    :disabled="shareCluster"
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    @change="
+                                                        changeHost(
+                                                            cluster.serverId,
+                                                            cluster
+                                                                .configuration
+                                                                .host,
+                                                            index,
+                                                        )
+                                                    "
+                                                >
+                                                </a-select>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible('port', formData.type)
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'port',
+                                                ]"
+                                                :rules="Rules.port"
+                                            >
+                                                <div class="form-label">
+                                                    本地端口
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                监听指定端口的请求
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .port
+                                                    "
+                                                    :options="
+                                                        portOptionsIndex[index]
+                                                    "
+                                                    placeholder="请选择本地端口"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterPortOption
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'publicHost',
+                                                    formData.type,
                                                 )
                                             "
                                         >
-                                            <a-radio-button :value="true"
-                                                >共享配置</a-radio-button
-                                            >
-                                            <a-radio-button :value="false"
-                                                >独立配置</a-radio-button
-                                            >
-                                        </a-radio-group>
-                                    </a-form-item>
-                                </a-col>
-                            </a-row>
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
 
-                            <a-form
-                                ref="formRef2"
-                                layout="vertical"
-                                name="dynamic_form_nest_item"
-                                :model="dynamicValidateForm"
-                            >
-                                <div
-                                    v-for="(
-                                        cluster, index
-                                    ) in dynamicValidateForm.cluster"
-                                    :key="cluster.id"
-                                >
-                                    <a-collapse
-                                        v-model:activeKey="activeKey"
-                                        class="collapse"
-                                    >
-                                        <a-collapse-panel
-                                            :key="cluster.id"
-                                            :header="`#${index + 1}.节点`"
-                                        >
-                                            <template
-                                                #extra
-                                                v-if="!shareCluster"
+                                                    'publicHost',
+                                                ]"
+                                                :rules="Rules.publicHost"
                                             >
-                                                <delete-outlined
-                                                    @click="
-                                                        removeCluster(cluster)
+                                                <div class="form-label">
+                                                    公网地址
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                对外提供访问的地址,内网环境时填写服务器的内网IP地址
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .publicHost
+                                                    "
+                                                    placeholder="请输入公网地址"
+                                                    allowClear
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'publicPort',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'publicPort',
+                                                ]"
+                                                :rules="Rules.publicPort"
+                                            >
+                                                <div class="form-label">
+                                                    公网端口
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                对外提供访问的端口
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    placeholder="请输入端口"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .publicPort
+                                                    "
+                                                    :min="1"
+                                                    :max="65535"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'remoteHost',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'remoteHost',
+                                                ]"
+                                                :rules="Rules.remoteHost"
+                                            >
+                                                <div class="form-label">
+                                                    远程地址
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                </div>
+
+                                                <a-input
+                                                    placeholder="请输入远程地址"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .remoteHost
                                                     "
                                                 />
-                                            </template>
-                                            <a-row :gutter="[24, 0]">
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="!shareCluster"
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'serverId',
-                                                        ]"
-                                                    >
-                                                        <div class="form-label">
-                                                            节点名称
-                                                        </div>
-                                                        <a-select
-                                                            v-model:value="
-                                                                cluster.serverId
-                                                            "
-                                                            :options="
-                                                                clustersList
-                                                            "
-                                                            placeholder="请选择节点名称"
-                                                            allowClear
-                                                            show-search
-                                                            :filter-option="
-                                                                filterOption
-                                                            "
-                                                        >
-                                                        </a-select>
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'host',
-                                                            formData.type,
-                                                        )
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'remotePort',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="远程端口"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'remotePort',
+                                                ]"
+                                                :rules="Rules.remotePort"
+                                            >
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    placeholder="请输入远程端口"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .remotePort
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'host',
-                                                        ]"
-                                                        :rules="Rules.host"
-                                                    >
-                                                        <div class="form-label">
-                                                            本地地址
-                                                            <span
-                                                                class="form-label-required"
-                                                                >*</span
-                                                            >
-                                                            <a-tooltip>
-                                                                <template
-                                                                    #title
-                                                                >
-                                                                    <p>
-                                                                        绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
-                                                                    </p>
-                                                                </template>
-                                                                <question-circle-outlined />
-                                                            </a-tooltip>
-                                                        </div>
+                                                    :min="1"
+                                                    :max="65535"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'clientId',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="clientId"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'clientId',
+                                                ]"
+                                                :rules="Rules.clientId"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .clientId
+                                                    "
+                                                    placeholder="请输入ClientId"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
 
-                                                        <a-select
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .host
-                                                            "
-                                                            :options="
-                                                                sipListOption
-                                                            "
-                                                            placeholder="请选择本地地址"
-                                                            allowClear
-                                                            show-search
-                                                            :disabled="
-                                                                shareCluster
-                                                            "
-                                                            :filter-option="
-                                                                filterOption
-                                                            "
-                                                            @change="
-                                                                handleChangeForm2Sip(
-                                                                    index,
-                                                                )
-                                                            "
-                                                        >
-                                                        </a-select>
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'port',
-                                                            formData.type,
-                                                        )
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'username',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="用户名"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'username',
+                                                ]"
+                                                :rules="Rules.username"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .username
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'port',
-                                                        ]"
-                                                        :rules="Rules.port"
-                                                    >
-                                                        <div class="form-label">
-                                                            本地端口
-                                                            <span
-                                                                class="form-label-required"
-                                                                >*</span
-                                                            >
-                                                            <a-tooltip>
-                                                                <template
-                                                                    #title
-                                                                >
-                                                                    <p>
-                                                                        监听指定端口的请求
-                                                                    </p>
-                                                                </template>
-                                                                <question-circle-outlined />
-                                                            </a-tooltip>
-                                                        </div>
-                                                        <a-select
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .port
-                                                            "
-                                                            :options="
-                                                                portOptions
-                                                            "
-                                                            placeholder="请选择本地端口"
-                                                            allowClear
-                                                            show-search
-                                                            :filter-option="
-                                                                filterPortOption
-                                                            "
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'publicHost',
-                                                            formData.type,
-                                                        )
+                                                    placeholder="请输入用户名"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'password',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="密码"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'password',
+                                                ]"
+                                                :rules="Rules.password"
+                                            >
+                                                <a-input-password
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .password
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
+                                                    placeholder="请输入密码"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'topicPrefix',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'topicPrefix',
+                                                ]"
+                                                :rules="Rules.topicPrefix"
+                                            >
+                                                <div class="form-label">
+                                                    订阅前缀
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .topicPrefix
+                                                    "
+                                                    placeholder="请输入订阅前缀"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
 
-                                                            'publicHost',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.publicHost
-                                                        "
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'maxMessageSize',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'maxMessageSize',
+                                                ]"
+                                                :rules="Rules.maxMessageSize"
+                                            >
+                                                <div class="form-label">
+                                                    最大消息长度
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
                                                     >
-                                                        <div class="form-label">
-                                                            公网地址
-                                                            <span
-                                                                class="form-label-required"
-                                                                >*</span
-                                                            >
-                                                            <a-tooltip>
-                                                                <template
-                                                                    #title
-                                                                >
-                                                                    <p>
-                                                                        对外提供访问的地址,内网环境时填写服务器的内网IP地址
-                                                                    </p>
-                                                                </template>
-                                                                <question-circle-outlined />
-                                                            </a-tooltip>
-                                                        </div>
-                                                        <a-input
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .publicHost
-                                                            "
-                                                            placeholder="请输入公网地址"
-                                                            allowClear
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'publicPort',
-                                                            formData.type,
-                                                        )
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .maxMessageSize
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'publicPort',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.publicPort
-                                                        "
-                                                    >
-                                                        <div class="form-label">
-                                                            公网端口
-                                                            <span
-                                                                class="form-label-required"
-                                                                >*</span
-                                                            >
-                                                            <a-tooltip>
-                                                                <template
-                                                                    #title
-                                                                >
-                                                                    <p>
-                                                                        对外提供访问的端口
-                                                                    </p>
-                                                                </template>
-                                                                <question-circle-outlined />
-                                                            </a-tooltip>
-                                                        </div>
-
-                                                        <a-input-number
-                                                            style="width: 100%"
-                                                            placeholder="请输入端口"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .publicPort
-                                                            "
-                                                            :min="1"
-                                                            :max="65535"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'remoteHost',
-                                                            formData.type,
-                                                        )
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'remoteHost',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.remoteHost
-                                                        "
-                                                    >
-                                                        <div
-                                                            class="form-label"
-                                                        ></div>
-
-                                                        <a-input
-                                                            placeholder="请输入远程地址"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .remoteHost
-                                                            "
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'remotePort',
-                                                            formData.type,
-                                                        )
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        label="远程端口"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'remotePort',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.remotePort
-                                                        "
-                                                    >
-                                                        <a-input-number
-                                                            style="width: 100%"
-                                                            placeholder="请输入远程端口"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .remotePort
-                                                            "
-                                                            :min="1"
-                                                            :max="65535"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'clientId',
-                                                            formData.type,
-                                                        )
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        label="clientId"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'clientId',
-                                                        ]"
-                                                        :rules="Rules.clientId"
-                                                    >
-                                                        <a-input
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .clientId
-                                                            "
-                                                            placeholder="请输入ClientId"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'username',
-                                                            formData.type,
-                                                        )
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        label="用户名"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'username',
-                                                        ]"
-                                                        :rules="Rules.username"
-                                                    >
-                                                        <a-input
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .username
-                                                            "
-                                                            placeholder="请输入用户名"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'password',
-                                                            formData.type,
-                                                        )
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        label="密码"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'password',
-                                                        ]"
-                                                        :rules="Rules.password"
-                                                    >
-                                                        <a-input-password
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .password
-                                                            "
-                                                            placeholder="请输入密码"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'topicPrefix',
-                                                            formData.type,
-                                                        )
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'topicPrefix',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.topicPrefix
-                                                        "
-                                                    >
-                                                        <div class="form-label">
-                                                            订阅前缀
-                                                            <a-tooltip>
-                                                                <template
-                                                                    #title
-                                                                >
-                                                                    <p>
-                                                                        当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
-                                                                    </p>
-                                                                </template>
-                                                                <question-circle-outlined />
-                                                            </a-tooltip>
-                                                        </div>
-                                                        <a-input
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .topicPrefix
-                                                            "
-                                                            placeholder="请输入订阅前缀"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'maxMessageSize',
-                                                            formData.type,
-                                                        )
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'maxMessageSize',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.maxMessageSize
-                                                        "
-                                                    >
-                                                        <div class="form-label">
-                                                            最大消息长度
-                                                            <span
-                                                                class="form-label-required"
-                                                                >*</span
-                                                            >
-                                                            <a-tooltip>
-                                                                <template
-                                                                    #title
-                                                                >
-                                                                    <p>
-                                                                        单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
-                                                                    </p>
-                                                                </template>
-                                                                <question-circle-outlined />
-                                                            </a-tooltip>
-                                                        </div>
-                                                        <a-input-number
-                                                            style="width: 100%"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .maxMessageSize
-                                                            "
-                                                            placeholder="请输入最大消息长度"
-                                                            :min="1024"
-                                                            :max="1073741824"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="
-                                                        isVisible(
-                                                            'secureSpan12',
-                                                            formData.type,
-                                                        )
-                                                            ? '12'
-                                                            : '24'
-                                                    "
-                                                >
-                                                    <a-form-item
-                                                        :label="
-                                                            isVisible(
-                                                                'secure',
-                                                                formData.type,
-                                                            )
-                                                                ? '开启TLS'
-                                                                : '开启DTLS'
-                                                        "
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'secure',
-                                                        ]"
-                                                        :rules="Rules.secure"
-                                                    >
-                                                        <a-radio-group
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .secure
-                                                            "
-                                                        >
-                                                            <a-radio
-                                                                :value="true"
-                                                                >是</a-radio
-                                                            >
-                                                            <a-radio
-                                                                :value="false"
-                                                                >否</a-radio
-                                                            >
-                                                        </a-radio-group>
-                                                    </a-form-item>
-                                                </a-col>
-
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
+                                                    placeholder="请输入最大消息长度"
+                                                    :min="1024"
+                                                    :max="1073741824"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col :span="24">
+                                            <a-form-item
+                                                :label="
+                                                    isVisible(
+                                                        'secure',
+                                                        formData.type,
+                                                    )
+                                                        ? '开启TLS'
+                                                        : '开启DTLS'
+                                                "
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'secure',
+                                                ]"
+                                                :rules="Rules.secure"
+                                            >
+                                                <a-radio-group
+                                                    v-model:value="
                                                         cluster.configuration
                                                             .secure
                                                     "
                                                 >
-                                                    <a-form-item
-                                                        label="证书"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'certId',
-                                                        ]"
-                                                        :rules="Rules.certId"
+                                                    <a-radio :value="true"
+                                                        >是</a-radio
                                                     >
-                                                        <a-select
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .certId
-                                                            "
-                                                            :options="sipList"
-                                                            placeholder="请选择证书"
-                                                            allowClear
-                                                            show-search
-                                                            :filter-option="
-                                                                filterOption
-                                                            "
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
+                                                    <a-radio :value="false"
+                                                        >否</a-radio
+                                                    >
+                                                </a-radio-group>
+                                            </a-form-item>
+                                        </a-col>
+
+                                        <a-col
+                                            :span="12"
+                                            v-if="cluster.configuration.secure"
+                                        >
+                                            <a-form-item
+                                                label="证书"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'certId',
+                                                ]"
+                                                :rules="Rules.certId"
+                                            >
+                                                <a-select
+                                                    v-model:value="
                                                         cluster.configuration
-                                                            .secure
+                                                            .certId
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        label="私钥别名"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'privateKeyAlias',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.privateKeyAlias
-                                                        "
+                                                    :options="certIdOptions"
+                                                    placeholder="请选择证书"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="cluster.configuration.secure"
+                                        >
+                                            <a-form-item
+                                                label="私钥别名"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'privateKeyAlias',
+                                                ]"
+                                                :rules="Rules.privateKeyAlias"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .privateKeyAlias
+                                                    "
+                                                    placeholder="请输入私钥别名"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="24"
+                                            v-if="
+                                                isVisible(
+                                                    'parserType',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserType',
+                                                ]"
+                                                :rules="Rules.parserType"
+                                            >
+                                                <div class="form-label">
+                                                    粘拆包规则
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
                                                     >
-                                                        <a-input
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .privateKeyAlias
-                                                            "
-                                                            placeholder="请输入私钥别名"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="24"
-                                                    v-if="
-                                                        isVisible(
-                                                            'parserType',
-                                                            formData.type,
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                处理TCP粘拆包的方式
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-select
+                                                    style="width: 48.5%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserType
+                                                    "
+                                                    :options="ParserTypeOptions"
+                                                    placeholder="请选择粘拆包规则"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    @change="
+                                                        changeParserType(
+                                                            cluster
+                                                                .configuration
+                                                                .parserType,
+                                                            index,
                                                         )
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserType',
-                                                        ]"
-                                                        :rules="
-                                                            Rules.parserType
-                                                        "
-                                                    >
-                                                        <div class="form-label">
-                                                            粘拆包规则
-                                                            <span
-                                                                class="form-label-required"
-                                                                >*</span
-                                                            >
-                                                            <a-tooltip>
-                                                                <template
-                                                                    #title
-                                                                >
-                                                                    <p>
-                                                                        处理TCP粘拆包的方式
-                                                                    </p>
-                                                                </template>
-                                                                <question-circle-outlined />
-                                                            </a-tooltip>
-                                                        </div>
-                                                        <a-select
-                                                            style="width: 48.5%"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserType
-                                                            "
-                                                            :options="
-                                                                ParserTypeOptions
-                                                            "
-                                                            placeholder="请选择粘拆包规则"
-                                                            allowClear
-                                                            show-search
-                                                            :filter-option="
-                                                                filterOption
-                                                            "
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
+                                                />
+                                            </a-form-item>
+                                        </a-col>
 
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'delimited',
-                                                            cluster
-                                                                .configuration
-                                                                .parserType,
-                                                        )
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'delimited',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="分隔符"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'delimited',
+                                                ]"
+                                                :rules="Rules.delimited"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .delimited
+                                                    "
+                                                    placeholder="请输入分隔符"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="24"
+                                            v-if="
+                                                isVisible(
+                                                    'lang',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                v-show="false"
+                                                label="脚本语言"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'lang',
+                                                ]"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .lang
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="24"
+                                            v-if="
+                                                isVisible(
+                                                    'script',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="解析脚本"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'script',
+                                                ]"
+                                                :rules="Rules.script"
+                                            >
+                                                <div
+                                                    style="
+                                                        width: 100%;
+                                                        height: 400px;
                                                     "
                                                 >
-                                                    <a-form-item
-                                                        label="分隔符"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserConfiguration',
-                                                            'delimited',
-                                                        ]"
-                                                        :rules="Rules.delimited"
-                                                    >
-                                                        <a-input
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserConfiguration
-                                                                    .delimited
-                                                            "
-                                                            placeholder="请输入分隔符"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="24"
-                                                    v-if="
-                                                        isVisible(
-                                                            'lang',
+                                                    <MonacoEditor
+                                                        theme="vs"
+                                                        v-model:modelValue="
                                                             cluster
                                                                 .configuration
-                                                                .parserType,
-                                                        )
+                                                                .parserConfiguration
+                                                                .script
+                                                        "
+                                                    />
+                                                </div>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'size',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="长度值"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'size',
+                                                ]"
+                                                :rules="Rules.size"
+                                            >
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .size
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        v-show="false"
-                                                        label="脚本语言"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserConfiguration',
-                                                            'lang',
-                                                        ]"
-                                                        :rules="Rules.lang"
-                                                    >
-                                                        <a-select
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserConfiguration
-                                                                    .lang
-                                                            "
-                                                            show-search
-                                                            :filter-option="
-                                                                filterOption
-                                                            "
-                                                        >
-                                                            <a-select-option
-                                                                :value="
-                                                                    cluster
-                                                                        .configuration
-                                                                        .parserType ===
-                                                                    'SCRIPT'
-                                                                        ? 'javascript'
-                                                                        : ''
-                                                                "
-                                                                >javascript</a-select-option
-                                                            >
-                                                        </a-select>
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="24"
-                                                    v-if="
-                                                        isVisible(
-                                                            'script',
-                                                            cluster
-                                                                .configuration
-                                                                .parserType,
-                                                        )
+                                                    placeholder="请输入长度值"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'length',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="长度"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'length',
+                                                ]"
+                                                :rules="Rules.length"
+                                            >
+                                                <a-select
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .length
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        label="解析脚本"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserConfiguration',
-                                                            'script',
-                                                        ]"
-                                                        :rules="Rules.script"
-                                                    >
-                                                        <a-input
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserConfiguration
-                                                                    .script
-                                                            "
-                                                            placeholder="请输入脚本"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'size',
-                                                            cluster
-                                                                .configuration
-                                                                .parserType,
-                                                        )
+                                                    :options="LengthOptions"
+                                                    placeholder="请选择长度"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        label="长度值"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserConfiguration',
-                                                            'size',
-                                                        ]"
-                                                        :rules="Rules.size"
-                                                    >
-                                                        <a-input-number
-                                                            style="width: 100%"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserConfiguration
-                                                                    .size
-                                                            "
-                                                            placeholder="请输入长度值"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'length',
-                                                            cluster
-                                                                .configuration
-                                                                .parserType,
-                                                        )
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'offset',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="偏移量"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'offset',
+                                                ]"
+                                                :rules="Rules.offset"
+                                            >
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .offset
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        label="长度"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserConfiguration',
-                                                            'length',
-                                                        ]"
-                                                        :rules="Rules.length"
-                                                    >
-                                                        <a-select
-                                                            style="width: 100%"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserConfiguration
-                                                                    .length
-                                                            "
-                                                            :options="
-                                                                LengthOptions
-                                                            "
-                                                            placeholder="请选择长度"
-                                                            allowClear
-                                                            show-search
-                                                            :filter-option="
-                                                                filterOption
-                                                            "
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'offset',
-                                                            cluster
-                                                                .configuration
-                                                                .parserType,
-                                                        )
+                                                    placeholder="请输入偏移量"
+                                                    :min="0"
+                                                    :max="65535"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'little',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="大小端"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'little',
+                                                ]"
+                                            >
+                                                <a-select
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .little
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        label="偏移量"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserConfiguration',
-                                                            'offset',
-                                                        ]"
-                                                        :rules="Rules.offset"
-                                                    >
-                                                        <a-input-number
-                                                            style="width: 100%"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserConfiguration
-                                                                    .offset
-                                                            "
-                                                            placeholder="请输入偏移量"
-                                                            :min="0"
-                                                            :max="65535"
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col
-                                                    :span="12"
-                                                    v-if="
-                                                        isVisible(
-                                                            'little',
-                                                            cluster
-                                                                .configuration
-                                                                .parserType,
-                                                        )
+                                                    :options="LittleOptions"
+                                                    placeholder="请选择大小端"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
                                                     "
-                                                >
-                                                    <a-form-item
-                                                        label="大小端"
-                                                        :name="[
-                                                            'cluster',
-                                                            index,
-                                                            'configuration',
-                                                            'parserConfiguration',
-                                                            'little',
-                                                        ]"
-                                                    >
-                                                        <a-select
-                                                            style="width: 100%"
-                                                            v-model:value="
-                                                                cluster
-                                                                    .configuration
-                                                                    .parserConfiguration
-                                                                    .little
-                                                            "
-                                                            :options="
-                                                                LittleOptions
-                                                            "
-                                                            placeholder="请选择大小端"
-                                                            allowClear
-                                                            show-search
-                                                            :filter-option="
-                                                                filterOption
-                                                            "
-                                                        />
-                                                    </a-form-item>
-                                                </a-col>
-                                            </a-row>
-                                        </a-collapse-panel>
-                                    </a-collapse>
-                                </div>
-                                <a-form-item v-if="!shareCluster">
-                                    <a-button
-                                        type="dashed"
-                                        block
-                                        @click="addCluster"
-                                    >
-                                        <PlusOutlined />
-                                        新增
-                                    </a-button>
-                                </a-form-item>
-                            </a-form>
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                    </a-row>
+                                </a-collapse-panel>
+                            </a-collapse>
+                        </div>
+                        <a-form-item v-if="!shareCluster">
+                            <a-button type="dashed" block @click="addCluster">
+                                <PlusOutlined />
+                                新增
+                            </a-button>
+                        </a-form-item>
+                    </a-form>
 
-                            <a-row :gutter="[24, 0]">
-                                <a-col :span="24">
-                                    <a-form-item
-                                        label="说明"
-                                        name="description"
-                                    >
-                                        <a-textarea
-                                            v-model:value="formData.description"
-                                            show-count
-                                            :maxlength="200"
-                                            :rows="4"
-                                        /> </a-form-item
-                                ></a-col>
-                            </a-row>
-                        </a-form>
-                    </div>
-                </div>
+                    <a-row :gutter="[24, 0]">
+                        <a-col :span="24">
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    v-model:value="formData.description"
+                                    show-count
+                                    :maxlength="200"
+                                    :rows="4"
+                                /> </a-form-item
+                        ></a-col>
+                    </a-row>
+                </a-form>
             </div>
-            <div class="steps-action">
+            <div class="footer">
                 <a-button
                     v-if="view === 'false'"
                     type="primary"
                     @click="saveData"
+                    :loading="loading"
                 >
                     保存
                 </a-button>
@@ -1095,30 +1000,26 @@
 </template>
 
 <script lang="ts" setup name="AccessNetwork">
-import { message, Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
-import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
 import {
     DeleteOutlined,
     PlusOutlined,
     QuestionCircleOutlined,
-    InfoCircleOutlined,
 } from '@ant-design/icons-vue';
-import { update, save } from '@/api/link/accessConfig';
 import {
-    // update,
-    // save,
+    update,
+    save,
+    detail,
     resourcesCurrent,
-    resourceClusters,
     supports,
+    certificates,
 } from '@/api/link/type';
 import {
     FormStates,
     FormStates2,
-    Configuration,
     ParserTypeOptions,
     isVisible,
-    Validator,
     LengthOptions,
     LittleOptions,
     Rules,
@@ -1126,39 +1027,30 @@ import {
     UDPList,
 } from '../data';
 import { cloneDeep } from 'lodash-es';
-import type { ConfigurationType, FormDataType, FormData2Type } from '../type';
+import type { FormData2Type } from '../type';
 import { Store } from 'jetlinks-store';
+import MonacoEditor from '@/components/MonacoEditor/index.vue';
 
 const route = useRoute();
 const view = route.query.view as string;
 const id = route.params.id as string;
 
 const activeKey = ref(['1']);
-const clientHeight = document.body.clientHeight;
 
+const loading = ref(false);
 const formRef1 = ref<FormInstance>();
 const formRef2 = ref<FormInstance>();
-const useForm = Form.useForm;
+const shareCluster = ref(true);
 
-let formData = ref(FormStates);
+const formData = ref(FormStates);
 
-let params = {
-    configuration: {},
-};
-let sipListConst: any = [];
-const sipListOption = ref([]);
-const sipList = ref([]);
-const sipListIndex: any = ref([]);
-const clustersList = ref([]);
+const hostOptionsIndex: any = ref([]);
+const clustersListIndex: any = ref([]);
 const typeOptions = ref([]);
-const portOptions = ref([]);
+const portOptionsIndex: any = ref([]);
 let portOptionsConst: any = [];
+const certIdOptions = ref([]);
 
-// <{ cluster: Form2[] }>
-
-// const dynamicValidateForm = reactive<{ cluster: FormData2Type[] }>(
-//     initDynamicValidateForm(),
-// );
 const dynamicValidateForm = reactive<{ cluster: FormData2Type[] }>({
     cluster: [{ ...cloneDeep(FormStates2), id: '1' }],
 });
@@ -1187,47 +1079,6 @@ const filterPortOption = (input: string, option: any) => {
     return JSON.stringify(option.label).indexOf(input) >= 0;
 };
 
-const handleChangeForm2Sip = (index: number) => {
-    dynamicValidateForm.cluster[index].configuration.port = undefined;
-    const value = dynamicValidateForm.cluster[index].configuration.host;
-    sipListIndex.value[index] = sipListConst
-        .find((i: any) => i.host === value)
-        ?.portList.map((i: any) => {
-            return {
-                value: JSON.stringify({
-                    host: value,
-                    port: i.port,
-                }),
-                label: `${i.transports.join('/')} (${i.port})`,
-            };
-        });
-};
-
-const saveData = async () => {
-    let data2 = await formRef2.value?.validate();
-};
-
-const next = async () => {
-    let data2 = await formRef2.value?.validate();
-};
-
-const getSupports = async () => {
-    const res = await supports();
-
-    typeOptions.value = res.result.map((item) => ({
-        label: item.name,
-        value: item.id,
-    }));
-
-    // supports().then((resp) =>
-    //   resp.result?.map((item: any) => ({
-    //     label: item.name,
-    //     value: item.id,
-    //   })),
-    // );
-};
-getSupports();
-
 const filterConfigByType = (data, type: string) => {
     let _temp = type;
     if (TCPList.includes(type)) {
@@ -1246,91 +1097,185 @@ const filterConfigByType = (data, type: string) => {
         return i;
     });
 };
-// const getResourceById = async (id, type) =>
-//   Service.getResourcesClustersById(id).then((resp) => filterConfigByType(resp.result, type))
 
-onMounted(() => {
-    resourcesCurrent().then((resp) => {
-        if (resp.status === 200) {
-            portOptionsConst = resp.result;
-            Store.set('configRef', resp.result);
-            const type = formData.value.type;
-            const host = dynamicValidateForm.cluster[0].configuration.host;
-
-            const _port = filterConfigByType(resp.result, type);
-            const _host = _port.find((item) => item.host === host);
-
-            portOptions.value = _host?.ports?.map((p) => ({
-                label: p,
-                value: p,
-            }));
-
-            // sipListConst = resp.result;
-            // sipListOption.value = sipListConst.map((i) => ({
-            //     value: i.host,
-            //     label: i.host,
-            // }));
-
-            // sipList.value = sipListConst
-            //     .find((i) => i.host === '0.0.0.0')
-            //     ?.portList.map((i) => {
-            //         return {
-            //             value: JSON.stringify({
-            //                 host: '0.0.0.0',
-            //                 port: i.port,
-            //             }),
-            //             label: `${i.transports.join('/')} (${i.port})`,
-            //         };
-            //     });
-        }
-    });
-
-    getClusters().then((resp) => {
-        if (resp.status === 200) {
-            const list = resp.result.map((i) => ({
-                value: i.id,
-                label: i.name,
-            }));
-            clustersList.value = list;
-        }
-    });
-
-    if (id !== ':id') {
-        // formData.value = props.data.configuration;
-        // formData.value = {
-        //     name: props.data.name,
-        //     description: props.data?.description || '',
-        // };
-    }
-});
-
-const shareCluster = ref(true);
+const getPortOptions = (portOptions: object, index = 0) => {
+    if (!portOptions) return;
+    const type = formData.value.type;
+    const host = dynamicValidateForm.cluster[index].configuration.host;
+    const _port = filterConfigByType(cloneDeep(portOptions), type);
+    const _host = _port.find((item) => item.host === host);
+    portOptionsIndex.value[index] = _host?.ports?.map((p) => ({
+        label: p,
+        value: p,
+    }));
+};
 
 const changeShareCluster = (value: boolean) => {
     shareCluster.value = value;
     activeKey.value = ['1'];
-    console.log(1112, shareCluster.value);
-
     dynamicValidateForm.cluster = [{ ...cloneDeep(FormStates2), id: '1' }];
 };
 
 const changeType = (value: string) => {
     dynamicValidateForm.cluster = [{ ...cloneDeep(FormStates2), id: '1' }];
+    if (value !== 'MQTT_CLIENT') {
+        const { configuration } = dynamicValidateForm.cluster[0];
+        value && (configuration.host = '0.0.0.0');
+    }
 };
 
+const updateClustersListIndex = () => {
+    const { cluster } = dynamicValidateForm;
+    const filters = cluster?.map((item) => item.serverId);
+    const newConfigRef = Store.get('configRef')?.filter(
+        (item) => !filters.includes(item.clusterNodeId),
+    );
+    cluster.forEach((item, index) => {
+        !item.serverId &&
+            (clustersListIndex.value[index] = newConfigRef?.map((i) => ({
+                value: i.clusterNodeId,
+                lable: i.clusterNodeId,
+            })));
+    });
+};
+
+const changeServerId = (value: string | undefined, index: number) => {
+    const { configuration } = dynamicValidateForm.cluster[index];
+    configuration.host = undefined;
+    configuration.port = undefined;
+    const checked = cloneDeep(portOptionsConst).find(
+        (i) => i.clusterNodeId === value,
+    );
+    const checkedHost = [{ value: checked.host, lable: checked.host }];
+    hostOptionsIndex.value[index] = checked ? checkedHost : [];
+    updateClustersListIndex();
+};
+const changeHost = (
+    serverId: string | undefined,
+    value: string | undefined,
+    index: number,
+) => {
+    const { configuration } = dynamicValidateForm.cluster[index];
+    configuration.port = undefined;
+    const checked = cloneDeep(portOptionsConst).find(
+        (i) => i.clusterNodeId === serverId && i.host === value,
+    );
+    checked && getPortOptions([checked], index);
+};
+
+const changeParserType = (value: string | undefined, index: number) => {
+    const { parserConfiguration } =
+        dynamicValidateForm.cluster[index].configuration;
+    value === 'SCRIPT' ? (parserConfiguration.lang = 'javascript') : '';
+};
+
+const saveData = async () => {
+    await formRef1.value?.validate();
+    const formRef2Data = await formRef2.value?.validate();
+
+    const { configuration } = formRef2Data?.cluster[0];
+    const params = shareCluster.value
+        ? { ...formData.value, configuration }
+        : { ...formData.value, ...formRef2Data };
+
+    loading.value = true;
+    const resp =
+        id === ':id' ? await save(params) : await update({ ...params, id });
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        history.back();
+    }
+    loading.value = false;
+};
+
+const getSupports = async () => {
+    const res = await supports();
+    typeOptions.value = res.result.map((item) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+
+const getCertificates = async () => {
+    const resp = await certificates();
+    certIdOptions.value = resp.result.map((i) => ({
+        value: i.id,
+        label: i.name,
+    }));
+};
+
+const getResourcesCurrent = () => {
+    resourcesCurrent().then((resp) => {
+        if (resp.status === 200) {
+            portOptionsConst = resp.result;
+            Store.set('configRef', resp.result);
+            getPortOptions(portOptionsConst);
+        }
+    });
+};
+
+const getDetail = () => {
+    if (id !== ':id') {
+        loading.value = true;
+        detail(id).then((resp) => {
+            const result = resp.result;
+            const { configuration, cluster } = result;
+            formData.value = { ...result };
+            shareCluster.value = result.shareCluster;
+            activeKey.value = ['1'];
+            if (result.shareCluster) {
+                dynamicValidateForm.cluster[0].configuration = configuration;
+            } else {
+                dynamicValidateForm.cluster = cluster;
+            }
+            loading.value = false;
+        });
+    }
+};
+
+onMounted(() => {
+    getSupports();
+    getCertificates();
+    getResourcesCurrent();
+    getDetail();
+});
+
 watch(
     () => formData.value.shareCluster,
-
     (value) => {
-        const { configuration } = dynamicValidateForm.cluster[0];
-        if (value) configuration.host = '0.0.0.0';
+        const { cluster } = dynamicValidateForm;
+        if (cluster) {
+            value && (cluster[0].configuration.host = '0.0.0.0');
+            updateClustersListIndex();
+        }
+    },
+    { deep: true },
+    // { deep: true, immediate: true },
+);
+
+watch(
+    () => shareCluster.value,
+    (value) => {
+        formData.value.shareCluster = value;
+        value
+            ? getPortOptions(Store.get('configRef'))
+            : (portOptionsIndex.value[0] = []);
+        updateClustersListIndex();
+    },
+    { deep: true },
+    // { deep: true, immediate: true },
+);
+watch(
+    () => dynamicValidateForm.cluster?.length,
+    () => {
+        updateClustersListIndex();
     },
     { deep: true, immediate: true },
 );
 </script>
 
 <style lang="less" scoped>
-.steps-box {
+.container {
     width: 70%;
     min-height: 400px;
     .card-item {
@@ -1345,14 +1290,12 @@ watch(
         overflow-x: hidden;
     }
 }
-.steps-action {
+.footer {
     width: 100%;
     margin-top: 24px;
-    // margin-left: 20px;
 }
 
 .form-item1 {
-    // background-color: #f6f6f6;
     border: 1px solid #d9d9d9;
     padding: 10px;
     margin-bottom: 20px;
diff --git a/src/views/link/Type/data.ts b/src/views/link/Type/data.ts
index f8ebaaf3..e0fe7816 100644
--- a/src/views/link/Type/data.ts
+++ b/src/views/link/Type/data.ts
@@ -10,7 +10,7 @@ export const Configuration = {
     username: '',
     password: '',
     topicPrefix: '',
-    maxMessageSize: '',
+    maxMessageSize: 8192,
     certId: undefined,
     privateKeyAlias: '',
     clientId: '',
@@ -76,7 +76,6 @@ export const VisibleData = {
     length: ['LENGTH_FIELD'],
     offset: ['LENGTH_FIELD'],
     little: ['LENGTH_FIELD'],
-    secureSpan12: ['MQTT_CLIENT', 'MQTT_SERVER'],
 };
 
 export const ParserTypeOptions = [
@@ -226,8 +225,8 @@ export const Rules = {
     ],
     maxMessageSize: [
         {
-            max: 64,
-            message: '最大可输入64个字符',
+            required: true,
+            message: '请输入最大消息长度',
         },
     ],
     secure: [
diff --git a/src/views/link/Type/type.d.ts b/src/views/link/Type/type.d.ts
index ff456664..87664902 100644
--- a/src/views/link/Type/type.d.ts
+++ b/src/views/link/Type/type.d.ts
@@ -10,7 +10,7 @@ export interface ConfigurationType {
     username: string;
     password: string;
     topicPrefix: string;
-    maxMessageSize: string;
+    maxMessageSize: string | number;
     certId: string | undefined;
     privateKeyAlias: string;
     clientId: string;
@@ -21,7 +21,7 @@ export interface ConfigurationType {
         size: string;
         length: string;
         offset: string;
-        little: string | boolean;
+        little: string | boolean | undefined;
     };
 }
 
diff --git a/src/views/system/Api/components/ApiDoes.vue b/src/views/system/Api/components/ApiDoes.vue
new file mode 100644
index 00000000..df806b0c
--- /dev/null
+++ b/src/views/system/Api/components/ApiDoes.vue
@@ -0,0 +1,316 @@
+<template>
+    <div class="api-does-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+            </div>
+        </div>
+
+        <p>
+            <span class="label">请求数据类型</span>
+            <span>{{
+                getContent(selectApi.requestBody) ||
+                'application/x-www-form-urlencoded'
+            }}</span>
+            <span class="label">响应数据类型</span>
+            <span>{{ `["/"]` }}</span>
+        </p>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="requestCard.columns"
+                    :dataSource="requestCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                    <template #required="slotProps">
+                        <span>{{ Boolean(slotProps.row.required) + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.row.schema.type }}</span>
+                    </template>
+                </JTable>
+            </div>
+        </div>
+        <div class="api-card">
+            <h5>响应状态</h5>
+            <div class="content">
+                <JTable
+                    :columns="responseStatusCard.columns"
+                    :dataSource="responseStatusCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+
+                <a-tabs v-model:activeKey="responseStatusCard.activeKey">
+                    <a-tab-pane
+                        :key="key"
+                        :tab="key"
+                        v-for="key in tabs"
+                    ></a-tab-pane>
+                </a-tabs>
+            </div>
+        </div>
+
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="respParamsCard.columns"
+                    :dataSource="respParamsCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+    schemas: {
+        type: Object,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+
+type tableCardType = {
+    columns: object[];
+    tableData: object[];
+    activeKey?: any;
+    getData?: any;
+};
+const requestCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'description',
+            key: 'description',
+        },
+        {
+            title: '请求类型',
+            dataIndex: 'in',
+            key: 'in',
+        },
+        {
+            title: '是否必须',
+            dataIndex: 'required',
+            key: 'required',
+            scopedSlots: true,
+        },
+        {
+            title: '参数类型',
+            dataIndex: 'type',
+            key: 'type',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        requestCard.tableData = props.selectApi.parameters;
+    },
+});
+const responseStatusCard = reactive<tableCardType>({
+    activeKey: '',
+    columns: [
+        {
+            title: '状态码',
+            dataIndex: 'code',
+            key: 'code',
+        },
+        {
+            title: '说明',
+            dataIndex: 'desc',
+            key: 'desc',
+        },
+        {
+            title: 'schema',
+            dataIndex: 'schema',
+            key: 'schema',
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        if (!Object.keys(props.selectApi.responses).length)
+            return (responseStatusCard.tableData = []);
+
+        const tableData = <any>[];
+        Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
+            const desc = item[1].description;
+            const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
+
+            tableData.push({
+                code: item[0],
+                desc,
+                schema: schema && schema.pop(),
+            });
+        });
+        responseStatusCard.activeKey = tableData[0]?.code;
+        responseStatusCard.tableData = tableData;
+    },
+});
+const tabs = computed(() =>
+    responseStatusCard.tableData
+        .map((item: any) => item.code + '')
+        .filter((code: string) => code !== '400'),
+);
+const respParamsCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名称',
+            dataIndex: 'paramsName',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'desc',
+        },
+        {
+            title: '类型',
+            dataIndex: 'paramsType',
+        },
+    ],
+    tableData: [],
+    getData: (code: string) => {
+        type schemaObjType = {
+            paramsName: string;
+            paramsType: string;
+            desc: string;
+            children?: schemaObjType[];
+        };
+
+        const schemaName = responseStatusCard.tableData.find(
+            (item: any) => item.code === code,
+        )?.schema;
+        const schemas = toRaw(props.schemas);
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            const basicType = ['string', 'integer', 'boolean'];
+            Object.entries(schema.properties).forEach((item: [string, any]) => {
+                const paramsType =
+                    item[1].type ||
+                    (item[1].$ref && item[1].$ref.split('/').pop()) ||
+                    (item[1].items && item[1].items.$ref.split('/').pop()) ||
+                    '';
+                const schemaObj: schemaObjType = {
+                    paramsName: item[0],
+                    paramsType,
+                    desc: item[1].description || '',
+                };
+                if (!basicType.includes(paramsType))
+                    schemaObj.children = findData(paramsType);
+                result.push(schemaObj);
+            });
+            console.log(result);
+
+            return result;
+        }
+
+        respParamsCard.tableData = findData(schemaName);
+        // console.log(respParamsCard.tableData);
+    },
+});
+
+const getContent = (data: any) => {
+    if (data && data.content) {
+        return Object.keys(data.content || {})[0];
+    }
+    return '';
+};
+onMounted(() => {
+    requestCard.getData();
+    responseStatusCard.getData();
+});
+watch(
+    () => props.selectApi,
+    () => {
+        requestCard.getData();
+        responseStatusCard.getData();
+    },
+);
+
+watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    n[0] && respParamsCard.getData(n[0]);
+});
+</script>
+
+<style lang="less" scoped>
+.api-does-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+            margin: 24px 0;
+        }
+    }
+    p {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+
+        .label {
+            font-weight: bold;
+        }
+    }
+    .api-card {
+        margin-top: 24px;
+        h5 {
+            position: relative;
+            padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: ' ';
+            }
+        }
+        .content {
+            padding-left: 10px;
+
+            :deep(.jtable-body) {
+                padding: 0;
+
+                .jtable-body-header {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Api/components/ApiTest.vue b/src/views/system/Api/components/ApiTest.vue
new file mode 100644
index 00000000..46c87dbe
--- /dev/null
+++ b/src/views/system/Api/components/ApiTest.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="api-test-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+                <span class="send">发送</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+</script>
+
+<style lang="less" scoped>
+.api-test-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+
+            .send {
+                width: 65px;
+                padding: 4px 15px;
+                font-size: 14px;
+                color: #fff;
+                background-color: #1890ff;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Api/components/ChooseApi.vue b/src/views/system/Api/components/ChooseApi.vue
new file mode 100644
index 00000000..bb6e5548
--- /dev/null
+++ b/src/views/system/Api/components/ChooseApi.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="choose-api-container">
+        <JTable
+            :columns="columns"
+            :dataSource="props.tableData"
+            :rowSelection="rowSelection"
+            noPagination
+            model="TABLE"
+        >
+            <template #url="slotProps">
+                <span
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="jump(slotProps.row)"
+                    >{{ slotProps.row.url }}</span
+                >
+            </template>
+        </JTable>
+
+        <a-button type="primary">保存</a-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TableProps } from 'ant-design-vue';
+
+const emits = defineEmits(['update:clickApi'])
+const props = defineProps({
+    tableData: Array,
+    clickApi: Object
+});
+
+const columns = [
+    {
+        title: 'API',
+        dataIndex: 'url',
+        key: 'url',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'summary',
+        key: 'summary',
+    },
+];
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+};
+
+const jump = (row:object) => {
+    emits('update:clickApi',row)
+};
+</script>
+
+<style lang="less" scoped>
+.choose-api-container {
+    height: 100%;
+    
+    :deep(.jtable-body-header) {
+        display: none !important;
+    }
+}
+
+</style>
diff --git a/src/views/system/Api/components/InputCard.vue b/src/views/system/Api/components/InputCard.vue
new file mode 100644
index 00000000..c1742737
--- /dev/null
+++ b/src/views/system/Api/components/InputCard.vue
@@ -0,0 +1,35 @@
+<template>
+    <span class="input-card-container" :class="props.value">
+        {{ props.value?.toLocaleUpperCase() }}
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    value: String,
+});
+</script>
+
+<style lang="less" scoped>
+.input-card-container {
+    padding: 4px 15px;
+    font-size: 14px;
+    color: #fff;
+
+    &.get {
+        background-color: #1890ff;
+    }
+    &.put {
+        background-color: #fa8c16;
+    }
+    &.post {
+        background-color: #52c41a;
+    }
+    &.delete {
+        background-color: #f5222d;
+    }
+    &.patch {
+        background-color: #a0d911;
+    }
+}
+</style>
diff --git a/src/views/system/Api/components/LeftTree.vue b/src/views/system/Api/components/LeftTree.vue
new file mode 100644
index 00000000..598887f3
--- /dev/null
+++ b/src/views/system/Api/components/LeftTree.vue
@@ -0,0 +1,96 @@
+<template>
+    <a-tree
+        :tree-data="treeData"
+        @select="clickSelectItem"
+        showLine
+        class="left-tree-container"
+    >
+        <template #title="{ name }">
+            {{ name }}
+        </template>
+    </a-tree>
+</template>
+
+<script setup lang="ts">
+import { TreeProps } from 'ant-design-vue';
+
+import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+import { treeNodeTpye } from '../typing';
+
+const emits = defineEmits(['select']);
+
+const treeData = ref<TreeProps['treeData']>([]);
+
+const getTreeData = () => {
+    let tree: treeNodeTpye[] = [];
+    getTreeOne_api().then((resp: any) => {
+        tree = resp.urls.map((item: any) => ({
+            ...item,
+            key: item.url,
+        }));
+        const allPromise = tree.map((item) => getTreeTwo_api(item.name));
+        Promise.all(allPromise).then((values) => {
+            values.forEach((item: any, i) => {
+                tree[i].children = combData(item?.paths);
+                tree[i].schemas = item.components.schemas
+            });
+            treeData.value = tree;
+        });
+    });
+};
+const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
+    emits('select', node.node.dataRef, node.node?.parent.node.schemas);
+};
+
+onMounted(() => {
+    getTreeData();
+});
+
+const combData = (dataSource: object) => {
+    const apiList: treeNodeTpye[] = [];
+    const keys = Object.keys(dataSource);
+
+    keys.forEach((key) => {
+        const method = Object.keys(dataSource[key] || {})[0];
+        const name = dataSource[key][method].tags[0];
+        let apiObj: treeNodeTpye | undefined = apiList.find(
+            (item) => item.name === name,
+        );
+        if (apiObj) {
+            apiObj.apiList?.push({
+                url: key,
+                method: dataSource[key],
+            });
+        } else {
+            apiObj = {
+                name,
+                key: name,
+                apiList: [
+                    {
+                        url: key,
+                        method: dataSource[key],
+                    },
+                ],
+            };
+            apiList.push(apiObj);
+        }
+    });
+
+    return apiList;
+};
+</script>
+
+<style lang="less">
+.left-tree-container {
+    border-right: 1px solid #e9e9e9;
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+    .ant-tree-list {
+        .ant-tree-list-holder-inner {
+            .ant-tree-switcher-noop {
+                display: none !important;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Api/index.vue b/src/views/system/Api/index.vue
new file mode 100644
index 00000000..1d4fce58
--- /dev/null
+++ b/src/views/system/Api/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <a-card class="api-page-container">
+        api
+        <a-row :gutter="24">
+            <a-col :span="5">
+                <LeftTree @select="treeSelect" />
+            </a-col>
+            <a-col :span="19">
+                <ChooseApi
+                    v-show="!selectedApi.url"
+                    v-model:click-api="selectedApi"
+                    :table-data="tableData"
+                />
+
+                <div
+                    class="api-details"
+                    v-show="selectedApi.url && tableData.length > 0"
+                >
+                    <a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
+                        >返回</a-button
+                    >
+                    <a-tabs v-model:activeKey="activeKey" type="card">
+                        <a-tab-pane key="does" tab="文档">
+                            <ApiDoes :select-api="selectedApi" :schemas="schemas" />
+                        </a-tab-pane>
+                        <a-tab-pane key="test" tab="调试">
+                            <ApiTest :select-api="selectedApi" />
+                        </a-tab-pane>
+                    </a-tabs>
+                </div>
+            </a-col>
+        </a-row>
+    </a-card>
+</template>
+
+<script setup lang="ts" name="apiPage">
+import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
+import LeftTree from './components/LeftTree.vue';
+import ChooseApi from './components/ChooseApi.vue';
+import ApiDoes from './components/ApiDoes.vue';
+import ApiTest from './components/ApiTest.vue';
+
+const tableData = ref([]);
+const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
+    schemas.value = nodeSchemas
+    if (!node.apiList) return;
+    const apiList: apiObjType[] = node.apiList as apiObjType[];
+    const table: any = [];
+    // 将对象形式的数据转换为表格需要的形式
+    apiList?.forEach((apiItem) => {
+        const { method, url } = apiItem;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                    method: key,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
+
+const activeKey = ref('does');
+const schemas = ref({});
+const initSelectedApi:apiDetailsType = {
+    url: '',
+    method: '',
+    summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {}
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+watch(tableData, () => (selectedApi.value = initSelectedApi));
+</script>
+
+<style scoped>
+.api-page-container {
+    height: 100%;
+}
+</style>
diff --git a/src/views/system/apiPage/index.d.ts b/src/views/system/Api/typing.d.ts
similarity index 100%
rename from src/views/system/apiPage/index.d.ts
rename to src/views/system/Api/typing.d.ts
diff --git a/src/views/system/Apply/Api/components/ApiDoes.vue b/src/views/system/Apply/Api/components/ApiDoes.vue
new file mode 100644
index 00000000..df806b0c
--- /dev/null
+++ b/src/views/system/Apply/Api/components/ApiDoes.vue
@@ -0,0 +1,316 @@
+<template>
+    <div class="api-does-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+            </div>
+        </div>
+
+        <p>
+            <span class="label">请求数据类型</span>
+            <span>{{
+                getContent(selectApi.requestBody) ||
+                'application/x-www-form-urlencoded'
+            }}</span>
+            <span class="label">响应数据类型</span>
+            <span>{{ `["/"]` }}</span>
+        </p>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="requestCard.columns"
+                    :dataSource="requestCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                    <template #required="slotProps">
+                        <span>{{ Boolean(slotProps.row.required) + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.row.schema.type }}</span>
+                    </template>
+                </JTable>
+            </div>
+        </div>
+        <div class="api-card">
+            <h5>响应状态</h5>
+            <div class="content">
+                <JTable
+                    :columns="responseStatusCard.columns"
+                    :dataSource="responseStatusCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+
+                <a-tabs v-model:activeKey="responseStatusCard.activeKey">
+                    <a-tab-pane
+                        :key="key"
+                        :tab="key"
+                        v-for="key in tabs"
+                    ></a-tab-pane>
+                </a-tabs>
+            </div>
+        </div>
+
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="respParamsCard.columns"
+                    :dataSource="respParamsCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+    schemas: {
+        type: Object,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+
+type tableCardType = {
+    columns: object[];
+    tableData: object[];
+    activeKey?: any;
+    getData?: any;
+};
+const requestCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'description',
+            key: 'description',
+        },
+        {
+            title: '请求类型',
+            dataIndex: 'in',
+            key: 'in',
+        },
+        {
+            title: '是否必须',
+            dataIndex: 'required',
+            key: 'required',
+            scopedSlots: true,
+        },
+        {
+            title: '参数类型',
+            dataIndex: 'type',
+            key: 'type',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        requestCard.tableData = props.selectApi.parameters;
+    },
+});
+const responseStatusCard = reactive<tableCardType>({
+    activeKey: '',
+    columns: [
+        {
+            title: '状态码',
+            dataIndex: 'code',
+            key: 'code',
+        },
+        {
+            title: '说明',
+            dataIndex: 'desc',
+            key: 'desc',
+        },
+        {
+            title: 'schema',
+            dataIndex: 'schema',
+            key: 'schema',
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        if (!Object.keys(props.selectApi.responses).length)
+            return (responseStatusCard.tableData = []);
+
+        const tableData = <any>[];
+        Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
+            const desc = item[1].description;
+            const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
+
+            tableData.push({
+                code: item[0],
+                desc,
+                schema: schema && schema.pop(),
+            });
+        });
+        responseStatusCard.activeKey = tableData[0]?.code;
+        responseStatusCard.tableData = tableData;
+    },
+});
+const tabs = computed(() =>
+    responseStatusCard.tableData
+        .map((item: any) => item.code + '')
+        .filter((code: string) => code !== '400'),
+);
+const respParamsCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名称',
+            dataIndex: 'paramsName',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'desc',
+        },
+        {
+            title: '类型',
+            dataIndex: 'paramsType',
+        },
+    ],
+    tableData: [],
+    getData: (code: string) => {
+        type schemaObjType = {
+            paramsName: string;
+            paramsType: string;
+            desc: string;
+            children?: schemaObjType[];
+        };
+
+        const schemaName = responseStatusCard.tableData.find(
+            (item: any) => item.code === code,
+        )?.schema;
+        const schemas = toRaw(props.schemas);
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            const basicType = ['string', 'integer', 'boolean'];
+            Object.entries(schema.properties).forEach((item: [string, any]) => {
+                const paramsType =
+                    item[1].type ||
+                    (item[1].$ref && item[1].$ref.split('/').pop()) ||
+                    (item[1].items && item[1].items.$ref.split('/').pop()) ||
+                    '';
+                const schemaObj: schemaObjType = {
+                    paramsName: item[0],
+                    paramsType,
+                    desc: item[1].description || '',
+                };
+                if (!basicType.includes(paramsType))
+                    schemaObj.children = findData(paramsType);
+                result.push(schemaObj);
+            });
+            console.log(result);
+
+            return result;
+        }
+
+        respParamsCard.tableData = findData(schemaName);
+        // console.log(respParamsCard.tableData);
+    },
+});
+
+const getContent = (data: any) => {
+    if (data && data.content) {
+        return Object.keys(data.content || {})[0];
+    }
+    return '';
+};
+onMounted(() => {
+    requestCard.getData();
+    responseStatusCard.getData();
+});
+watch(
+    () => props.selectApi,
+    () => {
+        requestCard.getData();
+        responseStatusCard.getData();
+    },
+);
+
+watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    n[0] && respParamsCard.getData(n[0]);
+});
+</script>
+
+<style lang="less" scoped>
+.api-does-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+            margin: 24px 0;
+        }
+    }
+    p {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+
+        .label {
+            font-weight: bold;
+        }
+    }
+    .api-card {
+        margin-top: 24px;
+        h5 {
+            position: relative;
+            padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: ' ';
+            }
+        }
+        .content {
+            padding-left: 10px;
+
+            :deep(.jtable-body) {
+                padding: 0;
+
+                .jtable-body-header {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Apply/Api/components/ApiTest.vue b/src/views/system/Apply/Api/components/ApiTest.vue
new file mode 100644
index 00000000..46c87dbe
--- /dev/null
+++ b/src/views/system/Apply/Api/components/ApiTest.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="api-test-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+                <span class="send">发送</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+</script>
+
+<style lang="less" scoped>
+.api-test-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+
+            .send {
+                width: 65px;
+                padding: 4px 15px;
+                font-size: 14px;
+                color: #fff;
+                background-color: #1890ff;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Apply/Api/components/ChooseApi.vue b/src/views/system/Apply/Api/components/ChooseApi.vue
new file mode 100644
index 00000000..bb6e5548
--- /dev/null
+++ b/src/views/system/Apply/Api/components/ChooseApi.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="choose-api-container">
+        <JTable
+            :columns="columns"
+            :dataSource="props.tableData"
+            :rowSelection="rowSelection"
+            noPagination
+            model="TABLE"
+        >
+            <template #url="slotProps">
+                <span
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="jump(slotProps.row)"
+                    >{{ slotProps.row.url }}</span
+                >
+            </template>
+        </JTable>
+
+        <a-button type="primary">保存</a-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TableProps } from 'ant-design-vue';
+
+const emits = defineEmits(['update:clickApi'])
+const props = defineProps({
+    tableData: Array,
+    clickApi: Object
+});
+
+const columns = [
+    {
+        title: 'API',
+        dataIndex: 'url',
+        key: 'url',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'summary',
+        key: 'summary',
+    },
+];
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+};
+
+const jump = (row:object) => {
+    emits('update:clickApi',row)
+};
+</script>
+
+<style lang="less" scoped>
+.choose-api-container {
+    height: 100%;
+    
+    :deep(.jtable-body-header) {
+        display: none !important;
+    }
+}
+
+</style>
diff --git a/src/views/system/Apply/Api/components/InputCard.vue b/src/views/system/Apply/Api/components/InputCard.vue
new file mode 100644
index 00000000..c1742737
--- /dev/null
+++ b/src/views/system/Apply/Api/components/InputCard.vue
@@ -0,0 +1,35 @@
+<template>
+    <span class="input-card-container" :class="props.value">
+        {{ props.value?.toLocaleUpperCase() }}
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    value: String,
+});
+</script>
+
+<style lang="less" scoped>
+.input-card-container {
+    padding: 4px 15px;
+    font-size: 14px;
+    color: #fff;
+
+    &.get {
+        background-color: #1890ff;
+    }
+    &.put {
+        background-color: #fa8c16;
+    }
+    &.post {
+        background-color: #52c41a;
+    }
+    &.delete {
+        background-color: #f5222d;
+    }
+    &.patch {
+        background-color: #a0d911;
+    }
+}
+</style>
diff --git a/src/views/system/Apply/Api/components/LeftTree.vue b/src/views/system/Apply/Api/components/LeftTree.vue
new file mode 100644
index 00000000..598887f3
--- /dev/null
+++ b/src/views/system/Apply/Api/components/LeftTree.vue
@@ -0,0 +1,96 @@
+<template>
+    <a-tree
+        :tree-data="treeData"
+        @select="clickSelectItem"
+        showLine
+        class="left-tree-container"
+    >
+        <template #title="{ name }">
+            {{ name }}
+        </template>
+    </a-tree>
+</template>
+
+<script setup lang="ts">
+import { TreeProps } from 'ant-design-vue';
+
+import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+import { treeNodeTpye } from '../typing';
+
+const emits = defineEmits(['select']);
+
+const treeData = ref<TreeProps['treeData']>([]);
+
+const getTreeData = () => {
+    let tree: treeNodeTpye[] = [];
+    getTreeOne_api().then((resp: any) => {
+        tree = resp.urls.map((item: any) => ({
+            ...item,
+            key: item.url,
+        }));
+        const allPromise = tree.map((item) => getTreeTwo_api(item.name));
+        Promise.all(allPromise).then((values) => {
+            values.forEach((item: any, i) => {
+                tree[i].children = combData(item?.paths);
+                tree[i].schemas = item.components.schemas
+            });
+            treeData.value = tree;
+        });
+    });
+};
+const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
+    emits('select', node.node.dataRef, node.node?.parent.node.schemas);
+};
+
+onMounted(() => {
+    getTreeData();
+});
+
+const combData = (dataSource: object) => {
+    const apiList: treeNodeTpye[] = [];
+    const keys = Object.keys(dataSource);
+
+    keys.forEach((key) => {
+        const method = Object.keys(dataSource[key] || {})[0];
+        const name = dataSource[key][method].tags[0];
+        let apiObj: treeNodeTpye | undefined = apiList.find(
+            (item) => item.name === name,
+        );
+        if (apiObj) {
+            apiObj.apiList?.push({
+                url: key,
+                method: dataSource[key],
+            });
+        } else {
+            apiObj = {
+                name,
+                key: name,
+                apiList: [
+                    {
+                        url: key,
+                        method: dataSource[key],
+                    },
+                ],
+            };
+            apiList.push(apiObj);
+        }
+    });
+
+    return apiList;
+};
+</script>
+
+<style lang="less">
+.left-tree-container {
+    border-right: 1px solid #e9e9e9;
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+    .ant-tree-list {
+        .ant-tree-list-holder-inner {
+            .ant-tree-switcher-noop {
+                display: none !important;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Apply/Api/index.vue b/src/views/system/Apply/Api/index.vue
new file mode 100644
index 00000000..990c0d77
--- /dev/null
+++ b/src/views/system/Apply/Api/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <a-card class="api-page-container">
+        apply/api
+        <a-row :gutter="24">
+            <a-col :span="5">
+                <LeftTree @select="treeSelect" />
+            </a-col>
+            <a-col :span="19">
+                <ChooseApi
+                    v-show="!selectedApi.url"
+                    v-model:click-api="selectedApi"
+                    :table-data="tableData"
+                />
+
+                <div
+                    class="api-details"
+                    v-show="selectedApi.url && tableData.length > 0"
+                >
+                    <a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
+                        >返回</a-button
+                    >
+                    <a-tabs v-model:activeKey="activeKey" type="card">
+                        <a-tab-pane key="does" tab="文档">
+                            <ApiDoes :select-api="selectedApi" :schemas="schemas" />
+                        </a-tab-pane>
+                        <a-tab-pane key="test" tab="调试">
+                            <ApiTest :select-api="selectedApi" />
+                        </a-tab-pane>
+                    </a-tabs>
+                </div>
+            </a-col>
+        </a-row>
+    </a-card>
+</template>
+
+<script setup lang="ts" name="apiPage">
+import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
+import LeftTree from './components/LeftTree.vue';
+import ChooseApi from './components/ChooseApi.vue';
+import ApiDoes from './components/ApiDoes.vue';
+import ApiTest from './components/ApiTest.vue';
+
+const tableData = ref([]);
+const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
+    schemas.value = nodeSchemas
+    if (!node.apiList) return;
+    const apiList: apiObjType[] = node.apiList as apiObjType[];
+    const table: any = [];
+    // 将对象形式的数据转换为表格需要的形式
+    apiList?.forEach((apiItem) => {
+        const { method, url } = apiItem;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                    method: key,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
+
+const activeKey = ref('does');
+const schemas = ref({});
+const initSelectedApi:apiDetailsType = {
+    url: '',
+    method: '',
+    summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {}
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+watch(tableData, () => (selectedApi.value = initSelectedApi));
+</script>
+
+<style scoped>
+.api-page-container {
+    height: 100%;
+}
+</style>
diff --git a/src/views/system/Apply/Api/typing.d.ts b/src/views/system/Apply/Api/typing.d.ts
new file mode 100644
index 00000000..7937398b
--- /dev/null
+++ b/src/views/system/Apply/Api/typing.d.ts
@@ -0,0 +1,25 @@
+export type treeNodeTpye = {
+    name: string;
+    key: string;
+    schemas?:object;
+    link?: string;
+    apiList?: object[];
+    children?: treeNodeTpye[];
+
+};
+export type methodType = {
+    [key: string]: object
+}
+export type apiObjType = {
+    url: string,
+    method: methodType
+}
+
+export type apiDetailsType = {
+    url: string;
+    method: string;
+    summary: string;
+    parameters: any[];
+    requestBody?: any;
+    responses:object;
+}
\ No newline at end of file
diff --git a/src/views/system/DataSource/Management/index.vue b/src/views/system/DataSource/Management/index.vue
new file mode 100644
index 00000000..c9d62113
--- /dev/null
+++ b/src/views/system/DataSource/Management/index.vue
@@ -0,0 +1,398 @@
+<template>
+    <a-card class="mangement-container">
+        <div class="left">
+            <a-input-search
+                v-model:value="leftData.searchValue"
+                placeholder="请输入"
+                style="margin-bottom: 24px"
+            />
+            <!-- 使用v-if用于解决异步加载数据后不展开的问题 -->
+            <a-tree
+                v-if="leftData.treeData.length > 0"
+                showLine
+                defaultExpandAll
+                :tree-data="leftData.treeData"
+                v-model:selectedKeys="leftData.selectedKeys"
+                @select="leftData.onSelect"
+            >
+                <template #title="{ dataRef }">
+                    <div
+                        v-if="dataRef.root"
+                        :style="`
+                            justify-content: space-between;
+                            display: flex;
+                            align-items: center;
+                            `"
+                    >
+                        <span>
+                            {{ dataRef.title }}
+                        </span>
+                        <AIcon
+                            type="PlusOutlined"
+                            style="color: #1d39c4"
+                            @click="leftData.addTable"
+                        />
+                    </div>
+                    <span v-else>
+                        {{ dataRef.title }}
+                    </span>
+                </template>
+            </a-tree>
+        </div>
+        <div class="right">
+            <div class="btns">
+                <a-button type="primary" @click="table.clickSave"
+                    >保存</a-button
+                >
+            </div>
+            <JTable
+                ref="tableRef"
+                :columns="table.columns"
+                model="TABLE"
+                :dataSource="table.data"
+            >
+                <template #name="slotProps">
+                    <a-input
+                        :disabled="slotProps.scale !== undefined"
+                        v-model:value="slotProps.name"
+                        placeholder="请输入名称"
+                        :maxlength="64"
+                    />
+                </template>
+                <template #type="slotProps">
+                    <a-input
+                        v-model:value="slotProps.type"
+                        placeholder="请输入类型"
+                        :maxlength="64"
+                    />
+                </template>
+                <template #length="slotProps">
+                    <a-input-number
+                        v-model:value="slotProps.length"
+                        :min="0"
+                        :max="99999"
+                    />
+                </template>
+                <template #precision="slotProps">
+                    <a-input-number
+                        v-model:value="slotProps.precision"
+                        :min="0"
+                        :max="99999"
+                    />
+                </template>
+                <template #notnull="slotProps">
+                    <a-radio-group
+                        v-model:value="slotProps.notnull"
+                        button-style="solid"
+                    >
+                        <a-radio-button :value="true">是</a-radio-button>
+                        <a-radio-button :value="false">否</a-radio-button>
+                    </a-radio-group>
+                </template>
+                <template #comment="slotProps">
+                    <a-input
+                        v-model:value="slotProps.comment"
+                        placeholder="请输入说明"
+                    />
+                </template>
+                <template #action="slotProps">
+                    <PermissionButton
+                        :uhasPermission="`{permission}:delete`"
+                        type="link"
+                        :tooltip="{ title: '删除' }"
+                        :popConfirm="{
+                            title: `确认删除`,
+                            onConfirm: () => table.clickDel(slotProps),
+                        }"
+                        :disabled="slotProps.status"
+                    >
+                        <AIcon type="DeleteOutlined" />
+                    </PermissionButton>
+                </template>
+            </JTable>
+            <a-botton class="add-row" @click="table.addRow">
+                <AIcon type="PlusOutlined" /> 新增行
+            </a-botton>
+        </div>
+    </a-card>
+    <div class="dialogs">
+        <a-modal
+            v-model:visible="dialog.visible"
+            title="新增"
+            @ok="dialog.handleOk"
+        >
+            <a-form :model="dialog.form" ref="addFormRef">
+                <a-form-item
+                    label="名称"
+                    name="name"
+                    :rules="[
+                        {
+                            required: true,
+                            message: '请输入名称',
+                            trigger: 'change',
+                        },
+                        {
+                            max: 64,
+                            message: '最多可输入64个字符',
+                            trigger: 'change',
+                        },
+                        {
+                            pattern: /^[0-9].*$/,
+                            message: '不能以数字开头',
+                            trigger: 'change',
+                        },
+                        {
+                            pattern: /^\w+$/,
+                            message: '名称只能由数字、字母、下划线、中划线组成',
+                            trigger: 'change',
+                        },
+                    ]"
+                >
+                    <a-input
+                        v-model:value="dialog.form.name"
+                        placeholder="请输入名称"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts" name="Management">
+import {
+    getDataSourceInfo_api,
+    rdbTree_api,
+    rdbTables_api,
+    saveTable_api,
+} from '@/api/system/dataSource';
+import { FormInstance, message } from 'ant-design-vue';
+import { DataNode } from 'ant-design-vue/lib/tree';
+import type { dbColumnType, dictItemType, sourceItemType } from '../typing';
+
+const id = useRoute().query.id as string;
+
+const info = reactive({
+    data: {} as sourceItemType,
+    init: () => {
+        id &&
+            getDataSourceInfo_api(id).then((resp: any) => {
+                info.data = resp.result;
+            });
+    },
+});
+
+const leftData = reactive({
+    searchValue: '',
+    sourceTree: [] as dictItemType[],
+    treeData: [] as DataNode[],
+    selectedKeys: [] as string[],
+    oldKey: '',
+
+    init: () => {
+        leftData.getTree();
+        watch(
+            [
+                () => leftData.searchValue,
+                () => leftData.sourceTree,
+                () => info.data,
+            ],
+            (n) => {
+                if (leftData.sourceTree.length < 1 || !info.data.shareConfig)
+                    return;
+                let filterArr = [];
+                if (leftData.searchValue) {
+                    filterArr = leftData.sourceTree.filter((item) =>
+                        item.name.includes(n[0]),
+                    );
+                } else filterArr = leftData.sourceTree;
+                leftData.treeData = [
+                    {
+                        title: info.data.shareConfig.schema,
+                        key: info.data.shareConfig.schema,
+                        root: true,
+                        children: filterArr.map((item) => ({
+                            title: item.name,
+                            key: item.name,
+                        })),
+                    },
+                ];
+                leftData.selectedKeys = [filterArr[0].name];
+                leftData.onSelect([filterArr[0].name]);
+            },
+            {},
+        );
+    },
+    getTree: () => {
+        rdbTree_api(id)
+            .then((resp: any) => {
+                leftData.sourceTree = resp.result;
+            })
+            .catch(() => {});
+    },
+    onSelect: (selectedKeys: string[], e?: any) => {
+        if (e?.node?.root) {
+            leftData.selectedKeys = [leftData.oldKey];
+            return;
+        }
+        leftData.oldKey = selectedKeys[0];
+        const key = selectedKeys[0];
+        table.getTabelData(key);
+    },
+    addTable: (e: Event) => {
+        e.stopPropagation();
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '列名',
+            dataIndex: 'name',
+            key: 'name',
+            scopedSlots: true,
+        },
+        {
+            title: '类型',
+            dataIndex: 'type',
+            key: 'type',
+            scopedSlots: true,
+        },
+        {
+            title: '长度',
+            dataIndex: 'length',
+            key: 'length',
+            scopedSlots: true,
+        },
+        {
+            title: '精度',
+            dataIndex: 'precision',
+            key: 'precision',
+            scopedSlots: true,
+        },
+        {
+            title: '不能为空',
+            dataIndex: 'notnull',
+            key: 'notnull',
+            scopedSlots: true,
+        },
+        {
+            title: '说明',
+            dataIndex: 'comment',
+            key: 'comment',
+            scopedSlots: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+        },
+    ],
+    data: [] as dbColumnType[],
+
+    getTabelData: (key: string) => {
+        rdbTables_api(id, key).then((resp: any) => {
+            table.data = resp.result.columns;
+        });
+    },
+    addRow: () => {
+        const initData: dbColumnType = {
+            precision: 0,
+            length: 0,
+            notnull: false,
+            type: '',
+            comment: '',
+            name: '',
+        };
+        table.data.push(initData);
+    },
+    clickSave: () => {
+        const params = {
+            name: leftData.selectedKeys[0],
+            columns: table.data,
+        };
+        saveTable_api(id, params).then(() => {
+            table.getTabelData(params.name);
+        });
+    },
+    clickDel: (row: any) => {},
+});
+
+const addFormRef = ref<FormInstance>();
+const dialog = reactive({
+    visible: false,
+    form: {
+        name: '',
+    },
+    handleOk: () => {
+        addFormRef.value &&
+            addFormRef.value.validate().then(() => {
+                const name = dialog.form.name;
+                leftData.sourceTree.unshift({
+                    id: name,
+                    name,
+                });
+                leftData.oldKey = name;
+                leftData.selectedKeys = [name];
+                table.data = [];
+            });
+    },
+});
+
+init();
+function init() {
+    info.init();
+    leftData.init();
+}
+</script>
+
+<style lang="less" scoped>
+.mangement-container {
+    padding: 24px;
+    background-color: transparent;
+    :deep(.ant-card-body) {
+        display: flex;
+        background-color: #fff;
+
+        .left {
+            flex-basis: 280px;
+            padding-right: 24px;
+            box-sizing: border-box;
+
+            .ant-tree-treenode {
+                width: 100%;
+                .ant-tree-switcher-noop {
+                    display: none;
+                }
+                .ant-tree-node-content-wrapper {
+                    width: 100%;
+                    .ant-tree-title {
+                        width: 100%;
+                    }
+                }
+                &:first-child .ant-tree-node-selected {
+                    background-color: transparent;
+                }
+            }
+        }
+        .right {
+            width: calc(100% - 280px);
+            box-sizing: border-box;
+            border-left: 1px solid #f0f0f0;
+
+            .btns {
+                display: flex;
+                justify-content: right;
+                padding: 0px 24px;
+            }
+
+            .add-row {
+                display: block;
+                text-align: center;
+                width: 100%;
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/DataSource/components/EditDialog.vue b/src/views/system/DataSource/components/EditDialog.vue
index de689045..606b7609 100644
--- a/src/views/system/DataSource/components/EditDialog.vue
+++ b/src/views/system/DataSource/components/EditDialog.vue
@@ -34,9 +34,9 @@
                     >
                         <a-select
                             v-model:value="form.data.typeId"
-                            style="width: 120px"
                             :options="form.typeOptions"
                             placeholder="请选择类型"
+                            :disabled="!!form.data.id"
                         />
                     </a-form-item>
                 </a-col>
@@ -83,7 +83,7 @@
                     </a-form-item>
                 </a-col>
             </a-row>
-            <a-row :gutter="24">
+            <a-row :gutter="24" v-show="form.data.typeId">
                 <a-col :span="12">
                     <a-form-item
                         :name="['shareConfig', 'username']"
@@ -179,28 +179,42 @@
 </template>
 
 <script setup lang="ts">
-import { getDataTypeDict_api } from '@/api/system/dataSource';
+import {
+    getDataTypeDict_api,
+    saveDataSource_api,
+} from '@/api/system/dataSource';
+import { FormInstance, message } from 'ant-design-vue';
 import type { dictItemType, optionItemType, sourceItemType } from '../typing';
 
+const emits = defineEmits(['confirm']);
+
 // 弹窗相关
 const dialog = {
     title: '',
     loading: ref<boolean>(false),
     visible: ref<boolean>(false),
-    handleOk: () => {},
+    handleOk: () => {
+        formRef.value?.validate().then(() => {
+            form.submit();
+        });
+    },
     // 打开弹窗
-    changeVisible: (row: sourceItemType) => {
+    openDialog: (row: sourceItemType) => {
         if (row.id) dialog.title = '编辑数据源';
         else dialog.title = '新增数据源';
         form.data = { ...row };
-        dialog.visible.value = true;
+        nextTick(() => {
+            formRef.value?.clearValidate();
+            dialog.visible.value = true;
+        });
     },
 };
 // 将打开弹窗的操作暴露给父组件
 defineExpose({
-    openDialog: dialog.changeVisible,
+    openDialog: dialog.openDialog,
 });
 
+const formRef = ref<FormInstance>();
 const form = reactive({
     data: {
         shareConfig: {},
@@ -217,8 +231,16 @@ const form = reactive({
             }));
         });
     },
+    submit: () => {
+        dialog.loading.value = true;
+        saveDataSource_api(form.data)
+            .then(() => {
+                message.success('操作成功');
+                emits('confirm');
+                dialog.visible.value = false;
+            })
+            .finally(() => (dialog.loading.value = false));
+    },
 });
 form.getTypeOption();
 </script>
-
-<style scoped></style>
diff --git a/src/views/system/DataSource/index.vue b/src/views/system/DataSource/index.vue
index 0190f7e8..370fff33 100644
--- a/src/views/system/DataSource/index.vue
+++ b/src/views/system/DataSource/index.vue
@@ -66,6 +66,7 @@
                                     `/system/DataSource/Management?id=${slotProps.id}`,
                                 )
                         "
+                        :disabled="slotProps?.typeId === 'rabbitmq' || !table.getRowStatus(slotProps)"
                     >
                         <AIcon type="icon-ziyuankuguanli" />
                     </PermissionButton>
@@ -131,10 +132,11 @@ import {
     getDataSourceList_api,
     getDataTypeDict_api,
     changeStatus_api,
+    delDataSource_api
 } from '@/api/system/dataSource';
 import { message } from 'ant-design-vue';
 
-const permission = 'system/Relationship';
+const permission = 'system/DataSource';
 
 const router = useRouter();
 
@@ -226,6 +228,7 @@ const table = {
             title: '说明',
             dataIndex: 'description',
             key: 'description',
+            ellipsis: true,
         },
         {
             title: '状态',
@@ -240,6 +243,7 @@ const table = {
             key: 'action',
             scopedSlots: true,
             width: '200px',
+            fixed:'right'
         },
     ],
 
@@ -265,16 +269,16 @@ const table = {
     },
     // 打开编辑弹窗
     openDialog: (row: sourceItemType | {}) => {
-        editDialogRef.value.openDialog({shareConfig:{},...row});
+        editDialogRef.value.openDialog({ shareConfig: {}, ...row });
     },
     // 删除
     clickDel: (row: sourceItemType) => {
-        // delRelation_api(row.id).then((resp: any) => {
-        //     if (resp.status === 200) {
-        //         tableRef.value?.reload();
-        //         message.success('操作成功!');
-        //     }
-        // });
+        delDataSource_api(row.id as string).then((resp: any) => {
+            if (resp.status === 200) {
+                tableRef.value?.reload();
+                message.success('操作成功!');
+            }
+        });
     },
     clickChangeStatus: (row: sourceItemType) => {
         const status = row.state.value === 'enabled' ? '_disable' : '_enable';
diff --git a/src/views/system/DataSource/typing.d.ts b/src/views/system/DataSource/typing.d.ts
index 1ece8c43..528249b8 100644
--- a/src/views/system/DataSource/typing.d.ts
+++ b/src/views/system/DataSource/typing.d.ts
@@ -1,6 +1,7 @@
 export type dictItemType = {
     id: string,
-    name: string
+    name: string,
+    children?: dictItemType
 }
 export type optionItemType = {
     label: string,
@@ -11,14 +12,26 @@ export type sourceItemType = {
     name: string,
     state: { text: string, value: "enabled" | 'disabled' },
     typeId: string,
-    shareConfig:{
-        url:string,
-        adminUrl:string,
-        addresses:string,
-        username:string,
-        password:string,
-        virtualHost:string,
-        schema:string
+    shareConfig: {
+        url: string,
+        adminUrl: string,
+        addresses: string,
+        username: string,
+        password: string,
+        virtualHost: string,
+        schema: string
     }
     description: string
+}
+
+// 数据库字段
+export type dbColumnType = {
+    previousName?: string,
+    type: String,
+    length: number,
+    precision: number,
+    notnull: boolean,
+    comment: string,
+    name: string,
+    scale?:number
 }
\ No newline at end of file
diff --git a/src/views/system/apiPage/components/ApiDoes.vue b/src/views/system/apiPage/components/ApiDoes.vue
index 85dfc5e0..df806b0c 100644
--- a/src/views/system/apiPage/components/ApiDoes.vue
+++ b/src/views/system/apiPage/components/ApiDoes.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import { apiDetailsType } from '../index';
+import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
 
@@ -200,7 +200,7 @@ const respParamsCard = reactive<tableCardType>({
 
         const schemaName = responseStatusCard.tableData.find(
             (item: any) => item.code === code,
-        ).schema;
+        )?.schema;
         const schemas = toRaw(props.schemas);
         function findData(schemaName: string) {
             if (!schemaName || !schemas[schemaName]) {
diff --git a/src/views/system/apiPage/components/ApiTest.vue b/src/views/system/apiPage/components/ApiTest.vue
index 5503fe6b..46c87dbe 100644
--- a/src/views/system/apiPage/components/ApiTest.vue
+++ b/src/views/system/apiPage/components/ApiTest.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { apiDetailsType } from '../index';
+import { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
 
diff --git a/src/views/system/apiPage/components/LeftTree.vue b/src/views/system/apiPage/components/LeftTree.vue
index e933c925..598887f3 100644
--- a/src/views/system/apiPage/components/LeftTree.vue
+++ b/src/views/system/apiPage/components/LeftTree.vue
@@ -15,7 +15,7 @@
 import { TreeProps } from 'ant-design-vue';
 
 import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
-import { treeNodeTpye } from '../index';
+import { treeNodeTpye } from '../typing';
 
 const emits = defineEmits(['select']);
 
diff --git a/src/views/system/apiPage/index.vue b/src/views/system/apiPage/index.vue
index 397806a5..f8eb959d 100644
--- a/src/views/system/apiPage/index.vue
+++ b/src/views/system/apiPage/index.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts" name="apiPage">
-import { treeNodeTpye, apiObjType, apiDetailsType } from './index';
+import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
 import LeftTree from './components/LeftTree.vue';
 import ChooseApi from './components/ChooseApi.vue';
 import ApiDoes from './components/ApiDoes.vue';
diff --git a/src/views/system/apiPage/typing.d.ts b/src/views/system/apiPage/typing.d.ts
new file mode 100644
index 00000000..7937398b
--- /dev/null
+++ b/src/views/system/apiPage/typing.d.ts
@@ -0,0 +1,25 @@
+export type treeNodeTpye = {
+    name: string;
+    key: string;
+    schemas?:object;
+    link?: string;
+    apiList?: object[];
+    children?: treeNodeTpye[];
+
+};
+export type methodType = {
+    [key: string]: object
+}
+export type apiObjType = {
+    url: string,
+    method: methodType
+}
+
+export type apiDetailsType = {
+    url: string;
+    method: string;
+    summary: string;
+    parameters: any[];
+    requestBody?: any;
+    responses:object;
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 9c86c17e..17c5e7fd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -83,7 +83,9 @@ export default defineConfig(({ mode}) => {
                   // target: 'http://192.168.32.244:8881',
                 //   target: 'http://47.112.135.104:5096', // opcua
                 //   target: 'http://120.77.179.54:8844', // 120测试
-                  target: 'http://47.108.63.174:8845', // 测试
+                //   target: 'http://47.108.63.174:8845', // 测试
+                  target: 'http://120.77.179.54:8844',
+                  ws: 'ws://120.77.179.54:8844',
                   changeOrigin: true,
                   rewrite: (path) => path.replace(/^\/api/, '')
               }
diff --git a/yarn.lock b/yarn.lock
index 89da6e56..734ce361 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -784,11 +784,16 @@
   dependencies:
     moment "*"
 
-"@types/node@*", "@types/node@^18.11.17":
+"@types/node@*":
   version "18.11.18"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
 
+"@types/node@^18.14.0":
+  version "18.14.0"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-18.14.0.tgz#94c47b9217bbac49d4a67a967fdcdeed89ebb7d0"
+  integrity sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"