From f5afc16a1facb517ae39fcd61695427acbb6b80a Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Thu, 30 Mar 2023 17:08:30 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=BF=90=E7=BB=B4=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=81=E6=95=B0=E6=8D=AE=E9=87=87=E9=9B=86=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?FullPage=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/DataCollect/Channel/index.vue       |  236 ++-
 .../DataCollect/Collector/Point/index.vue     |  528 ++---
 .../DataCollect/Dashboard/components/Card.vue |   78 +-
 src/views/Log/index.vue                       |   16 +-
 .../device/Firmware/Task/Detail/index.vue     |  111 +-
 src/views/device/Firmware/index.vue           |  112 +-
 src/views/link/AccessConfig/Detail/index.vue  |   76 +-
 src/views/link/AccessConfig/index.vue         |  346 +--
 src/views/link/Certificate/Detail/index.vue   |  192 +-
 src/views/link/Certificate/index.vue          |   98 +-
 src/views/link/Protocol/index.vue             |  255 +--
 src/views/link/Type/Detail/index.vue          | 1884 +++++++++--------
 src/views/link/Type/index.vue                 |  319 +--
 src/views/media/Stream/Detail/index.vue       |  536 ++---
 src/views/media/Stream/index.vue              |  271 +--
 15 files changed, 2610 insertions(+), 2448 deletions(-)

diff --git a/src/views/DataCollect/Channel/index.vue b/src/views/DataCollect/Channel/index.vue
index cc0a65bb..c5d137c3 100644
--- a/src/views/DataCollect/Channel/index.vue
+++ b/src/views/DataCollect/Channel/index.vue
@@ -6,120 +6,128 @@
                 target="search"
                 @search="handleSearch"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                model="CARD"
-                :gridColumn="3"
-                :request="query"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        @click="handlAdd"
-                        hasPermission="DataCollect/Channel:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增通道
-                    </PermissionButton>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :showStatus="true"
-                        :value="slotProps"
-                        :actions="getActions(slotProps, 'card')"
-                        v-bind="slotProps"
-                        :status="getState(slotProps).value"
-                        :statusText="getState(slotProps).text"
-                        :statusNames="StatusColorEnum"
-                        @click="handlEye(slotProps.id)"
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img :src="getImage('/network.png')" />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <div class="card-item-content">
-                                <Ellipsis style="width: calc(100% - 100px)">
-                                    <span
-                                        style="
-                                            font-size: 18px;
-                                            font-weight: 800;
-                                            line-height: 22px;
-                                        "
-                                    >
-                                        {{ slotProps.name }}
-                                    </span>
-                                </Ellipsis>
-                                <j-row class="card-item-content-box">
-                                    <j-col :span="12">
-                                        <div class="card-item-content-text">
-                                            协议
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.provider
-                                                }}</template>
-                                                {{ slotProps.provider }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                    <j-col :span="12">
-                                        <div class="card-item-content-text">
-                                            地址
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.configuration
-                                                        .host ||
-                                                    slotProps.configuration
-                                                        .endpoint
-                                                }}</template>
-                                                <span class="details-text">{{
-                                                    slotProps.configuration
-                                                        .host ||
-                                                    slotProps.configuration
-                                                        .endpoint
-                                                }}</span>
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                </j-row>
-                            </div>
-                        </template>
-                        <template #actions="item">
-                            <PermissionButton
-                                :disabled="item.disabled"
-                                :popConfirm="item.popConfirm"
-                                :tooltip="{
-                                    ...item.tooltip,
-                                }"
-                                @click="item.onClick"
-                                :hasPermission="
-                                    'DataCollect/Channel:' + item.key
-                                "
-                            >
-                                <AIcon
-                                    type="DeleteOutlined"
-                                    v-if="item.key === 'delete'"
-                                />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item?.text }}</span>
-                                </template>
-                            </PermissionButton>
-                        </template>
-                    </CardBox>
-                </template>
-            </j-pro-table>
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    model="CARD"
+                    :gridColumn="3"
+                    :request="query"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="DataCollect/Channel:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增通道
+                        </PermissionButton>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :showStatus="true"
+                            :value="slotProps"
+                            :actions="getActions(slotProps, 'card')"
+                            v-bind="slotProps"
+                            :status="getState(slotProps).value"
+                            :statusText="getState(slotProps).text"
+                            :statusNames="StatusColorEnum"
+                            @click="handlEye(slotProps.id)"
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img :src="getImage('/network.png')" />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <div class="card-item-content">
+                                    <Ellipsis style="width: calc(100% - 100px)">
+                                        <span
+                                            style="
+                                                font-size: 18px;
+                                                font-weight: 800;
+                                                line-height: 22px;
+                                            "
+                                        >
+                                            {{ slotProps.name }}
+                                        </span>
+                                    </Ellipsis>
+                                    <j-row class="card-item-content-box">
+                                        <j-col :span="12">
+                                            <div class="card-item-content-text">
+                                                协议
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.provider
+                                                    }}</template>
+                                                    {{ slotProps.provider }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                        <j-col :span="12">
+                                            <div class="card-item-content-text">
+                                                地址
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.configuration
+                                                            .host ||
+                                                        slotProps.configuration
+                                                            .endpoint
+                                                    }}</template>
+                                                    <span
+                                                        class="details-text"
+                                                        >{{
+                                                            slotProps
+                                                                .configuration
+                                                                .host ||
+                                                            slotProps
+                                                                .configuration
+                                                                .endpoint
+                                                        }}</span
+                                                    >
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                    </j-row>
+                                </div>
+                            </template>
+                            <template #actions="item">
+                                <PermissionButton
+                                    :disabled="item.disabled"
+                                    :popConfirm="item.popConfirm"
+                                    :tooltip="{
+                                        ...item.tooltip,
+                                    }"
+                                    @click="item.onClick"
+                                    :hasPermission="
+                                        'DataCollect/Channel:' + item.key
+                                    "
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </PermissionButton>
+                            </template>
+                        </CardBox>
+                    </template>
+                </j-pro-table>
+            </FullPage>
             <Save v-if="visible" :data="current" @change="saveChange" />
         </div>
     </page-container>
diff --git a/src/views/DataCollect/Collector/Point/index.vue b/src/views/DataCollect/Collector/Point/index.vue
index dc82b06e..70af667b 100644
--- a/src/views/DataCollect/Collector/Point/index.vue
+++ b/src/views/DataCollect/Collector/Point/index.vue
@@ -1,274 +1,300 @@
 <template>
     <j-spin :spinning="spinning">
         <pro-search :columns="columns" target="search" @search="handleSearch" />
-        <j-scrollbar height="680">
-            <j-pro-table
-                ref="tableRef"
-                model="CARD"
-                :columns="columns"
-                :gridColumn="2"
-                :gridColumns="[1, 2]"
-                :request="queryPoint"
-                :defaultParams="defaultParams"
-                :params="params"
-                :rowSelection="{
-                    selectedRowKeys: _selectedRowKeys,
-                    onChange: onSelectChange,
-                }"
-                @cancelSelect="cancelSelect"
-            >
-                <template #headerTitle>
-                    <j-space>
-                        <PermissionButton
-                            v-if="data?.provider == 'MODBUS_TCP'"
-                            type="primary"
-                            @click="handlAdd"
-                            hasPermission="DataCollect/Collector:add"
-                        >
-                            <template #icon
-                                ><AIcon type="PlusOutlined"
-                            /></template>
-                            新增点位
-                        </PermissionButton>
+        <FullPage>
+            <j-scrollbar height="680">
+                <j-pro-table
+                    ref="tableRef"
+                    model="CARD"
+                    :columns="columns"
+                    :gridColumn="2"
+                    :gridColumns="[1, 2]"
+                    :request="queryPoint"
+                    :defaultParams="defaultParams"
+                    :params="params"
+                    :rowSelection="{
+                        selectedRowKeys: _selectedRowKeys,
+                        onChange: onSelectChange,
+                    }"
+                    @cancelSelect="cancelSelect"
+                >
+                    <template #headerTitle>
+                        <j-space>
+                            <PermissionButton
+                                v-if="data?.provider == 'MODBUS_TCP'"
+                                type="primary"
+                                @click="handlAdd"
+                                hasPermission="DataCollect/Collector:add"
+                            >
+                                <template #icon
+                                    ><AIcon type="PlusOutlined"
+                                /></template>
+                                新增点位
+                            </PermissionButton>
 
-                        <PermissionButton
+                            <PermissionButton
+                                v-if="data?.provider === 'OPC_UA'"
+                                type="primary"
+                                @click="handlScan"
+                                hasPermission="DataCollect/Collector:add"
+                            >
+                                <template #icon
+                                    ><AIcon type="PlusOutlined"
+                                /></template>
+                                扫描
+                            </PermissionButton>
+                            <j-dropdown
+                                v-if="data?.provider === 'OPC_UA'"
+                                :trigger="['click']"
+                            >
+                                <j-button @click.prevent="clickBatch"
+                                    >批量操作 <AIcon type="DownOutlined"
+                                /></j-button>
+                                <template #overlay>
+                                    <j-menu v-if="showBatch">
+                                        <j-menu-item>
+                                            <PermissionButton
+                                                hasPermission="DataCollect/Collector:update"
+                                                @click="handlBatchUpdate()"
+                                            >
+                                                <template #icon
+                                                    ><AIcon type="FormOutlined"
+                                                /></template>
+                                                编辑
+                                            </PermissionButton>
+                                        </j-menu-item>
+                                        <j-menu-item>
+                                            <PermissionButton
+                                                hasPermission="DataCollect/Collector:delete"
+                                                :popConfirm="{
+                                                    title: `确定删除？`,
+                                                    onConfirm: () =>
+                                                        handlBatchDelete(),
+                                                }"
+                                            >
+                                                <template #icon
+                                                    ><AIcon type="EditOutlined"
+                                                /></template>
+                                                删除
+                                            </PermissionButton>
+                                        </j-menu-item>
+                                    </j-menu>
+                                </template>
+                            </j-dropdown>
+                        </j-space>
+                        <div
                             v-if="data?.provider === 'OPC_UA'"
-                            type="primary"
-                            @click="handlScan"
-                            hasPermission="DataCollect/Collector:add"
+                            style="margin-top: 15px"
                         >
-                            <template #icon
-                                ><AIcon type="PlusOutlined"
-                            /></template>
-                            扫描
-                        </PermissionButton>
-                        <j-dropdown
-                            v-if="data?.provider === 'OPC_UA'"
-                            :trigger="['click']"
+                            <j-checkbox
+                                v-model:checked="checkAll"
+                                @change="onCheckAllChange"
+                                >全选</j-checkbox
+                            >
+                        </div>
+                    </template>
+                    <template #card="slotProps">
+                        <PointCardBox
+                            :showStatus="true"
+                            :value="slotProps"
+                            @click="handleClick"
+                            :active="_selectedRowKeys.includes(slotProps.id)"
+                            class="card-box"
+                            :status="slotProps?.runningState?.value"
+                            :statusText="slotProps?.runningState?.text"
+                            :statusNames="
+                                Object.fromEntries(colorMap.entries())
+                            "
                         >
-                            <j-button @click.prevent="clickBatch"
-                                >批量操作 <AIcon type="DownOutlined"
-                            /></j-button>
-                            <template #overlay>
-                                <j-menu v-if="showBatch">
-                                    <j-menu-item>
-                                        <PermissionButton
-                                            hasPermission="DataCollect/Collector:update"
-                                            @click="handlBatchUpdate()"
-                                        >
-                                            <template #icon
-                                                ><AIcon type="FormOutlined"
-                                            /></template>
-                                            编辑
-                                        </PermissionButton>
-                                    </j-menu-item>
-                                    <j-menu-item>
-                                        <PermissionButton
-                                            hasPermission="DataCollect/Collector:delete"
-                                            :popConfirm="{
-                                                title: `确定删除？`,
-                                                onConfirm: () =>
-                                                    handlBatchDelete(),
-                                            }"
-                                        >
-                                            <template #icon
-                                                ><AIcon type="EditOutlined"
-                                            /></template>
-                                            删除
-                                        </PermissionButton>
-                                    </j-menu-item>
-                                </j-menu>
+                            <template #title>
+                                <slot name="title">
+                                    <Ellipsis style="width: calc(100% - 10px)">
+                                        <div class="card-box-title">
+                                            {{ slotProps.name }}
+                                        </div>
+                                    </Ellipsis>
+                                </slot>
                             </template>
-                        </j-dropdown>
-                    </j-space>
-                    <div
-                        v-if="data?.provider === 'OPC_UA'"
-                        style="margin-top: 15px"
-                    >
-                        <j-checkbox
-                            v-model:checked="checkAll"
-                            @change="onCheckAllChange"
-                            >全选</j-checkbox
-                        >
-                    </div>
-                </template>
-                <template #card="slotProps">
-                    <PointCardBox
-                        :showStatus="true"
-                        :value="slotProps"
-                        @click="handleClick"
-                        :active="_selectedRowKeys.includes(slotProps.id)"
-                        class="card-box"
-                        :status="slotProps?.runningState?.value"
-                        :statusText="slotProps?.runningState?.text"
-                        :statusNames="Object.fromEntries(colorMap.entries())"
-                    >
-                        <template #title>
-                            <slot name="title">
-                                <Ellipsis style="width: calc(100% - 10px)">
-                                    <div class="card-box-title">
-                                        {{ slotProps.name }}
-                                    </div>
-                                </Ellipsis>
-                            </slot>
-                        </template>
-                        <template #action>
-                            <div class="card-box-action">
-                                <PermissionButton
-                                    type="text"
-                                    :tooltip="{
-                                        title: '删除',
-                                    }"
-                                    hasPermission="DataCollect/Collector:delete"
-                                    :popConfirm="{
-                                        title: `确定删除？`,
-                                        onConfirm: () =>
-                                            handlDelete(slotProps.id),
-                                    }"
-                                >
-                                    <a
-                                        style="
-                                            font-size: 20px;
-                                            margin-top: -10px;
-                                        "
-                                        ><AIcon type="DeleteOutlined"
-                                    /></a>
-                                </PermissionButton>
+                            <template #action>
+                                <div class="card-box-action">
+                                    <PermissionButton
+                                        type="text"
+                                        :tooltip="{
+                                            title: '删除',
+                                        }"
+                                        hasPermission="DataCollect/Collector:delete"
+                                        :popConfirm="{
+                                            title: `确定删除？`,
+                                            onConfirm: () =>
+                                                handlDelete(slotProps.id),
+                                        }"
+                                    >
+                                        <a
+                                            style="
+                                                font-size: 20px;
+                                                margin-top: -10px;
+                                            "
+                                            ><AIcon type="DeleteOutlined"
+                                        /></a>
+                                    </PermissionButton>
 
