diff --git a/public/images/access-icon.png b/public/images/access-icon.png
new file mode 100644
index 00000000..aeec9e6b
Binary files /dev/null and b/public/images/access-icon.png differ
diff --git a/src/components/TitleComponent/index.vue b/src/components/TitleComponent/index.vue
index 15d347c2..9084c843 100644
--- a/src/components/TitleComponent/index.vue
+++ b/src/components/TitleComponent/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="title" :style="style">
-        <span class="titleData">{{ data }}</span>
+        <div class="title-content">{{ data }}</div>
         <slot name="extra"></slot>
     </div>
 </template>
@@ -22,27 +22,28 @@ const props = defineProps({
 
 <style lang="less" scoped>
 .title {
-    position: relative;
+    display: flex;
+    align-items: center;
     width: 100%;
-    margin-bottom: 10px;
-    color: rgba(0, 0, 0, 0.8);
-    font-weight: 600;
-    font-size: 16px;
-}
-.titleData {
-    position: relative;
-    width: 100%;
-    padding-left: 12px;
-    &::before {
-        position: absolute;
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-        bottom: 0.5px;
-        left: 0;
-        width: 4px;
-        height: 80%;
-        background-color: @primary-color;
-        content: '';
+    margin-bottom: 16px;
+
+    .title-content {
+        position: relative;
+        padding-left: 10px;
+        color: rgba(0, 0, 0, 0.8);
+        font-weight: 600;
+        line-height: 1;
+
+        &::before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+            background-color: @primary-color;
+            border-radius: 0 3px 3px 0;
+            content: ' ';
+        }
     }
 }
 </style>
diff --git a/src/views/link/AccessConfig/components/AccessCard/index.vue b/src/views/link/AccessConfig/components/AccessCard/index.vue
index 18828e2f..7ce0183d 100644
--- a/src/views/link/AccessConfig/components/AccessCard/index.vue
+++ b/src/views/link/AccessConfig/components/AccessCard/index.vue
@@ -1,14 +1,19 @@
 <template>
     <j-card
         hoverable
-        :class="['card-render', checked === data.id ? 'checked' : '']"
+        :class="[
+            'card-render',
+            'container',
+            checked === data.id ? 'checked' : '',
+        ]"
         @click="checkedChange(data.id)"
     >
         <div class="title">
-            <j-tooltip placement="topLeft" :title="data.name">{{
-                data.name
-            }}</j-tooltip>
+            <Ellipsis style="width: calc(100% - 100px); margin-bottom: 24px">
+                {{ data.name }}
+            </Ellipsis>
         </div>
+
         <slot name="other"></slot>
         <div class="desc">
             <j-tooltip placement="topLeft" :title="data.description">{{
@@ -46,16 +51,18 @@ const checkedChange = (id: string) => {
 .card-render {
     width: 100%;
     overflow: hidden;
-    background: url('/public/images/access.png') no-repeat;
-    background-size: 100% 100%;
-    height: 120px;
-
+    // background: url('/public/images/access.png') no-repeat;
+    // background-size: 100% 100%;
+    height: 140px;
+    background: #fafafa;
+    border: 1px solid #e6e6e6;
     .title {
-        width: calc(100% - 88px);
-        overflow: hidden;
+        font-style: normal;
         font-weight: 800;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        font-size: 16px;
+        line-height: 22px;
+        color: rgba(0, 0, 0, 0.85);
+        opacity: 0.85;
     }
 
     .desc {
@@ -78,8 +85,7 @@ const checkedChange = (id: string) => {
         width: 44px;
         height: 44px;
         color: #fff;
-        background-color: red;
-        background-color: #2f54eb;
+        background-color: @primary-color;
         transform: rotate(-45deg);
 
         > div {
@@ -92,11 +98,16 @@ const checkedChange = (id: string) => {
     }
     &.checked {
         position: relative;
-        color: #2f54eb;
-        border-color: #2f54eb;
+        color: @primary-color;
+        border-color: @primary-color;
+        z-index: 0;
         .checked-icon {
             display: block;
         }
     }
 }
+.container {
+    background: url('/public/images/access-icon.png') no-repeat;
+    background-position: bottom right;
+}
 </style>
diff --git a/src/views/link/AccessConfig/components/Channel/index.vue b/src/views/link/AccessConfig/components/Channel/index.vue
index 91b1aacc..01a37d29 100644
--- a/src/views/link/AccessConfig/components/Channel/index.vue
+++ b/src/views/link/AccessConfig/components/Channel/index.vue
@@ -1,91 +1,73 @@
 <template>
-    <div class="container">
-        <div v-if="type === 'channel'" class="card-last">
-            <j-row :gutter="[24, 24]">
-                <j-col :span="12">
-                    <title-component data="基本信息" />
-                    <div>
-                        <j-form
-                            :model="formState"
-                            name="basic"
-                            autocomplete="off"
-                            layout="vertical"
-                            @finish="onFinish"
+    <div v-if="type === 'channel'" class="card-last">
+        <j-row :gutter="[24, 24]">
+            <j-col :span="12">
+                <title-component data="基本信息" />
+                <div>
+                    <j-form
+                        :model="formState"
+                        name="basic"
+                        autocomplete="off"
+                        layout="vertical"
+                        @finish="onFinish"
+                    >
+                        <j-form-item
+                            label="名称"
+                            name="name"
+                            :rules="[
+                                {
+                                    required: true,
+                                    message: '请输入名称',
+                                    trigger: 'blur',
+                                },
+                                { max: 64, message: '最多可输入64个字符' },
+                            ]"
                         >
-                            <j-form-item
-                                label="名称"
-                                name="name"
-                                :rules="[
-                                    {
-                                        required: true,
-                                        message: '请输入名称',
-                                        trigger: 'blur',
-                                    },
-                                    { max: 64, message: '最多可输入64个字符' },
-                                ]"
+                            <j-input
+                                placeholder="请输入名称"
+                                v-model:value="formState.name"
+                            />
+                        </j-form-item>
+                        <j-form-item label="说明" name="description">
+                            <j-textarea
+                                placeholder="请输入说明"
+                                :rows="4"
+                                v-model:value="formState.description"
+                                show-count
+                                :maxlength="200"
+                            />
+                        </j-form-item>
+                        <j-form-item>
+                            <PermissionButton
+                                v-if="view === 'false'"
+                                type="primary"
+                                html-type="submit"
+                                :hasPermission="`link/AccessConfig:${
+                                    id === ':id' ? 'add' : 'update'
+                                }`"
                             >
-                                <j-input
-                                    placeholder="请输入名称"
-                                    v-model:value="formState.name"
-                                />
-                            </j-form-item>
-                            <j-form-item label="说明" name="description">
-                                <j-textarea
-                                    placeholder="请输入说明"
-                                    :rows="4"
-                                    v-model:value="formState.description"
-                                    show-count
-                                    :maxlength="200"
-                                />
-                            </j-form-item>
-                            <j-form-item>
-                                <PermissionButton
-                                    v-if="view === 'false'"
-                                    type="primary"
-                                    html-type="submit"
-                                    :hasPermission="`link/AccessConfig:${
-                                        id === ':id' ? 'add' : 'update'
-                                    }`"
-                                >
-                                    保存
-                                </PermissionButton>
-                            </j-form-item>
-                        </j-form>
-                    </div>
-                </j-col>
-                <j-col :span="12">
-                    <div class="config-right">
-                        <div class="config-right-item">
-                            <title-component data="配置概览" />
-                            <div class="config-right-item-context">
-                                接入方式：{{ provider.name }}
-                            </div>
-                            <div class="config-right-item-context">
-                                {{ provider.description }}
-                            </div>
-                            <div class="config-right-item-context">
-                                消息协议：{{ provider.id }}
-                            </div>
-                        </div>
-                        <div class="config-right-item">
-                            <title-component data="设备接入指引" />
-                            <div class="config-right-item-context">
-                                1、配置{{ provider.name }}通道
-                            </div>
-                            <div class="config-right-item-context">
-                                2、创建{{ provider.name }}设备接入网关
-                            </div>
-                            <div class="config-right-item-context">
-                                3、创建产品，并选中接入方式为{{ provider.name }}
-                            </div>
-                            <div class="config-right-item-context">
-                                4、添加设备，单独为每一个设备进行数据点绑定
-                            </div>
-                        </div>
-                    </div>
-                </j-col>
-            </j-row>
-        </div>
+                                保存
+                            </PermissionButton>
+                        </j-form-item>
+                    </j-form>
+                </div>
+            </j-col>
+            <j-col :span="12">
+                <div class="doc" style="height: 600px">
+                    <TitleComponent data="配置概览" />
+                    <p>接入方式：{{ provider.name }}</p>
+                    <p>
+                        {{ provider.description }}
+                    </p>
+                    <p>消息协议：{{ provider.id }}</p>
+                    <TitleComponent data="设备接入指引" />
+                    <p>1、配置{{ provider.name }}通道</p>
+                    <p>2、创建{{ provider.name }}设备接入网关</p>
+                    <p>3、创建产品，并选中接入方式为{{ provider.name }}</p>
+                    <p>4、添加设备，单独为每一个设备进行数据点绑定</p>
+                </div>
+            </j-col>
+        </j-row>
     </div>
 </template>
 
@@ -147,31 +129,9 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-.container {
-    margin: 20px;
-}
-
 .card-last {
     padding-right: 5px;
     overflow-y: auto;
     overflow-x: hidden;
 }
-.config-right {
-    padding: 20px;
-
-    .config-right-item {
-        margin-bottom: 10px;
-
-        .config-right-item-title {
-            width: 100%;
-            margin-bottom: 10px;
-            font-weight: 600;
-        }
-
-        .config-right-item-context {
-            margin: 5px 0;
-            color: rgba(0, 0, 0, 0.8);
-        }
-    }
-}
 </style>
diff --git a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
index 91ae7e04..22d34c9f 100644
--- a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
+++ b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div>
         <j-steps class="steps-steps" :current="stepCurrent">
             <j-step v-for="item in steps" :key="item" :title="item" />
         </j-steps>
@@ -9,7 +9,7 @@
                     <AIcon type="InfoCircleOutlined" />
                     通过CTWing平台的HTTP推送服务进行数据接入
                 </div>
-                <div style="margin-top: 15px">
+                <div style="margin-top: 42px">
                     <j-row :gutter="[24, 24]">
                         <j-col :span="16">
                             <j-form
@@ -86,7 +86,6 @@
                                             />
                                         </j-form-item>
                                     </j-col>
-                                    <j-col :span="12"> </j-col>
                                 </j-row>
                                 <j-row :gutter="[24, 24]">
                                     <j-col :span="24">
@@ -116,7 +115,10 @@
                                     </div>
                                     <div>
                                         2、CTWing端配置产品/设备/分组级订阅，订阅方URL地址请填写:
-                                        <div style="word-wrap: break-word">
+                                        <div
+                                            class="url"
+                                            style="word-wrap: break-word"
+                                        >
                                             {{
                                                 `${origin}/api/ctwing/${randomString()}/notify`
                                             }}
@@ -181,23 +183,19 @@
                         新增
                     </PermissionButton>
                 </div>
-                <j-scrollbar height="500">
-                    <j-row
-                        :gutter="[24, 24]"
-                        v-if="procotolList.length > 0"
-                        style="margin-right: 10px"
-                    >
+                <j-scrollbar height="480">
+                    <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
                         <j-col
                             :span="8"
                             v-for="item in procotolList"
                             :key="item.id"
                         >
-                            <access-card
+                            <AccessCard
                                 @checkedChange="procotolChange"
                                 :checked="procotolCurrent"
                                 :data="item"
                             >
-                            </access-card>
+                            </AccessCard>
                         </j-col>
                     </j-row>
                     <j-empty v-else description="暂无数据" />
@@ -207,79 +205,69 @@
         <div v-if="current === 2" class="card-last">
             <j-row :gutter="[24, 24]">
                 <j-col :span="12">
-                    <title-component data="基本信息" />
-                    <div>
-                        <j-form
-                            :model="formData"
-                            name="basic"
-                            autocomplete="off"
-                            layout="vertical"
-                            ref="formRef2"
+                    <TitleComponent data="基本信息" />
+                    <j-form
+                        :model="formData"
+                        name="basic"
+                        autocomplete="off"
+                        layout="vertical"
+                        ref="formRef2"
+                    >
+                        <j-form-item
+                            label="名称"
+                            name="name"
+                            :rules="[
+                                {
+                                    required: true,
+                                    message: '请输入名称',
+                                    trigger: 'blur',
+                                },
+                                { max: 64, message: '最多可输入64个字符' },
+                            ]"
                         >
-                            <j-form-item
-                                label="名称"
-                                name="name"
-                                :rules="[
-                                    {
-                                        required: true,
-                                        message: '请输入名称',
-                                        trigger: 'blur',
-                                    },
-                                    { max: 64, message: '最多可输入64个字符' },
-                                ]"
-                            >
-                                <j-input
-                                    placeholder="请输入名称"
-                                    v-model:value="formData.name"
-                                />
-                            </j-form-item>
-                            <j-form-item label="说明" name="description">
-                                <j-textarea
-                                    placeholder="请输入说明"
-                                    :rows="4"
-                                    v-model:value="formData.description"
-                                    show-count
-                                    :maxlength="200"
-                                />
-                            </j-form-item>
-                        </j-form>
-                    </div>
+                            <j-input
+                                placeholder="请输入名称"
+                                v-model:value="formData.name"
+                            />
+                        </j-form-item>
+                        <j-form-item label="说明" name="description">
+                            <j-textarea
+                                placeholder="请输入说明"
+                                :rows="4"
+                                v-model:value="formData.description"
+                                show-count
+                                :maxlength="200"
+                            />
+                        </j-form-item>
+                    </j-form>
                 </j-col>
                 <j-col :span="12">
-                    <div class="config-right">
-                        <div class="config-right-item">
-                            <title-component data="配置概览" />
-                            <div class="config-right-item-context">
-                                接入方式：{{ provider.name }}
-                            </div>
-                            <div class="config-right-item-context">
-                                {{ provider.description }}
-                            </div>
-                            <div class="config-right-item-context">
-                                消息协议：{{ procotolCurrent }}
-                            </div>
-                        </div>
-                        <div class="config-right-item">
-                            <title-component data="设备接入指引" />
-                            <div class="config-right-item-context">
-                                1、创建类型为{{
-                                    props?.provider?.id === 'OneNet'
-                                        ? 'OneNet'
-                                        : 'CTWing'
-                                }}的设备接入网关
-                            </div>
-                            <div class="config-right-item-context">
-                                2、创建产品，并选中接入方式为
-                                {{
-                                    props?.provider?.id === 'OneNet'
-                                        ? 'OneNet'
-                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
-                                }}
-                            </div>
-                            <div class="config-right-item-context">
-                                3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
-                            </div>
-                        </div>
+                    <div class="doc" style="height: 606px">
+                        <TitleComponent data="配置概览" />
+                        <p>接入方式：{{ provider.name }}</p>
+                        <p>
+                            {{ provider.description }}
+                        </p>
+                        <p>消息协议：{{ procotolCurrent }}</p>
+                        <TitleComponent data="设备接入指引" />
+                        <p>
+                            1、创建类型为{{
+                                props?.provider?.id === 'OneNet'
+                                    ? 'OneNet'
+                                    : 'CTWing'
+                            }}的设备接入网关
+                        </p>
+                        <p>
+                            2、创建产品，并选中接入方式为
+                            {{
+                                props?.provider?.id === 'OneNet'
+                                    ? 'OneNet'
+                                    : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                            }}
+                        </p>
+                        <p>
+                            3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
+                        </p>
                     </div>
                 </j-col>
             </j-row>
@@ -481,12 +469,8 @@ watch(
 </script>
 
 <style lang="less" scoped>
-.container {
-    margin: 20px;
-}
-
 .steps-content {
-    margin: 20px;
+    margin-top: 20px;
 }
 .steps-box {
     min-height: 400px;
@@ -501,7 +485,6 @@ watch(
 .steps-action {
     width: 100%;
     margin-top: 24px;
-    margin-left: 20px;
 }
 .steps-action-save {
     margin-left: 0;
@@ -518,52 +501,4 @@ watch(
     margin: 15px 0;
     justify-content: space-between;
 }
-
-.card-last {
-    padding-right: 5px;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-.config-right {
-    padding: 20px;
-    .config-right-item {
-        margin-bottom: 10px;
-
-        .config-right-item-title {
-            width: 100%;
-            margin-bottom: 10px;
-            font-weight: 600;
-        }
-
-        .config-right-item-context {
-            margin: 5px 0;
-            color: rgba(0, 0, 0, 0.8);
-        }
-    }
-}
-
-.doc {
-    height: 550px;
-    padding: 24px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    color: rgba(#000, 0.8);
-    font-size: 14px;
-    background-color: #fafafa;
-
-    h1 {
-        margin: 16px 0;
-        color: rgba(#000, 0.85);
-        font-weight: bold;
-        font-size: 14px;
-
-        &:first-child {
-            margin-top: 0;
-        }
-    }
-
-    .image {
-        margin: 16px 0;
-    }
-}
 </style>
diff --git a/src/views/link/AccessConfig/components/Cloud/OneNet.vue b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
index de6d16e0..2d21a0b4 100644
--- a/src/views/link/AccessConfig/components/Cloud/OneNet.vue
+++ b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div>
         <j-steps class="steps-steps" :current="stepCurrent">
             <j-step v-for="item in steps" :key="item" :title="item" />
         </j-steps>
@@ -9,7 +9,7 @@
                     <AIcon type="InfoCircleOutlined" />
                     通过OneNet平台的HTTP推送服务进行数据接入
                 </div>
-                <div style="margin-top: 15px">
+                <div style="margin-top: 42px">
                     <j-row :gutter="[24, 24]">
                         <j-col :span="16">
                             <j-form
@@ -265,23 +265,19 @@
                         新增
                     </PermissionButton>
                 </div>
-                <j-scrollbar height="500">
-                    <j-row
-                        :gutter="[24, 24]"
-                        v-if="procotolList.length > 0"
-                        style="margin-right: 10px"
-                    >
+                <j-scrollbar height="480">
+                    <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
                         <j-col
                             :span="8"
                             v-for="item in procotolList"
                             :key="item.id"
                         >
-                            <access-card
+                            <AccessCard
                                 @checkedChange="procotolChange"
                                 :checked="procotolCurrent"
                                 :data="item"
                             >
-                            </access-card>
+                            </AccessCard>
                         </j-col>
                     </j-row>
                     <j-empty v-else description="暂无数据" />
@@ -330,40 +326,32 @@
                     </div>
                 </j-col>
                 <j-col :span="12">
-                    <div class="config-right">
-                        <div class="config-right-item">
-                            <title-component data="配置概览" />
-                            <div class="config-right-item-context">
-                                接入方式：{{ provider.name }}
-                            </div>
-                            <div class="config-right-item-context">
-                                {{ provider.description }}
-                            </div>
-                            <div class="config-right-item-context">
-                                消息协议：{{ procotolCurrent }}
-                            </div>
-                        </div>
-                        <div class="config-right-item">
-                            <title-component data="设备接入指引" />
-                            <div class="config-right-item-context">
-                                1、创建类型为{{
-                                    props?.provider?.id === 'OneNet'
-                                        ? 'OneNet'
-                                        : 'CTWing'
-                                }}的设备接入网关
-                            </div>
-                            <div class="config-right-item-context">
-                                2、创建产品，并选中接入方式为
-                                {{
-                                    props?.provider?.id === 'OneNet'
-                                        ? 'OneNet'
-                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
-                                }}
-                            </div>
-                            <div class="config-right-item-context">
-                                3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
-                            </div>
-                        </div>
+                    <div class="doc" style="height: 606px">
+                        <TitleComponent data="配置概览" />
+                        <p>接入方式：{{ provider.name }}</p>
+                        <p>
+                            {{ provider.description }}
+                        </p>
+                        <p>消息协议：{{ procotolCurrent }}</p>
+                        <TitleComponent data="设备接入指引" />
+                        <p>
+                            1、创建类型为{{
+                                props?.provider?.id === 'OneNet'
+                                    ? 'OneNet'
+                                    : 'CTWing'
+                            }}的设备接入网关
+                        </p>
+                        <p>
+                            2、创建产品，并选中接入方式为
+                            {{
+                                props?.provider?.id === 'OneNet'
+                                    ? 'OneNet'
+                                    : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                            }}
+                        </p>
+                        <p>
+                            3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
+                        </p>
                     </div>
                 </j-col>
             </j-row>
@@ -567,12 +555,8 @@ watch(
 </script>
 
 <style lang="less" scoped>
-.container {
-    margin: 20px;
-}
-
 .steps-content {
-    margin: 20px;
+    margin-top: 20px;
 }
 .steps-box {
     min-height: 400px;
@@ -586,7 +570,6 @@ watch(
 .steps-action {
     width: 100%;
     margin-top: 24px;
-    margin-left: 20px;
 }
 .steps-action-save {
     margin-left: 0;
@@ -609,54 +592,9 @@ watch(
     overflow-y: auto;
     overflow-x: hidden;
 }
-.config-right {
-    padding: 20px;
-    .config-right-item {
-        margin-bottom: 10px;
 
-        .config-right-item-title {
-            width: 100%;
-            margin-bottom: 10px;
-            font-weight: 600;
-        }
-
-        .config-right-item-context {
-            margin: 5px 0;
-            color: rgba(0, 0, 0, 0.8);
-        }
-    }
-}
-
-.doc {
-    height: 550px;
-    padding: 24px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    color: rgba(#000, 0.8);
-    font-size: 14px;
-    background-color: #fafafa;
-
-    h1 {
-        margin: 16px 0;
-        color: rgba(#000, 0.85);
-        font-weight: bold;
-        font-size: 14px;
-
-        &:first-child {
-            margin-top: 0;
-        }
-    }
-
-    .image {
-        margin: 16px 0;
-    }
-}
 .form-label {
     height: 30px;
     padding-bottom: 8px;
-    .form-label-required {
-        color: red;
-        margin: 0 4px 0 -2px;
-    }
 }
 </style>
diff --git a/src/views/link/AccessConfig/components/Edge/index.vue b/src/views/link/AccessConfig/components/Edge/index.vue
index eba5ee0d..dc55b0e3 100644
--- a/src/views/link/AccessConfig/components/Edge/index.vue
+++ b/src/views/link/AccessConfig/components/Edge/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="type === 'edge'" class="container">
+    <div v-if="type === 'edge'">
         <j-steps
             v-if="channel !== 'edge-child-device'"
             class="steps-steps"
@@ -29,12 +29,8 @@
                         新增
                     </PermissionButton>
                 </div>
-                <j-scrollbar height="500">
-                    <j-row
-                        :gutter="[24, 24]"
-                        v-if="networkList.length > 0"
-                        style="margin-right: 10px"
-                    >
+                <j-scrollbar height="480">
+                    <j-row :gutter="[24, 24]" v-if="networkList.length > 0">
                         <j-col
                             :span="8"
                             v-for="item in networkList"
@@ -66,11 +62,7 @@
                                                     class="item"
                                                 >
                                                     <j-badge
-                                                        :color="
-                                                            i.health === -1
-                                                                ? 'red'
-                                                                : 'green'
-                                                        "
+                                                        :status="getColor(i)"
                                                     />{{ i.address }}
                                                 </div>
                                             </div>
@@ -82,11 +74,7 @@
                                                 class="item"
                                             >
                                                 <j-badge
-                                                    :color="
-                                                        i.health === -1
-                                                            ? 'red'
-                                                            : 'green'
-                                                    "
+                                                    :status="getColor(i)"
                                                     :text="i.address"
                                                 />
                                                 <span
@@ -163,19 +151,13 @@
                     </j-form>
                 </j-col>
                 <j-col :span="12">
-                    <div class="config-right">
-                        <div class="config-right-item">
-                            <title-component data="配置概览" />
-                            <div class="config-right-item-context">
-                                接入方式：{{ provider.name }}
-                            </div>
-                            <div class="config-right-item-context">
-                                {{ provider.description }}
-                            </div>
-                            <div class="config-right-item-context">
-                                消息协议：{{ provider.id }}
-                            </div>
-                        </div>
+                    <div class="doc" style="height: 600px">
+                        <TitleComponent data="配置概览" />
+                        <p>接入方式：{{ provider.name }}</p>
+                        <p>
+                            {{ provider.description }}
+                        </p>
+                        <p>消息协议：{{ provider.id }}</p>
                     </div>
                 </j-col>
             </j-row>
@@ -278,6 +260,7 @@ const onFinish = async (values: any) => {
 const checkedChange = (id: string) => {
     networkCurrent.value = id;
 };
+const getColor = (i: any) => (i.health === -1 ? 'error' : 'processing');
 
 const queryNetworkList = async (id: string, include: string, data = {}) => {
     const resp = await getNetworkList(
@@ -359,12 +342,8 @@ watch(
 </script>
 
 <style lang="less" scoped>
-.container {
-    margin: 20px;
-}
-
 .steps-content {
-    margin: 20px;
+    margin-top: 20px;
 }
 .steps-box {
     min-height: 400px;
@@ -378,7 +357,6 @@ watch(
 .steps-action {
     width: 100%;
     margin-top: 24px;
-    margin-left: 20px;
 }
 .steps-action-save {
     margin-left: 0;
diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index f418cc94..f3b17be4 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -9,421 +9,397 @@
                     <AIcon type="InfoCircleOutlined" />
                     配置设备信令参数
                 </div>
-                <div>
-                    <j-form
-                        :model="formState"
-                        ref="formRef1"
-                        name="basic"
-                        autocomplete="off"
-                        layout="vertical"
+
+                <j-form
+                    :model="formState"
+                    ref="formRef1"
+                    name="basic"
+                    autocomplete="off"
+                    layout="vertical"
+                >
+                    <j-row :gutter="[24, 24]">
+                        <j-col :span="12">
+                            <j-form-item
+                                label="SIP 域"
+                                name="domain"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入SIP 域',
+                                    },
+                                    {
+                                        max: 64,
+                                        message: '最大可输入64个字符',
+                                    },
+                                ]"
+                            >
+                                <j-input
+                                    v-model:value="formState.domain"
+                                    placeholder="请输入SIP 域"
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="12">
+                            <j-form-item
+                                label="SIP ID"
+                                name="sipId"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入SIP ID',
+                                    },
+                                    {
+                                        max: 64,
+                                        message: '最大可输入64个字符',
+                                    },
+                                ]"
+                            >
+                                <j-input
+                                    v-model:value="formState.sipId"
+                                    placeholder="请输入SIP ID"
+                                />
+                            </j-form-item>
+                        </j-col>
+                    </j-row>
+
+                    <j-form-item
+                        name="shareCluster"
+                        :rules="[
+                            {
+                                required: true,
+                                message: '请选择集群',
+                            },
+                        ]"
                     >
+                        <template #label>
+                            集群
+                            <j-tooltip
+                                title="共享配置:集群下所有节点共用同一配置,独立配置:集群下不同节点使用不同配置"
+                            >
+                                <AIcon
+                                    type="QuestionCircleOutlined"
+                                    style="margin-left: 2px"
+                                />
+                            </j-tooltip>
+                        </template>
+                        <j-radio-group v-model:value="formState.shareCluster">
+                            <j-radio :value="true">共享配置</j-radio>
+                            <j-radio :value="false">独立配置</j-radio>
+                        </j-radio-group>
+                    </j-form-item>
+                    <div v-if="formState.shareCluster" class="form-item1">
                         <j-row :gutter="[24, 24]">
-                            <j-col :span="12">
+                            <j-col :span="6">
                                 <j-form-item
-                                    label="SIP 域"
-                                    name="domain"
+                                    label="SIP 地址"
+                                    :name="['hostPort', 'host']"
                                     :rules="[
                                         {
                                             required: true,
-                                            message: '请输入SIP 域',
-                                        },
-                                        {
-                                            max: 64,
-                                            message: '最大可输入64个字符',
+                                            message: '请选择SIP地址',
                                         },
                                     ]"
                                 >
-                                    <j-input
-                                        v-model:value="formState.domain"
-                                        placeholder="请输入SIP 域"
+                                    <j-select
+                                        v-model:value="formState.hostPort.host"
+                                        style="width: 105%"
+                                        :disabled="true"
+                                        show-search
+                                        :filter-option="filterOption"
+                                    >
+                                        <j-select-option value="0.0.0.0"
+                                            >0.0.0.0</j-select-option
+                                        >
+                                    </j-select>
+                                </j-form-item>
+                            </j-col>
+                            <j-col :span="6">
+                                <j-form-item
+                                    :name="['hostPort', 'port']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '请选择端口',
+                                        },
+                                    ]"
+                                >
+                                    <div class="form-label"></div>
+
+                                    <j-select
+                                        v-model:value="formState.hostPort.port"
+                                        :options="sipList"
+                                        placeholder="请选择端口"
+                                        allowClear
+                                        show-search
+                                        :filter-option="filterOption"
                                     />
                                 </j-form-item>
                             </j-col>
-                            <j-col :span="12">
+                            <j-col :span="6">
                                 <j-form-item
-                                    label="SIP ID"
-                                    name="sipId"
+                                    label="公网 Host"
+                                    :name="['hostPort', 'publicHost']"
                                     :rules="[
                                         {
                                             required: true,
-                                            message: '请输入SIP ID',
+                                            message: '请输入IP地址',
                                         },
                                         {
-                                            max: 64,
-                                            message: '最大可输入64个字符',
+                                            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地址',
                                         },
                                     ]"
                                 >
                                     <j-input
-                                        v-model:value="formState.sipId"
-                                        placeholder="请输入SIP ID"
+                                        style="width: 105%"
+                                        v-model:value="
+                                            formState.hostPort.publicHost
+                                        "
+                                        placeholder="请输入IP地址"
+                                    />
+                                </j-form-item>
+                            </j-col>
+                            <j-col :span="6">
+                                <j-form-item
+                                    :name="['hostPort', 'publicPort']"
+                                    :rules="[
+                                        {
+                                            required: true,
+                                            message: '输入端口',
+                                        },
+                                    ]"
+                                >
+                                    <div class="form-label"></div>
+
+                                    <j-input-number
+                                        style="width: 100%"
+                                        placeholder="请输入端口"
+                                        v-model:value="
+                                            formState.hostPort.publicPort
+                                        "
+                                        :min="1"
+                                        :max="65535"
                                     />
                                 </j-form-item>
                             </j-col>
                         </j-row>
-
-                        <j-form-item
-                            name="shareCluster"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请选择集群',
-                                },
-                            ]"
-                        >
-                            <template #label>
-                                集群
-                                <j-tooltip
-                                    title="共享配置:集群下所有节点共用同一配置,独立配置:集群下不同节点使用不同配置"
-                                >
-                                    <AIcon
-                                        type="QuestionCircleOutlined"
-                                        style="margin-left: 2px"
-                                    />
-                                </j-tooltip>
-                            </template>
-                            <j-radio-group
-                                v-model:value="formState.shareCluster"
-                            >
-                                <j-radio :value="true">共享配置</j-radio>
-                                <j-radio :value="false">独立配置</j-radio>
-                            </j-radio-group>
-                        </j-form-item>
-                        <div v-if="formState.shareCluster" class="form-item1">
-                            <j-row :gutter="[24, 24]">
-                                <j-col :span="6">
-                                    <j-form-item
-                                        label="SIP 地址"
-                                        :name="['hostPort', 'host']"
-                                        :rules="[
-                                            {
-                                                required: true,
-                                                message: '请选择SIP地址',
-                                            },
-                                        ]"
-                                    >
-                                        <j-select
-                                            v-model:value="
-                                                formState.hostPort.host
-                                            "
-                                            style="width: 105%"
-                                            :disabled="true"
-                                            show-search
-                                            :filter-option="filterOption"
-                                        >
-                                            <j-select-option value="0.0.0.0"
-                                                >0.0.0.0</j-select-option
-                                            >
-                                        </j-select>
-                                    </j-form-item>
-                                </j-col>
-                                <j-col :span="6">
-                                    <j-form-item
-                                        :name="['hostPort', 'port']"
-                                        :rules="[
-                                            {
-                                                required: true,
-                                                message: '请选择端口',
-                                            },
-                                        ]"
-                                    >
-                                        <div class="form-label"></div>
-
-                                        <j-select
-                                            v-model:value="
-                                                formState.hostPort.port
-                                            "
-                                            :options="sipList"
-                                            placeholder="请选择端口"
-                                            allowClear
-                                            show-search
-                                            :filter-option="filterOption"
-                                        />
-                                    </j-form-item>
-                                </j-col>
-                                <j-col :span="6">
-                                    <j-form-item
-                                        label="公网 Host"
-                                        :name="['hostPort', '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地址',
-                                            },
-                                        ]"
-                                    >
-                                        <j-input
-                                            style="width: 105%"
-                                            v-model:value="
-                                                formState.hostPort.publicHost
-                                            "
-                                            placeholder="请输入IP地址"
-                                        />
-                                    </j-form-item>
-                                </j-col>
-                                <j-col :span="6">
-                                    <j-form-item
-                                        :name="['hostPort', 'publicPort']"
-                                        :rules="[
-                                            {
-                                                required: true,
-                                                message: '输入端口',
-                                            },
-                                        ]"
-                                    >
-                                        <div class="form-label"></div>
-
-                                        <j-input-number
-                                            style="width: 100%"
-                                            placeholder="请输入端口"
-                                            v-model:value="
-                                                formState.hostPort.publicPort
-                                            "
-                                            :min="1"
-                                            :max="65535"
-                                        />
-                                    </j-form-item>
-                                </j-col>
-                            </j-row>
-                        </div>
-                    </j-form>
-                    <div v-if="!formState.shareCluster">
-                        <j-form
-                            ref="formRef2"
-                            layout="vertical"
-                            name="dynamic_form_nest_item"
-                            :model="dynamicValidateForm"
-                        >
-                            <div
-                                v-for="(
-                                    cluster, index
-                                ) in dynamicValidateForm.cluster"
-                                :key="cluster.id"
-                            >
-                                <j-collapse v-model:activeKey="activeKey">
-                                    <j-collapse-panel
-                                        :key="cluster.id"
-                                        :header="`#${index + 1}.节点`"
-                                    >
-                                        <template #extra>
-                                            <AIcon
-                                                @click="removeCluster(cluster)"
-                                                type="DeleteOutlined"
-                                            />
-                                        </template>
-                                        <j-row :gutter="[24, 24]">
-                                            <j-col :span="8">
-                                                <j-form-item
-                                                    label="节点名称"
-                                                    :name="[
-                                                        'cluster',
-                                                        index,
-                                                        'clusterNodeId',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message:
-                                                            '请选择节点名称',
-                                                    }"
-                                                >
-                                                    <j-select
-                                                        v-model:value="
-                                                            cluster.clusterNodeId
-                                                        "
-                                                        :options="clustersList"
-                                                        placeholder="请选择节点名称"
-                                                        allowClear
-                                                        show-search
-                                                        :filter-option="
-                                                            filterOption
-                                                        "
-                                                    >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col :span="4">
-                                                <j-form-item
-                                                    :name="[
-                                                        'cluster',
-                                                        index,
-                                                        'host',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message:
-                                                            '请选择SIP 地址',
-                                                    }"
-                                                >
-                                                    <div class="form-label">
-                                                        SIP 地址
-                                                        <span
-                                                            class="form-label-required"
-                                                            >*</span
-                                                        >
-                                                        <j-tooltip>
-                                                            <template #title>
-                                                                <p>
-                                                                    绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
-                                                                </p>
-                                                            </template>
-                                                            <AIcon
-                                                                type="QuestionCircleOutlined"
-                                                            />
-                                                        </j-tooltip>
-                                                    </div>
-
-                                                    <j-select
-                                                        v-model:value="
-                                                            cluster.host
-                                                        "
-                                                        :options="sipListOption"
-                                                        placeholder="请选择IP地址"
-                                                        allowClear
-                                                        show-search
-                                                        :filter-option="
-                                                            filterOption
-                                                        "
-                                                        style="width: 110%"
-                                                        @change="
-                                                            handleChangeForm2Sip(
-                                                                index,
-                                                            )
-                                                        "
-                                                    >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col :span="4">
-                                                <j-form-item
-                                                    :name="[
-                                                        'cluster',
-                                                        index,
-                                                        'port',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message: '请选择端口',
-                                                    }"
-                                                >
-                                                    <div
-                                                        class="form-label"
-                                                    ></div>
-                                                    <j-select
-                                                        v-model:value="
-                                                            cluster.port
-                                                        "
-                                                        :options="
-                                                            sipListIndex[index]
-                                                        "
-                                                        placeholder="请选择端口"
-                                                        allowClear
-                                                        show-search
-                                                        :filter-option="
-                                                            filterOption
-                                                        "
-                                                    />
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col :span="4">
-                                                <j-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
-                                                        >
-                                                        <j-tooltip>
-                                                            <template #title>
-                                                                <p>
-                                                                    监听指定端口的请求
-                                                                </p>
-                                                            </template>
-                                                            <AIcon
-                                                                type="QuestionCircleOutlined"
-                                                            />
-                                                        </j-tooltip>
-                                                    </div>
-                                                    <j-input
-                                                        style="width: 110%"
-                                                        v-model:value="
-                                                            cluster.publicHost
-                                                        "
-                                                        placeholder="请输入IP地址"
-                                                        allowClear
-                                                    />
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col :span="4">
-                                                <j-form-item
-                                                    :name="[
-                                                        'cluster',
-                                                        index,
-                                                        'publicPort',
-                                                    ]"
-                                                    :rules="[
-                                                        {
-                                                            required: true,
-                                                            message:
-                                                                '请输入端口',
-                                                        },
-                                                    ]"
-                                                >
-                                                    <div
-                                                        class="form-label"
-                                                    ></div>
-
-                                                    <j-input-number
-                                                        style="width: 100%"
-                                                        placeholder="请输入端口"
-                                                        v-model:value="
-                                                            cluster.publicPort
-                                                        "
-                                                        :min="1"
-                                                        :max="65535"
-                                                    />
-                                                </j-form-item>
-                                            </j-col>
-                                        </j-row>
-                                    </j-collapse-panel>
-                                </j-collapse>
-                            </div>
-                            <j-form-item>
-                                <j-button
-                                    style="margin-top: 10px"
-                                    type="dashed"
-                                    block
-                                    @click="addCluster"
-                                >
-                                    <AIcon type="PlusOutlined" />
-                                    新增
-                                </j-button>
-                            </j-form-item>
-                        </j-form>
                     </div>
