From 91ae45d227493aee9039b0f005ef6f46aa2ef85f Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 15 Feb 2023 13:34:56 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=BD=91=E7=BB=9C=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=E5=8D=A1=E7=89=87/=E5=88=97=E8=A1=A8=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/type.ts                    |  16 +
 src/views/link/AccessConfig/index.vue   |  10 +-
 src/views/link/Protocol/index.vue       |   6 +-
 src/views/link/Type/Detail/index.vue    |   9 +
 src/views/link/Type/data.ts             |   0
 src/views/link/Type/index.vue           | 465 ++++++++++++++++++++++++
 src/views/link/Type/type.d.ts           |   0
 src/views/media/Stream/Detail/index.vue |   2 +-
 src/views/media/Stream/index.vue        |  10 +-
 9 files changed, 503 insertions(+), 15 deletions(-)
 create mode 100644 src/api/link/type.ts
 create mode 100644 src/views/link/Type/Detail/index.vue
 create mode 100644 src/views/link/Type/data.ts
 create mode 100644 src/views/link/Type/index.vue
 create mode 100644 src/views/link/Type/type.d.ts

diff --git a/src/api/link/type.ts b/src/api/link/type.ts
new file mode 100644
index 00000000..bc3546b0
--- /dev/null
+++ b/src/api/link/type.ts
@@ -0,0 +1,16 @@
+import server from '@/utils/request';
+
+export const queryNetworkConfig = (params: object) =>
+    server.post(`/network/config/_query`, params);
+
+export const remove = (id: string) => server.remove(`/network/config/${id}`);
+
+export const shutdown = (data: object) =>
+    server.post(`/network/config/${data}/_shutdown`);
+
+export const start = (data: object) =>
+    server.post(`/network/config/${data}/_start`);
+
+export const supports = () => server.get(`/network/config/supports`);
+
+export const query = (data: Object) => server.post(`/network/config/_query`, data);
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index 699a994c..90cbaaa1 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -45,11 +45,9 @@
                             <div class="card-item-content">
                                 <h3
                                     @click="handlEye(slotProps.id)"
-                                    class="card-item-content-title"
+                                    class="card-item-content-title card-item-content-title-a"
                                 >
-                                    <a class="card-item-content-title-a">{{
-                                        slotProps.name
-                                    }}</a>
+                                    {{ slotProps.name }}
                                 </h3>
                                 <a-row class="card-item-content-box">
                                     <a-col