-                                <PermissionButton
-                                    class="add-btn"
-                                    type="text"
-                                    @click="handlEdit(slotProps)"
-                                    hasPermission="DataCollect/Collector:update"
-                                >
-                                    <a style="font-size: 20px"
-                                        ><AIcon type="FormOutlined"
-                                    /></a>
-                                </PermissionButton>
-                            </div>
-                        </template>
-                        <template #img>
-                            <img
-                                :src="
-                                    slotProps.provider === 'OPC_UA'
-                                        ? opcImage
-                                        : modbusImage
-                                "
-                            />
-                        </template>
-                        <template #content>
-                            <div class="card-box-content">
-                                <div class="card-box-content-left">
-                                    <div class="card-box-content-left-1">
+                                    <PermissionButton
+                                        class="add-btn"
+                                        type="text"
+                                        @click="handlEdit(slotProps)"
+                                        hasPermission="DataCollect/Collector:update"
+                                    >
+                                        <a style="font-size: 20px"
+                                            ><AIcon type="FormOutlined"
+                                        /></a>
+                                    </PermissionButton>
+                                </div>
+                            </template>
+                            <template #img>
+                                <img
+                                    :src="
+                                        slotProps.provider === 'OPC_UA'
+                                            ? opcImage
+                                            : modbusImage
+                                    "
+                                />
+                            </template>
+                            <template #content>
+                                <div class="card-box-content">
+                                    <div class="card-box-content-left">
+                                        <div class="card-box-content-left-1">
+                                            <div
+                                                class="ard-box-content-left-1-title"
+                                                v-if="
+                                                    propertyValue.has(
+                                                        slotProps.id,
+                                                    )
+                                                "
+                                            >
+                                                <j-ellipsis
+                                                    style="max-width: 150px"
+                                                >
+                                                    {{
+                                                        getParseData(slotProps)
+                                                    }}
+                                                </j-ellipsis>
+                                            </div>
+                                            <div
+                                                class="ard-box-content-left-1-title"
+                                                v-else
+                                            >
+                                                <j-ellipsis
+                                                    style="max-width: 150px"
+                                                >
+                                                    {{
+                                                        getReadParseData(
+                                                            slotProps,
+                                                        )
+                                                    }}
+                                                </j-ellipsis>
+                                            </div>
+                                            <a
+                                                v-if="
+                                                    getAccessModes(
+                                                        slotProps,
+                                                    ).includes('write')
+                                                "
+                                                @click.stop="
+                                                    clickEdit(slotProps)
+                                                "
+                                                ><AIcon type="EditOutlined"
+                                            /></a>
+                                            <a
+                                                v-if="
+                                                    getAccessModes(
+                                                        slotProps,
+                                                    ).includes('read')
+                                                "
+                                                @click.stop="
+                                                    clickRead(slotProps)
+                                                "
+                                                ><AIcon type="RedoOutlined"
+                                            /></a>
+                                        </div>
                                         <div
-                                            class="ard-box-content-left-1-title"
                                             v-if="
                                                 propertyValue.has(slotProps.id)
                                             "
+                                            class="card-box-content-right-2"
                                         >
-                                            <j-ellipsis
-                                                style="max-width: 150px"
-                                            >
-                                                {{ getParseData(slotProps) }}
-                                            </j-ellipsis>
-                                        </div>
-                                        <div
-                                            class="ard-box-content-left-1-title"
-                                            v-else
-                                        >
-                                            <j-ellipsis
-                                                style="max-width: 150px"
-                                            >
+                                            <p>
                                                 {{
-                                                    getReadParseData(slotProps)
-                                                }}
-                                            </j-ellipsis>
-                                        </div>
-                                        <a
-                                            v-if="
-                                                getAccessModes(
-                                                    slotProps,
-                                                ).includes('write')
-                                            "
-                                            @click.stop="clickEdit(slotProps)"
-                                            ><AIcon type="EditOutlined"
-                                        /></a>
-                                        <a
-                                            v-if="
-                                                getAccessModes(
-                                                    slotProps,
-                                                ).includes('read')
-                                            "
-                                            @click.stop="clickRead(slotProps)"
-                                            ><AIcon type="RedoOutlined"
-                                        /></a>
-                                    </div>
-                                    <div
-                                        v-if="propertyValue.has(slotProps.id)"
-                                        class="card-box-content-right-2"
-                                    >
-                                        <p>
-                                            {{
-                                                propertyValue.get(slotProps.id)
-                                                    ?.hex || ''
-                                            }}
-                                        </p>
-                                        <p>
-                                            {{
-                                                dayjs(
                                                     propertyValue.get(
                                                         slotProps.id,
-                                                    )?.timestamp,
-                                                ).format('YYYY-MM-DD HH:mm:ss')
-                                            }}
-                                        </p>
+                                                    )?.hex || ''
+                                                }}
+                                            </p>
+                                            <p>
+                                                {{
+                                                    dayjs(
+                                                        propertyValue.get(
+                                                            slotProps.id,
+                                                        )?.timestamp,
+                                                    ).format(
+                                                        'YYYY-MM-DD HH:mm:ss',
+                                                    )
+                                                }}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <div class="card-box-content-right">
+                                        <Ellipsis
+                                            style="
+                                                width: calc(100% - 10px);
+                                                margin-bottom: 10px;
+                                            "
+                                        >
+                                            <div
+                                                v-if="getRight1(slotProps)"
+                                                class="card-box-content-right-1"
+                                            >
+                                                <span>
+                                                    {{ getQuantity(slotProps) }}
+                                                </span>
+                                                <span>
+                                                    {{ getAddress(slotProps) }}
+                                                </span>
+                                                <span>
+                                                    {{
+                                                        getScaleFactor(
+                                                            slotProps,
+                                                        )
+                                                    }}
+                                                </span>
+                                            </div>
+                                        </Ellipsis>
+                                        <Ellipsis
+                                            style="
+                                                width: calc(100% - 10px);
+                                                margin-bottom: 10px;
+                                            "
+                                        >
+                                            <div
+                                                class="card-box-content-right-2"
+                                            >
+                                                <span>{{
+                                                    getText(slotProps)
+                                                }}</span>
+                                                <span>{{
+                                                    getInterval(slotProps)
+                                                }}</span>
+                                            </div>
+                                        </Ellipsis>
                                     </div>
                                 </div>
+                            </template>
+                        </PointCardBox>
+                    </template>
+                </j-pro-table>
+            </j-scrollbar>
+        </FullPage>
 
-                                <div class="card-box-content-right">
-                                    <Ellipsis
-                                        style="
-                                            width: calc(100% - 10px);
-                                            margin-bottom: 10px;
-                                        "
-                                    >
-                                        <div
-                                            v-if="getRight1(slotProps)"
-                                            class="card-box-content-right-1"
-                                        >
-                                            <span>
-                                                {{ getQuantity(slotProps) }}
-                                            </span>
-                                            <span>
-                                                {{ getAddress(slotProps) }}
-                                            </span>
-                                            <span>
-                                                {{ getScaleFactor(slotProps) }}
-                                            </span>
-                                        </div>
-                                    </Ellipsis>
-                                    <Ellipsis
-                                        style="
-                                            width: calc(100% - 10px);
-                                            margin-bottom: 10px;
-                                        "
-                                    >
-                                        <div class="card-box-content-right-2">
-                                            <span>{{
-                                                getText(slotProps)
-                                            }}</span>
-                                            <span>{{
-                                                getInterval(slotProps)
-                                            }}</span>
-                                        </div>
-                                    </Ellipsis>
-                                </div>
-                            </div>
-                        </template>
-                    </PointCardBox>
-                </template>
-            </j-pro-table>
-        </j-scrollbar>
         <SaveModBus
             v-if="visible.saveModBus"
             :data="current"
diff --git a/src/views/DataCollect/Dashboard/components/Card.vue b/src/views/DataCollect/Dashboard/components/Card.vue
index edb96cbe..8980e0b2 100644
--- a/src/views/DataCollect/Dashboard/components/Card.vue
+++ b/src/views/DataCollect/Dashboard/components/Card.vue
@@ -1,37 +1,46 @@
 <template>
     <j-spin :spinning="loading">
-        <div class="dash-board">
-            <div class="header">
-                <div class="left">
-                    <h3 style="width: 100px">点位数据量</h3>
-                </div>
-                <div class="right">
-                    <j-radio-group
-                        button-style="solid"
-                        style="margin-right: 10px"
-                        v-model:value="data.time.type"
-                    >
-                        <j-radio-button value="hour">
-                            最近1小时
-                        </j-radio-button>
-                        <j-radio-button value="today"> 今日 </j-radio-button>
-                        <j-radio-button value="week"> 近一周 </j-radio-button>
-                    </j-radio-group>
-                    <j-range-picker
-                        :allowClear="false"
-                        :show-time="{ format: 'HH:mm:ss' }"
-                        format="YYYY-MM-DD HH:mm:ss"
-                        v-model:value="data.time.time"
-                        @change="pickerTimeChange"
-                    >
-                        <template #suffixIcon
-                            ><AIcon type="CalendarOutlined"
-                        /></template>
-                    </j-range-picker>
+        <FullPage>
+            <div class="dash-board">
+                <div class="header">
+                    <div class="left">
+                        <h3 style="width: 100px">点位数据量</h3>
+                    </div>
+                    <div class="right">
+                        <j-radio-group
+                            button-style="solid"
+                            style="margin-right: 10px"
+                            v-model:value="data.time.type"
+                        >
+                            <j-radio-button value="hour">
+                                最近1小时
+                            </j-radio-button>
+                            <j-radio-button value="today">
+                                今日
+                            </j-radio-button>
+                            <j-radio-button value="week">
+                                近一周
+                            </j-radio-button>
+                        </j-radio-group>
+                        <j-range-picker
+                            :allowClear="false"
+                            :show-time="{ format: 'HH:mm:ss' }"
+                            format="YYYY-MM-DD HH:mm:ss"
+                            v-model:value="data.time.time"
+                            @change="pickerTimeChange"
+                        >
+                            <template #suffixIcon
+                                ><AIcon type="CalendarOutlined"
+                            /></template>
+                        </j-range-picker>
+                    </div>
                 </div>
+                <div
+                    ref="chartRef"
+                    style="width: 100%; min-height: 350px"
+                ></div>
             </div>
-            <div ref="chartRef" style="width: 100%; height: 350px"></div>
-        </div>
+        </FullPage>
     </j-spin>
 </template>
 
@@ -99,9 +108,11 @@ const handleOptions = (x = [], y = []) => {
                 },
             ],
         };
-        myChart.setOption(options);
-        window.addEventListener('resize', function () {
-            myChart.resize();
+        nextTick(() => {
+            myChart.setOption(options);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
         });
     }
 };
@@ -132,6 +143,7 @@ watch(
     display: flex;
     flex-direction: column;
     height: 100%;
+    // height: 500px;
     padding: 24px;
     background-color: #fff;
     border-radius: 2px;
diff --git a/src/views/Log/index.vue b/src/views/Log/index.vue
index ebe1b006..08adfd3e 100644
--- a/src/views/Log/index.vue
+++ b/src/views/Log/index.vue
@@ -1,16 +1,22 @@
 <template>
-    <page-container :tabList="list" :tabActiveKey="activeKey" @tabChange="onTabChange">
-        <AccessLog v-if="activeKey === '1'" />
-        <SystemLog v-else />
+    <page-container
+        :tabList="list"
+        :tabActiveKey="activeKey"
+        @tabChange="onTabChange"
+    >
+        <FullPage>
+            <AccessLog v-if="activeKey === '1'" />
+            <SystemLog v-else />
+        </FullPage>
     </page-container>
 </template>
 <script lang="ts" setup name="LogPage">
 import { defineComponent, ref } from 'vue';
 import AccessLog from './Access/index.vue';
 import SystemLog from './System/index.vue';
-import {useRouterParams} from "@/utils/hooks/useParams";
+import { useRouterParams } from '@/utils/hooks/useParams';
 
-const routerParams = useRouterParams()
+const routerParams = useRouterParams();
 const activeKey = ref('1');
 
 const list = [
diff --git a/src/views/device/Firmware/Task/Detail/index.vue b/src/views/device/Firmware/Task/Detail/index.vue
index ae6fd789..59aeef31 100644
--- a/src/views/device/Firmware/Task/Detail/index.vue
+++ b/src/views/device/Firmware/Task/Detail/index.vue
@@ -60,61 +60,64 @@
                 target="search"
                 @search="handleSearch"
             />
-            <j-pro-table
-                ref="tableRef"
-                model="TABLE"
-                :columns="columns"
-                :request="history"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                    terms: defaultParams,
-                }"
-                :params="params"
-            >
-                <template #createTime="slotProps">
-                    <span>{{
-                        moment(slotProps.createTime).format(
-                            'YYYY-MM-DD HH:mm:ss',
-                        )
-                    }}</span>
-                </template>
-                <template #productId="slotProps">
-                    <span>{{ slotProps.productName }}</span>
-                </template>
-                <template #state="slotProps">
-                    <j-badge
-                        :text="slotProps.state.text"
-                        :color="colorMap.get(slotProps.state.value)"
-                    />
-                </template>
-                <template #progress="slotProps">
-                    <span>{{ slotProps.progress }}%</span>
-                </template>
-                <template #action="slotProps">
-                    <j-space>
-                        <template
-                            v-for="i in getActions(slotProps)"
-                            :key="i.key"
-                        >
-                            <PermissionButton
-                                :disabled="i.disabled"
-                                :popConfirm="i.popConfirm"
-                                :tooltip="{
-                                    ...i.tooltip,
-                                }"
-                                style="padding: 0px"
-                                @click="i.onClick"
-                                type="link"
-                                :hasPermission="'device/Firmware:' + i.key"
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    model="TABLE"
+                    :columns="columns"
+                    :request="history"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                        terms: defaultParams,
+                    }"
+                    :params="params"
+                >
+                    <template #createTime="slotProps">
+                        <span>{{
+                            moment(slotProps.createTime).format(
+                                'YYYY-MM-DD HH:mm:ss',
+                            )
+                        }}</span>
+                    </template>
+                    <template #productId="slotProps">
+                        <span>{{ slotProps.productName }}</span>
+                    </template>
+                    <template #state="slotProps">
+                        <j-badge
+                            :text="slotProps.state.text"
+                            :color="colorMap.get(slotProps.state.value)"
+                        />
+                    </template>
+                    <template #progress="slotProps">
+                        <span>{{ slotProps.progress }}%</span>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space>
+                            <template
+                                v-for="i in getActions(slotProps)"
+                                :key="i.key"
                             >