+                </j-form>
+                <div v-if="!formState.shareCluster">
+                    <j-form
+                        ref="formRef2"
+                        layout="vertical"
+                        name="dynamic_form_nest_item"
+                        :model="dynamicValidateForm"
+                    >
+                        <div
+                            v-for="(
+                                cluster, index
+                            ) in dynamicValidateForm.cluster"
+                            :key="cluster.id"
+                        >
+                            <j-collapse v-model:activeKey="activeKey">
+                                <j-collapse-panel
+                                    :key="cluster.id"
+                                    :header="`#${index + 1}.节点`"
+                                >
+                                    <template #extra>
+                                        <span
+                                            @click="removeCluster(cluster)"
+                                            class="delete-btn"
+                                            >删除</span
+                                        >
+                                    </template>
+                                    <j-row :gutter="[24, 24]">
+                                        <j-col :span="8">
+                                            <j-form-item
+                                                label="节点名称"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'clusterNodeId',
+                                                ]"
+                                                :rules="{
+                                                    required: true,
+                                                    message: '请选择节点名称',
+                                                }"
+                                            >
+                                                <j-select
+                                                    v-model:value="
+                                                        cluster.clusterNodeId
+                                                    "
+                                                    :options="clustersList"
+                                                    placeholder="请选择节点名称"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                >
+                                                </j-select>
+                                            </j-form-item>
+                                        </j-col>
+                                        <j-col :span="4">
+                                            <j-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'host',
+                                                ]"
+                                                :rules="{
+                                                    required: true,
+                                                    message: '请选择SIP 地址',
+                                                }"
+                                            >
+                                                <template #label>
+                                                    SIP 地址
+                                                    <j-tooltip
+                                                        title="到服务器上的网卡地址,绑定到所有网卡:0.0.0.0"
+                                                    >
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
+                                                            "
+                                                        />
+                                                    </j-tooltip>
+                                                </template>
+
+                                                <j-select
+                                                    v-model:value="cluster.host"
+                                                    :options="sipListOption"
+                                                    placeholder="请选择IP地址"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    style="width: 110%"
+                                                    @change="
+                                                        handleChangeForm2Sip(
+                                                            index,
+                                                        )
+                                                    "
+                                                >
+                                                </j-select>
+                                            </j-form-item>
+                                        </j-col>
+                                        <j-col :span="4">
+                                            <j-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'port',
+                                                ]"
+                                                :rules="{
+                                                    required: true,
+                                                    message: '请选择端口',
+                                                }"
+                                            >
+                                                <div class="form-label"></div>
+                                                <j-select
+                                                    v-model:value="cluster.port"
+                                                    :options="
+                                                        sipListIndex[index]
+                                                    "
+                                                    placeholder="请选择端口"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                />
+                                            </j-form-item>
+                                        </j-col>
+                                        <j-col :span="4">
+                                            <j-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地址',
+                                                    },
+                                                ]"
+                                            >
+                                                <template #label>
+                                                    公网 Host
+                                                    <j-tooltip
+                                                        title="监听指定端口的请求"
+                                                    >
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
+                                                            "
+                                                        />
+                                                    </j-tooltip>
+                                                </template>
+                                                <j-input
+                                                    style="width: 110%"
+                                                    v-model:value="
+                                                        cluster.publicHost
+                                                    "
+                                                    placeholder="请输入IP地址"
+                                                    allowClear
+                                                />
+                                            </j-form-item>
+                                        </j-col>
+                                        <j-col :span="4">
+                                            <j-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'publicPort',
+                                                ]"
+                                                :rules="[
+                                                    {
+                                                        required: true,
+                                                        message: '请输入端口',
+                                                    },
+                                                ]"
+                                            >
+                                                <div class="form-label"></div>
+
+                                                <j-input-number
+                                                    style="width: 100%"
+                                                    placeholder="请输入端口"
+                                                    v-model:value="
+                                                        cluster.publicPort
+                                                    "
+                                                    :min="1"
+                                                    :max="65535"
+                                                />
+                                            </j-form-item>
+                                        </j-col>
+                                    </j-row>
+                                </j-collapse-panel>
+                            </j-collapse>
+                        </div>
+                        <j-form-item>
+                            <j-button
+                                style="margin-top: 10px"
+                                type="primary"
+                                block
+                                ghost
+                                @click="addCluster"
+                            >
+                                <AIcon type="PlusOutlined" />
+                                新增
+                            </j-button>
+                        </j-form-item>
+                    </j-form>
                 </div>
             </div>
             <div class="steps-box" v-else>