@@ -402,9 +400,9 @@ const handleSearch = (e: any) => {
     min-height: 100px;
 
     .card-item-content-title-a {
-        // color: #000 !important;
+        color: #1890ff !important;
         font-weight: 700;
-        font-size: 18px;
+        font-size: 16px;
         overflow: hidden; //超出的文本隐藏
         text-overflow: ellipsis; //溢出用省略号显示
         white-space: nowrap; //溢出不换行
diff --git a/src/views/link/Protocol/index.vue b/src/views/link/Protocol/index.vue
index 5b9b351b..3ae666c1 100644
--- a/src/views/link/Protocol/index.vue
+++ b/src/views/link/Protocol/index.vue
@@ -31,7 +31,7 @@
                         </template>
                         <template #content>
                             <div class="card-item-content">
-                                <h3 class="card-item-content-title-a">
+                                <h3 class="card-item-content-title card-item-content-title-a">
                                     {{ slotProps.name }}
                                 </h3>
                                 <a-row class="card-item-content-box">
@@ -299,9 +299,9 @@ const handleSearch = (e: any) => {
     min-height: 100px;
 
     .card-item-content-title-a {
-        // color: #000 !important;
+        color: #000 !important;
         font-weight: 700;
-        font-size: 18px;
+        font-size: 16px;
         overflow: hidden; //超出的文本隐藏
         text-overflow: ellipsis; //溢出用省略号显示
         white-space: nowrap; //溢出不换行
diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
new file mode 100644
index 00000000..639f8949
--- /dev/null
+++ b/src/views/link/Type/Detail/index.vue
@@ -0,0 +1,9 @@
+<template>
+    <page-container>
+        <div>111</div>
+    </page-container>
+</template>
+<script lang="ts" setup name="TypeDetail">
+
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/link/Type/data.ts b/src/views/link/Type/data.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/link/Type/index.vue b/src/views/link/Type/index.vue
new file mode 100644
index 00000000..53cde88e
--- /dev/null
+++ b/src/views/link/Type/index.vue
@@ -0,0 +1,465 @@
+<template>
+    <page-container>
+        <div>
+            <Search :columns="columns" target="search" @search="handleSearch" />
+
+            <JTable
+                ref="tableRef"
+                :columns="columns"
+                :gridColumn="3"
+                :request="query"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-button type="primary" @click="handlAdd"
+                        ><plus-outlined />新增</a-button
+                    >
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="true"
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                        :class="
+                            slotProps.state.value === 'disabled'
+                                ? 'tableCardDisabled'
+                                : 'tableCardEnabled'
+                        "
+                        :status="slotProps.state.value"
+                        :statusText="slotProps.state.text"
+                        :statusNames="{
+                            enabled: 'success',
+                            disabled: 'error',
+                        }"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img :src="getImage('/network.png')" />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <div class="card-item-content">
+                                <!-- <a
+                                    @click="handlEye(slotProps.id)"
+                                    class="card-item-content-title-a"
+                                >
+                                    {{ slotProps.name }}
+                                </a> -->
+                                <h3
+                                    @click="handlEye(slotProps.id)"
+                                    class="card-item-content-title card-item-content-title-a"
+                                >
+                                    {{ slotProps.name }}
+                                </h3>
+                                <a-row class="card-item-content-box">
+                                    <a-col :span="12">
+                                        <div class="card-item-content-text">
+                                            类型
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.type
+                                                }}</template>
+                                                {{ slotProps.type }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <div class="card-item-content-text">
+                                            详情
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    getDetails(slotProps)
+                                                }}</template>
+                                                <span class="details-text">{{
+                                                    getDetails(slotProps)
+                                                }}</span>
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                </a-row>
+                            </div>
+                        </template>
+                        <template #actions="item">
+                            <a-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
+                            >
+                                <a-popconfirm
+                                    v-if="item.popConfirm"
+                                    v-bind="item.popConfirm"
+                                    :disabled="item.disabled"
+                                >
+                                    <a-button :disabled="item.disabled">
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </a-popconfirm>
+                                <template v-else>
+                                    <a-button
+                                        :disabled="item.disabled"
+                                        @click="item.onClick"
+                                    >
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </template>
+                            </a-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+                <template #action="slotProps">
+                    <a-space :size="16">
+                        <a-tooltip
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <a-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
+                                :disabled="i.disabled"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-popconfirm>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+                <template #state="slotProps">
+                    <a-badge
+                        :text="slotProps.state.text"
+                        :status="statusMap.get(slotProps.state.value)"
+                    />
+                </template>
+                <template #shareCluster="slotProps">
+                    {{
+                        slotProps.shareCluster === true
+                            ? '共享配置'
+                            : '独立配置'
+                    }}
+                </template>
+                <template #type="slotProps">
+                    {{ slotProps.typeObject.name }}
+                </template>
+                <template #details="slotProps">
+                    {{ getDetails(slotProps) }}
+                </template>
+            </JTable>
+        </div>
+    </page-container>
+</template>
+<script lang="ts" setup name="TypePage">
+import type { ActionsType } from '@/components/Table/index.vue';
+import { getImage } from '@/utils/comm';
+import { supports, query, remove, start, shutdown } from '@/api/link/type';
+import { message } from 'ant-design-vue';
+
+const tableRef = ref<Record<string, any>>({});
+const router = useRouter();
+const params = ref<Record<string, any>>({});
+const options = ref([]);
+
+const statusMap = new Map();
+statusMap.set('enabled', 'success');
+statusMap.set('disabled', 'error');
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        width: 250,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        ellipsis: true,
+        width: 150,
+        search: {
+            type: 'select',
+            options: options,
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '集群',
+        dataIndex: 'shareCluster',
+        key: 'shareCluster',
+        width: 120,
+        ellipsis: true,
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '共享配置', value: true },
+                { label: '独立配置', value: false },
+            ],
+        },
+    },
+    {
+        title: '详情',
+        dataIndex: 'details',
+        key: 'details',
+        ellipsis: true,
+        scopedSlots: true,
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        width: 100,
+        ellipsis: true,
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '正常', value: 'enabled' },
+                { label: '禁用', value: 'disabled' },
+            ],
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        ellipsis: true,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const state = data.state.value;
+    const actions = [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: async () => {
+                handlEye(data.id);
+            },
+        },
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'action',
+            text: state === 'enabled' ? '禁用' : '启用',
+            tooltip: {
+                title: state === 'enabled' ? '禁用' : '启用',
+            },
+            icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
+            popConfirm: {
+                title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
+                onConfirm: async () => {
+                    let res =
+                        state === 'enabled'
+                            ? await shutdown(data.id)
+                            : await start(data.id);
+                    if (res.success) {
+                        message.success('操作成功');
+                        tableRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            disabled: state === 'enabled',
+            tooltip: {
+                title:
+                    state === 'enabled' ? '请先禁用该组件，再删除。' : '删除',
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const res = await remove(data.id);
+                    if (res.success) {
+                        message.success('操作成功');
+                        tableRef.value.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    return type === 'table'
+        ? actions
+        : actions.filter((item) => item.key !== 'eye');
+};
+
+const handlAdd = () => {
+    // router.push({
+    //     path: `/iot/link/certificate/detail/:id`,
+    //     query: { view: false },
+    // });
+};
+
+const handlEye = (id: string) => {
+    console.log(111, id);
+
+    // router.push({
+    //     path: `/iot/link/certificate/detail/${id}`,
+    //     query: { view: true },
+    // });
+};
+
+const handlEdit = (id: string) => {
+    console.log(111, id);
+
+    // router.push({
+    //     path: `/iot/link/certificate/detail/${id}`,
+    //     query: { view: false },
+    // });
+};
+
+const handlDelete = async (id: string) => {
+    // const res = await remove(id);
+    // if (res.success) {
+    //     message.success('操作成功');
+    //     tableRef.value.reload();
+    // }
+};
+
+const getDetails = (slotProps: Partial<Record<string, any>>) => {
+    const { typeObject, shareCluster, configuration, cluster } = slotProps;
+    const headers =
+        typeObject.name.replace(/[^a-zA-Z]/g, '').toLowerCase() + '://';
+    const content = !!shareCluster
+        ? (configuration.publicHost || configuration.remoteHost) +
+          ':' +
+          (configuration.publicPort || configuration.remotePort)
+        : (cluster[0].configuration.publicHost ||
+              cluster[0].configuration.remoteHost) +
+          ':' +
+          (cluster[0].configuration.publicPort ||
+              cluster[0].configuration.remotePort);
+
+    return headers + content;
+};
+
+const getSupports = async () => {
+    const res = await supports();
+    options.value = res.result.map((item) => ({
+        value: item.id,
+        label: item.name,
+    }));
+};
+getSupports();
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = e;
+};
+</script>
+<style lang="less" scoped>
+.tableCardDisabled {
+    width: 100%;
+    background: url('/images/access-config-diaabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.tableCardEnabled {
+    width: 100%;
+    background: url('/images/access-config-enabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.card-item-content {
+    min-height: 100px;
+
+    .card-item-content-title-a {
+        // color: #000 !important;
+        font-weight: 700;
+        font-size: 16px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+    .card-item-content-box {
+        min-height: 50px;
+    }
+    .card-item-content-text {
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 12px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+}
+.details-text {
+    font-weight: 700;
+    font-size: 14px;
+}
+</style>
diff --git a/src/views/link/Type/type.d.ts b/src/views/link/Type/type.d.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/media/Stream/Detail/index.vue b/src/views/media/Stream/Detail/index.vue
index 0feec4dc..b7761594 100644
--- a/src/views/media/Stream/Detail/index.vue
+++ b/src/views/media/Stream/Detail/index.vue
@@ -265,7 +265,7 @@
     </page-container>
 </template>
 
-<script lang="ts" setup name="CertificateDetail">
+<script lang="ts" setup name="StreamDetail">
 import { message, Form } from 'ant-design-vue';
 import { queryProviders, queryDetail, save, update } from '@/api/media/stream';
 import type { FormInstance } from 'ant-design-vue';
diff --git a/src/views/media/Stream/index.vue b/src/views/media/Stream/index.vue
index 0d8f3d50..46e1e797 100644
--- a/src/views/media/Stream/index.vue
+++ b/src/views/media/Stream/index.vue
@@ -45,12 +45,12 @@
                         </template>
                         <template #content>
                             <div class="card-item-content">
-                                <a
+                                <h3
                                     @click="handlEye(slotProps.id)"
-                                    class="card-item-content-title-a"
+                                    class="card-item-content-title card-item-content-title-a"
                                 >
                                     {{ slotProps.name }}
-                                </a>
+                                </h3>
                                 <a-row class="card-item-content-box">
                                     <a-col
                                         :span="8"
@@ -149,7 +149,7 @@
         </div>
     </page-container>
 </template>
-<script lang="ts" setup name="AccessConfigPage">
+<script lang="ts" setup name="StreamPage">
 import type { ActionsType } from '@/components/Table/index.vue';
 import { getImage } from '@/utils/comm';
 import { query, remove, disable, enalbe } from '@/api/media/stream';
@@ -300,7 +300,7 @@ const handleSearch = (e: any) => {
     .card-item-content-title-a {
         // color: #000 !important;
         font-weight: 700;
-        font-size: 18px;
+        font-size: 16px;
         overflow: hidden; //超出的文本隐藏
         text-overflow: ellipsis; //溢出用省略号显示
         white-space: nowrap; //溢出不换行

From 6acc522ed54ee1f0d3358aa2d9e25176ac12dcf5 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 15 Feb 2023 21:01:46 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E7=BD=91=E7=BB=9C=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=AF=A6=E6=83=85=20=E8=A1=A8=E5=8D=95=E5=85=B1?=
 =?UTF-8?q?=E4=BA=AB=E9=85=8D=E7=BD=AE=E5=9F=BA=E6=9C=AC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/type.ts                 |   18 +-
 src/views/link/Type/Detail/index.vue | 1337 +++++++++++++++++++++++++-
 src/views/link/Type/data.ts          |   82 ++
 src/views/link/Type/index.vue        |   38 +-
 4 files changed, 1450 insertions(+), 25 deletions(-)

diff --git a/src/api/link/type.ts b/src/api/link/type.ts
index bc3546b0..887d395f 100644
--- a/src/api/link/type.ts
+++ b/src/api/link/type.ts
@@ -13,4 +13,20 @@ export const start = (data: object) =>
 
 export const supports = () => server.get(`/network/config/supports`);
 
-export const query = (data: Object) => server.post(`/network/config/_query`, data);
+export const query = (data: Object) =>
+    server.post(`/network/config/_query`, data);
+
+export const providers = () => server.get(`/gateway/device/providers`);
+
+export const resourcesCurrent = () =>
+    server.get(`/network/resources/alive/_current`);
+
+export const resourceClusters = () => server.get(`network/resources/clusters`);
+
+export const resourceClustersById = (id: string) =>
+    server.get(`/network/resources/alive/${id}`);
+
+export const allResources = () => server.get(`/network/resources/alive/_all`);
+
+export const certificates = () =>
+    server.get(`/network/certificate/_query/no-paging?paging=false`);
diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
index 639f8949..9fca900e 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -1,9 +1,1340 @@
 <template>
     <page-container>
-        <div>111</div>
+        <a-card>
+            <div class="steps-box">
+                <a-form
+                    :model="formState"
+                    ref="formRef1"
+                    name="basic"
+                    autocomplete="off"
+                    layout="vertical"
+                >
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="12">
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                    },
+                                    {
+                                        max: 64,
+                                        message: '最大可输入64个字符',
+                                    },
+                                ]"
+                            >
+                                <a-input
+                                    v-model:value="formState.name"
+                                    placeholder="请输入名称"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="类型"
+                                name="type"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请选择类型',
+                                    },
+                                ]"
+                            >
+                                <a-select
+                                    v-model:value="formState.type"
+                                    :options="typeOption"
+                                    placeholder="请选择类型"
+                                    allowClear
+                                    show-search
+                                    :filter-option="filterOption"
+                                />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+
+                    <a-form-item
+                        name="shareCluster"
+                        :rules="[
+                            {
+                                required: true,
+                                message: '请选择集群',
+                            },
+                        ]"
+                    >
+                        <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="formState.shareCluster"
+                            button-style="solid"
+                        >
+                            <a-radio-button :value="true"
+                                >共享配置</a-radio-button
+                            >
+                            <a-radio-button :value="false"
+                                >独立配置</a-radio-button
+                            >
+                        </a-radio-group>
+                    </a-form-item>
+                    <div v-if="formState.shareCluster" class="form-item1">
+                        <a-row :gutter="[24, 0]">
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('host', formState.type)"
+                            >
+                                <a-form-item
+                                    :name="['configuration', 'host']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请选择本地地址',
+                                        },
+                                    ]"
+                                >
+                                    <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="
+                                            formState.configuration.host
+                                        "
+                                        :disabled="true"
+                                        show-search
+                                        :filter-option="filterOption"
+                                    >
+                                        <a-select-option value="0.0.0.0"
+                                            >0.0.0.0</a-select-option
+                                        >
+                                    </a-select>
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('port', formState.type)"
+                            >
+                                <a-form-item
+                                    :name="['configuration', 'port']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请选择端口',
+                                        },
+                                    ]"
+                                >
+                                    <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="
+                                            formState.configuration.port
+                                        "
+                                        :options="sipList"
+                                        placeholder="请选择端口"
+                                        allowClear
+                                        show-search
+                                        :filter-option="filterOption"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('publicHost', formState.type)"
+                            >
+                                <a-form-item
+                                    :name="['configuration', 'publicHost']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入IP地址',
+                                        },
+                                        {
+                                            pattern:
+                                                /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
+                                            message: '请输入正确的IP地址',
+                                        },
+                                    ]"
+                                >
+                                    <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="
+                                            formState.configuration.publicHost
+                                        "
+                                        placeholder="请输入IP地址"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('publicPort', formState.type)"
+                            >
+                                <a-form-item
+                                    :name="['configuration', 'publicPort']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '输入端口',
+                                        },
+                                    ]"
+                                >
+                                    <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="
+                                            formState.configuration.publicPort
+                                        "
+                                        :min="1"
+                                        :max="65535"
+                                    />
+                                </a-form-item>
+                            </a-col>
+
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('remoteHost', formState.type)"
+                            >
+                                <a-form-item
+                                    label="远程地址"
+                                    :name="['configuration', 'remoteHost']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入IP地址',
+                                        },
+                                        {
+                                            pattern:
+                                                /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
+                                            message: '请输入正确的IP地址',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration.remoteHost
+                                        "
+                                        placeholder="请输入远程地址"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('remotePort', formState.type)"
+                            >
+                                <a-form-item
+                                    label="远程端口"
+                                    :name="['configuration', 'remotePort']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '输入端口',
+                                        },
+                                    ]"
+                                >
+                                    <a-input-number
+                                        style="width: 100%"
+                                        placeholder="请输入端口"
+                                        v-model:value="
+                                            formState.configuration.remotePort
+                                        "
+                                        :min="1"
+                                        :max="65535"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('clientId', formState.type)"
+                            >
+                                <a-form-item
+                                    label="clientId"
+                                    :name="['configuration', 'clientId']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入clientId',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration.clientId
+                                        "
+                                        placeholder="请输入clientId"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('username', formState.type)"
+                            >
+                                <a-form-item
+                                    label="用户名"
+                                    :name="['configuration', 'username']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入username',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration.username
+                                        "
+                                        placeholder="请输入username"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('password', formState.type)"
+                            >
+                                <a-form-item
+                                    label="密码"
+                                    :name="['configuration', 'password']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入password',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration.password
+                                        "
+                                        placeholder="请输入password"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('topicPrefix', formState.type)"
+                            >
+                                <a-form-item
+                                    :name="['configuration', 'topicPrefix']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入topicPrefix',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <div class="form-label">
+                                        订阅前缀
+                                        <span class="form-label-required"
+                                            >*</span
+                                        >
+                                        <a-tooltip>
+                                            <template #title>
+                                                <p>
+                                                    当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
+                                                </p>
+                                            </template>
+                                            <question-circle-outlined />
+                                        </a-tooltip>
+                                    </div>
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration.topicPrefix
+                                        "
+                                        placeholder="请输入topicPrefix"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="
+                                    isVisible('maxMessageSize', formState.type)
+                                "
+                            >
+                                <a-form-item
+                                    :name="['configuration', 'maxMessageSize']"
+                                    :rules="[
+                                        {
+                                            max: 1073741824,
+                                            message:
+                                                '请输入1024~1073741824之间的数字',
+                                        },
+                                        {
+                                            min: 1024,
+                                            message:
+                                                '请输入1024~1073741824之间的数字',
+                                        },
+                                        {
+                                            required: true,
+                                            message: '请输入最大消息长度',
+                                        },
+                                    ]"
+                                >
+                                    <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
+                                        v-model:value="
+                                            formState.configuration
+                                                .maxMessageSize
+                                        "
+                                        placeholder="请输入最大消息长度"
+                                    />
+                                </a-form-item>
+                            </a-col>
+
+                            <a-col :span="12">
+                                <a-form-item
+                                    :label="
+                                        isVisible('secure', formState.type)
+                                            ? '开启TLS'
+                                            : '开启DTLS'
+                                    "
+                                    :name="['configuration', 'secure']"
+                                >
+                                    <a-radio-group
+                                        v-model:value="
+                                            formState.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="formState.configuration.secure"
+                            >
+                                <a-form-item
+                                    label="证书"
+                                    :name="['configuration', 'certId']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请选择证书',
+                                        },
+                                    ]"
+                                >
+                                    <a-select
+                                        v-model:value="
+                                            formState.configuration.certId
+                                        "
+                                        :options="sipList"
+                                        placeholder="请选择证书"
+                                        allowClear
+                                        show-search
+                                        :filter-option="filterOption"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="formState.configuration.secure"
+                            >
+                                <a-form-item
+                                    label="私钥别名"
+                                    :name="['configuration', 'privateKeyAlias']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入私钥别名',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .privateKeyAlias
+                                        "
+                                        placeholder="请输入私钥别名"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="24"
+                                v-if="isVisible('parserType', formState.type)"
+                            >
+                                <a-form-item
+                                    :name="['parserType']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请选择粘拆包规则',
+                                        },
+                                    ]"
+                                >
+                                    <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
+                                        v-model:value="formState.parserType"
+                                        :options="ParserTypeOptions"
+                                        placeholder="请选择粘拆包规则"
+                                        allowClear
+                                        show-search
+                                        :filter-option="filterOption"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="
+                                    isVisible('delimited', formState.parserType)
+                                "
+                            >
+                                <a-form-item
+                                    label="分隔符"
+                                    :name="[
+                                        'configuration',
+                                        'parserConfiguration',
+                                        'delimited',
+                                    ]"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入分隔符',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .parserConfiguration.delimited
+                                        "
+                                        placeholder="请输入分隔符"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="24"
+                                v-if="isVisible('lang', formState.parserType)"
+                            >
+                                <a-form-item
+                                    v-show="false"
+                                    label="脚本语言"
+                                    :name="[
+                                        'configuration',
+                                        'parserConfiguration',
+                                        'lang',
+                                    ]"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入lang',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .parserConfiguration.lang
+                                        "
+                                        placeholder="请输入lang"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="24"
+                                v-if="isVisible('script', formState.parserType)"
+                            >
+                                <a-form-item
+                                    label="解析脚本"
+                                    :name="[
+                                        'configuration',
+                                        'parserConfiguration',
+                                        'script',
+                                    ]"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入script',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .parserConfiguration.script
+                                        "
+                                        placeholder="请输入script"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('size', formState.parserType)"
+                            >
+                                <a-form-item
+                                    label="长度值"
+                                    :name="[
+                                        'configuration',
+                                        'parserConfiguration',
+                                        'size',
+                                    ]"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入size',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .parserConfiguration.size
+                                        "
+                                        placeholder="请输入size"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('length', formState.parserType)"
+                            >
+                                <a-form-item
+                                    label="长度"
+                                    :name="[
+                                        'configuration',
+                                        'parserConfiguration',
+                                        'length',
+                                    ]"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入length',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .parserConfiguration.length
+                                        "
+                                        placeholder="请输入length"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('offset', formState.parserType)"
+                            >
+                                <a-form-item
+                                    label="偏移量"
+                                    :name="[
+                                        'configuration',
+                                        'parserConfiguration',
+                                        'offset',
+                                    ]"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入offset',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .parserConfiguration.offset
+                                        "
+                                        placeholder="请输入offset"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                            <a-col
+                                :span="12"
+                                v-if="isVisible('little', formState.parserType)"
+                            >
+                                <a-form-item
+                                    label="大小端"
+                                    :name="[
+                                        'configuration',
+                                        'parserConfiguration',
+                                        'little',
+                                    ]"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请输入little',
+                                        },
+                                        {
+                                            max: 64,
+                                            message: '最大可输入64个字符',
+                                        },
+                                    ]"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formState.configuration
+                                                .parserConfiguration.little
+                                        "
+                                        placeholder="请输入little"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                        </a-row>
+                    </div>
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="12">
+                            <a-form-item
+                                label="说明"
+                                name="description"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入little',
+                                    },
+                                    {
+                                        max: 200,
+                                        message: '最大可输入200个字符',
+                                    },
+                                ]"
+                            >
+                                <a-textarea
+                                    v-model:value="formState.description"
+                                    show-count
+                                    :maxlength="200"
+                                /> </a-form-item
+                        ></a-col>
+                    </a-row>
+                </a-form>
+                <div v-if="!formState.shareCluster">
+                    <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">
+                                <a-collapse-panel
+                                    :key="cluster.id"
+                                    :header="`#${index + 1}.节点`"
+                                >
+                                    <template #extra>
+                                        <delete-outlined
+                                            @click="removeCluster(cluster)"
+                                        />
+                                    </template>
+                                    <a-row :gutter="[24, 24]">
+                                        <a-col :span="8">
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'clusterNodeId',
+                                                ]"
+                                            >
+                                                <div class="form-label">
+                                                    节点名称
+                                                </div>
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.clusterNodeId
+                                                    "
+                                                    :options="clustersList"
+                                                    placeholder="请选择节点名称"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                >
+                                                </a-select>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col :span="4">
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'host',
+                                                ]"
+                                                :rules="{
+                                                    required: true,
+                                                    message: '请选择SIP 地址',
+                                                }"
+                                            >
+                                                <div class="form-label">
+                                                    SIP 地址
+                                                    <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.host"
+                                                    :options="sipListOption"
+                                                    placeholder="请选择IP地址"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    style="width: 110%"
+                                                    @change="
+                                                        handleChangeForm2Sip(
+                                                            index,
+                                                        )
+                                                    "
+                                                >
+                                                </a-select>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col :span="4">
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'port',
+                                                ]"
+                                                :rules="{
+                                                    required: true,
+                                                    message: '请选择端口',
+                                                }"
+                                            >
+                                                <div class="form-label"></div>
+                                                <a-select
+                                                    v-model:value="cluster.port"
+                                                    :options="
+                                                        sipListIndex[index]
+                                                    "
+                                                    placeholder="请选择端口"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col :span="4">
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'publicHost',
+                                                ]"
+                                                :rules="[
+                                                    {
+                                                        required: true,
+                                                        message:
+                                                            '请输入公网 Host',
+                                                    },
+                                                    {
+                                                        pattern:
+                                                            /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
+                                                        message:
+                                                            '请输入正确的IP地址',
+                                                    },
+                                                ]"
+                                            >
+                                                <div class="form-label">
+                                                    公网 Host
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                监听指定端口的请求
+                                                            </p>
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-input
+                                                    style="width: 110%"
+                                                    v-model:value="
+                                                        cluster.publicHost
+                                                    "
+                                                    placeholder="请输入IP地址"
+                                                    allowClear
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col :span="4">
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'publicPort',
+                                                ]"
+                                                :rules="[
+                                                    {
+                                                        required: true,
+                                                        message: '请输入端口',
+                                                    },
+                                                ]"
+                                            >
+                                                <div class="form-label"></div>
+
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    placeholder="请输入端口"
+                                                    v-model:value="
+                                                        cluster.publicPort
+                                                    "
+                                                    :min="1"
+                                                    :max="65535"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                    </a-row>
+                                </a-collapse-panel>
+                            </a-collapse>
+                        </div>
+                        <a-form-item>
+                            <a-button
+                                style="margin-top: 10px"
+                                type="dashed"
+                                block
+                                @click="addCluster"
+                            >
+                                <PlusOutlined />
+                                新增
+                            </a-button>
+                        </a-form-item>
+                    </a-form>
+                </div>
+            </div>
+            <div class="steps-action">
+                <a-button
+                    v-if="view === 'false'"
+                    type="primary"
+                    @click="saveData"
+                >
+                    保存
+                </a-button>
+            </div>
+        </a-card>
+
+        <!-- <div class="steps-action">
+            <a-button
+                v-if="[0].includes(current)"
+                style="margin-right: 8px"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button
+                v-if="current === 1 && view === 'false'"
+                type="primary"
+                style="margin-right: 8px"
+                @click="saveData"
+            >
+                保存
+            </a-button>
+            <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
+        </div> -->
     </page-container>
 </template>