-                                <template #icon
-                                    ><AIcon :type="i.icon"
-                                /></template>
-                            </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                                <PermissionButton
+                                    :disabled="i.disabled"
+                                    :popConfirm="i.popConfirm"
+                                    :tooltip="{
+                                        ...i.tooltip,
+                                    }"
+                                    style="padding: 0px"
+                                    @click="i.onClick"
+                                    type="link"
+                                    :hasPermission="'device/Firmware:' + i.key"
+                                >
+                                    <template #icon
+                                        ><AIcon :type="i.icon"
+                                    /></template>
+                                </PermissionButton>
+                            </template>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
+
             <Save :data="current" v-if="visible" @change="saveChange" />
         </div>
     </page-container>
diff --git a/src/views/device/Firmware/index.vue b/src/views/device/Firmware/index.vue
index 3dbf35dd..82018a52 100644
--- a/src/views/device/Firmware/index.vue
+++ b/src/views/device/Firmware/index.vue
@@ -6,62 +6,66 @@
                 target="search"
                 @search="handleSearch"
             />
-            <j-pro-table
-                ref="tableRef"
-                model="TABLE"
-                :columns="columns"
-                :request="query"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        @click="handlAdd"
-                        hasPermission="device/Firmware:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </template>
-                <template #productId="slotProps">
-                    <span>{{ slotProps.productName }}</span>
-                </template>
-                <template #createTime="slotProps">
-                    <span>{{
-                        dayjs(slotProps.createTime).format(
-                            'YYYY-MM-DD HH:mm:ss',
-                        )
-                    }}</span>
-                </template>
-                <template #action="slotProps">
-                    <j-space>
-                        <template
-                            v-for="i in getActions(slotProps)"
-                            :key="i.key"
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    model="TABLE"
+                    :columns="columns"
+                    :request="query"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="device/Firmware:add"
                         >
-                            <PermissionButton
-                                :disabled="i.disabled"
-                                :popConfirm="i.popConfirm"
-                                :tooltip="{
-                                    ...i.tooltip,
-                                }"
-                                style="padding: 0px"
-                                @click="i.onClick"
-                                type="link"
-                                :danger="i.key === 'delete'"
-                                :hasPermission="'device/Firmware:' + i.key"
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </template>
+                    <template #productId="slotProps">
+                        <span>{{ slotProps.productName }}</span>
+                    </template>
+                    <template #createTime="slotProps">
+                        <span>{{
+                            dayjs(slotProps.createTime).format(
+                                'YYYY-MM-DD HH:mm:ss',
+                            )
+                        }}</span>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space>
+                            <template
+                                v-for="i in getActions(slotProps)"
+                                :key="i.key"
                             >
-                                <template #icon
-                                    ><AIcon :type="i.icon"
-                                /></template>
-                            </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                                <PermissionButton
+                                    :disabled="i.disabled"
+                                    :popConfirm="i.popConfirm"
+                                    :tooltip="{
+                                        ...i.tooltip,
+                                    }"
+                                    style="padding: 0px"
+                                    @click="i.onClick"
+                                    type="link"
+                                    :danger="i.key === 'delete'"
+                                    :hasPermission="'device/Firmware:' + i.key"
+                                >
+                                    <template #icon
+                                        ><AIcon :type="i.icon"
+                                    /></template>
+                                </PermissionButton>
+                            </template>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
         <Save v-if="visible" :data="current" @change="saveChange" />
     </page-container>
diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index ccbe5e67..9e6c52d2 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -1,44 +1,46 @@
 <template>
     <page-container>
         <j-spin :spinning="loading">
-            <j-card :bordered="false">
-                <div v-if="type && id === ':id'">
-                    <Provider
-                        @onClick="goProviders"
-                        :dataSource="dataSource"
-                    ></Provider>
-                </div>
-                <div v-else>
-                    <div class="go-back" v-if="id === ':id'">
-                        <a @click="goBack">返回</a>
+            <FullPage>
+                <j-card :bordered="false">
+                    <div v-if="type && id === ':id'">
+                        <Provider
+                            @onClick="goProviders"
+                            :dataSource="dataSource"
+                        ></Provider>
                     </div>
-                    <Network
-                        v-if="showType === 'network'"
-                        :provider="provider"
-                        :data="data"
-                    />
-                    <Media
-                        v-if="showType === 'media'"
-                        :provider="provider"
-                        :data="data"
-                    />
-                    <Channel
-                        v-if="showType === 'channel'"
-                        :provider="provider"
-                        :data="data"
-                    />
-                    <Edge
-                        v-if="showType === 'edge'"
-                        :provider="provider"
-                        :data="data"
-                    />
-                    <Cloud
-                        v-if="showType === 'cloud'"
-                        :provider="provider"
-                        :data="data"
-                    />
-                </div>
-            </j-card>
+                    <div v-else>
+                        <div class="go-back" v-if="id === ':id'">
+                            <a @click="goBack">返回</a>
+                        </div>
+                        <Network
+                            v-if="showType === 'network'"
+                            :provider="provider"
+                            :data="data"
+                        />
+                        <Media
+                            v-if="showType === 'media'"
+                            :provider="provider"
+                            :data="data"
+                        />
+                        <Channel
+                            v-if="showType === 'channel'"
+                            :provider="provider"
+                            :data="data"
+                        />
+                        <Edge
+                            v-if="showType === 'edge'"
+                            :provider="provider"
+                            :data="data"
+                        />
+                        <Cloud
+                            v-if="showType === 'cloud'"
+                            :provider="provider"
+                            :data="data"
+                        />
+                    </div>
+                </j-card>
+            </FullPage>
         </j-spin>
     </page-container>
 </template>
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index 3fe616b8..98a03a18 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -6,173 +6,189 @@
                 target="search"
                 @search="handleSearch"
             />
-            <j-pro-table
-                ref="tableRef"
-                model="CARD"
-                :columns="columns"
-                :request="list"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                    terms: [
-                        {
-                            terms: [
-                                {
-                                    termType: 'nin',
-                                    column: 'provider',
-                                    value: 'plugin_gateway', //todo 暂时不做插件接入
-                                },
-                            ],
-                        },
-                    ],
-                }"
-                gridColumn="2"
-                :gridColumns="[1, 2]"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        @click="handlAdd"
-                        hasPermission="link/AccessConfig:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :showStatus="true"
-                        :value="slotProps"
-                        :actions="getActions(slotProps)"
-                        v-bind="slotProps"
-                        :status="slotProps.state.value"
-                        :statusText="slotProps.state.text"
-                        :statusNames="{
-                            enabled: 'processing',
-                            disabled: 'error',
-                        }"
-                        @click="handlEye(slotProps.id)"
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img :src="getImage('/device-access.png')" />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <div class="card-item-content">
-                                <Ellipsis
-                                    style="
-                                        width: calc(100% - 100px);
-                                        margin-bottom: 20px;
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    model="CARD"
+                    :columns="columns"
+                    :request="list"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                        terms: [
+                            {
+                                terms: [
+                                    {
+                                        termType: 'nin',
+                                        column: 'provider',
+                                        value: 'plugin_gateway', //todo 暂时不做插件接入
+                                    },
+                                ],
+                            },
+                        ],
+                    }"
+                    gridColumn="2"
+                    :gridColumns="[1, 2]"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="link/AccessConfig:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :showStatus="true"
+                            :value="slotProps"
+                            :actions="getActions(slotProps)"
+                            v-bind="slotProps"
+                            :status="slotProps.state.value"
+                            :statusText="slotProps.state.text"
+                            :statusNames="{
+                                enabled: 'processing',
+                                disabled: 'error',
+                            }"
+                            @click="handlEye(slotProps.id)"
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img
+                                        :src="getImage('/device-access.png')"
+                                    />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <div class="card-item-content">
+                                    <Ellipsis
+                                        style="
+                                            width: calc(100% - 100px);
+                                            margin-bottom: 20px;
+                                        "
+                                    >
+                                        <span class="card-title">
+                                            {{ slotProps.name }}
+                                        </span>
+                                    </Ellipsis>
+                                    <j-row class="card-item-content-box">
+                                        <j-col
+                                            :span="12"
+                                            v-if="slotProps.channelInfo"
+                                            class="card-item-content-text"
+                                        >
+                                            <div
+                                                class="card-item-content-text-title"
+                                            >
+                                                {{ slotProps.channelInfo.name }}
+                                            </div>
+                                            <Ellipsis
+                                                style="
+                                                    width: calc(100% - 10px);
+                                                    display: flex;
+                                                    margin-top: 4px;
+                                                "
+                                                v-if="
+                                                    slotProps.channelInfo
+                                                        .addresses
+                                                "
+                                            >
+                                                <j-badge
+                                                    :status="
+                                                        getStatus(slotProps)
+                                                    "
+                                                />
+                                                <span>
+                                                    {{
+                                                        slotProps.channelInfo
+                                                            .addresses[0]
+                                                            .address
+                                                    }}
+                                                </span>
+                                            </Ellipsis>
+                                        </j-col>
+                                        <j-col
+                                            :span="12"
+                                            v-if="slotProps.protocolDetail"
+                                            class="card-item-content-text"
+                                        >
+                                            <div
+                                                class="card-item-content-text-title"
+                                            >
+                                                协议
+                                            </div>
+                                            <Ellipsis
+                                                style="
+                                                    width: calc(100% - 10px);
+                                                    display: flex;
+                                                    margin-top: 4px;
+                                                "
+                                            >
+                                                <span>
+                                                    {{
+                                                        slotProps.protocolDetail
+                                                            .name
+                                                    }}
+                                                </span>
+                                            </Ellipsis>
+                                        </j-col>
+                                    </j-row>
+                                    <j-row>
+                                        <j-col
+                                            :span="24"
+                                            class="card-item-content-description"
+                                        >
+                                            <j-tooltip>
+                                                <template #title>
+                                                    {{
+                                                        getDescription(
+                                                            slotProps,
+                                                        )
+                                                    }}
+                                                </template>
+                                                {{ getDescription(slotProps) }}
+                                            </j-tooltip>
+                                        </j-col>
+                                    </j-row>
+                                </div>
+                            </template>
+
+                            <template #actions="item">
+                                <PermissionButton
+                                    :disabled="item.disabled"
+                                    :popConfirm="item.popConfirm"
+                                    :tooltip="{
+                                        ...item.tooltip,
+                                    }"
+                                    @click="item.onClick"
+                                    :hasPermission="
+                                        'link/AccessConfig:' + item.key
                                     "
                                 >
-                                    <span class="card-title">
-                                        {{ slotProps.name }}
-                                    </span>
-                                </Ellipsis>
-                                <j-row class="card-item-content-box">
-                                    <j-col
-                                        :span="12"
-                                        v-if="slotProps.channelInfo"
-                                        class="card-item-content-text"
-                                    >
-                                        <div
-                                            class="card-item-content-text-title"
-                                        >
-                                            {{ slotProps.channelInfo.name }}
-                                        </div>
-                                        <Ellipsis
-                                            style="
-                                                width: calc(100% - 10px);
-                                                display: flex;
-                                                margin-top: 4px;
-                                            "
-                                            v-if="
-                                                slotProps.channelInfo.addresses
-                                            "
-                                        >
-                                            <j-badge
-                                                :status="getStatus(slotProps)"
-                                            />
-                                            <span>
-                                                {{
-                                                    slotProps.channelInfo
-                                                        .addresses[0].address
-                                                }}
-                                            </span>
-                                        </Ellipsis>
-                                    </j-col>
-                                    <j-col
-                                        :span="12"
-                                        v-if="slotProps.protocolDetail"
-                                        class="card-item-content-text"
-                                    >
-                                        <div
-                                            class="card-item-content-text-title"
-                                        >
-                                            协议
-                                        </div>
-                                        <Ellipsis
-                                            style="
-                                                width: calc(100% - 10px);
-                                                display: flex;
-                                                margin-top: 4px;
-                                            "
-                                        >
-                                            <span>
-                                                {{
-                                                    slotProps.protocolDetail
-                                                        .name
-                                                }}
-                                            </span>
-                                        </Ellipsis>
-                                    </j-col>
-                                </j-row>
-                                <j-row>
-                                    <j-col
-                                        :span="24"
-                                        class="card-item-content-description"
-                                    >
-                                        <j-tooltip>
-                                            <template #title>
-                                                {{ getDescription(slotProps) }}
-                                            </template>
-                                            {{ getDescription(slotProps) }}
-                                        </j-tooltip>
-                                    </j-col>
-                                </j-row>
-                            </div>
-                        </template>
-
-                        <template #actions="item">
-                            <PermissionButton
-                                :disabled="item.disabled"
-                                :popConfirm="item.popConfirm"
-                                :tooltip="{
-                                    ...item.tooltip,
-                                }"
-                                @click="item.onClick"
-                                :hasPermission="'link/AccessConfig:' + item.key"
-                            >
-                                <AIcon
-                                    type="DeleteOutlined"
-                                    v-if="item.key === 'delete'"
-                                />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item?.text }}</span>
-                                </template>
-                            </PermissionButton>
-                        </template>
-                    </CardBox>
-                </template>
-                <template #state="slotProps">
-                    <j-badge
-                        :text="slotProps.state.text"
-                        :status="statusMap.get(slotProps.state.value)"
-                    />
-                </template>
-            </j-pro-table>
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </PermissionButton>
+                            </template>
+                        </CardBox>
+                    </template>
+                    <template #state="slotProps">
+                        <j-badge
+                            :text="slotProps.state.text"
+                            :status="statusMap.get(slotProps.state.value)"
+                        />
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
     </page-container>
 </template>
