diff --git a/src/views/device/Product/Detail/DeviceAccess/index.vue b/src/views/device/Product/Detail/DeviceAccess/index.vue
index f5f3232b..7caaaf88 100644
--- a/src/views/device/Product/Detail/DeviceAccess/index.vue
+++ b/src/views/device/Product/Detail/DeviceAccess/index.vue
@@ -374,6 +374,7 @@ const productStore = useProductStore();
 import Driver from 'driver.js';
 import 'driver.js/dist/driver.min.css';
 import { marked } from 'marked';
+import type { FormInstance, TableColumnType } from 'ant-design-vue';
 const render = new marked.Renderer();
 marked.setOptions({
     renderer: render,
@@ -690,31 +691,53 @@ const driver1 = new Driver({
 /**
  * 表格列表
  */
-const columnsMQTT: any[] = [
-    {
-        title: '分组',
-        dataIndex: 'group',
-        key: 'group',
-        ellipsis: true,
-        width: 100,
-        // customCell: (record: any, index: number) => {
-        //     const list =
-        //         (config?.routes || []).sort((a: any, b: any) => a - b) || [];
-        //     const arr = list.filter((res: any) => {
-        //         // 这里gpsNumber是我需要判断的字段名（相同就合并）
-        //         return res?.group == record?.group;
-        //     });
-        //     if (index == 0 || list[index - 1]?.group != record?.group) {
-        //         return { rowSpan: arr.length };
-        //     } else {
-        //         return { rowSpan: 0 };
-        //     }
-        // },
-    },
+// const columnsMQTT: any[] = [
+//     {
+//         title: '分组',
+//         dataIndex: 'group',
+//         key: 'group',
+//         ellipsis: true,
+//         width: 100,
+//         // customCell: (record: any, index: number) => {
+//         //     const list =
+//         //         (config?.routes || []).sort((a: any, b: any) => a - b) || [];
+//         //     const arr = list.filter((res: any) => {
+//         //         // 这里gpsNumber是我需要判断的字段名（相同就合并）
+//         //         return res?.group == record?.group;
+//         //     });
+//         //     if (index == 0 || list[index - 1]?.group != record?.group) {
+//         //         return { rowSpan: arr.length };
+//         //     } else {
+//         //         return { rowSpan: 0 };
+//         //     }
+//         // },
+//     },
+//     {
+//         title: 'topic',
+//         dataIndex: 'topic',
+//         key: 'topic',
+//     },
+//     {
+//         title: '上下行',
+//         dataIndex: 'stream',
+//         key: 'stream',
+//         ellipsis: true,
+//         align: 'center',
+//         width: 100,
+//     },
+//     {
+//         title: '说明',
+//         dataIndex: 'description',
+//         key: 'description',
+//     },
+// ];
+let columnsMQTT = ref(<TableColumnType>[]);
+const ColumnsMQTT = [
     {
         title: 'topic',
         dataIndex: 'topic',
         key: 'topic',
+        ellipsis: true,
     },
     {
         title: '上下行',
@@ -723,46 +746,71 @@ const columnsMQTT: any[] = [
         ellipsis: true,
         align: 'center',
         width: 100,
+        scopedSlots: { customRender: 'stream' },
     },
     {
         title: '说明',
         dataIndex: 'description',
         key: 'description',
+        ellipsis: true,
     },
 ];
-
-const columnsHTTP: any[] = [
+const columnsHTTP = ref(<TableColumnType>[]);
+const ColumnsHTTP = [
     {
-        title: '分组',
-        dataIndex: 'group',
-        key: 'group',
+        title: '地址',
+        dataIndex: 'address',
+        key: 'address',
         ellipsis: true,
-        width: 100,
-        // customCell: (record: any, index: number) => {
-        //     const list =
-        //         (config?.routes || []).sort((a: any, b: any) => a - b) || [];
-        //     const arr = list.filter((res: any) => {
-        //         // 这里gpsNumber是我需要判断的字段名（相同就合并）
-        //         return res?.group == record?.group;
-        //     });
-        //     if (index == 0 || list[index - 1]?.group != record?.group) {
-        //         return { rowSpan: arr.length };
-        //     } else {
-        //         return { rowSpan: 0 };
-        //     }
-        // },
+        // scopedSlots: { customRender: 'address' },
     },
     {
         title: '示例',
         dataIndex: 'example',
         key: 'example',
+        ellipsis: true,
+        // scopedSlots: { customRender: 'example' },
     },
     {
         title: '说明',
         dataIndex: 'description',
         key: 'description',
+        ellipsis: true,
+        // scopedSlots: { customRender: 'description' },
     },
 ];
+// const columnsHTTP: any[] = [
+//     {
+//         title: '分组',
+//         dataIndex: 'group',
+//         key: 'group',
+//         ellipsis: true,
+//         width: 100,
+//         // customCell: (record: any, index: number) => {
+//         //     const list =
+//         //         (config?.routes || []).sort((a: any, b: any) => a - b) || [];
+//         //     const arr = list.filter((res: any) => {
+//         //         // 这里gpsNumber是我需要判断的字段名（相同就合并）
+//         //         return res?.group == record?.group;
+//         //     });
+//         //     if (index == 0 || list[index - 1]?.group != record?.group) {
+//         //         return { rowSpan: arr.length };
+//         //     } else {
+//         //         return { rowSpan: 0 };
+//         //     }
+//         // },
+//     },
+//     {
+//         title: '示例',
+//         dataIndex: 'example',
+//         key: 'example',
+//     },
+//     {
+//         title: '说明',
+//         dataIndex: 'description',
+//         key: 'description',
+//     },
+// ];
 /**
  * 获取上下行数据
  */
@@ -806,6 +854,34 @@ const getConfigDetail = async (
         (resp) => {
             if (resp.status === 200) {
                 config.value = resp.result;
+                const Group = {
+                    title: '分组',
+                    dataIndex: 'group',
+                    key: 'group',
+                    ellipsis: true,
+                    align: 'center',
+                    width: 100,
+                    customCell: (record: any, rowIndex: number) => {
+                        const obj = {
+                            children: record,
+                            rowSpan: 0,
+                        };
+                        const list = config.value?.routes || [];
+
+                        const arr = list.filter(
+                            (res: any) => res.group === record.group,
+                        );
+
+                        const isRowIndex =
+                            rowIndex === 0 ||
+                            list[rowIndex - 1].group !== record.group;
+                        isRowIndex && (obj.rowSpan = arr.length);
+
+                        return obj;
+                    },
+                };
+                columnsMQTT.value = [Group, ...ColumnsMQTT];
+                columnsHTTP.value = [Group, ...ColumnsHTTP];
                 if (config.value?.document) {
                     markdownToHtml.value = marked(config.value.document);
                 }
@@ -989,10 +1065,12 @@ watchEffect(() => {
 });
 </script>
 <style lang="less" scoped>
-:deep(._jtable-body_1eyxz_1
-        ._jtable-body-header_1eyxz_6
-        ._jtable-body-header-right_1eyxz_12
-        ._jtable-body-header-right-button_1eyxz_17) {
+:deep(
+        ._jtable-body_1eyxz_1
+            ._jtable-body-header_1eyxz_6
+            ._jtable-body-header-right_1eyxz_12
+            ._jtable-body-header-right-button_1eyxz_17
+    ) {
     display: none;
     margin-left: 10px;
     gap: 8px;
diff --git a/src/views/device/Product/index.vue b/src/views/device/Product/index.vue
index 6f5076fd..8e99b7f8 100644
--- a/src/views/device/Product/index.vue
+++ b/src/views/device/Product/index.vue
@@ -85,7 +85,7 @@
                         </a-row>
                     </template>
                     <template #actions="item">
-                        <a-tooltip
+                        <!-- <a-tooltip
                             v-bind="item.tooltip"
                             :title="item.disabled && item.tooltip.title"
                         >
@@ -122,7 +122,24 @@
                                     </template>
                                 </a-button>
                             </template>
-                        </a-tooltip>
+                        </a-tooltip> -->
+                        <PermissionButton
+                            :disabled="item.disabled"
+                            :popConfirm="item.popConfirm"
+                            :tooltip="{
+                                ...item.tooltip,
+                            }"
+                            @click="item.onClick"
+                        >
+                            <AIcon
+                                type="DeleteOutlined"
+                                v-if="item.key === 'delete'"
+                            />
+                            <template v-else>
+                                <AIcon :type="item.icon" />
+                                <span>{{ item?.text }}</span>
+                            </template>
+                        </PermissionButton>
                     </template>
                 </CardBox>
             </template>
@@ -137,7 +154,7 @@
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip
+                    <!-- <a-tooltip
                         v-for="i in getActions(slotProps)"
                         :key="i.key"
                         v-bind="i.tooltip"
@@ -168,7 +185,24 @@
                                 ><AIcon :type="i.icon"
                             /></a-button>
                         </a-button>
-                    </a-tooltip>
+                    </a-tooltip> -->
+                    <template
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                    >
+                        <PermissionButton
+                            :disabled="i.disabled"
+                            :popConfirm="i.popConfirm"
+                            :tooltip="{
+                                ...i.tooltip,
+                            }"
+                            @click="i.onClick"
+                            type="link"
+                            style="padding: 0px"
+                        >
+                            <template #icon><AIcon :type="i.icon" /></template>
+                        </PermissionButton>
+                    </template>
                 </a-space>
             </template>
         </JTable>