@@ -465,30 +441,22 @@
                             </div>
                         </j-col>
                         <j-col :span="12">
-                            <div class="config-right">
-                                <div class="config-right-item">
-                                    <div class="config-right-item-title">
-                                        接入方式
-                                    </div>
-                                    <div class="config-right-item-context">
-                                        {{ provider.name }}
-                                    </div>
-                                    <div class="config-right-item-context">
-                                        {{ provider.description }}
-                                    </div>
-                                </div>
-                                <div class="config-right-item">
-                                    <div class="config-right-item-title">
-                                        消息协议
-                                    </div>
-                                    <div>
-                                        {{
-                                            provider?.id === 'fixed-media'
-                                                ? 'URL'
-                                                : 'SIP'
-                                        }}
-                                    </div>
-                                </div>
+                            <div class="doc" style="height: 400px">
+                                <h1>接入方式</h1>
+                                <p>
+                                    {{ provider.name }}
+                                </p>
+                                <p>
+                                    {{ provider.description }}
+                                </p>
+                                <h1>消息协议</h1>
+                                <p>
+                                    {{
+                                        provider?.id === 'fixed-media'
+                                            ? 'URL'
+                                            : 'SIP'
+                                    }}
+                                </p>
                             </div>
                         </j-col>
                     </j-row>