diff --git a/src/views/link/Certificate/Detail/index.vue b/src/views/link/Certificate/Detail/index.vue
index 470d0222..f843b403 100644
--- a/src/views/link/Certificate/Detail/index.vue
+++ b/src/views/link/Certificate/Detail/index.vue
@@ -1,102 +1,106 @@
 <template>
     <page-container>
-        <j-card>
-            <j-row :gutter="[24, 24]" style="padding: 24px">
-                <j-col :span="12">
-                    <j-form
-                        class="form"
-                        layout="vertical"
-                        :model="formData"
-                        name="basic"
-                        :label-col="{ span: 8 }"
-                        :wrapper-col="{ span: 24 }"
-                        autocomplete="off"
-                    >
-                        <j-form-item
-                            label="证书标准"
-                            v-bind="validateInfos.type"
+        <FullPage>
+            <j-card>
+                <j-row :gutter="[24, 24]" style="padding: 24px">
+                    <j-col :span="12">
+                        <j-form
+                            class="form"
+                            layout="vertical"
+                            :model="formData"
+                            name="basic"
+                            :label-col="{ span: 8 }"
+                            :wrapper-col="{ span: 24 }"
+                            autocomplete="off"
                         >
-                            <j-radio-group v-model:value="formData.type">
-                                <j-radio-button
-                                    class="form-radio-button"
-                                    value="common"
-                                >
-                                    <img :src="getImage('/certificate.png')" />
-                                </j-radio-button>
-                            </j-radio-group>
-                        </j-form-item>
-                        <j-form-item
-                            label="证书名称"
-                            v-bind="validateInfos.name"
-                        >
-                            <j-input
-                                placeholder="请输入证书名称"
-                                v-model:value="formData.name"
-                            />
-                        </j-form-item>
-                        <j-form-item
-                            label="证书文件"
-                            v-bind="validateInfos['configs.cert']"
-                        >
-                            <CertificateFile
-                                name="cert"
-                                v-model:modelValue="formData.configs.cert"
-                                placeholder="请输入证书文件"
-                            />
-                        </j-form-item>
-                        <j-form-item
-                            label="证书私钥"
-                            v-bind="validateInfos['configs.key']"
-                        >
-                            <CertificateFile
-                                name="key"
-                                v-model:modelValue="formData.configs.key"
-                                placeholder="请输入证书私钥"
-                            />
-                        </j-form-item>
-                        <j-form-item label="说明" name="description">
-                            <j-textarea
-                                placeholder="请输入说明"
-                                v-model:value="formData.description"
-                                :maxlength="200"
-                                :rows="3"
-                                showCount
-                            />
-                        </j-form-item>
-
-                        <j-form-item>
-                            <j-button
-                                v-if="view === 'false'"
-                                class="form-submit"
-                                html-type="submit"
-                                type="primary"
-                                @click.prevent="onSubmit"
-                                :loading="loading"
-                                >保存</j-button
+                            <j-form-item
+                                label="证书标准"
+                                v-bind="validateInfos.type"
                             >
-                        </j-form-item>
-                    </j-form>
-                </j-col>
-                <j-col :span="12">
-                    <div class="doc">
-                        <h1>1. 概述</h1>
-                        <div>
-                            证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
+                                <j-radio-group v-model:value="formData.type">
+                                    <j-radio-button
+                                        class="form-radio-button"
+                                        value="common"
+                                    >
+                                        <img
+                                            :src="getImage('/certificate.png')"
+                                        />
+                                    </j-radio-button>
+                                </j-radio-group>
+                            </j-form-item>
+                            <j-form-item
+                                label="证书名称"
+                                v-bind="validateInfos.name"
+                            >
+                                <j-input
+                                    placeholder="请输入证书名称"
+                                    v-model:value="formData.name"
+                                />
+                            </j-form-item>
+                            <j-form-item
+                                label="证书文件"
+                                v-bind="validateInfos['configs.cert']"
+                            >
+                                <CertificateFile
+                                    name="cert"
+                                    v-model:modelValue="formData.configs.cert"
+                                    placeholder="请输入证书文件"
+                                />
+                            </j-form-item>
+                            <j-form-item
+                                label="证书私钥"
+                                v-bind="validateInfos['configs.key']"
+                            >
+                                <CertificateFile
+                                    name="key"
+                                    v-model:modelValue="formData.configs.key"
+                                    placeholder="请输入证书私钥"
+                                />
+                            </j-form-item>
+                            <j-form-item label="说明" name="description">
+                                <j-textarea
+                                    placeholder="请输入说明"
+                                    v-model:value="formData.description"
+                                    :maxlength="200"
+                                    :rows="3"
+                                    showCount
+                                />
+                            </j-form-item>
+
+                            <j-form-item>
+                                <j-button
+                                    v-if="view === 'false'"
+                                    class="form-submit"
+                                    html-type="submit"
+                                    type="primary"
+                                    @click.prevent="onSubmit"
+                                    :loading="loading"
+                                    >保存</j-button
+                                >
+                            </j-form-item>
+                        </j-form>
+                    </j-col>
+                    <j-col :span="12">
+                        <div class="doc">
+                            <h1>1. 概述</h1>
+                            <div>
+                                证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
+                            </div>
+                            <h1>2. 配置说明</h1>
+                            <h2>1、证书文件</h2>
+                            <div>
+                                您可以使用文本编辑工具打开PEM格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
+                            </div>
+                            <h2>2、证书私钥</h2>
+                            <div>
+                                填写证书私钥内容的PEM编码。
+                                您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
+                            </div>
                         </div>
-                        <h1>2. 配置说明</h1>
-                        <h2>1、证书文件</h2>
-                        <div>
-                            您可以使用文本编辑工具打开PEM格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
-                        </div>
-                        <h2>2、证书私钥</h2>
-                        <div>
-                            填写证书私钥内容的PEM编码。
-                            您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
-                        </div>
-                    </div>
-                </j-col>
-            </j-row>
-        </j-card>
+                    </j-col>
+                </j-row>
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/link/Certificate/index.vue b/src/views/link/Certificate/index.vue
index 0b218c17..1314f8f4 100644
--- a/src/views/link/Certificate/index.vue
+++ b/src/views/link/Certificate/index.vue
@@ -6,55 +6,59 @@
                 target="search"
                 @search="handleSearch"
             />
-            <j-pro-table
-                ref="tableRef"
-                model="TABLE"
-                :columns="columns"
-                :request="query"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        @click="handlAdd"
-                        hasPermission="link/Certificate:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </template>
-                <template #type="slotProps">
-                    <span>{{ slotProps.type.text }}</span>
-                </template>
-                <template #action="slotProps">
-                    <j-space>
-                        <template
-                            v-for="i in getActions(slotProps)"
-                            :key="i.key"
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    model="TABLE"
+                    :columns="columns"
+                    :request="query"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="link/Certificate:add"
                         >
-                            <PermissionButton
-                                :disabled="i.disabled"
-                                :popConfirm="i.popConfirm"
-                                :tooltip="{
-                                    ...i.tooltip,
-                                }"
-                                style="padding: 0px"
-                                @click="i.onClick"
-                                type="link"
-                                :danger="i.key === 'delete'"
-                                :hasPermission="'link/Certificate:' + i.key"
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.type.text }}</span>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space>
+                            <template
+                                v-for="i in getActions(slotProps)"
+                                :key="i.key"
                             >
-                                <template #icon
-                                    ><AIcon :type="i.icon"
-                                /></template>
-                            </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                                <PermissionButton
+                                    :disabled="i.disabled"
+                                    :popConfirm="i.popConfirm"
+                                    :tooltip="{
+                                        ...i.tooltip,
+                                    }"
+                                    style="padding: 0px"
+                                    @click="i.onClick"
+                                    type="link"
+                                    :danger="i.key === 'delete'"
+                                    :hasPermission="'link/Certificate:' + i.key"
+                                >
+                                    <template #icon
+                                        ><AIcon :type="i.icon"
+                                    /></template>
+                                </PermissionButton>
+                            </template>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
     </page-container>
 </template>
diff --git a/src/views/link/Protocol/index.vue b/src/views/link/Protocol/index.vue
index c91982bf..9c62dfaa 100644
--- a/src/views/link/Protocol/index.vue
+++ b/src/views/link/Protocol/index.vue
@@ -6,136 +6,139 @@
                 target="search"
                 @search="handleSearch"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="list"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        @click="handlAdd"
-                        hasPermission="link/Protocol:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :showStatus="false"
-                        :value="slotProps"
-                        :actions="getActions(slotProps, 'card')"
-                        v-bind="slotProps"
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img :src="getImage('/protocol.png')" />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <div class="card-item-content">
-                                <Ellipsis
-                                    style="
-                                        width: calc(100% - 100px);
-                                        margin-bottom: 10px;
-                                    "
-                                >
-                                    <span
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="list"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="link/Protocol:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :showStatus="false"
+                            :value="slotProps"
+                            :actions="getActions(slotProps, 'card')"
+                            v-bind="slotProps"
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img :src="getImage('/protocol.png')" />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <div class="card-item-content">
+                                    <Ellipsis
                                         style="
-                                            font-size: 16px;
-                                            font-weight: 600;
+                                            width: calc(100% - 100px);
+                                            margin-bottom: 10px;
                                         "
                                     >
-                                        {{ slotProps.name }}
-                                    </span>
-                                </Ellipsis>
-                                <j-row class="card-item-content-box">
-                                    <j-col
-                                        :span="12"
-                                        class="card-item-content-text"
-                                    >
-                                        <div class="card-item-content-text">
-                                            ID
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.id
-                                                }}</template>
-                                                {{ slotProps.id }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                    <j-col :span="12">
-                                        <div class="card-item-content-text">
-                                            类型
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.type
-                                                }}</template>
-                                                {{ slotProps.type }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                </j-row>
-                            </div>
-                        </template>
-                        <template #actions="item">
-                            <PermissionButton
-                                :disabled="item.disabled"
-                                :popConfirm="item.popConfirm"
-                                :tooltip="{
-                                    ...item.tooltip,
-                                }"
-                                @click="item.onClick"
-                                :hasPermission="'link/Protocol:' + item.key"
+                                        <span
+                                            style="
+                                                font-size: 16px;
+                                                font-weight: 600;
+                                            "
+                                        >
+                                            {{ slotProps.name }}
+                                        </span>
+                                    </Ellipsis>
+                                    <j-row class="card-item-content-box">
+                                        <j-col
+                                            :span="12"
+                                            class="card-item-content-text"
+                                        >
+                                            <div class="card-item-content-text">
+                                                ID
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.id
+                                                    }}</template>
+                                                    {{ slotProps.id }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                        <j-col :span="12">
+                                            <div class="card-item-content-text">
+                                                类型
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.type
+                                                    }}</template>
+                                                    {{ slotProps.type }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                    </j-row>
+                                </div>
+                            </template>
+                            <template #actions="item">
+                                <PermissionButton
+                                    :disabled="item.disabled"
+                                    :popConfirm="item.popConfirm"
+                                    :tooltip="{
+                                        ...item.tooltip,
+                                    }"
+                                    @click="item.onClick"
+                                    :hasPermission="'link/Protocol:' + item.key"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </PermissionButton>
+                            </template>
+                        </CardBox>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space>
+                            <template
+                                v-for="i in getActions(slotProps, 'table')"
+                                :key="i.key"
                             >
-                                <AIcon
-                                    type="DeleteOutlined"
-                                    v-if="item.key === 'delete'"
-                                />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item?.text }}</span>
-                                </template>
-                            </PermissionButton>
-                        </template>
-                    </CardBox>
-                </template>
-                <template #action="slotProps">
-                    <j-space>
-                        <template
-                            v-for="i in getActions(slotProps, 'table')"
-                            :key="i.key"
-                        >
-                            <PermissionButton
-                                :disabled="i.disabled"
-                                :popConfirm="i.popConfirm"
-                                :tooltip="{
-                                    ...i.tooltip,
-                                }"
-                                style="padding: 0px"
-                                @click="i.onClick"
-                                type="link"
-                                :danger="i.key === 'delete'"
-                                :hasPermission="'link/Protocol:' + i.key"
-                            >
-                                <template #icon
-                                    ><AIcon :type="i.icon"
-                                /></template>
-                            </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                                <PermissionButton
+                                    :disabled="i.disabled"
+                                    :popConfirm="i.popConfirm"
+                                    :tooltip="{
+                                        ...i.tooltip,
+                                    }"
+                                    style="padding: 0px"
+                                    @click="i.onClick"
+                                    type="link"
+                                    :danger="i.key === 'delete'"
+                                    :hasPermission="'link/Protocol:' + i.key"
+                                >
+                                    <template #icon
+                                        ><AIcon :type="i.icon"
+                                    /></template>
+                                </PermissionButton>
+                            </template>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
         <Save v-if="visible" :data="current" @change="saveChange" />
     </page-container>
diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
index 336cc907..03fde608 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -1,910 +1,281 @@
 <template>
     <page-container>