-<script lang="ts" setup name="TypeDetail">
 
+<script lang="ts" setup name="TypeDetail">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import {
+    update,
+    save,
+    resourcesCurrent,
+    resourceClusters,
+    supports,
+} from '@/api/link/type';
+import {
+    DeleteOutlined,
+    PlusOutlined,
+    QuestionCircleOutlined,
+    InfoCircleOutlined,
+} from '@ant-design/icons-vue';
+// import { update, save } from '@/api/link/accessConfig';
+import { FormStates, VisibleData, ParserTypeOptions, isVisible } from '../data';
+interface Form2 {
+    clusterNodeId: string;
+    port: string;
+    host: string;
+    publicPort: string;
+    publicHost: string;
+    id: number;
+}
+// interface FormState {
+//     name: string;
+//     type: undefined;
+//     shareCluster: boolean;
+//     configuration: {
+//         port: string;
+//         host: string;
+//         publicPort: string;
+//         publicHost: string;
+//     };
+//     secure: boolean;
+//     certId: string;
+//     privateKeyAlias: string;
+//     parserType: string;
+// }
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const route = useRoute();
+const view = route.query.view as string;
+const id = route.params.id as string;
+
+const activeKey: any = ref([]);
+const clientHeight = document.body.clientHeight;
+
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+const useForm = Form.useForm;
+
+const formData = ref({
+    name: '',
+    description: '',
+});
+// let formState = ref<FormState>({
+let formState = ref({
+    ...FormStates,
+});
+
+let params = {
+    configuration: {},
+};
+let sipListConst: any = [];
+const sipListOption = ref([]);
+const sipList = ref([]);
+const sipListIndex: any = ref([]);
+const clustersList = ref([]);
+const typeOption = ref([]);
+
+const dynamicValidateForm = reactive<{ cluster: Form2[] }>({
+    cluster: [],
+});
+
+const removeCluster = (item: Form2) => {
+    let index = dynamicValidateForm.cluster.indexOf(item);
+    if (index !== -1) {
+        dynamicValidateForm.cluster.splice(index, 1);
+    }
+};
+
+const addCluster = () => {
+    const id = Date.now();
+    dynamicValidateForm.cluster.push({
+        clusterNodeId: '',
+        port: '',
+        host: '',
+        publicPort: '',
+        publicHost: '',
+        id,
+    });
+    activeKey.value = [...activeKey.value, id.toString()];
+};
+
+const filterOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+const handleChangeForm2Sip = (index: number) => {
+    dynamicValidateForm.cluster[index].port = '';
+    const value = dynamicValidateForm.cluster[index].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 = () => {
+    // validate().then(async (values) => {
+    //     params = {
+    //         ...params,
+    //         ...values,
+    //         provider: 'gb28181-2016',
+    //         transport: 'SIP',
+    //         channel: 'gb28181',
+    //     };
+    //     const resp =
+    //         id === ':id' ? await save(params) : await update({ ...params, id });
+    //     if (resp.status === 200) {
+    //         message.success('操作成功！');
+    //         // if (params.get('save')) {
+    //         // if ((window as any).onTabSaveSuccess) {
+    //         //   if (resp.result) {
+    //         //     (window as any).onTabSaveSuccess(resp.result);
+    //         //     setTimeout(() => window.close(), 300);
+    //         //   }
+    //         // }
+    //         //   } else {
+    //         history.back();
+    //         //   }
+    //     }
+    // });
+};
+
+const next = async () => {
+    let data1: any = await formRef1.value?.validate();
+    if (data1.configuration?.port) {
+        const port = JSON.parse(data1.configuration.port).port;
+        data1.configuration.port = port;
+    }
+    if (!data1?.shareCluster) {
+        let data2 = await formRef2.value?.validate();
+        if (data2 && data2?.cluster) {
+            data2.cluster.forEach((i: any) => {
+                i.enabled = true;
+                i.port = JSON.parse(i.port).port;
+            });
+            data1 = {
+                ...data1,
+                ...data2,
+            };
+        }
+    }
+    params.configuration = data1;
+};
+
+const getSupports = async () => {
+    const res = await supports();
+
+    typeOption.value = res.result.map((item) => ({
+        label: item.name,
+        value: item.id,
+    }));
+    console.log(1112, res, typeOption.value);
+
+    // supports().then((resp) =>
+    //   resp.result?.map((item: any) => ({
+    //     label: item.name,
+    //     value: item.id,
+    //   })),
+    // );
+};
+getSupports();
+
+onMounted(() => {
+    resourcesCurrent().then((resp) => {
+        if (resp.status === 200) {
+            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})`,
+                    };
+                });
+        }
+    });
+
+    resourceClusters().then((resp) => {
+        if (resp.status === 200) {
+            const list = resp.result.map((i) => ({
+                value: i.id,
+                label: i.name,
+            }));
+            clustersList.value = list;
+        }
+    });
+
+    if (id !== ':id') {
+        formState.value = props.data.configuration;
+        formData.value = {
+            name: props.data.name,
+            description: props.data?.description || '',
+        };
+    }
+});
 </script>
-<style lang="less" scoped></style>
+
+<style lang="less" scoped>
+.steps-box {
+    width: 70%;
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+
+.form-item1 {
+    // background-color: #f6f6f6;
+    border: 1px solid #d9d9d9;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+.form-label {
+    height: 30px;
+    padding-bottom: 8px;
+    .form-label-required {
+        color: red;
+        margin: 0 4px 0 -2px;
+    }
+}
+</style>
diff --git a/src/views/link/Type/data.ts b/src/views/link/Type/data.ts
index e69de29b..d6814539 100644
--- a/src/views/link/Type/data.ts
+++ b/src/views/link/Type/data.ts
@@ -0,0 +1,82 @@
+export const FormStates = {
+    name: '',
+    type: 'UDP',
+    shareCluster: true,
+    parserType: '',
+    configuration: {
+        port: '',
+        host: '0.0.0.0',
+        publicPort: '',
+        publicHost: '',
+        remoteHost: '',
+        remotePort: '',
+        secure: false,
+        username: '',
+        password: '',
+        topicPrefix: '',
+        maxMessageSize: '',
+        certId: '',
+        privateKeyAlias: '',
+        clientId: '',
+        parserConfiguration: {
+            delimited: '',
+            lang: '',
+            script: '',
+            size: '',
+            length: '',
+            offset: '',
+            little: '',
+        },
+    },
+    description: '',
+};
+
+const VisibleMost = [
+    'COAP_SERVER',
+    'MQTT_SERVER',
+    'WEB_SOCKET_SERVER',
+    'TCP_SERVER',
+    'UDP',
+    'HTTP_SERVER',
+];
+
+export const VisibleData = {
+    parserType: ['TCP_SERVER'],
+    // configuration: {
+    port: VisibleMost,
+    host: VisibleMost,
+    publicPort: VisibleMost,
+    publicHost: VisibleMost,
+    remoteHost: ['MQTT_CLIENT'],
+    remotePort: ['MQTT_CLIENT'],
+    secure: ['TCP_SERVER', 'UDP', 'COAP_SERVER'],
+    username: ['MQTT_CLIENT'],
+    password: ['MQTT_CLIENT'],
+    topicPrefix: ['MQTT_CLIENT'],
+    maxMessageSize: ['MQTT_SERVER', 'MQTT_CLIENT'],
+    // certId: '',
+    // privateKeyAlias: '',
+    clientId: ['MQTT_CLIENT'],
+    // parserConfiguration: {
+    delimited: ['DELIMITED'],
+    lang: ['SCRIPT'],
+    script: ['SCRIPT'],
+    size: ['FIXED_LENGTH'],
+    length: ['LENGTH_FIELD'],
+    offset: ['LENGTH_FIELD'],
+    little: ['LENGTH_FIELD'],
+    // },
+
+    // },
+};
+
+export const ParserTypeOptions = [
+    { value: 'DIRECT', label: '不处理' },
+    { value: 'DELIMITED', label: '分隔符' },
+    { value: 'SCRIPT', label: '自定义脚本' },
+    { value: 'FIXED_LENGTH', label: '固定长度' },
+    { value: 'LENGTH_FIELD', label: '长度字段' },
+];
+
+export const isVisible = (LastName: string, dependencies: string | boolean) =>
+    VisibleData[LastName].includes(dependencies);
diff --git a/src/views/link/Type/index.vue b/src/views/link/Type/index.vue
index 53cde88e..bc37ec86 100644
--- a/src/views/link/Type/index.vue
+++ b/src/views/link/Type/index.vue
@@ -357,36 +357,32 @@ const getActions = (
 };
 
 const handlAdd = () => {
-    // router.push({
-    //     path: `/iot/link/certificate/detail/:id`,
-    //     query: { view: false },
-    // });
+    router.push({
+        path: `/iot/link/type/detail/:id`,
+        query: { view: false },
+    });
 };
 
 const handlEye = (id: string) => {
-    console.log(111, id);
-
-    // router.push({
-    //     path: `/iot/link/certificate/detail/${id}`,
-    //     query: { view: true },
-    // });
+    router.push({
+        path: `/iot/link/type/detail/${id}`,
+        query: { view: true },
+    });
 };
 
 const handlEdit = (id: string) => {
-    console.log(111, id);
-
-    // router.push({
-    //     path: `/iot/link/certificate/detail/${id}`,
-    //     query: { view: false },
-    // });
+    router.push({
+        path: `/iot/link/type/detail/${id}`,
+        query: { view: false },
+    });
 };
 
 const handlDelete = async (id: string) => {
-    // const res = await remove(id);
-    // if (res.success) {
-    //     message.success('操作成功');
-    //     tableRef.value.reload();
-    // }
+    const res = await remove(id);
+    if (res.success) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
 };
 
 const getDetails = (slotProps: Partial<Record<string, any>>) => {