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] =?UTF-8?q?feat:=20=E7=BD=91=E7=BB=9C=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=20=E8=A1=A8=E5=8D=95=E5=85=B1=E4=BA=AB?=
 =?UTF-8?q?=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>>) => {