-        <j-card>
-            <div class="container">
-                <j-form
-                    :model="formData"
-                    ref="formRef1"
-                    name="basic"
-                    autocomplete="off"
-                    layout="vertical"
-                >
-                    <j-row :gutter="[24, 0]">
-                        <j-col :span="12">
-                            <j-form-item
-                                label="名称"
-                                name="name"
-                                :rules="Rules.name"
-                            >
-                                <j-input
-                                    v-model:value="formData.name"
-                                    placeholder="请输入名称"
-                                />
-                            </j-form-item>
-                        </j-col>
-                        <j-col :span="12">
-                            <j-form-item
-                                label="类型"
-                                name="type"
-                                :rules="Rules.type"
-                            >
-                                <j-select
-                                    v-model:value="formData.type"
-                                    :options="typeOptions"
-                                    placeholder="请选择类型"
-                                    allowClear
-                                    show-search
-                                    :filter-option="filterOption"
-                                    @change="changeType"
-                                    :disabled="!!NetworkType"
-                                />
-                            </j-form-item>
-                        </j-col>
-                        <j-col :span="24">
-                            <j-form-item
-                                name="shareCluster"
-                                :rules="Rules.shareCluster"
-                            >
-                                <template #label>
-                                    集群
-                                    <j-tooltip
-                                        title="共享配置:集群下所有节点共用同一配置,独立配置:集群下不同节点使用不同配置"
-                                    >
-                                        <AIcon
-                                            type="QuestionCircleOutlined"
-                                            style="margin-left: 2px"
-                                        />
-                                    </j-tooltip>
-                                </template>
-                                <j-radio-group
-                                    v-model:value="formData.shareCluster"
-                                    button-style="solid"
-                                    @change="
-                                        changeShareCluster(
-                                            formData.shareCluster,
-                                        )
-                                    "
-                                >
-                                    <j-radio-button :value="true"
-                                        >共享配置</j-radio-button
-                                    >
-                                    <j-radio-button :value="false"
-                                        >独立配置</j-radio-button
-                                    >
-                                </j-radio-group>
-                            </j-form-item>
-                        </j-col>
-                    </j-row>
-
+        <FullPage>
+            <j-card>
+                <div class="container">
                     <j-form
-                        ref="formRef2"
+                        :model="formData"
+                        ref="formRef1"
+                        name="basic"
+                        autocomplete="off"
                         layout="vertical"
-                        name="dynamic_form_nest_item"
-                        :model="dynamicValidateForm"
-                        class="form2"
                     >
-                        <div
-                            v-for="(
-                                cluster, index
-                            ) in dynamicValidateForm.cluster"
-                            :key="cluster.id"
-                        >
-                            <j-collapse
-                                v-model:activeKey="activeKey"
-                                :class="[
-                                    !formData.shareCluster
-                                        ? 'collapse'
-                                        : 'collapse-panel',
-                                ]"
-                                :ghost="formData.shareCluster"
-                                collapsible="header"
-                            >
-                                <j-collapse-panel
-                                    :key="cluster.id"
-                                    :show-arrow="!formData.shareCluster"
+                        <j-row :gutter="[24, 0]">
+                            <j-col :span="12">
+                                <j-form-item
+                                    label="名称"
+                                    name="name"
+                                    :rules="Rules.name"
                                 >
-                                    <template #header v-if="!shareCluster">
-                                        <div class="collapse-header">
-                                            {{
-                                                cluster.serverId
-                                                    ? cluster.serverId
-                                                    : !formData.shareCluster
-                                                    ? `#${index + 1}.配置信息`
-                                                    : ''
-                                            }}
-                                        </div>
+                                    <j-input
+                                        v-model:value="formData.name"
+                                        placeholder="请输入名称"
+                                    />
+                                </j-form-item>
+                            </j-col>
+                            <j-col :span="12">
+                                <j-form-item
+                                    label="类型"
+                                    name="type"
+                                    :rules="Rules.type"
+                                >
+                                    <j-select
+                                        v-model:value="formData.type"
+                                        :options="typeOptions"
+                                        placeholder="请选择类型"
+                                        allowClear
+                                        show-search
+                                        :filter-option="filterOption"
+                                        @change="changeType"
+                                        :disabled="!!NetworkType"
+                                    />
+                                </j-form-item>
+                            </j-col>
+                            <j-col :span="24">
+                                <j-form-item
+                                    name="shareCluster"
+                                    :rules="Rules.shareCluster"
+                                >
+                                    <template #label>
+                                        集群
+                                        <j-tooltip
+                                            title="共享配置:集群下所有节点共用同一配置,独立配置:集群下不同节点使用不同配置"
+                                        >
+                                            <AIcon
+                                                type="QuestionCircleOutlined"
+                                                style="margin-left: 2px"
+                                            />
+                                        </j-tooltip>
                                     </template>
-                                    <template #extra v-if="!shareCluster">
-                                        <j-popconfirm
-                                            @confirm.prevent="
-                                                removeCluster(cluster)
-                                            "
+                                    <j-radio-group
+                                        v-model:value="formData.shareCluster"
+                                        button-style="solid"
+                                        @change="
+                                            changeShareCluster(
+                                                formData.shareCluster,
+                                            )
+                                        "
+                                    >
+                                        <j-radio-button :value="true"
+                                            >共享配置</j-radio-button
                                         >
-                                            <span class="delete-btn">
-                                                删除
-                                            </span>
-                                        </j-popconfirm>
-                                    </template>
-                                    <j-row :gutter="[24, 0]">
-                                        <j-col :span="12" v-if="!shareCluster">
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'serverId',
-                                                ]"
-                                                label="节点名称"
-                                                :rules="Rules.serverId"
+                                        <j-radio-button :value="false"
+                                            >独立配置</j-radio-button
+                                        >
+                                    </j-radio-group>
+                                </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="(
+                                    cluster, index
+                                ) in dynamicValidateForm.cluster"
+                                :key="cluster.id"
+                            >
+                                <j-collapse
+                                    v-model:activeKey="activeKey"
+                                    :class="[
+                                        !formData.shareCluster
+                                            ? 'collapse'
+                                            : 'collapse-panel',
+                                    ]"
+                                    :ghost="formData.shareCluster"
+                                    collapsible="header"
+                                >
+                                    <j-collapse-panel
+                                        :key="cluster.id"
+                                        :show-arrow="!formData.shareCluster"
+                                    >
+                                        <template #header v-if="!shareCluster">
+                                            <div class="collapse-header">
+                                                {{
+                                                    cluster.serverId
+                                                        ? cluster.serverId
+                                                        : !formData.shareCluster
+                                                        ? `#${
+                                                              index + 1
+                                                          }.配置信息`
+                                                        : ''
+                                                }}
+                                            </div>
+                                        </template>
+                                        <template #extra v-if="!shareCluster">
+                                            <j-popconfirm
+                                                @confirm.prevent="
+                                                    removeCluster(cluster)
+                                                "
                                             >
-                                                <j-select
-                                                    v-model:value="
-                                                        cluster.serverId
-                                                    "
-                                                    :options="
-                                                        clustersListIndex[index]
-                                                    "
-                                                    placeholder="请选择节点名称"
-                                                    allowClear
-                                                    show-search
-                                                    :filter-option="
-                                                        filterOption
-                                                    "
-                                                    @change="
-                                                        changeServerId(
-                                                            cluster.serverId,
-                                                            index,
-                                                        )
-                                                    "
+                                                <span class="delete-btn">
+                                                    删除
+                                                </span>
+                                            </j-popconfirm>
+                                        </template>
+                                        <j-row :gutter="[24, 0]">
+                                            <j-col
+                                                :span="12"
+                                                v-if="!shareCluster"
+                                            >
+                                                <j-form-item
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'serverId',
+                                                    ]"
+                                                    label="节点名称"
+                                                    :rules="Rules.serverId"
                                                 >
-                                                </j-select>
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible('host', formData.type)
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'host',
-                                                ]"
-                                                :rules="Rules.host"
-                                            >
-                                                <template #label>
-                                                    本地地址
-                                                    <j-tooltip
-                                                        title="绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0"
+                                                    <j-select
+                                                        v-model:value="
+                                                            cluster.serverId
+                                                        "
+                                                        :options="
+                                                            clustersListIndex[
+                                                                index
+                                                            ]
+                                                        "
+                                                        placeholder="请选择节点名称"
+                                                        allowClear
+                                                        show-search
+                                                        :filter-option="
+                                                            filterOption
+                                                        "
+                                                        @change="
+                                                            changeServerId(
+                                                                cluster.serverId,
+                                                                index,
+                                                            )
+                                                        "
                                                     >
-                                                        <AIcon
-                                                            type="QuestionCircleOutlined"
-                                                            style="
-                                                                margin-left: 2px;
-                                                            "
-                                                        />
-                                                    </j-tooltip>
-                                                </template>
-                                                <j-select
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .host
-                                                    "
-                                                    :options="
-                                                        hostOptionsIndex[index]
-                                                    "
-                                                    placeholder="请选择本地地址"
-                                                    allowClear
-                                                    show-search
-                                                    :disabled="shareCluster"
-                                                    :filter-option="
-                                                        filterOption
-                                                    "
-                                                    @change="
-                                                        changeHost(
-                                                            cluster.serverId,
-                                                            cluster
-                                                                .configuration
-                                                                .host,
-                                                            index,
-                                                        )
-                                                    "
-                                                >
-                                                </j-select>
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible('port', formData.type)
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'port',
-                                                ]"
-                                                :rules="Rules.port"
-                                            >
-                                                <template #label>
-                                                    本地端口
-                                                    <j-tooltip
-                                                        title="监听指定端口的请求"
-                                                    >
-                                                        <AIcon
-                                                            type="QuestionCircleOutlined"
-                                                            style="
-                                                                margin-left: 2px;
-                                                            "
-                                                        />
-                                                    </j-tooltip>
-                                                </template>
-                                                <j-select
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .port
-                                                    "
-                                                    :options="
-                                                        portOptionsIndex[index]
-                                                    "
-                                                    placeholder="请选择本地端口"
-                                                    allowClear
-                                                    show-search
-                                                    :filter-option="
-                                                        filterPortOption
-                                                    "
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'publicHost',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-
-                                                    'publicHost',
-                                                ]"
-                                                :rules="Rules.publicHost"
-                                            >
-                                                <template #label>
-                                                    公网地址
-                                                    <j-tooltip
-                                                        title="对外提供访问的地址,内网环境时填写服务器的内网IP地址"
-                                                    >
-                                                        <AIcon
-                                                            type="QuestionCircleOutlined"
-                                                            style="
-                                                                margin-left: 2px;
-                                                            "
-                                                        />
-                                                    </j-tooltip>
-                                                </template>
-                                                <j-input
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .publicHost
-                                                    "
-                                                    placeholder="请输入公网地址"
-                                                    allowClear
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'publicPort',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'publicPort',
-                                                ]"
-                                                :rules="Rules.publicPort"
-                                            >
-                                                <template #label>
-                                                    公网端口
-                                                    <j-tooltip
-                                                        title="对外提供访问的端口"
-                                                    >
-                                                        <AIcon
-                                                            type="QuestionCircleOutlined"
-                                                            style="
-                                                                margin-left: 2px;
-                                                            "
-                                                        />
-                                                    </j-tooltip>
-                                                </template>
-                                                <j-input-number
-                                                    style="width: 100%"
-                                                    placeholder="请输入端口"
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .publicPort
-                                                    "
-                                                    :min="1"
-                                                    :max="65535"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'remoteHost',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'remoteHost',
-                                                ]"
-                                                :rules="Rules.remoteHost"
-                                                label="远程地址"
-                                            >
-                                                <j-input
-                                                    placeholder="请输入远程地址"
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .remoteHost
-                                                    "
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'remotePort',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="远程端口"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'remotePort',
-                                                ]"
-                                                :rules="Rules.remotePort"
-                                            >
-                                                <j-input-number
-                                                    style="width: 100%"
-                                                    placeholder="请输入远程端口"
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .remotePort
-                                                    "
-                                                    :min="1"
-                                                    :max="65535"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'clientId',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="clientId"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'clientId',
-                                                ]"
-                                                :rules="Rules.clientId"
-                                            >
-                                                <j-input
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .clientId
-                                                    "
-                                                    placeholder="请输入ClientId"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'username',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="用户名"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'username',
-                                                ]"
-                                                :rules="Rules.username"
-                                            >
-                                                <j-input
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .username
-                                                    "
-                                                    placeholder="请输入用户名"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'password',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                label="密码"
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'password',
-                                                ]"
-                                                :rules="Rules.password"
-                                            >
-                                                <j-input-password
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .password
-                                                    "
-                                                    placeholder="请输入密码"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'topicPrefix',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'topicPrefix',
-                                                ]"
-                                                :rules="Rules.topicPrefix"
-                                            >
-                                                <template #label>
-                                                    订阅前缀
-                                                    <j-tooltip
-                                                        title="当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share"
-                                                    >
-                                                        <AIcon
-                                                            type="QuestionCircleOutlined"
-                                                            style="
-                                                                margin-left: 2px;
-                                                            "
-                                                        />
-                                                    </j-tooltip>
-                                                </template>
-                                                <j-input
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .topicPrefix
-                                                    "
-                                                    placeholder="请输入订阅前缀"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-
-                                        <j-col
-                                            :span="12"
-                                            v-if="
-                                                isVisible(
-                                                    'maxMessageSize',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'maxMessageSize',
-                                                ]"
-                                                :rules="Rules.maxMessageSize"
-                                            >
-                                                <template #label>
-                                                    最大消息长度
-                                                    <j-tooltip
-                                                        title="单次收发消息的最大长度,单位:字节;设置过大可能会影响性能"
-                                                    >
-                                                        <AIcon
-                                                            type="QuestionCircleOutlined"
-                                                            style="
-                                                                margin-left: 2px;
-                                                            "
-                                                        />
-                                                    </j-tooltip>
-                                                </template>
-                                                <j-input-number
-                                                    style="width: 100%"
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .maxMessageSize
-                                                    "
-                                                    placeholder="请输入最大消息长度"
-                                                    :min="1024"
-                                                    :max="1073741824"
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <j-col :span="24">
-                                            <j-form-item
-                                                :label="
+                                                    </j-select>
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
                                                     isVisible(
-                                                        'secure',
+                                                        'host',
                                                         formData.type,
                                                     )