@@ -625,7 +593,7 @@ const filterOption = (input: string, option: any) => {
 };
 
 const handleChangeForm2Sip = (index: number) => {
-    dynamicValidateForm.cluster[index].port = '';
+    dynamicValidateForm.cluster[index].port = undefined;
     const value = dynamicValidateForm.cluster[index].host;
     sipListIndex.value[index] = sipListConst
         .find((i: any) => i.host === value)
@@ -800,27 +768,6 @@ watch(
     }
 }
 
-.config-right {
-    padding: 20px;
-    color: rgba(0, 0, 0, 0.8);
-    background: rgba(0, 0, 0, 0.04);
-
-    .config-right-item {
-        margin-bottom: 10px;
-
-        .config-right-item-title {
-            width: 100%;
-            margin-bottom: 10px;
-            font-weight: 600;
-        }
-
-        .config-right-item-context {
-            margin: 5px 0;
-            color: rgba(0, 0, 0, 0.8);
-        }
-    }
-}
-
 .form-item1 {
     background-color: #f6f6f6;
     padding: 10px;
@@ -828,9 +775,13 @@ watch(
 .form-label {
     height: 30px;
     padding-bottom: 8px;
-    .form-label-required {
-        color: red;
-        margin: 0 4px 0 -2px;
-    }
+}
+.delete-btn {
+    display: inline-block;
+    color: #e50012;
+    padding: 0px 8px;
+    background: #ffffff;
+    border: 1px solid #e50012;
+    border-radius: 2px;
 }
 </style>
diff --git a/src/views/link/AccessConfig/components/Media/index.vue b/src/views/link/AccessConfig/components/Media/index.vue
index b4422467..5f1716f3 100644
--- a/src/views/link/AccessConfig/components/Media/index.vue
+++ b/src/views/link/AccessConfig/components/Media/index.vue
@@ -54,26 +54,18 @@
                     </div>
                 </j-col>
                 <j-col :span="12">
-                    <div class="config-right">
-                        <div class="config-right-item">
-                            <div class="config-right-item-title">接入方式</div>
-                            <div class="config-right-item-context">
-                                {{ provider.name }}
-                            </div>
-                            <div class="config-right-item-context">
-                                {{ provider.description }}
-                            </div>
-                        </div>
-                        <div class="config-right-item">
-                            <div class="config-right-item-title">消息协议</div>
-                            <div class="config-right-item-context">
-                                {{
-                                    provider.id === 'fixed-media'
-                                        ? 'URL'
-                                        : 'SIP'
-                                }}
-                            </div>
-                        </div>
+                    <div class="doc">
+                        <h1>接入方式</h1>
+                        <p>
+                            {{ provider.name }}
+                        </p>
+                        <p>
+                            {{ provider.description }}
+                        </p>
+                        <h1>消息协议</h1>
+                        <p>
+                            {{ provider.id === 'fixed-media' ? 'URL' : 'SIP' }}
+                        </p>
                     </div>
                 </j-col>
             </j-row>
@@ -149,24 +141,4 @@ onMounted(() => {
     overflow-y: auto;
     overflow-x: hidden;
 }
-.config-right {
-    padding: 20px;
-    color: rgba(0, 0, 0, 0.8);
-    background: rgba(0, 0, 0, 0.04);
-
-    .config-right-item {
-        margin-bottom: 10px;
-
-        .config-right-item-title {
-            width: 100%;
-            margin-bottom: 10px;
-            font-weight: 600;
-        }
-
-        .config-right-item-context {
-            margin: 5px 0;
-            color: rgba(0, 0, 0, 0.8);
-        }
-    }
-}
 </style>
diff --git a/src/views/link/AccessConfig/components/Network/index.vue b/src/views/link/AccessConfig/components/Network/index.vue
index 41bedd39..a352aab6 100644
--- a/src/views/link/AccessConfig/components/Network/index.vue
+++ b/src/views/link/AccessConfig/components/Network/index.vue
@@ -26,11 +26,7 @@
                     </PermissionButton>
                 </div>
                 <j-scrollbar height="480">
-                    <j-row
-                        :gutter="[24, 24]"
-                        v-if="networkList.length > 0"
-                        style="margin-right: 10px"
-                    >
+                    <j-row :gutter="[24, 24]" v-if="networkList.length > 0">
                         <j-col
                             :span="8"
                             v-for="item in networkList"
@@ -62,7 +58,7 @@
                                                     class="item"
                                                 >
                                                     <j-badge
-                                                        :color="getColor(i)"
+                                                        :status="getColor(i)"
                                                     />{{ i.address }}
                                                 </div>
                                             </div>
@@ -74,7 +70,7 @@
                                                 class="item"
                                             >
                                                 <j-badge
-                                                    :color="getColor(i)"
+                                                    :status="getColor(i)"
                                                     :text="i.address"
                                                 />
                                                 <span
@@ -116,11 +112,7 @@
                     </PermissionButton>
                 </div>
                 <j-scrollbar height="480">
-                    <j-row
-                        :gutter="[24, 24]"
-                        v-if="procotolList.length > 0"
-                        style="margin-right: 10px"
-                    >
+                    <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
                         <j-col
                             :span="8"
                             v-for="item in procotolList"
@@ -177,66 +169,46 @@
                             </j-form>
                         </j-col>
                         <j-col :span="12">
-                            <j-scrollbar height="600">
-                                <div class="config-right">
-                                    <div class="config-right-item">
-                                        <div class="config-right-item-title">
-                                            接入方式
-                                        </div>
-                                        <div class="config-right-item-context">
-                                            {{ provider.name }}
-                                        </div>
-                                        <div class="config-right-item-context">
-                                            {{ provider.description }}
-                                        </div>
-                                    </div>
-                                    <div class="config-right-item">
-                                        <div class="config-right-item-title">
-                                            消息协议
-                                        </div>
-                                        <div class="config-right-item-context">
-                                            {{
-                                                procotolList.find(
-                                                    (i: any) =>
-                                                        i.id ===
-                                                        procotolCurrent,
-                                                ).name
-                                            }}
-                                        </div>
-                                        <div
-                                            class="config-right-item-context"
-                                            v-if="config.document"
-                                        >
-                                            <Markdown
-                                                :source="config.document"
-                                            />
-                                        </div>
-                                    </div>
-                                    <div
-                                        class="config-right-item"
-                                        v-if="getNetworkCurrent()"
-                                    >
-                                        <div class="config-right-item-title">
-                                            网络组件
-                                        </div>
-                                        <div
+                            <j-scrollbar height="580">
+                                <div class="doc">
+                                    <h1>接入方式</h1>
+                                    <p>
+                                        {{ provider.name }}
+                                    </p>
+                                    <p>
+                                        {{ provider.description }}
+                                    </p>
+                                    <h1>消息协议</h1>
+                                    <p>
+                                        {{
+                                            procotolList.find(
+                                                (i: any) =>
+                                                    i.id === procotolCurrent,
+                                            ).name
+                                        }}
+                                    </p>
+                                    <p v-if="config.document">
+                                        <Markdown :source="config.document" />
+                                    </p>
+                                    <div v-if="getNetworkCurrent()">
+                                        <h1>网络组件</h1>
+                                        <p
                                             v-for="i in getNetworkCurrentData()"
                                             :key="i.address"
                                         >
                                             <j-badge
-                                                :color="getColor(i)"
+                                                :status="getColor(i)"
                                                 :text="i.address"
                                             />
-                                        </div>
+                                        </p>
                                     </div>
                                     <div
-                                        class="config-right-item"
                                         v-if="
                                             config.routes &&
                                             config.routes.length > 0
                                         "
                                     >
-                                        <div class="config-right-item-title">
+                                        <h1>
                                             {{
                                                 data.provider ===
                                                     'mqtt-server-gateway' ||
@@ -245,8 +217,8 @@
                                                     ? 'topic'
                                                     : 'URL信息'
                                             }}
-                                        </div>
-                                        <j-scrollbar height="200">
+                                        </h1>
+                                        <j-scrollbar height="400">
                                             <j-table
                                                 :pagination="false"
                                                 :rowKey="generateUUID()"
@@ -259,7 +231,7 @@
                                                         ? columnsMQTT
                                                         : columnsHTTP
                                                 "
-                                                :scroll="{ y: 300 }"
+                                                :scroll="{ y: 400 }"
                                             >
                                                 <template
                                                     #bodyCell="{
@@ -463,11 +435,9 @@ const getNetworkCurrentData = () =>
         ? networkList.value.find((i: any) => i.id === networkCurrent).addresses
         : [];
 
-const getColor = (i: any) => (i.health === -1 ? 'red' : 'green');
+const getColor = (i: any) => (i.health === -1 ? 'error' : 'processing');
 
 const getStream = (record: any) => {
-    console.log(222, record);
-
     let stream = '';
     if (record.upstream && record.downstream) stream = '上行、下行';
     else if (record.upstream) stream = '上行';
@@ -644,7 +614,7 @@ watch(
 
 <style lang="less" scoped>
 .steps-content {
-    margin: 20px;
+    margin-top: 20px;
 }
 .steps-box {
     min-height: 400px;
@@ -657,7 +627,6 @@ watch(
 .steps-action {
     width: 100%;
     margin-top: 24px;
-    margin-left: 20px;
 }
 .alert {
     height: 40px;
@@ -685,25 +654,4 @@ watch(
         text-overflow: ellipsis;
     }
 }
-
-.config-right {
-    padding: 20px;
-    color: rgba(0, 0, 0, 0.8);
-    background: rgba(0, 0, 0, 0.04);
-
-    .config-right-item {
-        margin-bottom: 10px;
-
-        .config-right-item-title {
-            width: 100%;
-            margin-bottom: 10px;
-            font-weight: 600;
-        }
-
-        .config-right-item-context {
-            margin: 5px 0;
-            color: rgba(0, 0, 0, 0.8);
-        }
-    }
-}
 </style>
diff --git a/src/views/link/AccessConfig/components/Provider/index.vue b/src/views/link/AccessConfig/components/Provider/index.vue
index bc35dab1..0c5c9dff 100644
--- a/src/views/link/AccessConfig/components/Provider/index.vue
+++ b/src/views/link/AccessConfig/components/Provider/index.vue
@@ -5,6 +5,18 @@
             <j-row :gutter="[24, 24]">
                 <j-col :span="12" v-for="item in items.list" :key="item.id">
                     <div class="provider">
+                        <div
+                            class="card-content-bg1"
+                            :style="{
+                                background: getBackgroundColor(),
+                            }"
+                        ></div>
+                        <div
+                            class="card-content-bg2"
+                            :style="{
+                                background: getBackgroundColor(),
+                            }"
+                        ></div>
                         <div class="box">
                             <div class="left">
                                 <div class="images">
@@ -47,6 +59,14 @@ const props = defineProps({
 
 const emit = defineEmits(['onClick']);
 
+const getBackgroundColor = () => {
+    return `linear-gradient(
+                188.4deg,
+                rgba(9, 46, 231, 0.03) 22.94%,
+                rgba(9, 46, 231, 0) 94.62%
+            )`;
+};
+
 const click = (value: object) => {
     emit('onClick', value);
 };
@@ -61,10 +81,11 @@ const click = (value: object) => {
 .provider {
     position: relative;
     width: 100%;
-    padding: 20px;
-    background: url('/public/images/access/background.png') no-repeat;
+    padding: 24px;
+    // background: url('/public/images/access/background.png') no-repeat;
     background-size: 100% 100%;
     border: 1px solid #e6e6e6;
+    overflow: hidden;
 
     &::before {
         position: absolute;
@@ -84,6 +105,33 @@ const click = (value: object) => {
         box-shadow: 0 0 24px rgba(#000, 0.1);
     }
 }
+.card-content-bg1 {
+    position: absolute;
+    right: -5%;
+    height: 100%;
+    width: 44.65%;
+    top: 0;
+    background: linear-gradient(
+        188.4deg,
+        rgba(229, 0, 18, 0.03) 22.94%,
+        rgba(229, 0, 18, 0) 94.62%
+    );
+    transform: skewX(-15deg);
+}
+
+.card-content-bg2 {
+    position: absolute;
+    right: -5%;
+    height: 100%;
+    width: calc(44.65% + 34px);
+    top: 0;
+    background: linear-gradient(
+        188.4deg,
+        rgba(229, 0, 18, 0.03) 22.94%,
+        rgba(229, 0, 18, 0) 94.62%
+    );
+    transform: skewX(-15deg);
+}
 
 .box {
     display: flex;
@@ -92,31 +140,40 @@ const click = (value: object) => {
     width: 100%;
     .left {
         display: flex;
-        width: calc(100% - 70px);
+        width: calc(100% - 100px);
         .images {
-            width: 64px;
-            height: 64px;
+            width: 88px;
+            height: 88px;
 
             img {
-                width: 100%;
+                width: 88px;
+                height: 88px;
             }
         }
 
         .context {
-            width: calc(100% - 84px);
-            margin: 10px;
+            width: calc(100% - 88px);
+            margin: 8px;
+            margin-left: 24px;
 
             .title {
-                font-weight: 600;
+                font-style: normal;
+                font-weight: 800;
+                font-size: 18px;
+                line-height: 22px;
+                color: rgba(0, 0, 0, 0.85);
+                opacity: 0.85;
             }
 
             .desc {
                 width: 100%;
-                margin-top: 10px;
-                overflow: hidden;
-                color: rgba(0, 0, 0, 0.55);
+                margin-top: 24px;
+                font-style: normal;
                 font-weight: 400;
-                font-size: 13px;
+                font-size: 12px;
+                line-height: 20px;
+                color: #666666;
+                overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
             }
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index c552b512..5564d8ac 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -37,7 +37,7 @@
                         :status="slotProps.state.value"
                         :statusText="slotProps.state.text"
                         :statusNames="{
-                            enabled: 'success',
+                            enabled: 'processing',
                             disabled: 'error',
                         }"
                     >
@@ -51,15 +51,12 @@
                                 <Ellipsis
                                     style="
                                         width: calc(100% - 100px);
-                                        margin-bottom: 10px;
+                                        margin-bottom: 20px;
                                         color: #2f54eb;
                                     "
                                 >
                                     <span
-                                        style="
-                                            font-size: 16px;
-                                            font-weight: 600;
-                                        "
+                                        class="card-title"
                                         @click.stop="handlEye(slotProps.id)"
                                     >
                                         {{ slotProps.name }}
@@ -71,11 +68,17 @@
                                         v-if="slotProps.channelInfo"
                                         class="card-item-content-text"
                                     >
-                                        <div class="card-item-content-text">
+                                        <div
+                                            class="card-item-content-text-title"
+                                        >
                                             {{ slotProps.channelInfo.name }}
                                         </div>
-                                        <div
-                                            class="card-item-content-text"
+                                        <Ellipsis
+                                            style="
+                                                width: calc(100% - 10px);
+                                                display: flex;
+                                                margin-top: 4px;
+                                            "
                                             v-if="
                                                 slotProps.channelInfo.addresses
                                             "
@@ -83,53 +86,51 @@
                                             <j-badge
                                                 :status="getStatus(slotProps)"
                                             />
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.channelInfo
-                                                        .addresses[0].address
-                                                }}</template>
+                                            <span>
                                                 {{
                                                     slotProps.channelInfo
                                                         .addresses[0].address
                                                 }}
-                                            </j-tooltip>
-                                        </div>
+                                            </span>
+                                        </Ellipsis>
                                     </j-col>
                                     <j-col
                                         :span="12"
                                         v-if="slotProps.protocolDetail"
+                                        class="card-item-content-text"
                                     >
-                                        <div class="card-item-content-text">
+                                        <div
+                                            class="card-item-content-text-title"
+                                        >
                                             协议
                                         </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.protocolDetail
-                                                        .name
-                                                }}</template>
+                                        <Ellipsis
+                                            style="
+                                                width: calc(100% - 10px);
+                                                display: flex;
+                                                margin-top: 4px;
+                                            "
+                                        >
+                                            <span>
                                                 {{
                                                     slotProps.protocolDetail
                                                         .name
                                                 }}
-                                            </j-tooltip>
-                                        </div>
+                                            </span>
+                                        </Ellipsis>
                                     </j-col>
                                 </j-row>
                                 <j-row>
-                                    <j-col :span="24">
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>
-                                                    {{
-                                                        getDescription(
-                                                            slotProps,
-                                                        )
-                                                    }}
-                                                </template>
+                                    <j-col
+                                        :span="24"
+                                        class="card-item-content-description"
+                                    >
+                                        <j-tooltip>
+                                            <template #title>
                                                 {{ getDescription(slotProps) }}
-                                            </j-tooltip>
-                                        </div>
+                                            </template>
+                                            {{ getDescription(slotProps) }}
+                                        </j-tooltip>
                                     </j-col>
                                 </j-row>
                             </div>
@@ -207,8 +208,8 @@ const columns = [
         search: {
             type: 'select',
             options: async () => {
-                const res = await getProviders();
-                return (res?.result || []).map((item) => ({
+                const res: any = await getProviders();
+                return (res?.result || [])?.map((item: any) => ({
                     lable: item.name,
                     value: item.id,
                 }));
@@ -339,7 +340,7 @@ const getDescription = (slotProps: Record<string, any>) =>
           )?.description;
 
 const getStatus = (slotProps: Record<string, any>) =>
-    slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'success';
+    slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'processing';
 
 /**
  * 搜索
@@ -358,12 +359,29 @@ const handleSearch = (e: any) => {
 
 .card-item-content {
     min-height: 100px;
+    .card-title {
+        font-size: 18px;
+        font-weight: 800;
+        line-height: 22px;
+    }
+
     .card-item-content-box {
         min-height: 50px;
     }
-    .card-item-content-text {
-        color: rgba(0, 0, 0, 0.75);
+
+    .card-item-content-text-title {
+        font-style: normal;
+        font-weight: 400;
         font-size: 12px;
+        color: rgba(0, 0, 0, 0.75);
+        opacity: 0.75;
+    }
+    .card-item-content-description {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        color: #666666;
         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
index c93e05e7..4eec85d9 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -75,11 +75,13 @@
                             </j-form-item>
                         </j-col>
                     </j-row>
+
                     <j-form
                         ref="formRef2"
                         layout="vertical"
                         name="dynamic_form_nest_item"
                         :model="dynamicValidateForm"
+                        class="form2"
                     >
                         <div
                             v-for="(
@@ -582,59 +584,71 @@
                                                 </j-radio-group>
                                             </j-form-item>
                                         </j-col>
+                                        <div class="form2-row">
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    cluster.configuration.secure
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="证书"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'certId',
+                                                    ]"
+                                                    :rules="Rules.certId"
+                                                    class="form2-left"
+                                                >
+                                                    <j-select
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .certId
+                                                        "
+                                                        :options="certIdOptions"
+                                                        placeholder="请选择证书"
+                                                        allowClear
+                                                        show-search
+                                                        :filter-option="
+                                                            filterOption
+                                                        "
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    cluster.configuration.secure
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="私钥别名"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'privateKeyAlias',
+                                                    ]"
+                                                    :rules="
+                                                        Rules.privateKeyAlias
+                                                    "
+                                                    class="form2-right"
+                                                >
+                                                    <j-input
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .privateKeyAlias
+                                                        "
+                                                        placeholder="请输入私钥别名"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                        </div>
 
-                                        <j-col
-                                            :span="12"
-                                            v-if="cluster.configuration.secure"
-                                        >
-                                            <j-form-item
-                                                label="证书"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'certId',
-                                                ]"
-                                                :rules="Rules.certId"
-                                            >
-                                                <j-select
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .certId
-                                                    "
-                                                    :options="certIdOptions"
-                                                    placeholder="请选择证书"
-                                                    allowClear
-                                                    show-search
-                                                    :filter-option="
-                                                        filterOption
-                                                    "
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="cluster.configuration.secure"
-                                        >
-                                            <j-form-item
-                                                label="私钥别名"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'privateKeyAlias',
-                                                ]"
-                                                :rules="Rules.privateKeyAlias"
-                                            >
-                                                <j-input
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .privateKeyAlias
-                                                    "
-                                                    placeholder="请输入私钥别名"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
                                         <j-col
                                             :span="24"
                                             v-if="
@@ -690,249 +704,265 @@
                                                 />
                                             </j-form-item>
                                         </j-col>
-
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'delimited',
-                                                    cluster.configuration
-                                                        .parserType,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="分隔符"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserConfiguration',
-                                                    'delimited',
-                                                ]"
-                                                :rules="Rules.delimited"
-                                            >
-                                                <j-input
-                                                    v-model:value="
+                                        <div class="form2-row">
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'delimited',
                                                         cluster.configuration
-                                                            .parserConfiguration
-                                                            .delimited
-                                                    "
-                                                    placeholder="请输入分隔符"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="24"
-                                            v-if="
-                                                isVisible(
-                                                    'lang',
-                                                    cluster.configuration
-                                                        .parserType,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                v-show="false"
-                                                label="脚本语言"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserConfiguration',
-                                                    'lang',
-                                                ]"
+                                                            .parserType,
+                                                    )
+                                                "
                                             >
-                                                <j-input
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .parserConfiguration
-                                                            .lang
-                                                    "
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="24"
-                                            v-if="
-                                                isVisible(
-                                                    'script',
-                                                    cluster.configuration
-                                                        .parserType,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="解析脚本"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserConfiguration',
-                                                    'script',
-                                                ]"
-                                                :rules="Rules.script"
-                                            >
-                                                <div
-                                                    style="
-                                                        width: 100%;
-                                                        height: 400px;
-                                                    "
+                                                <j-form-item
+                                                    label="分隔符"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserConfiguration',
+                                                        'delimited',
+                                                    ]"
+                                                    :rules="Rules.delimited"
+                                                    class="form2-left"
                                                 >
-                                                    <j-monaco-editor
-                                                        theme="vs"
+                                                    <j-input
                                                         v-model:value="
                                                             cluster
                                                                 .configuration
                                                                 .parserConfiguration
-                                                                .script
+                                                                .delimited
                                                         "
-                                                        language="javascript"
+                                                        placeholder="请输入分隔符"
                                                     />
-                                                </div>
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'size',
-                                                    cluster.configuration
-                                                        .parserType,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="长度值"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserConfiguration',
-                                                    'size',
-                                                ]"
-                                                :rules="Rules.size"
-                                            >
-                                                <j-input-number
-                                                    style="width: 100%"
-                                                    v-model:value="
+                                                </j-form-item>
+                                            </j-col>
+
+                                            <!-- <j-col
+                                                :span="24"
+                                                v-if="
+                                                    isVisible(
+                                                        'lang',
                                                         cluster.configuration
-                                                            .parserConfiguration
-                                                            .size
-                                                    "
-                                                    placeholder="请输入长度值"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'length',
-                                                    cluster.configuration
-                                                        .parserType,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="长度"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserConfiguration',
-                                                    'length',
-                                                ]"
-                                                :rules="Rules.length"
+                                                            .parserType,
+                                                    )
+                                                "
                                             >
-                                                <j-select
-                                                    style="width: 100%"
-                                                    v-model:value="
+                                                <j-form-item
+                                                    v-show="false"
+                                                    label="脚本语言"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserConfiguration',
+                                                        'lang',
+                                                    ]"
+                                                    class="form2-left"
+                                                >
+                                                    <j-input
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .parserConfiguration
+                                                                .lang
+                                                        "
+                                                    />
+                                                </j-form-item>
+                                            </j-col> -->
+                                            <j-col
+                                                :span="24"
+                                                v-if="
+                                                    isVisible(
+                                                        'script',
                                                         cluster.configuration
-                                                            .parserConfiguration
-                                                            .length
-                                                    "
-                                                    :options="LengthOptions"
-                                                    placeholder="请选择长度"
-                                                    allowClear
-                                                    show-search
-                                                    :filter-option="
-                                                        filterOption
-                                                    "
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'offset',
-                                                    cluster.configuration
-                                                        .parserType,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="偏移量"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserConfiguration',
-                                                    'offset',
-                                                ]"
-                                                :rules="Rules.offset"
+                                                            .parserType,
+                                                    )
+                                                "
                                             >
-                                                <j-input-number
-                                                    style="width: 100%"
-                                                    v-model:value="
+                                                <j-form-item
+                                                    label="解析脚本"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserConfiguration',
+                                                        'script',
+                                                    ]"
+                                                    :rules="Rules.script"
+                                                    class="form2-left form2-right"
+                                                >
+                                                    <div
+                                                        style="
+                                                            width: 100%;
+                                                            height: 400px;
+                                                        "
+                                                    >
+                                                        <j-monaco-editor
+                                                            theme="vs"
+                                                            v-model:value="
+                                                                cluster
+                                                                    .configuration
+                                                                    .parserConfiguration
+                                                                    .script
+                                                            "
+                                                            language="javascript"
+                                                        />
+                                                    </div>
+                                                </j-form-item>
+                                            </j-col>
+
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'size',
                                                         cluster.configuration
-                                                            .parserConfiguration
-                                                            .offset
-                                                    "
-                                                    placeholder="请输入偏移量"
-                                                    :min="0"
-                                                    :max="65535"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'little',
-                                                    cluster.configuration
-                                                        .parserType,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="大小端"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserConfiguration',
-                                                    'little',
-                                                ]"
+                                                            .parserType,
+                                                    )
+                                                "
                                             >
-                                                <j-select
-                                                    style="width: 100%"
-                                                    v-model:value="
+                                                <j-form-item
+                                                    label="长度值"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserConfiguration',
+                                                        'size',
+                                                    ]"
+                                                    :rules="Rules.size"
+                                                    class="form2-left"
+                                                >
+                                                    <j-input-number
+                                                        style="width: 100%"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .parserConfiguration
+                                                                .size
+                                                        "
+                                                        placeholder="请输入长度值"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'length',
                                                         cluster.configuration
-                                                            .parserConfiguration
-                                                            .little
-                                                    "
-                                                    :options="LittleOptions"
-                                                    placeholder="请选择大小端"
-                                                    allowClear
-                                                    show-search
-                                                    :filter-option="
-                                                        filterOption
-                                                    "
-                                                />
-                                            </j-form-item>
-                                        </j-col>
+                                                            .parserType,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="长度"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserConfiguration',
+                                                        'length',
+                                                    ]"
+                                                    :rules="Rules.length"
+                                                    class="form2-left"
+                                                >
+                                                    <j-select
+                                                        style="width: 100%"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .parserConfiguration
+                                                                .length
+                                                        "
+                                                        :options="LengthOptions"
+                                                        placeholder="请选择长度"
+                                                        allowClear
+                                                        show-search
+                                                        :filter-option="
+                                                            filterOption
+                                                        "
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'offset',
+                                                        cluster.configuration
+                                                            .parserType,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="偏移量"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserConfiguration',
+                                                        'offset',
+                                                    ]"
+                                                    :rules="Rules.offset"
+                                                    class="form2-right"
+                                                >
+                                                    <j-input-number
+                                                        style="width: 100%"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .parserConfiguration
+                                                                .offset
+                                                        "
+                                                        placeholder="请输入偏移量"
+                                                        :min="0"
+                                                        :max="65535"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'little',
+                                                        cluster.configuration
+                                                            .parserType,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="大小端"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserConfiguration',
+                                                        'little',
+                                                    ]"
+                                                    class="form2-left"
+                                                >
+                                                    <j-select
+                                                        style="width: 100%"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .parserConfiguration
+                                                                .little
+                                                        "
+                                                        :options="LittleOptions"
+                                                        placeholder="请选择大小端"
+                                                        allowClear
+                                                        show-search
+                                                        :filter-option="
+                                                            filterOption
+                                                        "
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                        </div>
                                     </j-row>
                                 </j-collapse-panel>
                             </j-collapse>
@@ -1278,8 +1308,39 @@ watch(
     width: 100%;
     margin-top: 24px;
 }
+.form2 {
+    :deep(.ant-collapse-content-box) {
+        background: #fafafa;
+        border-radius: 2px;
+    }
+    .form2-row {
+        display: flex;
+        width: 100%;
+        position: relative;
+        flex-flow: row wrap;
+        .form2-left {
+            padding-left: 16px;
+            flex: 1;
+        }
+        .form2-right {
+            padding-right: 16px;
+            flex: 1;
+        }
+        &::before {
+            position: absolute;
+            top: -10px;
+            left: 10px;
+            right: 10px;
+            width: calc(100%-10px);
+            height: 100%;
+            background-color: #f4f4f4;
+            content: ' ';
+        }
+    }
+}
 
 .collapse {
     margin-bottom: 20px;
+    background: #f4f4f4;
 }
 </style>
diff --git a/src/views/link/Type/index.vue b/src/views/link/Type/index.vue
index 524f2da6..9ff37d9a 100644
--- a/src/views/link/Type/index.vue
+++ b/src/views/link/Type/index.vue
@@ -36,7 +36,7 @@
                         :status="slotProps.state.value"
                         :statusText="slotProps.state.text"
                         :statusNames="{
-                            enabled: 'success',
+                            enabled: 'processing',
                             disabled: 'error',
                         }"
                     >
@@ -50,7 +50,7 @@
                                 <Ellipsis
                                     style="
                                         width: calc(100% - 100px);
-                                        margin-bottom: 10px;
+                                        margin-bottom: 20px;
                                         color: #2f54eb;
                                     "
                                 >
@@ -65,8 +65,10 @@
                                     </span>
                                 </Ellipsis>
                                 <j-row class="card-item-content-box">
-                                    <j-col :span="12">
-                                        <div class="card-item-content-text">
+                                    <j-col :span="8">
+                                        <div
+                                            class="card-item-content-text-title"
+                                        >
                                             类型
                                         </div>
                                         <div class="card-item-content-text">
@@ -78,8 +80,11 @@
                                             </j-tooltip>
                                         </div>
                                     </j-col>
-                                    <j-col :span="12">
-                                        <div class="card-item-content-text">
+
+                                    <j-col :span="16">
+                                        <div
+                                            class="card-item-content-text-title"
+                                        >
                                             详情
                                         </div>
                                         <div class="card-item-content-text">
@@ -87,9 +92,7 @@
                                                 <template #title>{{
                                                     getDetails(slotProps)
                                                 }}</template>
-                                                <span class="details-text">{{
-                                                    getDetails(slotProps)
-                                                }}</span>
+                                                {{ getDetails(slotProps) }}
                                             </j-tooltip>
                                         </div>
                                     </j-col>
@@ -143,10 +146,14 @@
                     </j-space>
                 </template>
                 <template #state="slotProps">
-                    <j-badge
+                    <BadgeStatus
                         :text="slotProps.state.text"
-                        :status="statusMap.get(slotProps.state.value)"
-                    />
+                        :status="slotProps.state.value"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
+                    ></BadgeStatus>
                 </template>
                 <template #shareCluster="slotProps">
                     {{
@@ -171,15 +178,16 @@ import { getImage } from '@/utils/comm';
 import { supports, query, remove, start, shutdown } from '@/api/link/type';
 import { onlyMessage } from '@/utils/comm';
 import { useMenuStore } from 'store/menu';
+import BadgeStatus from '@/components/BadgeStatus/index.vue';
 
 const menuStory = useMenuStore();
 const tableRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const options = ref([]);
 
-const statusMap = new Map();
-statusMap.set('enabled', 'success');
-statusMap.set('disabled', 'error');
+// const statusMap = new Map();
+// statusMap.set('enabled', 'processing');
+// statusMap.set('disabled', 'error');
 
 const columns = [
     {
@@ -387,15 +395,23 @@ const handleSearch = (e: any) => {
         min-height: 50px;
     }
     .card-item-content-text {
-        color: rgba(0, 0, 0, 0.75);
-        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 170%;
+        color: rgba(0, 0, 0, 0.85);
+        opacity: 0.75;
         overflow: hidden; //超出的文本隐藏
         text-overflow: ellipsis; //溢出用省略号显示
         white-space: nowrap; //溢出不换行
     }
-}
-.details-text {
-    font-weight: 700;
-    font-size: 14px;
+    .card-item-content-text-title {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 170%;
+        color: rgba(0, 0, 0, 0.75);
+        opacity: 0.75;
+    }
 }
 </style>
diff --git a/yarn.lock b/yarn.lock
index e97b49fc..6167c435 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3700,8 +3700,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.5:
   version "1.0.5"
-  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#1059095549559c679f9197df360e3ee2360eff44"
-  integrity sha512-aK2ym5HF6DBsEnvrILGkzRkdPC+QSjrft3xK2DrDRqU5lZq0uqS55ksk88GoaFzGSgqznK+PPWZaYc0Lo2WH/A==
+  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#682711e0f69c141fff2c256db61a060c82539611"
+  integrity sha512-rQxD/YlE+XSAG7BWIcFTtKrCQJXk5o+TUgejyuUT/baBThJB6xYt1k2dQEdXyiwpukYen5FzaoLpelSD9SUegw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"