-                                                        ? '开启DTLS'
-                                                        : '开启TLS'
-                                                "
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'secure',
-                                                ]"
-                                                :rules="Rules.secure"
-                                            >
-                                                <j-radio-group
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .secure
-                                                    "
-                                                >
-                                                    <j-radio :value="true"
-                                                        >是</j-radio
-                                                    >
-                                                    <j-radio :value="false"
-                                                        >否</j-radio
-                                                    >
-                                                </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',
+                                                        'host',
                                                     ]"
-                                                    :rules="Rules.certId"
-                                                    class="form2-left"
+                                                    :rules="Rules.host"
                                                 >
+                                                    <template #label>
+                                                        本地地址
+                                                        <j-tooltip
+                                                            title="绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0"
+                                                        >
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                                style="
+                                                                    margin-left: 2px;
+                                                                "
+                                                            />
+                                                        </j-tooltip>
+                                                    </template>
                                                     <j-select
                                                         v-model:value="
                                                             cluster
                                                                 .configuration
-                                                                .certId
+                                                                .host
                                                         "
-                                                        :options="certIdOptions"
-                                                        placeholder="请选择证书"
+                                                        :options="
+                                                            hostOptionsIndex[
+                                                                index
+                                                            ]
+                                                        "
+                                                        placeholder="请选择本地地址"
                                                         allowClear
                                                         show-search
+                                                        :disabled="shareCluster"
                                                         :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="24"
-                                            v-if="
-                                                isVisible(
-                                                    'parserType',
-                                                    formData.type,
-                                                )
-                                            "
-                                        >
-                                            <j-form-item
-                                                :name="[
-                                                    'cluster',
-                                                    index,
-                                                    'configuration',
-                                                    'parserType',
-                                                ]"
-                                                :rules="Rules.parserType"
-                                            >
-                                                <template #label>
-                                                    粘拆包规则
-                                                    <j-tooltip
-                                                        title="处理TCP粘拆包的方式"
-                                                    >
-                                                        <AIcon
-                                                            type="QuestionCircleOutlined"
-                                                            style="
-                                                                margin-left: 2px;
-                                                            "
-                                                        />
-                                                    </j-tooltip>
-                                                </template>
-                                                <j-select
-                                                    style="width: 48.5%"
-                                                    v-model:value="
-                                                        cluster.configuration
-                                                            .parserType
-                                                    "
-                                                    :options="ParserTypeOptions"
-                                                    placeholder="请选择粘拆包规则"
-                                                    allowClear
-                                                    show-search
-                                                    :filter-option="
-                                                        filterOption
-                                                    "
-                                                    @change="
-                                                        changeParserType(
-                                                            cluster
-                                                                .configuration
-                                                                .parserType,
-                                                            index,
-                                                        )
-                                                    "
-                                                />
-                                            </j-form-item>
-                                        </j-col>
-                                        <div class="form2-row">
-                                            <j-col
-                                                :span="12"
-                                                v-if="
-                                                    isVisible(
-                                                        'delimited',
-                                                        cluster.configuration
-                                                            .parserType,
-                                                    )
-                                                "
-                                            >
-                                                <j-form-item
-                                                    label="分隔符"
-                                                    :name="[
-                                                        'cluster',
-                                                        index,
-                                                        'configuration',
-                                                        'parserConfiguration',
-                                                        'delimited',
-                                                    ]"
-                                                    :rules="Rules.delimited"
-                                                    class="form2-left"
-                                                >
-                                                    <j-input
-                                                        v-model:value="
-                                                            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',
-                                                    ]"
-                                                    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
-                                                            .parserType,
-                                                    )
-                                                "
-                                            >
-                                                <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:modelValue="
+                                                        @change="
+                                                            changeHost(
+                                                                cluster.serverId,
                                                                 cluster
                                                                     .configuration
-                                                                    .parserConfiguration
-                                                                    .script
-                                                            "
-                                                            language="javascript"
-                                                        />
-                                                    </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"
-                                                    class="form2-left"
-                                                >
-                                                    <j-input-number
-                                                        style="width: 100%"
-                                                        v-model:value="
-                                                            cluster
-                                                                .configuration
-                                                                .parserConfiguration
-                                                                .size
+                                                                    .host,
+                                                                index,
+                                                            )
                                                         "
-                                                        placeholder="请输入长度值"
-                                                    />
+                                                    >
+                                                    </j-select>
                                                 </j-form-item>
                                             </j-col>
                                             <j-col
                                                 :span="12"
                                                 v-if="
                                                     isVisible(
-                                                        'length',
-                                                        cluster.configuration
-                                                            .parserType,
+                                                        'port',
+                                                        formData.type,
                                                     )
                                                 "
                                             >
                                                 <j-form-item
-                                                    label="长度"
                                                     :name="[
                                                         'cluster',
                                                         index,
                                                         'configuration',
-                                                        'parserConfiguration',
-                                                        'length',
+                                                        'port',
                                                     ]"
-                                                    :rules="Rules.length"
-                                                    class="form2-left"
+                                                    :rules="Rules.port"
                                                 >
+                                                    <template #label>
+                                                        本地端口
+                                                        <j-tooltip
+                                                            title="监听指定端口的请求"
+                                                        >
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                                style="
+                                                                    margin-left: 2px;
+                                                                "
+                                                            />
+                                                        </j-tooltip>
+                                                    </template>
                                                     <j-select
-                                                        style="width: 100%"
                                                         v-model:value="
                                                             cluster
                                                                 .configuration
-                                                                .parserConfiguration
-                                                                .length
+                                                                .port
                                                         "
-                                                        :options="LengthOptions"
-                                                        placeholder="请选择长度"
+                                                        :options="
+                                                            portOptionsIndex[
+                                                                index
+                                                            ]
+                                                        "
+                                                        placeholder="请选择本地端口"
                                                         allowClear
                                                         show-search
                                                         :filter-option="
-                                                            filterOption
+                                                            filterPortOption
                                                         "
                                                     />
                                                 </j-form-item>
@@ -913,34 +284,85 @@
                                                 :span="12"
                                                 v-if="
                                                     isVisible(
-                                                        'offset',
-                                                        cluster.configuration
-                                                            .parserType,
+                                                        'publicHost',
+                                                        formData.type,
                                                     )
                                                 "
                                             >
                                                 <j-form-item
-                                                    label="偏移量"
                                                     :name="[
                                                         'cluster',
                                                         index,
                                                         'configuration',
-                                                        'parserConfiguration',
-                                                        'offset',
+
+                                                        'publicHost',
                                                     ]"
-                                                    :rules="Rules.offset"
-                                                    class="form2-right"
+                                                    :rules="Rules.publicHost"
                                                 >
-                                                    <j-input-number
-                                                        style="width: 100%"
+                                                    <template #label>
+                                                        公网地址
+                                                        <j-tooltip
+                                                            title="对外提供访问的地址,内网环境时填写服务器的内网IP地址"
+                                                        >
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                                style="
+                                                                    margin-left: 2px;
+                                                                "
+                                                            />
+                                                        </j-tooltip>
+                                                    </template>
+                                                    <j-input
                                                         v-model:value="
                                                             cluster
                                                                 .configuration
-                                                                .parserConfiguration
-                                                                .offset
+                                                                .publicHost
                                                         "
-                                                        placeholder="请输入偏移量"
-                                                        :min="0"
+                                                        placeholder="请输入公网地址"
+                                                        allowClear
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'publicPort',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'publicPort',
+                                                    ]"
+                                                    :rules="Rules.publicPort"
+                                                >
+                                                    <template #label>
+                                                        公网端口
+                                                        <j-tooltip
+                                                            title="对外提供访问的端口"
+                                                        >
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                                style="
+                                                                    margin-left: 2px;
+                                                                "
+                                                            />
+                                                        </j-tooltip>
+                                                    </template>
+                                                    <j-input-number
+                                                        style="width: 100%"
+                                                        placeholder="请输入端口"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .publicPort
+                                                        "
+                                                        :min="1"
                                                         :max="65535"
                                                     />
                                                 </j-form-item>
@@ -949,86 +371,714 @@
                                                 :span="12"
                                                 v-if="
                                                     isVisible(
-                                                        'little',
-                                                        cluster.configuration
-                                                            .parserType,
+                                                        'remoteHost',
+                                                        formData.type,
                                                     )
                                                 "
                                             >
                                                 <j-form-item
-                                                    label="大小端"
                                                     :name="[
                                                         'cluster',
                                                         index,
                                                         'configuration',
-                                                        'parserConfiguration',
-                                                        'little',
+                                                        'remoteHost',
                                                     ]"
-                                                    class="form2-left"
+                                                    :rules="Rules.remoteHost"
+                                                    label="远程地址"
                                                 >
-                                                    <j-select
+                                                    <j-input
+                                                        placeholder="请输入远程地址"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .remoteHost
+                                                        "
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'remotePort',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="远程端口"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'remotePort',
+                                                    ]"
+                                                    :rules="Rules.remotePort"
+                                                >
+                                                    <j-input-number
+                                                        style="width: 100%"
+                                                        placeholder="请输入远程端口"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .remotePort
+                                                        "
+                                                        :min="1"
+                                                        :max="65535"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'clientId',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="clientId"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'clientId',
+                                                    ]"
+                                                    :rules="Rules.clientId"
+                                                >
+                                                    <j-input
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .clientId
+                                                        "
+                                                        placeholder="请输入ClientId"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'username',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="用户名"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'username',
+                                                    ]"
+                                                    :rules="Rules.username"
+                                                >
+                                                    <j-input
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .username
+                                                        "
+                                                        placeholder="请输入用户名"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'password',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    label="密码"
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'password',
+                                                    ]"
+                                                    :rules="Rules.password"
+                                                >
+                                                    <j-input-password
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .password
+                                                        "
+                                                        placeholder="请输入密码"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'topicPrefix',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'topicPrefix',
+                                                    ]"
+                                                    :rules="Rules.topicPrefix"
+                                                >
+                                                    <template #label>
+                                                        订阅前缀
+                                                        <j-tooltip
+                                                            title="当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share"
+                                                        >
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                                style="
+                                                                    margin-left: 2px;
+                                                                "
+                                                            />
+                                                        </j-tooltip>
+                                                    </template>
+                                                    <j-input
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .topicPrefix
+                                                        "
+                                                        placeholder="请输入订阅前缀"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+
+                                            <j-col
+                                                :span="12"
+                                                v-if="
+                                                    isVisible(
+                                                        'maxMessageSize',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'maxMessageSize',
+                                                    ]"
+                                                    :rules="
+                                                        Rules.maxMessageSize
+                                                    "
+                                                >
+                                                    <template #label>
+                                                        最大消息长度
+                                                        <j-tooltip
+                                                            title="单次收发消息的最大长度,单位:字节;设置过大可能会影响性能"
+                                                        >
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                                style="
+                                                                    margin-left: 2px;
+                                                                "
+                                                            />
+                                                        </j-tooltip>
+                                                    </template>
+                                                    <j-input-number
                                                         style="width: 100%"
                                                         v-model:value="
                                                             cluster
                                                                 .configuration
-                                                                .parserConfiguration
-                                                                .little
+                                                                .maxMessageSize
                                                         "
-                                                        :options="LittleOptions"
-                                                        placeholder="请选择大小端"
+                                                        placeholder="请输入最大消息长度"
+                                                        :min="1024"
+                                                        :max="1073741824"
+                                                    />
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col :span="24">
+                                                <j-form-item
+                                                    :label="
+                                                        isVisible(
+                                                            'secure',
+                                                            formData.type,
+                                                        )
+                                                            ? '开启DTLS'
+                                                            : '开启TLS'
+                                                    "
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'secure',
+                                                    ]"
+                                                    :rules="Rules.secure"
+                                                >
+                                                    <j-radio-group
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .secure
+                                                        "
+                                                    >
+                                                        <j-radio :value="true"
+                                                            >是</j-radio
+                                                        >
+                                                        <j-radio :value="false"
+                                                            >否</j-radio
+                                                        >
+                                                    </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="24"
+                                                v-if="
+                                                    isVisible(
+                                                        'parserType',
+                                                        formData.type,
+                                                    )
+                                                "
+                                            >
+                                                <j-form-item
+                                                    :name="[
+                                                        'cluster',
+                                                        index,
+                                                        'configuration',
+                                                        'parserType',
+                                                    ]"
+                                                    :rules="Rules.parserType"
+                                                >
+                                                    <template #label>
+                                                        粘拆包规则
+                                                        <j-tooltip
+                                                            title="处理TCP粘拆包的方式"
+                                                        >
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                                style="
+                                                                    margin-left: 2px;
+                                                                "
+                                                            />
+                                                        </j-tooltip>
+                                                    </template>
+                                                    <j-select
+                                                        style="width: 48.5%"
+                                                        v-model:value="
+                                                            cluster
+                                                                .configuration
+                                                                .parserType
+                                                        "
+                                                        :options="
+                                                            ParserTypeOptions
+                                                        "
+                                                        placeholder="请选择粘拆包规则"
                                                         allowClear
                                                         show-search
                                                         :filter-option="
                                                             filterOption
                                                         "
+                                                        @change="
+                                                            changeParserType(
+                                                                cluster
+                                                                    .configuration
+                                                                    .parserType,
+                                                                index,
+                                                            )
+                                                        "
                                                     />
                                                 </j-form-item>
                                             </j-col>
-                                        </div>
-                                    </j-row>
-                                </j-collapse-panel>
-                            </j-collapse>
-                        </div>
-                        <j-form-item v-if="!shareCluster">
-                            <j-button
-                                type="primary"
-                                block
-                                ghost
-                                @click="addCluster"
-                            >
-                                <AIcon type="PlusOutlined" />
-                                新增
-                            </j-button>
-                        </j-form-item>
-                    </j-form>
+                                            <div class="form2-row">
+                                                <j-col
+                                                    :span="12"
+                                                    v-if="
+                                                        isVisible(
+                                                            'delimited',
+                                                            cluster
+                                                                .configuration
+                                                                .parserType,
+                                                        )
+                                                    "
+                                                >
+                                                    <j-form-item
+                                                        label="分隔符"
+                                                        :name="[
+                                                            'cluster',
+                                                            index,
+                                                            'configuration',
+                                                            'parserConfiguration',
+                                                            'delimited',
+                                                        ]"
+                                                        :rules="Rules.delimited"
+                                                        class="form2-left"
+                                                    >
+                                                        <j-input
+                                                            v-model:value="
+                                                                cluster
+                                                                    .configuration
+                                                                    .parserConfiguration
+                                                                    .delimited
+                                                            "
+                                                            placeholder="请输入分隔符"
+                                                        />
+                                                    </j-form-item>
+                                                </j-col>
 
-                    <j-row :gutter="[24, 0]">
-                        <j-col :span="24">
-                            <j-form-item label="说明" name="description">
-                                <j-textarea
-                                    v-model:value="formData.description"
-                                    show-count
-                                    :maxlength="200"
-                                    :rows="4"
-                                /> </j-form-item
-                        ></j-col>
-                    </j-row>
-                </j-form>
-            </div>
-            <div class="footer">
-                <PermissionButton
-                    v-if="view === 'false'"
-                    type="primary"
-                    @click="saveData"
-                    :loading="loading"
-                    :hasPermission="`link/Type:${
-                        id !== ':id' ? 'update' : 'add'
-                    }`"
-                >
-                    保存
-                </PermissionButton>
-            </div>
-        </j-card>
+                                                <!-- <j-col
+                                    :span="24"
+                                    v-if="
+                                        isVisible(
+                                            'lang',
+                                            cluster.configuration
+                                                .parserType,
+                                        )
+                                    "
+                                >
+                                    <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
+                                                                .parserType,
+                                                        )
+                                                    "
+                                                >
+                                                    <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:modelValue="
+                                                                    cluster
+                                                                        .configuration
+                                                                        .parserConfiguration
+                                                                        .script
+                                                                "
+                                                                language="javascript"
+                                                            />
+                                                        </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"
+                                                        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
+                                                                .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>
+                            </div>
+                            <j-form-item v-if="!shareCluster">
+                                <j-button
+                                    type="primary"
+                                    block
+                                    ghost
+                                    @click="addCluster"
+                                >
+                                    <AIcon type="PlusOutlined" />
+                                    新增
+                                </j-button>
+                            </j-form-item>
+                        </j-form>
+
+                        <j-row :gutter="[24, 0]">
+                            <j-col :span="24">
+                                <j-form-item label="说明" name="description">
+                                    <j-textarea
+                                        v-model:value="formData.description"
+                                        show-count
+                                        :maxlength="200"
+                                        :rows="4"
+                                    /> </j-form-item
+                            ></j-col>
+                        </j-row>
+                    </j-form>
+                </div>
+                <div class="footer">
+                    <PermissionButton
+                        v-if="view === 'false'"
+                        type="primary"
+                        @click="saveData"
+                        :loading="loading"
+                        :hasPermission="`link/Type:${
+                            id !== ':id' ? 'update' : 'add'
+                        }`"
+                    >
+                        保存
+                    </PermissionButton>
+                </div>
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/link/Type/index.vue b/src/views/link/Type/index.vue
index efdb8755..3da7f5ca 100644
--- a/src/views/link/Type/index.vue
+++ b/src/views/link/Type/index.vue
@@ -6,170 +6,173 @@
                 target="search"
                 @search="handleSearch"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :gridColumn="3"
-                :request="query"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        @click="handlAdd"
-                        hasPermission="link/Type:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :showStatus="true"
-                        :value="slotProps"
-                        :actions="getActions(slotProps, 'card')"
-                        v-bind="slotProps"
-                        :status="slotProps.state.value"
-                        :statusText="slotProps.state.text"
-                        :statusNames="{
-                            enabled: 'processing',
-                            disabled: 'error',
-                        }"
-                        @click="handlEye(slotProps.id)"
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img :src="getImage('/network.png')" />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <div class="card-item-content">
-                                <Ellipsis
-                                    style="
-                                        width: calc(100% - 100px);
-                                        margin-bottom: 20px;
-                                    "
-                                >
-                                    <span
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :gridColumn="3"
+                    :request="query"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="link/Type:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :showStatus="true"
+                            :value="slotProps"
+                            :actions="getActions(slotProps, 'card')"
+                            v-bind="slotProps"
+                            :status="slotProps.state.value"
+                            :statusText="slotProps.state.text"
+                            :statusNames="{
+                                enabled: 'processing',
+                                disabled: 'error',
+                            }"
+                            @click="handlEye(slotProps.id)"
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img :src="getImage('/network.png')" />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <div class="card-item-content">
+                                    <Ellipsis
                                         style="
-                                            font-size: 18px;
-                                            font-weight: 800;
-                                            line-height: 22px;
+                                            width: calc(100% - 100px);
+                                            margin-bottom: 20px;
                                         "
                                     >
-                                        {{ slotProps.name }}
-                                    </span>
-                                </Ellipsis>
-                                <j-row class="card-item-content-box">
-                                    <j-col :span="8">
-                                        <div
-                                            class="card-item-content-text-title"
+                                        <span
+                                            style="
+                                                font-size: 18px;
+                                                font-weight: 800;
+                                                line-height: 22px;
+                                            "
                                         >
-                                            类型
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.type
-                                                }}</template>
-                                                {{ slotProps.type }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
+                                            {{ slotProps.name }}
+                                        </span>
+                                    </Ellipsis>
+                                    <j-row class="card-item-content-box">
+                                        <j-col :span="8">
+                                            <div
+                                                class="card-item-content-text-title"
+                                            >
+                                                类型
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.type
+                                                    }}</template>
+                                                    {{ slotProps.type }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
 
-                                    <j-col :span="16">
-                                        <div
-                                            class="card-item-content-text-title"
-                                        >
-                                            详情
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    getDetails(slotProps)
-                                                }}</template>
-                                                {{ getDetails(slotProps) }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                </j-row>
-                            </div>
-                        </template>
-                        <template #actions="item">
-                            <PermissionButton
-                                :disabled="item.disabled"
-                                :popConfirm="item.popConfirm"
-                                :tooltip="{
-                                    ...item.tooltip,
-                                }"
-                                @click="item.onClick"
-                                :hasPermission="'link/Type:' + item.key"
+                                        <j-col :span="16">
+                                            <div
+                                                class="card-item-content-text-title"
+                                            >
+                                                详情
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        getDetails(slotProps)
+                                                    }}</template>
+                                                    {{ getDetails(slotProps) }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                    </j-row>
+                                </div>
+                            </template>
+                            <template #actions="item">
+                                <PermissionButton
+                                    :disabled="item.disabled"
+                                    :popConfirm="item.popConfirm"
+                                    :tooltip="{
+                                        ...item.tooltip,
+                                    }"
+                                    @click="item.onClick"
+                                    :hasPermission="'link/Type:' + item.key"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </PermissionButton>
+                            </template>
+                        </CardBox>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space>
+                            <template
+                                v-for="i in getActions(slotProps, 'table')"
+                                :key="i.key"
                             >
-                                <AIcon
-                                    type="DeleteOutlined"
-                                    v-if="item.key === 'delete'"
-                                />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item?.text }}</span>
-                                </template>
-                            </PermissionButton>
-                        </template>
-                    </CardBox>
-                </template>
-                <template #action="slotProps">
-                    <j-space>
-                        <template
-                            v-for="i in getActions(slotProps, 'table')"
-                            :key="i.key"
-                        >
-                            <PermissionButton
-                                :disabled="i.disabled"
-                                :popConfirm="i.popConfirm"
-                                :tooltip="{
-                                    ...i.tooltip,
-                                }"
-                                style="padding: 0px"
-                                @click="i.onClick"
-                                type="link"
-                                :danger="i.key === 'delete'"
-                                :hasPermission="'link/Type:' + i.key"
-                            >
-                                <template #icon
-                                    ><AIcon :type="i.icon"
-                                /></template>
-                            </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-                <template #state="slotProps">
-                    <BadgeStatus
-                        :text="slotProps.state.text"
-                        :status="slotProps.state.value"
-                        :statusNames="{
-                            enabled: 'processing',
-                            disabled: 'error',
-                        }"
-                    ></BadgeStatus>
-                </template>
-                <template #shareCluster="slotProps">
-                    {{
-                        slotProps.shareCluster === 'true'
-                            ? '共享配置'
-                            : '独立配置'
-                    }}
-                </template>
-                <template #type="slotProps">
-                    {{ slotProps.typeObject.name }}
-                </template>
-                <template #details="slotProps">
-                    {{ getDetails(slotProps) }}
-                </template>
-            </j-pro-table>
+                                <PermissionButton
+                                    :disabled="i.disabled"
+                                    :popConfirm="i.popConfirm"
+                                    :tooltip="{
+                                        ...i.tooltip,
+                                    }"
+                                    style="padding: 0px"
+                                    @click="i.onClick"
+                                    type="link"
+                                    :danger="i.key === 'delete'"
+                                    :hasPermission="'link/Type:' + i.key"
+                                >
+                                    <template #icon
+                                        ><AIcon :type="i.icon"
+                                    /></template>
+                                </PermissionButton>
+                            </template>
+                        </j-space>
+                    </template>
+                    <template #state="slotProps">
+                        <BadgeStatus
+                            :text="slotProps.state.text"
+                            :status="slotProps.state.value"
+                            :statusNames="{
+                                enabled: 'processing',
+                                disabled: 'error',
+                            }"
+                        ></BadgeStatus>
+                    </template>
+                    <template #shareCluster="slotProps">
+                        {{
+                            slotProps.shareCluster === 'true'
+                                ? '共享配置'
+                                : '独立配置'
+                        }}
+                    </template>
+                    <template #type="slotProps">
+                        {{ slotProps.typeObject.name }}
+                    </template>
+                    <template #details="slotProps">
+                        {{ getDetails(slotProps) }}
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
     </page-container>
 </template>
diff --git a/src/views/media/Stream/Detail/index.vue b/src/views/media/Stream/Detail/index.vue
index e5620008..c52cc884 100644
--- a/src/views/media/Stream/Detail/index.vue
+++ b/src/views/media/Stream/Detail/index.vue
@@ -1,266 +1,284 @@
 <template>
     <page-container>
-        <j-card>
-            <j-form
-                ref="formRef"
-                class="form"
-                layout="vertical"
-                :model="formData"
-                name="basic"
-                autocomplete="off"
-            >
-                <j-row :gutter="[16, 0]">
-                    <j-col :span="12">
-                        <j-form-item
-                            label="流媒体名称"
-                            name="name"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请输入流媒体名称',
-                                },
-                                {
-                                    max: 64,
-                                    message: '最大可输入64个字符',
-                                },
-                            ]"
-                        >
-                            <j-input
-                                v-model:value="formData.name"
-                                placeholder="请输入流媒体名称"
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="12">
-                        <j-form-item
-                            label="服务商"
-                            name="provider"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请选择服务商',
-                                },
-                            ]"
-                        >
-                            <j-select
-                                ref="select"
-                                v-model:value="formData.provider"
-                                :options="options"
-                                placeholder="请选择服务商"
-                            ></j-select>
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="12">
-                        <j-form-item
-                            label="密钥"
-                            :name="['configuration', 'secret']"
-                            :rules="[
-                                {
-                                    max: 64,
-                                    message: '最大可输入64个字符',
-                                },
-                            ]"
-                        >
-                            <j-input-password
-                                placeholder="请输入密钥"
-                                v-model:value="formData.configuration.secret"
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="8" class="form-item">
-                        <j-form-item
-                            :name="['configuration', 'apiHost']"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请输入API Host',
-                                },
-                                {
-                                    validator: validateAddress,
-                                    message: '请输入正确的IP地址或者域名',
-                                },
-                            ]"
-                        >
-                            <template #label>
-                                API Host
-                                <j-tooltip
-                                    title="调用流媒体接口时请求的服务地址"
-                                >
-                                    <AIcon
-                                        type="QuestionCircleOutlined"
-                                        style="margin-left: 2px"
-                                    />
-                                </j-tooltip>
-                            </template>
-                            <j-input
-                                placeholder="请输入API Host"
-                                v-model:value="formData.configuration.apiHost"
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="4">
-                        <j-form-item
-                            class="form-item"
-                            :name="['configuration', 'apiPort']"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请输入端口',
-                                },
-                            ]"
-                        >
-                            <div class="form-label"></div>
-
-                            <j-input-number
-                                style="width: 100%"
-                                :min="1"
-                                :max="65535"
-                                :precision="0"
-                                placeholder="请输入输入端口"
-                                v-model:value="formData.configuration.apiPort"
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="8" class="form-item">
-                        <j-form-item
-                            :name="['configuration', 'rtpIp']"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请输入RTP IP',
-                                },
-                                {
-                                    validator: validateAddress,
-                                    message: '请输入正确的IP地址或者域名',
-                                },
-                            ]"
-                        >
-                            <template #label>
-                                RTP IP
-                                <j-tooltip
-                                    title="视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址"
-                                >
-                                    <AIcon
-                                        type="QuestionCircleOutlined"
-                                        style="margin-left: 2px"
-                                    />
-                                </j-tooltip>
-                            </template>
-                            <j-input
-                                placeholder="请输入RTP IP"
-                                v-model:value="formData.configuration.rtpIp"
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="4" v-if="!checked">
-                        <j-form-item
-                            class="form-item"
-                            :name="['configuration', 'rtpPort']"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请输入端口',
-                                },
-                            ]"
-                        >
-                            <div class="form-label"></div>
-
-                            <j-input-number
-                                style="width: 100%"
-                                :min="1"
-                                :max="65535"
-                                :precision="0"
-                                placeholder="请输入端口"
-                                v-model:value="formData.configuration.rtpPort"
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="4" v-if="checked">
-                        <j-form-item
-                            class="form-item"
-                            :name="['configuration', 'dynamicRtpPortRange0']"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请输入起始端口',
-                                },
-                            ]"
-                        >
-                            <div class="form-label"></div>
-                            <j-input-number
-                                style="width: 100%"
-                                :min="1"
-                                :max="
-                                    formData.configuration
-                                        .dynamicRtpPortRange1 || 65535
-                                "
-                                :precision="0"
-                                placeholder="起始端口"
-                                v-model:value="
-                                    formData.configuration.dynamicRtpPortRange0
-                                "
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <div class="form-item-checked" v-if="checked">至</div>
-                    <j-col :span="4" v-if="checked">
-                        <j-form-item
-                            class="form-item"
-                            :name="['configuration', 'dynamicRtpPortRange1']"
-                            :rules="[
-                                {
-                                    required: true,
-                                    message: '请输入终止端口',
-                                },
-                            ]"
-                        >
-                            <div class="form-label"></div>
-                            <j-input-number
-                                style="width: 100%"
-                                :min="
-                                    formData.configuration
-                                        .dynamicRtpPortRange0 || 1
-                                "
-                                :max="65535"
-                                :precision="0"
-                                placeholder="终止端口"
-                                v-model:value="
-                                    formData.configuration.dynamicRtpPortRange1
-                                "
-                            />
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="4">
-                        <j-form-item
-                            class="form-item-checked2"
-                            :name="['configuration', 'dynamicRtpPort']"
-                        >
-                            <div class="form-label"></div>
-                            <j-checkbox
-                                v-model:checked="
-                                    formData.configuration.dynamicRtpPort
-                                "
+        <FullPage>
+            <j-card>
+                <j-form
+                    ref="formRef"
+                    class="form"
+                    layout="vertical"
+                    :model="formData"
+                    name="basic"
+                    autocomplete="off"
+                >
+                    <j-row :gutter="[16, 0]">
+                        <j-col :span="12">
+                            <j-form-item
+                                label="流媒体名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入流媒体名称',
+                                    },
+                                    {
+                                        max: 64,
+                                        message: '最大可输入64个字符',
+                                    },
+                                ]"
                             >
-                                动态端口
-                            </j-checkbox>
-                        </j-form-item>
-                    </j-col>
-
-                    <j-col :span="24">
-                        <j-form-item>
-                            <j-button
-                                v-if="view === 'false'"
-                                html-type="submit"
-                                type="primary"
-                                @click.prevent="onSubmit"
-                                :loading="loading"
-                                >保存</j-button
+                                <j-input
+                                    v-model:value="formData.name"
+                                    placeholder="请输入流媒体名称"
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="12">
+                            <j-form-item
+                                label="服务商"
+                                name="provider"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请选择服务商',
+                                    },
+                                ]"
                             >
-                        </j-form-item>
-                    </j-col>
-                </j-row>
-            </j-form>
-        </j-card>
+                                <j-select
+                                    ref="select"
+                                    v-model:value="formData.provider"
+                                    :options="options"
+                                    placeholder="请选择服务商"
+                                ></j-select>
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="12">
+                            <j-form-item
+                                label="密钥"
+                                :name="['configuration', 'secret']"
+                                :rules="[
+                                    {
+                                        max: 64,
+                                        message: '最大可输入64个字符',
+                                    },
+                                ]"
+                            >
+                                <j-input-password
+                                    placeholder="请输入密钥"
+                                    v-model:value="
+                                        formData.configuration.secret
+                                    "
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="8" class="form-item">
+                            <j-form-item
+                                :name="['configuration', 'apiHost']"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入API Host',
+                                    },
+                                    {
+                                        validator: validateAddress,
+                                        message: '请输入正确的IP地址或者域名',
+                                    },
+                                ]"
+                            >
+                                <template #label>
+                                    API Host
+                                    <j-tooltip
+                                        title="调用流媒体接口时请求的服务地址"
+                                    >
+                                        <AIcon
+                                            type="QuestionCircleOutlined"
+                                            style="margin-left: 2px"
+                                        />
+                                    </j-tooltip>
+                                </template>
+                                <j-input
+                                    placeholder="请输入API Host"
+                                    v-model:value="
+                                        formData.configuration.apiHost
+                                    "
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="4">
+                            <j-form-item
+                                class="form-item"
+                                :name="['configuration', 'apiPort']"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入端口',
+                                    },
+                                ]"
+                            >
+                                <div class="form-label"></div>
+
+                                <j-input-number
+                                    style="width: 100%"
+                                    :min="1"
+                                    :max="65535"
+                                    :precision="0"
+                                    placeholder="请输入输入端口"
+                                    v-model:value="
+                                        formData.configuration.apiPort
+                                    "
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="8" class="form-item">
+                            <j-form-item
+                                :name="['configuration', 'rtpIp']"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入RTP IP',
+                                    },
+                                    {
+                                        validator: validateAddress,
+                                        message: '请输入正确的IP地址或者域名',
+                                    },
+                                ]"
+                            >
+                                <template #label>
+                                    RTP IP
+                                    <j-tooltip
+                                        title="视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址"
+                                    >
+                                        <AIcon
+                                            type="QuestionCircleOutlined"
+                                            style="margin-left: 2px"
+                                        />
+                                    </j-tooltip>
+                                </template>
+                                <j-input
+                                    placeholder="请输入RTP IP"
+                                    v-model:value="formData.configuration.rtpIp"
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="4" v-if="!checked">
+                            <j-form-item
+                                class="form-item"
+                                :name="['configuration', 'rtpPort']"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入端口',
+                                    },
+                                ]"
+                            >
+                                <div class="form-label"></div>
+
+                                <j-input-number
+                                    style="width: 100%"
+                                    :min="1"
+                                    :max="65535"
+                                    :precision="0"
+                                    placeholder="请输入端口"
+                                    v-model:value="
+                                        formData.configuration.rtpPort
+                                    "
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="4" v-if="checked">
+                            <j-form-item
+                                class="form-item"
+                                :name="[
+                                    'configuration',
+                                    'dynamicRtpPortRange0',
+                                ]"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入起始端口',
+                                    },
+                                ]"
+                            >
+                                <div class="form-label"></div>
+                                <j-input-number
+                                    style="width: 100%"
+                                    :min="1"
+                                    :max="
+                                        formData.configuration
+                                            .dynamicRtpPortRange1 || 65535
+                                    "
+                                    :precision="0"
+                                    placeholder="起始端口"
+                                    v-model:value="
+                                        formData.configuration
+                                            .dynamicRtpPortRange0
+                                    "
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <div class="form-item-checked" v-if="checked">至</div>
+                        <j-col :span="4" v-if="checked">
+                            <j-form-item
+                                class="form-item"
+                                :name="[
+                                    'configuration',
+                                    'dynamicRtpPortRange1',
+                                ]"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入终止端口',
+                                    },
+                                ]"
+                            >
+                                <div class="form-label"></div>
+                                <j-input-number
+                                    style="width: 100%"
+                                    :min="
+                                        formData.configuration
+                                            .dynamicRtpPortRange0 || 1
+                                    "
+                                    :max="65535"
+                                    :precision="0"
+                                    placeholder="终止端口"
+                                    v-model:value="
+                                        formData.configuration
+                                            .dynamicRtpPortRange1
+                                    "
+                                />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="4">
+                            <j-form-item
+                                class="form-item-checked2"
+                                :name="['configuration', 'dynamicRtpPort']"
+                            >
+                                <div class="form-label"></div>
+                                <j-checkbox
+                                    v-model:checked="
+                                        formData.configuration.dynamicRtpPort
+                                    "
+                                >
+                                    动态端口
+                                </j-checkbox>
+                            </j-form-item>
+                        </j-col>
+
+                        <j-col :span="24">
+                            <j-form-item>
+                                <j-button
+                                    v-if="view === 'false'"
+                                    html-type="submit"
+                                    type="primary"
+                                    @click.prevent="onSubmit"
+                                    :loading="loading"
+                                    >保存</j-button
+                                >
+                            </j-form-item>
+                        </j-col>
+                    </j-row>
+                </j-form>
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/media/Stream/index.vue b/src/views/media/Stream/index.vue
index 289eaf11..a5975db6 100644
--- a/src/views/media/Stream/index.vue
+++ b/src/views/media/Stream/index.vue
@@ -6,143 +6,146 @@
                 target="search"
                 @search="handleSearch"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                model="CARD"
-                :columns="columns"
-                :gridColumn="2"
-                :gridColumns="[1, 2]"
-                :request="query"
-                :defaultParams="{
-                    sorts: [{ name: 'id', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        @click="handlAdd"
-                        hasPermission="media/Stream:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :showStatus="true"
-                        :value="slotProps"
-                        :actions="getActions(slotProps)"
-                        v-bind="slotProps"
-                        :status="slotProps.state.value"
-                        :statusText="slotProps.state.text"
-                        :statusNames="{
-                            enabled: 'processing',
-                            disabled: 'error',
-                        }"
-                        @click="handlEye(slotProps.id)"
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img :src="getImage('/stream.png')" />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <div class="card-item-content">
-                                <Ellipsis
-                                    style="
-                                        width: calc(100% - 100px);
-                                        margin-bottom: 10px;
-                                    "
-                                >
-                                    <span
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    model="CARD"
+                    :columns="columns"
+                    :gridColumn="2"
+                    :gridColumns="[1, 2]"
+                    :request="query"
+                    :defaultParams="{
+                        sorts: [{ name: 'id', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="media/Stream:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :showStatus="true"
+                            :value="slotProps"
+                            :actions="getActions(slotProps)"
+                            v-bind="slotProps"
+                            :status="slotProps.state.value"
+                            :statusText="slotProps.state.text"
+                            :statusNames="{
+                                enabled: 'processing',
+                                disabled: 'error',
+                            }"
+                            @click="handlEye(slotProps.id)"
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img :src="getImage('/stream.png')" />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <div class="card-item-content">
+                                    <Ellipsis
                                         style="
-                                            font-size: 18px;
-                                            font-weight: 800;
-                                            line-height: 22px;
+                                            width: calc(100% - 100px);
+                                            margin-bottom: 10px;
                                         "
                                     >
-                                        {{ slotProps.name }}
-                                    </span>
-                                </Ellipsis>
-                                <j-row class="card-item-content-box">
-                                    <j-col
-                                        :span="8"
-                                        class="card-item-content-text"
-                                    >
-                                        <div class="card-item-content-text">
-                                            服务商
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.provider
-                                                }}</template>
-                                                {{ slotProps.provider }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                    <j-col :span="8">
-                                        <div class="card-item-content-text">
-                                            RTP IP
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.configuration
-                                                        ?.rtpIp
-                                                }}</template>
-                                                {{
-                                                    slotProps.configuration
-                                                        ?.rtpIp
-                                                }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                    <j-col :span="8">
-                                        <div class="card-item-content-text">
-                                            API HOST
-                                        </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.configuration
-                                                        ?.apiHost
-                                                }}</template>
-                                                {{
-                                                    slotProps.configuration
-                                                        ?.apiHost
-                                                }}
-                                            </j-tooltip>
-                                        </div>
-                                    </j-col>
-                                </j-row>
-                            </div>
-                        </template>
-                        <template #actions="item">
-                            <PermissionButton
-                                :disabled="item.disabled"
-                                :popConfirm="item.popConfirm"
-                                :tooltip="{
-                                    ...item.tooltip,
-                                }"
-                                @click="item.onClick"
-                                :hasPermission="'media/Stream:' + item.key"
-                            >
-                                <AIcon
-                                    type="DeleteOutlined"
-                                    v-if="item.key === 'delete'"
-                                />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item?.text }}</span>
-                                </template>
-                            </PermissionButton>
-                        </template>
-                    </CardBox>
-                </template>
-            </j-pro-table>
+                                        <span
+                                            style="
+                                                font-size: 18px;
+                                                font-weight: 800;
+                                                line-height: 22px;
+                                            "
+                                        >
+                                            {{ slotProps.name }}
+                                        </span>
+                                    </Ellipsis>
+                                    <j-row class="card-item-content-box">
+                                        <j-col
+                                            :span="8"
+                                            class="card-item-content-text"
+                                        >
+                                            <div class="card-item-content-text">
+                                                服务商
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.provider
+                                                    }}</template>
+                                                    {{ slotProps.provider }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                        <j-col :span="8">
+                                            <div class="card-item-content-text">
+                                                RTP IP
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.configuration
+                                                            ?.rtpIp
+                                                    }}</template>
+                                                    {{
+                                                        slotProps.configuration
+                                                            ?.rtpIp
+                                                    }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                        <j-col :span="8">
+                                            <div class="card-item-content-text">
+                                                API HOST
+                                            </div>
+                                            <div class="card-item-content-text">
+                                                <j-tooltip>
+                                                    <template #title>{{
+                                                        slotProps.configuration
+                                                            ?.apiHost
+                                                    }}</template>
+                                                    {{
+                                                        slotProps.configuration
+                                                            ?.apiHost
+                                                    }}
+                                                </j-tooltip>
+                                            </div>
+                                        </j-col>
+                                    </j-row>
+                                </div>
+                            </template>
+                            <template #actions="item">
+                                <PermissionButton
+                                    :disabled="item.disabled"
+                                    :popConfirm="item.popConfirm"
+                                    :tooltip="{
+                                        ...item.tooltip,
+                                    }"
+                                    @click="item.onClick"
+                                    :hasPermission="'media/Stream:' + item.key"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </PermissionButton>
+                            </template>
+                        </CardBox>
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
     </page-container>
 </template>