From c694bf822233a5483c3218cafbb0de5f9fdb309e Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Thu, 30 Mar 2023 16:19:41 +0800
Subject: [PATCH 01/12] =?UTF-8?q?fix:=20bug=20=E8=AE=BE=E5=A4=87=E6=8E=A5?=
 =?UTF-8?q?=E5=85=A5=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Product/Detail/DeviceAccess/index.vue     | 41 ++++---------------
 1 file changed, 8 insertions(+), 33 deletions(-)

diff --git a/src/views/device/Product/Detail/DeviceAccess/index.vue b/src/views/device/Product/Detail/DeviceAccess/index.vue
index 7410cbd0..22d10f64 100644
--- a/src/views/device/Product/Detail/DeviceAccess/index.vue
+++ b/src/views/device/Product/Detail/DeviceAccess/index.vue
@@ -8,12 +8,6 @@
                         v-if="
                             permissionStore.hasPermission(
                                 'device/Product:update',
-                            ) &&
-                            permissionStore.hasPermission(
-                                'link/AccessConfig:add',
-                            ) &&
-                            permissionStore.hasPermission(
-                                'link/AccessConfig:update',
                             )
                         "
                     >
@@ -60,35 +54,15 @@
                                         productStore.current?.count &&
                                         productStore.current?.count > 0
                                             ? '产品下有设备实例时不能更换接入方式'
-                                            : !(permissionStore.hasPermission(
-                                                  'device/Product:update',
-                                              ) &&
-                                              permissionStore.hasPermission(
-                                                  'link/AccessConfig:add',
-                                              ) &&
-                                              permissionStore.hasPermission(
-                                                  'link/AccessConfig:update',
-                                              ))
-                                            ? '暂无权限，请联系管理员'
                                             : '',
                                 }"
                                 :disabled="
-                                    (productStore.current?.count &&
-                                        productStore.current?.count > 0) ||
-                                    !(
-                                        permissionStore.hasPermission(
-                                            'device/Product:update',
-                                        ) &&
-                                        permissionStore.hasPermission(
-                                            'link/AccessConfig:add',
-                                        ) &&
-                                        permissionStore.hasPermission(
-                                            'link/AccessConfig:update',
-                                        )
-                                    )
+                                    productStore.current?.count &&
+                                    productStore.current?.count > 0
                                 "
                                 ghost
                                 @click="showDevice"
+                                hasPermission="device/Product:update"
                             >
                                 更换
                             </PermissionButton>
@@ -349,8 +323,11 @@
             :gridColumns="[2]"
         >
             <template #headerTitle>
-                <j-button type="primary" @click="add"
-                    ><plus-outlined />新增</j-button
+                <PermissionButton
+                    type="primary"
+                    @click="add"
+                    hasPermission="link/AccessConfig:add"
+                    >新增</PermissionButton
                 >
             </template>
             <template #deviceType="slotProps">
@@ -1010,7 +987,6 @@ const submitDevice = async () => {
     const result: any = {};
     flatObj(values, result);
     const { storePolicy, ...extra } = result;
-    console.log({ ...extra });
     const id = productStore.current?.id;
     const resp = await modify(id || '', {
         id: id,
@@ -1046,7 +1022,6 @@ const add = () => {
     if (url) {
         const tab: any = window.open(`${origin}/#${url}?view=false`);
         tab.onTabSaveSuccess = (value: any) => {
-            console.log(value);
             if (value.status === 200) {
                 tableRef.value.reload();
                 handleClick(value.result);

From a75f2a3fd69693043e89ea8b745445a0c5b494c3 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Thu, 30 Mar 2023 16:20:16 +0800
Subject: [PATCH 02/12] fix: bug#11106

---
 src/store/department.ts                       |  5 +++
 .../Platforms/Api/components/ChooseApi.vue    | 45 +++++--------------
 src/views/system/Platforms/Api/index.vue      | 23 +++++++---
 3 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/src/store/department.ts b/src/store/department.ts
index d8f49c97..72abbff5 100644
--- a/src/store/department.ts
+++ b/src/store/department.ts
@@ -5,6 +5,7 @@ type DepartmentStateType = {
     productId: string;
     optType: string | undefined;
     crossPageKeys: string[];
+    changedApis: any;
 }
 
 export const useDepartmentStore = defineStore({
@@ -16,6 +17,7 @@ export const useDepartmentStore = defineStore({
         // 2. optType === ': 产品资产分配后, 自动弹出设备资产分配
         optType: '',
         crossPageKeys: [], // 表格跨页多选的keys
+        changedApis: {},
     }),
     actions: {
         setProductId(value: string) {
@@ -27,6 +29,9 @@ export const useDepartmentStore = defineStore({
         setSelectedKeys(value: string[], type?: string) {
             // 分页保留选中项
             this.crossPageKeys = type === 'concat' ? [...new Set([...this.crossPageKeys, ...value])] : value;
+        },
+        setChangedApis(value: any) {
+            this.changedApis = { ...this.changedApis, ...value };
         }
     }
 })
\ No newline at end of file
diff --git a/src/views/system/Platforms/Api/components/ChooseApi.vue b/src/views/system/Platforms/Api/components/ChooseApi.vue
index 166ce578..dfa74792 100644
--- a/src/views/system/Platforms/Api/components/ChooseApi.vue
+++ b/src/views/system/Platforms/Api/components/ChooseApi.vue
@@ -37,6 +37,9 @@ import {
 } from '@/api/system/apiPage';
 import { message } from 'ant-design-vue';
 import { modeType } from '../typing';
+import { useDepartmentStore } from '@/store/department';
+
+const department = useDepartmentStore();
 const emits = defineEmits([
     'refresh',
     'update:clickApi',
@@ -64,11 +67,6 @@ const columns = [
         dataIndex: 'summary',
         key: 'summary',
     },
-    // {
-    //     title: 'ID',
-    //     dataIndex: 'id',
-    //     key: 'id',
-    // },
 ];
 const rowSelection = {
     // onSelect: (record: any) => {
@@ -95,7 +93,7 @@ const rowSelection = {
             props.sourceKeys.includes(key),
         );
         // 除当前表格之外, 勾选上的数据
-        const otherSelectedKeys = props.sourceKeys.filter(
+        const otherSelectedKeys = department.crossPageKeys.filter(
             (key) => !currenTableKeys.includes(key),
         );
 
@@ -103,6 +101,7 @@ const rowSelection = {
         const removeKeys = oldSelectedKeys.filter((key) => !keys.includes(key));
         // 新增选择的项
         const addKeys = keys.filter((key) => !oldSelectedKeys.includes(key));
+        // 缓存当前表格和其他表格改变的数据
         emits('update:selectedRowKeys', [...otherSelectedKeys, ...keys]);
 
         // 新增选中/取消选中的数据
@@ -111,37 +110,21 @@ const rowSelection = {
             changed[key] = props.tableData.find((f: any) => f.id === key);
         });
         if (props.mode === 'appManger') {
-            emits('update:changedApis', changed);
+            // 缓存当前表格和其他表格改变的数据
+            emits('update:changedApis', {
+                ...department.changedApis,
+                ...changed,
+            });
         }
     },
     selectedRowKeys: ref<string[]>([]),
 };
 const save = async () => {
-    // fix: #bug10828
-    // 当前节点表格数据id
-    // const currenTableKeys = props.tableData.map((m: any) => m.id);
-    // // 当前表格选中的id
-    // const currentSelectedKeys = rowSelection.selectedRowKeys.value.filter(
-    //     (key: string) => currenTableKeys.includes(key),
-    // );
-    // // 当前表格, 原有选中的id
-    // const oldSelectedKeys = currenTableKeys.filter((key) =>
-    //     props.sourceKeys.includes(key),
-    // );
-
     const keys = props.selectedRowKeys;
+    // 移除的key
     const removeKeys = props.sourceKeys.filter((key) => !keys.includes(key));
+    // 新选中的key
     const addKeys = keys.filter((key) => !props.sourceKeys.includes(key));
-    // console.log('addKeys: ', addKeys);
-    // console.log('removeKeys: ', removeKeys);
-    // 取消选择的数据项
-    // const removeKeys = oldSelectedKeys.filter(
-    //     (key) => !currentSelectedKeys.includes(key),
-    // );
-    // // 新增选择的项
-    // const addKeys = currentSelectedKeys.filter(
-    //     (key) => !oldSelectedKeys.includes(key),
-    // );
 
     if (props.mode === 'api') {
         // 此时是api配置
@@ -163,14 +146,10 @@ const save = async () => {
         const removeItems = removeKeys.map((key) => ({
             id: key,
             permissions: props.changedApis[key]?.security,
-            // permissions: props.tableData.find((f: any) => f.id === key)
-            //     ?.security,
         }));
         const addItems = addKeys.map((key) => ({
             id: key,
             permissions: props.changedApis[key]?.security,
-            // permissions: props.tableData.find((f: any) => f.id === key)
-            //     ?.security,
         }));
         Promise.all([
             updateOperations_api(code, '_delete', { operations: removeItems }),
diff --git a/src/views/system/Platforms/Api/index.vue b/src/views/system/Platforms/Api/index.vue
index 6d72a575..74beb4c2 100644
--- a/src/views/system/Platforms/Api/index.vue
+++ b/src/views/system/Platforms/Api/index.vue
@@ -76,6 +76,9 @@ import LeftTree from './components/LeftTree.vue';
 import ChooseApi from './components/ChooseApi.vue';
 import ApiDoes from './components/ApiDoes.vue';
 import ApiTest from './components/ApiTest.vue';
+import { useDepartmentStore } from '@/store/department';
+
+const department = useDepartmentStore();
 
 const props = defineProps<{
     mode: modeType;
@@ -157,12 +160,20 @@ function getSelectKeys() {
     }
 }
 
-// watch(
-//     () => changedApis.value,
-//     (val: any) => {
-//         console.log('changedApis: ', val);
-//     },
-// );
+watch(
+    () => selectedKeys.value,
+    (val: any) => {
+        // console.log('selectedKeys: ', val);
+        department.setSelectedKeys(val);
+    },
+);
+watch(
+    () => changedApis.value,
+    (val: any) => {
+        // console.log('changedApis: ', val);
+        department.setChangedApis(val);
+    },
+);
 </script>
 
 <style lang="less" scoped>

From 8239b2c308c4240c7be835e8ee357c0bee2bb738 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Thu, 30 Mar 2023 16:36:11 +0800
Subject: [PATCH 03/12] =?UTF-8?q?fix:=20bug#11174=E3=80=8111227?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/link/AccessConfig/components/Media/GB28181.vue | 8 +++++++-
 src/views/notice/Config/SyncUser/index.vue               | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index 4b1be3ea..9c8a73b7 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -652,7 +652,13 @@ const saveData = () => {
 
         if (resp?.status === 200) {
             onlyMessage('操作成功', 'success');
-            history.back();
+            if (route.query.save) {
+                // @ts-ignore
+                window?.onSaveSuccess(resp.result);
+                window.close();
+            } else {
+                history.back();
+            }
         }
     });
 };
diff --git a/src/views/notice/Config/SyncUser/index.vue b/src/views/notice/Config/SyncUser/index.vue
index 1dc561b4..fc157478 100644
--- a/src/views/notice/Config/SyncUser/index.vue
+++ b/src/views/notice/Config/SyncUser/index.vue
@@ -47,7 +47,7 @@
                             total: dataSource.length,
                             current: current,
                             pageSize: pageSize,
-                            pageSizeOptions: ['5', '10', '20', '50', '100'],
+                            pageSizeOptions: ['10', '20', '50', '100'],
                             showSizeChanger: true,
                             hideOnSinglePage: false,
                             showTotal: (total: number, range: number) => `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`,
@@ -399,7 +399,7 @@ const getTableData = (terms?: any) => {
  * 前端分页
  */
 const current = ref(1);
-const pageSize = ref(5);
+const pageSize = ref(10);
 const handleTableChange = (pagination: any) => {
     current.value = pagination.current;
     pageSize.value = pagination.pageSize;

From c38923f468df19c2abd3588c622542b50a2a8ee3 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Thu, 30 Mar 2023 17:01:58 +0800
Subject: [PATCH 04/12] =?UTF-8?q?fix:=20=E5=8A=A0fullpage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Northbound/AliCloud/Detail/doc.vue  |   2 +-
 .../Northbound/AliCloud/Detail/index.vue      | 792 ++++++++-------
 src/views/Northbound/AliCloud/index.vue       | 234 ++---
 src/views/Northbound/DuerOS/Detail/doc.vue    |   2 +-
 src/views/Northbound/DuerOS/Detail/index.vue  | 923 ++++++++++--------
 src/views/Northbound/DuerOS/index.vue         | 238 ++---
 .../Instance/Detail/ChildDevice/index.vue     | 229 +++--
 .../device/Instance/Detail/Diagnose/index.vue | 158 ++-
 .../device/Instance/Detail/EdgeMap/index.vue  |   4 +-
 .../device/Instance/Detail/Function/index.vue |  34 +-
 .../device/Instance/Detail/Info/index.vue     | 164 ++--
 .../device/Instance/Detail/Log/index.vue      | 100 +-
 .../device/Instance/Detail/Parsing/index.vue  | 348 ++++---
 .../device/Instance/Detail/Running/index.vue  | 125 ++-
 .../Detail/components/EditTable/index.vue     |   4 +-
 src/views/device/Instance/Detail/index.vue    |  42 +-
 src/views/device/Instance/index.vue           | 294 +++---
 src/views/edge/Device/index.vue               | 297 +++---
 src/views/edge/Resource/index.vue             | 256 ++---
 .../Save/action/Device/actions/index.vue      |   2 +-
 .../Scene/Save/action/Device/device/index.vue |  17 +-
 .../Scene/Save/action/Device/index.vue        |   1 +
 22 files changed, 2263 insertions(+), 2003 deletions(-)

diff --git a/src/views/Northbound/AliCloud/Detail/doc.vue b/src/views/Northbound/AliCloud/Detail/doc.vue
index f70a393f..89b4f2a2 100644
--- a/src/views/Northbound/AliCloud/Detail/doc.vue
+++ b/src/views/Northbound/AliCloud/Detail/doc.vue
@@ -57,7 +57,7 @@ import { getImage } from '@/utils/comm';
 
 <style lang="less" scoped>
 .doc {
-    height: 1000px;
+    height: 100%;
     padding: 24px;
     overflow-y: auto;
     color: rgba(#000, 0.8);
diff --git a/src/views/Northbound/AliCloud/Detail/index.vue b/src/views/Northbound/AliCloud/Detail/index.vue
index df82cb60..ce7120c0 100644
--- a/src/views/Northbound/AliCloud/Detail/index.vue
+++ b/src/views/Northbound/AliCloud/Detail/index.vue
@@ -1,371 +1,418 @@
 <template>
     <page-container>
-        <j-card>
-            <j-row :gutter="24">
-                <j-col :span="16">
-                    <TitleComponent data="基本信息" />
-                    <j-form
-                        :layout="'vertical'"
-                        ref="formRef"
-                        :model="modelRef"
-                    >
-                        <j-row :gutter="24">
-                            <j-col :span="24">
-                                <j-form-item
-                                    label="名称"
-                                    name="name"
-                                    :rules="[
-                                        {
-                                            required: true,
-                                            message: '请输入名称',
-                                        },
-                                        {
-                                            max: 64,
-                                            message: '最多输入64个字符',
-                                        },
-                                    ]"
-                                >
-                                    <j-input
-                                        placeholder="请输入名称"
-                                        v-model:value="modelRef.name"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-form-item
-                                    :name="['accessConfig', 'regionId']"
-                                    :rules="[
-                                        {
-                                            required: true,
-                                            message: '请选择服务地址',
-                                        },
-                                    ]"
-                                >
-                                    <template #label>
-                                        <span>
-                                            服务地址
-                                            <j-tooltip
-                                                title="阿里云内部给每台机器设置的唯一编号"
-                                            >
-                                                <AIcon
-                                                    type="QuestionCircleOutlined"
-                                                    style="margin-left: 2px"
-                                                />
-                                            </j-tooltip>
-                                        </span>
-                                    </template>
-                                    <j-select
-                                        placeholder="请选择服务地址"
-                                        v-model:value="
-                                            modelRef.accessConfig.regionId
-                                        "
-                                        show-search
-                                        @blur="productChange"
-                                    >
-                                        <j-select-option
-                                            v-for="item in regionsList"
-                                            :key="item.id"
-                                            :value="item.id"
-                                            :label="item.name"
-                                            >{{ item.name }}</j-select-option
+        <FullPage>
+            <j-card>
+                <div class="box">
+                    <div class="left">
+                        <div class="left-content">
+                            <TitleComponent data="基本信息" />
+                            <j-form
+                                :layout="'vertical'"
+                                ref="formRef"
+                                :model="modelRef"
+                            >
+                                <j-row :gutter="24">
+                                    <j-col :span="24">
+                                        <j-form-item
+                                            label="名称"
+                                            name="name"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入名称',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message: '最多输入64个字符',
+                                                },
+                                            ]"
                                         >
-                                    </j-select>
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-form-item
-                                    :name="['accessConfig', 'instanceId']"
-                                >
-                                    <template #label>
-                                        <span>
-                                            实例ID
-                                            <j-tooltip
-                                                title="阿里云物联网平台中的实例ID,没有则不填"
-                                            >
-                                                <AIcon
-                                                    type="QuestionCircleOutlined"
-                                                    style="margin-left: 2px"
-                                                />
-                                            </j-tooltip>
-                                        </span>
-                                    </template>
-                                    <j-input
-                                        placeholder="请输入实例ID"
-                                        v-model:value="
-                                            modelRef.accessConfig.instanceId
-                                        "
-                                        @blur="productChange"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-form-item
-                                    :name="['accessConfig', 'accessKeyId']"
-                                    :rules="[
-                                        {
-                                            required: true,
-                                            message: '请输入accessKey',
-                                        },
-                                        {
-                                            max: 64,
-                                            message: '最多输入64个字符',
-                                        },
-                                    ]"
-                                >
-                                    <template #label>
-                                        <span>
-                                            accessKey
-                                            <j-tooltip
-                                                title="用于程序通知方式调用云服务API的用户标识"
-                                            >
-                                                <AIcon
-                                                    type="QuestionCircleOutlined"
-                                                    style="margin-left: 2px"
-                                                />
-                                            </j-tooltip>
-                                        </span>
-                                    </template>
-                                    <j-input
-                                        placeholder="请输入accessKey"
-                                        v-model:value="
-                                            modelRef.accessConfig.accessKeyId
-                                        "
-                                        @blur="productChange"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-form-item
-                                    :name="['accessConfig', 'accessSecret']"
-                                    :rules="[
-                                        {
-                                            required: true,
-                                            message: '请输入accessSecret',
-                                        },
-                                        {
-                                            max: 64,
-                                            message: '最多输入64个字符',
-                                        },
-                                    ]"
-                                >
-                                    <template #label>
-                                        <span>
-                                            accessSecret
-                                            <j-tooltip
-                                                title="用于程序通知方式调用云服务费API的秘钥标识"
-                                            >
-                                                <AIcon
-                                                    type="QuestionCircleOutlined"
-                                                    style="margin-left: 2px"
-                                                />
-                                            </j-tooltip>
-                                        </span>
-                                    </template>
-                                    <j-input
-                                        placeholder="请输入accessSecret"
-                                        v-model:value="
-                                            modelRef.accessConfig.accessSecret
-                                        "
-                                        @blur="productChange"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-form-item
-                                    name="bridgeProductKey"
-                                    :rules="{
-                                        required: true,
-                                        message: '请选择网桥产品',
-                                    }"
-                                >
-                                    <template #label>
-                                        <span>
-                                            网桥产品
-                                            <j-tooltip
-                                                title="物联网平台对应的阿里云产品"
-                                            >
-                                                <AIcon
-                                                    type="QuestionCircleOutlined"
-                                                    style="margin-left: 2px"
-                                                />
-                                            </j-tooltip>
-                                        </span>
-                                    </template>
-                                    <j-select
-                                        placeholder="请选择网桥产品"
-                                        v-model:value="
-                                            modelRef.bridgeProductKey
-                                        "
-                                        show-search
-                                    >
-                                        <j-select-option
-                                            v-for="item in aliyunProductList"
-                                            :key="item.productKey"
-                                            :value="item.productKey"
-                                            :label="item.productName"
-                                            >{{
-                                                item.productName
-                                            }}</j-select-option
+                                            <j-input
+                                                placeholder="请输入名称"
+                                                v-model:value="modelRef.name"
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-form-item
+                                            :name="['accessConfig', 'regionId']"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请选择服务地址',
+                                                },
+                                            ]"
                                         >
-                                    </j-select>
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="24">
-                                <p>产品映射</p>
-                                <j-collapse
-                                    v-if="modelRef.mappings.length"
-                                    :activeKey="activeKey"
-                                    @change="onCollChange"
-                                >
-                                    <j-collapse-panel
-                                        v-for="(
-                                            item, index
-                                        ) in modelRef.mappings"
-                                        :key="index"
-                                        :header="
-                                            item.productKey
-                                                ? (aliyunProductList.find(
-                                                      (i) =>
-                                                          i.productKey ===
-                                                          item.productKey,
-                                                  )?.productName || `产品映射${index + 1}`)
-                                                : `产品映射${index + 1}`
-                                        "
-                                    >
-                                        <template #extra
-                                            ><AIcon
-                                                type="DeleteOutlined"
-                                                @click="delItem(index)"
-                                        /></template>
-                                        <j-row :gutter="24">
-                                            <j-col :span="12">
-                                                <j-form-item
-                                                    label="阿里云产品"
-                                                    :name="[
-                                                        'mappings',
-                                                        index,
-                                                        'productKey',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message:
-                                                            '请选择阿里云产品',
-                                                    }"
-                                                >
-                                                    <j-select
-                                                        placeholder="请选择阿里云产品"
-                                                        v-model:value="
-                                                            item.productKey
-                                                        "
-                                                        show-search
+                                            <template #label>
+                                                <span>
+                                                    服务地址
+                                                    <j-tooltip
+                                                        title="阿里云内部给每台机器设置的唯一编号"
                                                     >
-                                                        <j-select-option
-                                                            v-for="i in getAliyunProductList(
-                                                                item?.productKey || ''
-                                                            )"
-                                                            :key="i.productKey"
-                                                            :value="
-                                                                i.productKey
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
                                                             "
-                                                            :label="
-                                                                i.productName
-                                                            "
-                                                            >{{
-                                                                i.productName
-                                                            }}</j-select-option
-                                                        >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col :span="12">
-                                                <j-form-item
-                                                    label="平台产品"
-                                                    :name="[
-                                                        'mappings',
-                                                        index,
-                                                        'productId',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message:
-                                                            '请选择平台产品',
-                                                    }"
+                                                        />
+                                                    </j-tooltip>
+                                                </span>
+                                            </template>
+                                            <j-select
+                                                placeholder="请选择服务地址"
+                                                v-model:value="
+                                                    modelRef.accessConfig
+                                                        .regionId
+                                                "
+                                                show-search
+                                                @blur="productChange"
+                                            >
+                                                <j-select-option
+                                                    v-for="item in regionsList"
+                                                    :key="item.id"
+                                                    :value="item.id"
+                                                    :label="item.name"
+                                                    >{{
+                                                        item.name
+                                                    }}</j-select-option
                                                 >
-                                                    <j-select
-                                                        placeholder="请选择平台产品"
-                                                        v-model:value="
-                                                            item.productId
-                                                        "
-                                                        show-search
+                                            </j-select>
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-form-item
+                                            :name="[
+                                                'accessConfig',
+                                                'instanceId',
+                                            ]"
+                                        >
+                                            <template #label>
+                                                <span>
+                                                    实例ID
+                                                    <j-tooltip
+                                                        title="阿里云物联网平台中的实例ID,没有则不填"
                                                     >
-                                                        <j-select-option
-                                                            v-for="i in getPlatProduct(
-                                                                item.productId || ''
-                                                            )"
-                                                            :key="i.id"
-                                                            :value="i?.id"
-                                                            :label="i.name"
-                                                            >{{
-                                                                i.name
-                                                            }}</j-select-option
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
+                                                            "
+                                                        />
+                                                    </j-tooltip>
+                                                </span>
+                                            </template>
+                                            <j-input
+                                                placeholder="请输入实例ID"
+                                                v-model:value="
+                                                    modelRef.accessConfig
+                                                        .instanceId
+                                                "
+                                                @blur="productChange"
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-form-item
+                                            :name="[
+                                                'accessConfig',
+                                                'accessKeyId',
+                                            ]"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入accessKey',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message: '最多输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <template #label>
+                                                <span>
+                                                    accessKey
+                                                    <j-tooltip
+                                                        title="用于程序通知方式调用云服务API的用户标识"
+                                                    >
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
+                                                            "
+                                                        />
+                                                    </j-tooltip>
+                                                </span>
+                                            </template>
+                                            <j-input
+                                                placeholder="请输入accessKey"
+                                                v-model:value="
+                                                    modelRef.accessConfig
+                                                        .accessKeyId
+                                                "
+                                                @blur="productChange"
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-form-item
+                                            :name="[
+                                                'accessConfig',
+                                                'accessSecret',
+                                            ]"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message:
+                                                        '请输入accessSecret',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message: '最多输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <template #label>
+                                                <span>
+                                                    accessSecret
+                                                    <j-tooltip
+                                                        title="用于程序通知方式调用云服务费API的秘钥标识"
+                                                    >
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
+                                                            "
+                                                        />
+                                                    </j-tooltip>
+                                                </span>
+                                            </template>
+                                            <j-input
+                                                placeholder="请输入accessSecret"
+                                                v-model:value="
+                                                    modelRef.accessConfig
+                                                        .accessSecret
+                                                "
+                                                @blur="productChange"
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-form-item
+                                            name="bridgeProductKey"
+                                            :rules="{
+                                                required: true,
+                                                message: '请选择网桥产品',
+                                            }"
+                                        >
+                                            <template #label>
+                                                <span>
+                                                    网桥产品
+                                                    <j-tooltip
+                                                        title="物联网平台对应的阿里云产品"
+                                                    >
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
+                                                            "
+                                                        />
+                                                    </j-tooltip>
+                                                </span>
+                                            </template>
+                                            <j-select
+                                                placeholder="请选择网桥产品"
+                                                v-model:value="
+                                                    modelRef.bridgeProductKey
+                                                "
+                                                show-search
+                                            >
+                                                <j-select-option
+                                                    v-for="item in aliyunProductList"
+                                                    :key="item.productKey"
+                                                    :value="item.productKey"
+                                                    :label="item.productName"
+                                                    >{{
+                                                        item.productName
+                                                    }}</j-select-option
+                                                >
+                                            </j-select>
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <p>产品映射</p>
+                                        <j-collapse
+                                            v-if="modelRef.mappings.length"
+                                            :activeKey="activeKey"
+                                            @change="onCollChange"
+                                        >
+                                            <j-collapse-panel
+                                                v-for="(
+                                                    item, index
+                                                ) in modelRef.mappings"
+                                                :key="index"
+                                                :header="
+                                                    item.productKey
+                                                        ? aliyunProductList.find(
+                                                              (i) =>
+                                                                  i.productKey ===
+                                                                  item.productKey,
+                                                          )?.productName ||
+                                                          `产品映射${index + 1}`
+                                                        : `产品映射${index + 1}`
+                                                "
+                                            >
+                                                <template #extra
+                                                    ><AIcon
+                                                        type="DeleteOutlined"
+                                                        @click="delItem(index)"
+                                                /></template>
+                                                <j-row :gutter="24">
+                                                    <j-col :span="12">
+                                                        <j-form-item
+                                                            label="阿里云产品"
+                                                            :name="[
+                                                                'mappings',
+                                                                index,
+                                                                'productKey',
+                                                            ]"
+                                                            :rules="{
+                                                                required: true,
+                                                                message:
+                                                                    '请选择阿里云产品',
+                                                            }"
                                                         >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                        </j-row>
-                                    </j-collapse-panel>
-                                </j-collapse>
-                                <j-card v-else>
-                                    <j-empty />
-                                </j-card>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-button
-                                    type="dashed"
-                                    style="width: 100%; margin-top: 10px"
-                                    @click="addItem"
+                                                            <j-select
+                                                                placeholder="请选择阿里云产品"
+                                                                v-model:value="
+                                                                    item.productKey
+                                                                "
+                                                                show-search
+                                                            >
+                                                                <j-select-option
+                                                                    v-for="i in getAliyunProductList(
+                                                                        item?.productKey ||
+                                                                            '',
+                                                                    )"
+                                                                    :key="
+                                                                        i.productKey
+                                                                    "
+                                                                    :value="
+                                                                        i.productKey
+                                                                    "
+                                                                    :label="
+                                                                        i.productName
+                                                                    "
+                                                                    >{{
+                                                                        i.productName
+                                                                    }}</j-select-option
+                                                                >
+                                                            </j-select>
+                                                        </j-form-item>
+                                                    </j-col>
+                                                    <j-col :span="12">
+                                                        <j-form-item
+                                                            label="平台产品"
+                                                            :name="[
+                                                                'mappings',
+                                                                index,
+                                                                'productId',
+                                                            ]"
+                                                            :rules="{
+                                                                required: true,
+                                                                message:
+                                                                    '请选择平台产品',
+                                                            }"
+                                                        >
+                                                            <j-select
+                                                                placeholder="请选择平台产品"
+                                                                v-model:value="
+                                                                    item.productId
+                                                                "
+                                                                show-search
+                                                            >
+                                                                <j-select-option
+                                                                    v-for="i in getPlatProduct(
+                                                                        item.productId ||
+                                                                            '',
+                                                                    )"
+                                                                    :key="i.id"
+                                                                    :value="
+                                                                        i?.id
+                                                                    "
+                                                                    :label="
+                                                                        i.name
+                                                                    "
+                                                                    >{{
+                                                                        i.name
+                                                                    }}</j-select-option
+                                                                >
+                                                            </j-select>
+                                                        </j-form-item>
+                                                    </j-col>
+                                                </j-row>
+                                            </j-collapse-panel>
+                                        </j-collapse>
+                                        <j-card v-else>
+                                            <j-empty />
+                                        </j-card>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-button
+                                            type="dashed"
+                                            style="
+                                                width: 100%;
+                                                margin-top: 10px;
+                                            "
+                                            @click="addItem"
+                                        >
+                                            <AIcon
+                                                type="PlusOutlined"
+                                                style="margin-left: 2px"
+                                            />添加
+                                        </j-button>
+                                    </j-col>
+                                    <j-col :span="24" style="margin-top: 20px">
+                                        <j-form-item
+                                            label="说明"
+                                            name="description"
+                                            :rules="{
+                                                max: 200,
+                                                message: '最多输入200个字符',
+                                            }"
+                                        >
+                                            <j-textarea
+                                                v-model:value="
+                                                    modelRef.description
+                                                "
+                                                placeholder="请输入说明"
+                                                showCount
+                                                :maxlength="200"
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                </j-row>
+                            </j-form>
+                            <div v-if="type === 'edit'">
+                                <PermissionButton
+                                    type="primary"
+                                    :loading="loading"
+                                    @click="saveBtn"
+                                    :hasPermission="[
+                                        'Northbound/AliCloud:add',
+                                        'Northbound/AliCloud:update',
+                                    ]"
                                 >
-                                    <AIcon
-                                        type="PlusOutlined"
-                                        style="margin-left: 2px"
-                                    />添加
-                                </j-button>
-                            </j-col>
-                            <j-col :span="24" style="margin-top: 20px">
-                                <j-form-item
-                                    label="说明"
-                                    name="description"
-                                    :rules="{
-                                        max: 200,
-                                        message: '最多输入200个字符',
-                                    }"
-                                >
-                                    <j-textarea
-                                        v-model:value="modelRef.description"
-                                        placeholder="请输入说明"
-                                        showCount
-                                        :maxlength="200"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                        </j-row>
-                    </j-form>
-                    <div v-if="type === 'edit'">
-                        <PermissionButton
-                            type="primary"
-                            :loading="loading"
-                            @click="saveBtn"
-                            :hasPermission="['Northbound/AliCloud:add', 'Northbound/AliCloud:update']"
-                        >
-                            保存
-                        </PermissionButton>
+                                    保存
+                                </PermissionButton>
+                            </div>
+                        </div>
                     </div>
-                </j-col>
-                <j-col :span="8">
-                    <Doc />
-                </j-col>
-            </j-row>
-        </j-card>
+                    <div class="right">
+                        <Doc />
+                    </div>
+                </div>
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
@@ -489,14 +536,16 @@ const saveBtn = () => {
         .validate()
         .then(async (data: any) => {
             const product = (aliyunProductList.value || []).find(
-                (item: any) =>
-                    item?.productKey === data?.bridgeProductKey,
+                (item: any) => item?.productKey === data?.bridgeProductKey,
             );
             data.bridgeProductName = product?.productName || '';
             loading.value = true;
-            const resp = await savePatch({...toRaw(modelRef), ...data}).finally(() => {
+            const resp = await savePatch({
+                ...toRaw(modelRef),
+                ...data,
+            }).finally(() => {
                 loading.value = false;
-            })
+            });
             if (resp.status === 200) {
                 message.success('操作成功！');
                 formRef.value.resetFields();
@@ -539,4 +588,23 @@ watch(
     },
     { immediate: true, deep: true },
 );
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="less">
+.box {
+    position: relative;
+    .left {
+        .left-content {
+            width: 66%;
+        }
+    }
+    .right {
+        width: 33%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        overflow-y: auto;
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Northbound/AliCloud/index.vue b/src/views/Northbound/AliCloud/index.vue
index ea02f6cc..1bdcd457 100644
--- a/src/views/Northbound/AliCloud/index.vue
+++ b/src/views/Northbound/AliCloud/index.vue
@@ -5,119 +5,133 @@
             target="northbound-aliyun"
             @search="handleSearch"
         />
-        <JProTable
-            ref="instanceRef"
-            :columns="columns"
-            :request="query"
-            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
-            :params="params"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        type="primary"
-                        @click="handleAdd"
-                        hasPermission="Northbound/AliCloud:add"
+        <FullPage>
+            <JProTable
+                ref="instanceRef"
+                :columns="columns"
+                :request="query"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <j-space>
+                        <PermissionButton
+                            type="primary"
+                            @click="handleAdd"
+                            hasPermission="Northbound/AliCloud:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </j-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        @click="handleView(slotProps.id)"
+                        :actions="getActions(slotProps, 'card')"
+                        :status="slotProps.state?.value"
+                        :statusText="slotProps.state?.text"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
                     >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </j-space>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    @click="handleView(slotProps.id)"
-                    :actions="getActions(slotProps, 'card')"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
-                        enabled: 'processing',
-                        disabled: 'error',
-                    }"
-                >
-                    <template #img>
-                        <img :src="getImage('/northbound/aliyun.png')" />
-                    </template>
-                    <template #content>
-                        <Ellipsis style="width: calc(100% - 100px)">
-                            <span style="font-size: 16px; font-weight: 600">
-                                {{ slotProps.name }}
-                            </span>
-                        </Ellipsis>
-                        <j-row style="margin-top: 15px">
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    网桥产品
-                                </div>
-                                <Ellipsis>
-                                    <div>
-                                        {{ slotProps?.bridgeProductName }}
+                        <template #img>
+                            <img :src="getImage('/northbound/aliyun.png')" />
+                        </template>
+                        <template #content>
+                            <Ellipsis style="width: calc(100% - 100px)">
+                                <span style="font-size: 16px; font-weight: 600">
+                                    {{ slotProps.name }}
+                                </span>
+                            </Ellipsis>
+                            <j-row style="margin-top: 15px">
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        网桥产品
                                     </div>
-                                </Ellipsis>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    <label>说明</label>
-                                </div>
-                                <Ellipsis>
-                                    <div>{{ slotProps?.description }}</div>
-                                </Ellipsis>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="item.tooltip"
-                            @click="item.onClick"
-                            :hasPermission="'Northbound/AliCloud:' + item.key"
+                                    <Ellipsis>
+                                        <div>
+                                            {{ slotProps?.bridgeProductName }}
+                                        </div>
+                                    </Ellipsis>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        <label>说明</label>
+                                    </div>
+                                    <Ellipsis>
+                                        <div>{{ slotProps?.description }}</div>
+                                    </Ellipsis>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="item.tooltip"
+                                @click="item.onClick"
+                                :hasPermission="
+                                    'Northbound/AliCloud:' + 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">
+                    <BadgeStatus
+                        :status="slotProps.state?.value"
+                        :text="slotProps.state?.text"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
+                    />
+                </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 #state="slotProps">
-                <BadgeStatus
-                    :status="slotProps.state?.value"
-                    :text="slotProps.state?.text"
-                    :statusNames="{
-                        enabled: 'processing',
-                        disabled: 'error',
-                    }"
-                />
-            </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: 0 5px"
-                            @click="i.onClick"
-                            type="link"
-                            :danger="i.key === 'delete'"
-                            :hasPermission="i.key === 'view' ? true : 'Northbound/AliCloud:' + i.key"
-                        >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="i.tooltip"
+                                style="padding: 0 5px"
+                                @click="i.onClick"
+                                type="link"
+                                :danger="i.key === 'delete'"
+                                :hasPermission="
+                                    i.key === 'view'
+                                        ? true
+                                        : 'Northbound/AliCloud:' + i.key
+                                "
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/Northbound/DuerOS/Detail/doc.vue b/src/views/Northbound/DuerOS/Detail/doc.vue
index ec2dc145..92624782 100644
--- a/src/views/Northbound/DuerOS/Detail/doc.vue
+++ b/src/views/Northbound/DuerOS/Detail/doc.vue
@@ -64,7 +64,7 @@ import { getImage } from '@/utils/comm';
 
 <style lang="less" scoped>
 .doc {
-    height: 1000px;
+    height: 100%;
     padding: 24px;
     overflow-y: auto;
     color: rgba(#000, 0.8);
diff --git a/src/views/Northbound/DuerOS/Detail/index.vue b/src/views/Northbound/DuerOS/Detail/index.vue
index 00e6a690..6739aad6 100644
--- a/src/views/Northbound/DuerOS/Detail/index.vue
+++ b/src/views/Northbound/DuerOS/Detail/index.vue
@@ -1,437 +1,479 @@
 <template>
     <page-container>
-        <j-card>
-            <j-row :gutter="24">
-                <j-col :span="16">
-                    <TitleComponent data="基本信息" />
-                    <j-form
-                        :layout="'vertical'"
-                        ref="formRef"
-                        :model="modelRef"
-                    >
-                        <j-row :gutter="24">
-                            <j-col :span="24">
-                                <j-form-item
-                                    label="名称"
-                                    name="name"
-                                    :rules="[
-                                        {
-                                            required: true,
-                                            message: '请输入名称',
-                                        },
-                                        {
-                                            max: 64,
-                                            message: '最多输入64个字符',
-                                        },
+        <FullPage>
+            <j-card>
+                <div class="box">
+                    <div class="left">
+                        <div class="left-content">
+                            <TitleComponent data="基本信息" />
+                            <j-form
+                                :layout="'vertical'"
+                                ref="formRef"
+                                :model="modelRef"
+                            >
+                                <j-row :gutter="24">
+                                    <j-col :span="24">
+                                        <j-form-item
+                                            label="名称"
+                                            name="name"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入名称',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message: '最多输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <j-input
+                                                placeholder="请输入名称"
+                                                v-model:value="modelRef.name"
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="12">
+                                        <j-form-item
+                                            label="产品"
+                                            name="id"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请选择产品',
+                                                },
+                                            ]"
+                                        >
+                                            <j-select
+                                                :disabled="
+                                                    type !== 'edit' &&
+                                                    modelRef.id &&
+                                                    modelRef.id !== ':id'
+                                                "
+                                                placeholder="请选择产品"
+                                                v-model:value="modelRef.id"
+                                                show-search
+                                                @change="productChange"
+                                            >
+                                                <j-select-option
+                                                    v-for="item in productList"
+                                                    :key="item.id"
+                                                    :value="item.id"
+                                                    :label="item.name"
+                                                    >{{
+                                                        item.name
+                                                    }}</j-select-option
+                                                >
+                                            </j-select>
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="12">
+                                        <j-form-item
+                                            name="applianceType"
+                                            :rules="{
+                                                required: true,
+                                                message: '请选择设备类型',
+                                            }"
+                                        >
+                                            <template #label>
+                                                <span>
+                                                    设备类型
+                                                    <j-tooltip
+                                                        title="DuerOS平台拟定的规范"
+                                                    >
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                            style="
+                                                                margin-left: 2px;
+                                                            "
+                                                        />
+                                                    </j-tooltip>
+                                                </span>
+                                            </template>
+                                            <j-select
+                                                placeholder="请选择设备类型"
+                                                v-model:value="
+                                                    modelRef.applianceType
+                                                "
+                                                show-search
+                                                @change="typeChange"
+                                            >
+                                                <j-select-option
+                                                    v-for="item in typeList"
+                                                    :key="item.id"
+                                                    :value="item.id"
+                                                    :label="item.name"
+                                                    >{{
+                                                        item.name
+                                                    }}</j-select-option
+                                                >
+                                            </j-select>
+                                        </j-form-item>
+                                        <j-form-item
+                                            name="productName"
+                                            v-show="false"
+                                            label="产品名称"
+                                        >
+                                            <j-input
+                                                v-model:value="
+                                                    modelRef.productName
+                                                "
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <p>动作映射</p>
+                                        <j-collapse
+                                            v-if="
+                                                modelRef.actionMappings.length
+                                            "
+                                            :activeKey="actionActiveKey"
+                                            @change="onActionCollChange"
+                                        >
+                                            <j-collapse-panel
+                                                v-for="(
+                                                    item, index
+                                                ) in modelRef.actionMappings"
+                                                :key="index"
+                                                :header="
+                                                    item.action
+                                                        ? getTypesActions(
+                                                              item.action,
+                                                          ).find(
+                                                              (i) =>
+                                                                  i.id ===
+                                                                  item.action,
+                                                          )?.name
+                                                        : `动作映射${index + 1}`
+                                                "
+                                            >
+                                                <template #extra
+                                                    ><AIcon
+                                                        type="DeleteOutlined"
+                                                        @click="delItem(index)"
+                                                /></template>
+                                                <j-row :gutter="24">
+                                                    <j-col :span="12">
+                                                        <j-form-item
+                                                            :name="[
+                                                                'actionMappings',
+                                                                index,
+                                                                'action',
+                                                            ]"
+                                                            :rules="{
+                                                                required: true,
+                                                                message:
+                                                                    '请选择动作',
+                                                            }"
+                                                        >
+                                                            <template #label>
+                                                                <span>
+                                                                    动作
+                                                                    <j-tooltip
+                                                                        title="DuerOS平台拟定的设备类型具有的相关动作"
+                                                                    >
+                                                                        <AIcon
+                                                                            type="QuestionCircleOutlined"
+                                                                        />
+                                                                    </j-tooltip>
+                                                                </span>
+                                                            </template>
+                                                            <j-select
+                                                                placeholder="请选择动作"
+                                                                v-model:value="
+                                                                    item.action
+                                                                "
+                                                                show-search
+                                                            >
+                                                                <j-select-option
+                                                                    v-for="i in getTypesActions(
+                                                                        item.action ||
+                                                                            '',
+                                                                    )"
+                                                                    :key="i.id"
+                                                                    :value="
+                                                                        i.id
+                                                                    "
+                                                                    :label="
+                                                                        i.name
+                                                                    "
+                                                                    >{{
+                                                                        i.name
+                                                                    }}</j-select-option
+                                                                >
+                                                            </j-select>
+                                                        </j-form-item>
+                                                    </j-col>
+                                                    <j-col :span="12">
+                                                        <j-form-item
+                                                            :name="[
+                                                                'actionMappings',
+                                                                index,
+                                                                'actionType',
+                                                            ]"
+                                                            :rules="{
+                                                                required: true,
+                                                                message:
+                                                                    '请选择操作',
+                                                            }"
+                                                        >
+                                                            <template #label>
+                                                                <span>
+                                                                    操作
+                                                                    <j-tooltip
+                                                                        title="映射物联网平台中所选产品具备的动作"
+                                                                    >
+                                                                        <AIcon
+                                                                            type="QuestionCircleOutlined"
+                                                                        />
+                                                                    </j-tooltip>
+                                                                </span>
+                                                            </template>
+                                                            <j-select
+                                                                placeholder="请选择操作"
+                                                                v-model:value="
+                                                                    item.actionType
+                                                                "
+                                                                show-search
+                                                                @change="
+                                                                    () =>
+                                                                        onActionTypeChange(
+                                                                            index,
+                                                                        )
+                                                                "
+                                                            >
+                                                                <j-select-option
+                                                                    value="command"
+                                                                    >下发指令</j-select-option
+                                                                >
+                                                                <j-select-option
+                                                                    value="latestData"
+                                                                    >获取历史数据</j-select-option
+                                                                >
+                                                            </j-select>
+                                                        </j-form-item>
+                                                    </j-col>
+                                                    <j-col
+                                                        :span="24"
+                                                        v-if="item.actionType"
+                                                    >
+                                                        <j-form-item
+                                                            :name="[
+                                                                'actionMappings',
+                                                                index,
+                                                                'command',
+                                                            ]"
+                                                        >
+                                                            <Command
+                                                                ref="command"
+                                                                :metadata="
+                                                                    findProductMetadata
+                                                                "
+                                                                v-model:modelValue="
+                                                                    item.command
+                                                                "
+                                                                :actionType="
+                                                                    item.actionType
+                                                                "
+                                                            />
+                                                        </j-form-item>
+                                                    </j-col>
+                                                </j-row>
+                                            </j-collapse-panel>
+                                        </j-collapse>
+                                        <j-card v-else>
+                                            <j-empty />
+                                        </j-card>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-button
+                                            type="dashed"
+                                            style="
+                                                width: 100%;
+                                                margin-top: 10px;
+                                            "
+                                            @click="addItem"
+                                        >
+                                            <AIcon
+                                                type="PlusOutlined"
+                                                style="margin-left: 2px"
+                                            />新增动作
+                                        </j-button>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <p style="margin-top: 20px">属性映射</p>
+                                        <j-collapse
+                                            v-if="
+                                                modelRef.propertyMappings.length
+                                            "
+                                            :activeKey="propertyActiveKey"
+                                            @change="onPropertyCollChange"
+                                        >
+                                            <j-collapse-panel
+                                                v-for="(
+                                                    item, index
+                                                ) in modelRef.propertyMappings"
+                                                :key="index"
+                                                :header="
+                                                    item.source
+                                                        ? getDuerOSProperties(
+                                                              item.source,
+                                                          ).find(
+                                                              (i) =>
+                                                                  i.id ===
+                                                                  item.source,
+                                                          )?.name
+                                                        : `属性映射${index + 1}`
+                                                "
+                                            >
+                                                <template #extra
+                                                    ><AIcon
+                                                        type="DeleteOutlined"
+                                                        @click="
+                                                            delPropertyItem(
+                                                                index,
+                                                            )
+                                                        "
+                                                /></template>
+                                                <j-row :gutter="24">
+                                                    <j-col :span="12">
+                                                        <j-form-item
+                                                            label="DuerOS属性"
+                                                            :name="[
+                                                                'propertyMappings',
+                                                                index,
+                                                                'source',
+                                                            ]"
+                                                            :rules="{
+                                                                required: true,
+                                                                message:
+                                                                    '请选择DuerOS属性',
+                                                            }"
+                                                        >
+                                                            <j-select
+                                                                placeholder="请选择DuerOS属性"
+                                                                v-model:value="
+                                                                    item.source
+                                                                "
+                                                                show-search
+                                                            >
+                                                                <j-select-option
+                                                                    v-for="i in getDuerOSProperties(
+                                                                        item.source ||
+                                                                            '',
+                                                                    )"
+                                                                    :key="i.id"
+                                                                    :value="
+                                                                        i.id
+                                                                    "
+                                                                    >{{
+                                                                        i.name
+                                                                    }}</j-select-option
+                                                                >
+                                                            </j-select>
+                                                        </j-form-item>
+                                                    </j-col>
+                                                    <j-col :span="12">
+                                                        <j-form-item
+                                                            label="平台属性"
+                                                            :name="[
+                                                                'propertyMappings',
+                                                                index,
+                                                                'target',
+                                                            ]"
+                                                            :rules="{
+                                                                required: true,
+                                                                message:
+                                                                    '请选择平台属性',
+                                                            }"
+                                                        >
+                                                            <j-select
+                                                                placeholder="请选择平台属性"
+                                                                v-model:value="
+                                                                    item.target
+                                                                "
+                                                                mode="tags"
+                                                                show-search
+                                                            >
+                                                                <j-select-option
+                                                                    v-for="i in getProductProperties(
+                                                                        item.target,
+                                                                    )"
+                                                                    :key="i.id"
+                                                                    :value="
+                                                                        i.id
+                                                                    "
+                                                                    >{{
+                                                                        i.name
+                                                                    }}</j-select-option
+                                                                >
+                                                            </j-select>
+                                                        </j-form-item>
+                                                    </j-col>
+                                                </j-row>
+                                            </j-collapse-panel>
+                                        </j-collapse>
+                                        <j-card v-else>
+                                            <j-empty />
+                                        </j-card>
+                                    </j-col>
+                                    <j-col :span="24">
+                                        <j-button
+                                            type="dashed"
+                                            style="
+                                                width: 100%;
+                                                margin-top: 10px;
+                                            "
+                                            @click="addPropertyItem"
+                                        >
+                                            <AIcon
+                                                type="PlusOutlined"
+                                                style="margin-left: 2px"
+                                            />新增属性
+                                        </j-button>
+                                    </j-col>
+                                    <j-col :span="24" style="margin-top: 20px">
+                                        <j-form-item
+                                            label="说明"
+                                            name="description"
+                                            :rules="{
+                                                max: 200,
+                                                message: '最多输入200个字符',
+                                            }"
+                                        >
+                                            <j-textarea
+                                                v-model:value="
+                                                    modelRef.description
+                                                "
+                                                placeholder="请输入说明"
+                                                showCount
+                                                :maxlength="200"
+                                            />
+                                        </j-form-item>
+                                    </j-col>
+                                </j-row>
+                            </j-form>
+                            <div v-if="type === 'edit'">
+                                <PermissionButton
+                                    type="primary"
+                                    :loading="loading"
+                                    @click="saveBtn"
+                                    :hasPermission="[
+                                        'Northbound/DuerOS:add',
+                                        'Northbound/DuerOS:update',
                                     ]"
                                 >
-                                    <j-input
-                                        placeholder="请输入名称"
-                                        v-model:value="modelRef.name"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="12">
-                                <j-form-item
-                                    label="产品"
-                                    name="id"
-                                    :rules="[
-                                        {
-                                            required: true,
-                                            message: '请选择产品',
-                                        },
-                                    ]"
-                                >
-                                    <j-select
-                                        :disabled="
-                                            type !== 'edit' &&
-                                            modelRef.id &&
-                                            modelRef.id !== ':id'
-                                        "
-                                        placeholder="请选择产品"
-                                        v-model:value="modelRef.id"
-                                        show-search
-                                        @change="productChange"
-                                    >
-                                        <j-select-option
-                                            v-for="item in productList"
-                                            :key="item.id"
-                                            :value="item.id"
-                                            :label="item.name"
-                                            >{{ item.name }}</j-select-option
-                                        >
-                                    </j-select>
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="12">
-                                <j-form-item
-                                    name="applianceType"
-                                    :rules="{
-                                        required: true,
-                                        message: '请选择设备类型',
-                                    }"
-                                >
-                                    <template #label>
-                                        <span>
-                                            设备类型
-                                            <j-tooltip
-                                                title="DuerOS平台拟定的规范"
-                                            >
-                                                <AIcon
-                                                    type="QuestionCircleOutlined"
-                                                    style="margin-left: 2px"
-                                                />
-                                            </j-tooltip>
-                                        </span>
-                                    </template>
-                                    <j-select
-                                        placeholder="请选择设备类型"
-                                        v-model:value="modelRef.applianceType"
-                                        show-search
-                                        @change="typeChange"
-                                    >
-                                        <j-select-option
-                                            v-for="item in typeList"
-                                            :key="item.id"
-                                            :value="item.id"
-                                            :label="item.name"
-                                            >{{ item.name }}</j-select-option
-                                        >
-                                    </j-select>
-                                </j-form-item>
-                                <j-form-item
-                                    name="productName"
-                                    v-show="false"
-                                    label="产品名称"
-                                >
-                                    <j-input
-                                        v-model:value="modelRef.productName"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                            <j-col :span="24">
-                                <p>动作映射</p>
-                                <j-collapse
-                                    v-if="modelRef.actionMappings.length"
-                                    :activeKey="actionActiveKey"
-                                    @change="onActionCollChange"
-                                >
-                                    <j-collapse-panel
-                                        v-for="(
-                                            item, index
-                                        ) in modelRef.actionMappings"
-                                        :key="index"
-                                        :header="
-                                            item.action
-                                                ? getTypesActions(
-                                                      item.action,
-                                                  ).find(
-                                                      (i) =>
-                                                          i.id === item.action,
-                                                  )?.name
-                                                : `动作映射${index + 1}`
-                                        "
-                                    >
-                                        <template #extra
-                                            ><AIcon
-                                                type="DeleteOutlined"
-                                                @click="delItem(index)"
-                                        /></template>
-                                        <j-row :gutter="24">
-                                            <j-col :span="12">
-                                                <j-form-item
-                                                    :name="[
-                                                        'actionMappings',
-                                                        index,
-                                                        'action',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message: '请选择动作',
-                                                    }"
-                                                >
-                                                    <template #label>
-                                                        <span>
-                                                            动作
-                                                            <j-tooltip
-                                                                title="DuerOS平台拟定的设备类型具有的相关动作"
-                                                            >
-                                                                <AIcon
-                                                                    type="QuestionCircleOutlined"
-                                                                />
-                                                            </j-tooltip>
-                                                        </span>
-                                                    </template>
-                                                    <j-select
-                                                        placeholder="请选择动作"
-                                                        v-model:value="
-                                                            item.action
-                                                        "
-                                                        show-search
-                                                    >
-                                                        <j-select-option
-                                                            v-for="i in getTypesActions(
-                                                                item.action ||
-                                                                    '',
-                                                            )"
-                                                            :key="i.id"
-                                                            :value="i.id"
-                                                            :label="i.name"
-                                                            >{{
-                                                                i.name
-                                                            }}</j-select-option
-                                                        >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col :span="12">
-                                                <j-form-item
-                                                    :name="[
-                                                        'actionMappings',
-                                                        index,
-                                                        'actionType',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message: '请选择操作',
-                                                    }"
-                                                >
-                                                    <template #label>
-                                                        <span>
-                                                            操作
-                                                            <j-tooltip
-                                                                title="映射物联网平台中所选产品具备的动作"
-                                                            >
-                                                                <AIcon
-                                                                    type="QuestionCircleOutlined"
-                                                                />
-                                                            </j-tooltip>
-                                                        </span>
-                                                    </template>
-                                                    <j-select
-                                                        placeholder="请选择操作"
-                                                        v-model:value="
-                                                            item.actionType
-                                                        "
-                                                        show-search
-                                                        @change="
-                                                            () =>
-                                                                onActionTypeChange(
-                                                                    index,
-                                                                )
-                                                        "
-                                                    >
-                                                        <j-select-option
-                                                            value="command"
-                                                            >下发指令</j-select-option
-                                                        >
-                                                        <j-select-option
-                                                            value="latestData"
-                                                            >获取历史数据</j-select-option
-                                                        >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col
-                                                :span="24"
-                                                v-if="item.actionType"
-                                            >
-                                                <j-form-item
-                                                    :name="[
-                                                        'actionMappings',
-                                                        index,
-                                                        'command',
-                                                    ]"
-                                                >
-                                                    <Command
-                                                        ref="command"
-                                                        :metadata="
-                                                            findProductMetadata
-                                                        "
-                                                        v-model:modelValue="
-                                                            item.command
-                                                        "
-                                                        :actionType="
-                                                            item.actionType
-                                                        "
-                                                    />
-                                                </j-form-item>
-                                            </j-col>
-                                        </j-row>
-                                    </j-collapse-panel>
-                                </j-collapse>
-                                <j-card v-else>
-                                    <j-empty />
-                                </j-card>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-button
-                                    type="dashed"
-                                    style="width: 100%; margin-top: 10px"
-                                    @click="addItem"
-                                >
-                                    <AIcon
-                                        type="PlusOutlined"
-                                        style="margin-left: 2px"
-                                    />新增动作
-                                </j-button>
-                            </j-col>
-                            <j-col :span="24">
-                                <p style="margin-top: 20px">属性映射</p>
-                                <j-collapse
-                                    v-if="modelRef.propertyMappings.length"
-                                    :activeKey="propertyActiveKey"
-                                    @change="onPropertyCollChange"
-                                >
-                                    <j-collapse-panel
-                                        v-for="(
-                                            item, index
-                                        ) in modelRef.propertyMappings"
-                                        :key="index"
-                                        :header="
-                                            item.source
-                                                ? getDuerOSProperties(
-                                                      item.source,
-                                                  ).find(
-                                                      (i) =>
-                                                          i.id === item.source,
-                                                  )?.name
-                                                : `属性映射${index + 1}`
-                                        "
-                                    >
-                                        <template #extra
-                                            ><AIcon
-                                                type="DeleteOutlined"
-                                                @click="delPropertyItem(index)"
-                                        /></template>
-                                        <j-row :gutter="24">
-                                            <j-col :span="12">
-                                                <j-form-item
-                                                    label="DuerOS属性"
-                                                    :name="[
-                                                        'propertyMappings',
-                                                        index,
-                                                        'source',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message:
-                                                            '请选择DuerOS属性',
-                                                    }"
-                                                >
-                                                    <j-select
-                                                        placeholder="请选择DuerOS属性"
-                                                        v-model:value="
-                                                            item.source
-                                                        "
-                                                        show-search
-                                                    >
-                                                        <j-select-option
-                                                            v-for="i in getDuerOSProperties(
-                                                                item.source ||
-                                                                    '',
-                                                            )"
-                                                            :key="i.id"
-                                                            :value="i.id"
-                                                            >{{
-                                                                i.name
-                                                            }}</j-select-option
-                                                        >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                            <j-col :span="12">
-                                                <j-form-item
-                                                    label="平台属性"
-                                                    :name="[
-                                                        'propertyMappings',
-                                                        index,
-                                                        'target',
-                                                    ]"
-                                                    :rules="{
-                                                        required: true,
-                                                        message:
-                                                            '请选择平台属性',
-                                                    }"
-                                                >
-                                                    <j-select
-                                                        placeholder="请选择平台属性"
-                                                        v-model:value="
-                                                            item.target
-                                                        "
-                                                        mode="tags"
-                                                        show-search
-                                                    >
-                                                        <j-select-option
-                                                            v-for="i in getProductProperties(
-                                                                item.target,
-                                                            )"
-                                                            :key="i.id"
-                                                            :value="i.id"
-                                                            >{{
-                                                                i.name
-                                                            }}</j-select-option
-                                                        >
-                                                    </j-select>
-                                                </j-form-item>
-                                            </j-col>
-                                        </j-row>
-                                    </j-collapse-panel>
-                                </j-collapse>
-                                <j-card v-else>
-                                    <j-empty />
-                                </j-card>
-                            </j-col>
-                            <j-col :span="24">
-                                <j-button
-                                    type="dashed"
-                                    style="width: 100%; margin-top: 10px"
-                                    @click="addPropertyItem"
-                                >
-                                    <AIcon
-                                        type="PlusOutlined"
-                                        style="margin-left: 2px"
-                                    />新增属性
-                                </j-button>
-                            </j-col>
-                            <j-col :span="24" style="margin-top: 20px">
-                                <j-form-item
-                                    label="说明"
-                                    name="description"
-                                    :rules="{
-                                        max: 200,
-                                        message: '最多输入200个字符',
-                                    }"
-                                >
-                                    <j-textarea
-                                        v-model:value="modelRef.description"
-                                        placeholder="请输入说明"
-                                        showCount
-                                        :maxlength="200"
-                                    />
-                                </j-form-item>
-                            </j-col>
-                        </j-row>
-                    </j-form>
-                    <div v-if="type === 'edit'">
-                        <PermissionButton
-                            type="primary"
-                            :loading="loading"
-                            @click="saveBtn"
-                            :hasPermission="[
-                                'Northbound/DuerOS:add',
-                                'Northbound/DuerOS:update',
-                            ]"
-                        >
-                            保存
-                        </PermissionButton>
+                                    保存
+                                </PermissionButton>
+                            </div>
+                        </div>
                     </div>
-                </j-col>
-                <j-col :span="8">
-                    <Doc />
-                </j-col>
-            </j-row>
-        </j-card>
+                    <div class="right">
+                        <Doc />
+                    </div>
+                </div>
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
@@ -504,7 +546,7 @@ const onActionTypeChange = (_index: number) => {
             properties: undefined,
             functionId: undefined,
             inputs: [],
-            value: undefined
+            value: undefined,
         },
     };
 };
@@ -720,4 +762,23 @@ watch(
     },
     { immediate: true, deep: true },
 );
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="less">
+.box {
+    position: relative;
+    .left {
+        .left-content {
+            width: 66%;
+        }
+    }
+    .right {
+        width: 33%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        overflow-y: auto;
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Northbound/DuerOS/index.vue b/src/views/Northbound/DuerOS/index.vue
index 4e4f2158..409a476d 100644
--- a/src/views/Northbound/DuerOS/index.vue
+++ b/src/views/Northbound/DuerOS/index.vue
@@ -5,122 +5,138 @@
             target="northbound-dueros"
             @search="handleSearch"
         />
-        <JProTable
-            ref="instanceRef"
-            :columns="columns"
-            :request="query"
-            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
-            :params="params"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        type="primary"
-                        @click="handleAdd"
-                        hasPermission="Northbound/DuerOS:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                </j-space>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    @click="handleView(slotProps.id)"
-                    :actions="getActions(slotProps, 'card')"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
-                        enabled: 'processing',
-                        disabled: 'error',
-                    }"
-                >
-                    <template #img>
-                        <img :src="getImage('/cloud/dueros.png')" />
-                    </template>
-                    <template #content>
-                        <Ellipsis style="width: calc(100% - 100px)">
-                            <span style="font-size: 16px; font-weight: 600">
-                                {{ slotProps.name }}
-                            </span>
-                        </Ellipsis>
-                        <j-row style="margin-top: 15px">
-                            <j-col :span="12">
-                                <div class="card-item-content-text">产品</div>
-                                <Ellipsis>
-                                    <div>{{ slotProps?.productName }}</div>
-                                </Ellipsis>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    设备类型
-                                </div>
-                                <Ellipsis>
-                                    <div>{{ slotProps?.applianceType?.text }}</div>
-                                </Ellipsis>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
+        <FullPage>
+            <JProTable
+                ref="instanceRef"
+                :columns="columns"
+                :request="query"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <j-space>
                         <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="'Northbound/DuerOS:' + item.key"
+                            type="primary"
+                            @click="handleAdd"
+                            hasPermission="Northbound/DuerOS:add"
                         >
-                            <AIcon
-                                type="DeleteOutlined"
-                                v-if="item.key === 'delete'"
-                            />
-                            <template v-else>
-                                <AIcon :type="item.icon" />
-                                <span>{{ item?.text }}</span>
-                            </template>
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
                         </PermissionButton>
-                    </template>
-                </CardBox>
-            </template>
-            <template #state="slotProps">
-                <BadgeStatus
-                    :status="slotProps.state?.value"
-                    :text="slotProps.state?.text"
-                    :statusNames="{
-                        enabled: 'processing',
-                        disabled: 'error',
-                    }"
-                />
-            </template>
-            <template #applianceType="slotProps">
-                {{ slotProps.applianceType.text }}
-            </template>
-            <template #action="slotProps">
-                <j-space>
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
+                    </j-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        @click="handleView(slotProps.id)"
+                        :actions="getActions(slotProps, 'card')"
+                        :status="slotProps.state?.value"
+                        :statusText="slotProps.state?.text"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
                     >
-                        <PermissionButton
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            style="padding: 0 5px"
-                            @click="i.onClick"
-                            type="link"
-                            :danger="i.key === 'delete'"
-                            :hasPermission="i.key === 'view' ? true : 'Northbound/DuerOS:' + i.key"
+                        <template #img>
+                            <img :src="getImage('/cloud/dueros.png')" />
+                        </template>
+                        <template #content>
+                            <Ellipsis style="width: calc(100% - 100px)">
+                                <span style="font-size: 16px; font-weight: 600">
+                                    {{ slotProps.name }}
+                                </span>
+                            </Ellipsis>
+                            <j-row style="margin-top: 15px">
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        产品
+                                    </div>
+                                    <Ellipsis>
+                                        <div>{{ slotProps?.productName }}</div>
+                                    </Ellipsis>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        设备类型
+                                    </div>
+                                    <Ellipsis>
+                                        <div>
+                                            {{ slotProps?.applianceType?.text }}
+                                        </div>
+                                    </Ellipsis>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'Northbound/DuerOS:' + 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">
+                    <BadgeStatus
+                        :status="slotProps.state?.value"
+                        :text="slotProps.state?.text"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
+                    />
+                </template>
+                <template #applianceType="slotProps">
+                    {{ slotProps.applianceType.text }}
+                </template>
+                <template #action="slotProps">
+                    <j-space>
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                style="padding: 0 5px"
+                                @click="i.onClick"
+                                type="link"
+                                :danger="i.key === 'delete'"
+                                :hasPermission="
+                                    i.key === 'view'
+                                        ? true
+                                        : 'Northbound/DuerOS:' + i.key
+                                "
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/device/Instance/Detail/ChildDevice/index.vue b/src/views/device/Instance/Detail/ChildDevice/index.vue
index c39b0489..7164bb29 100644
--- a/src/views/device/Instance/Detail/ChildDevice/index.vue
+++ b/src/views/device/Instance/Detail/ChildDevice/index.vue
@@ -1,114 +1,113 @@
 <template>
-    <j-card>
-        <SaveChild
-            v-if="childVisible"
-            @close-child-save="closeChildSave"
-            :childData="_current"
+    <SaveChild
+        v-if="childVisible"
+        @close-child-save="closeChildSave"
+        :childData="_current"
+    />
+    <div v-else>
+        <pro-search
+            :columns="columns"
+            target="child-device"
+            @search="handleSearch"
+            class="device-child-device-search"
         />
-        <div v-else>
-            <pro-search
-                :columns="columns"
-                target="child-device"
-                @search="handleSearch"
-                class="child-device-search"
-            />
-            <JProTable
-                ref="childDeviceRef"
-                :columns="columns"
-                :request="query"
-                :defaultParams="{
-                    terms: [
-                        {
-                            column: 'parentId',
-                            value: detail?.id || '',
-                            termType: 'eq',
-                        },
-                    ],
-                }"
-                :rowSelection="{
-                    selectedRowKeys: _selectedRowKeys,
-                    onChange: onSelectChange,
-                }"
-                @cancelSelect="cancelSelect"
-                :params="params"
-                :model="'TABLE'"
-            >
-                <template #headerTitle>
-                    <j-space>
+        <!-- <j-divider /> -->
+        <JProTable
+            ref="childDeviceRef"
+            :columns="columns"
+            :request="query"
+            :bodyStyle="{
+                padding: 0
+            }"
+            :defaultParams="{
+                terms: [
+                    {
+                        column: 'parentId',
+                        value: detail?.id || '',
+                        termType: 'eq',
+                    },
+                ],
+            }"
+            :rowSelection="{
+                selectedRowKeys: _selectedRowKeys,
+                onChange: onSelectChange,
+            }"
+            @cancelSelect="cancelSelect"
+            :params="params"
+            :model="'TABLE'"
+        >
+            <template #rightExtraRender>
+                <j-space>
+                    <PermissionButton
+                        type="primary"
+                        v-if="
+                            detail?.accessProvider === 'official-edge-gateway'
+                        "
+                        hasPermission="device/Instance:update"
+                        @click="
+                            _current = {};
+                            childVisible = true;
+                        "
+                        >新增并绑定</PermissionButton
+                    >
+                    <PermissionButton
+                        type="primary"
+                        @click="visible = true"
+                        hasPermission="device/Instance:update"
+                    >
+                        绑定</PermissionButton
+                    >
+                    <PermissionButton
+                        type="primary"
+                        hasPermission="device/Instance:update"
+                        :popConfirm="{
+                            title: '确定解绑吗？',
+                            onConfirm: handleUnBind,
+                        }"
+                        >批量解除</PermissionButton
+                    >
+                </j-space>
+            </template>
+            <template #registryTime="slotProps">
+                {{
+                    slotProps.registryTime
+                        ? moment(slotProps.registryTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #state="slotProps">
+                <j-badge
+                    :text="slotProps.state.text"
+                    :status="statusMap.get(slotProps.state.value)"
+                />
+            </template>
+            <template #action="slotProps">
+                <j-space :size="16">
+                    <template
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                    >
                         <PermissionButton
-                            type="primary"
-                            v-if="
-                                detail?.accessProvider ===
-                                'official-edge-gateway'
-                            "
-                            hasPermission="device/Instance:update"
-                            @click="
-                                _current = {};
-                                childVisible = true;
-                            "
-                            >新增并绑定</PermissionButton
-                        >
-                        <PermissionButton
-                            type="primary"
-                            @click="visible = true"
-                            hasPermission="device/Instance:update"
-                        >
-                            绑定</PermissionButton
-                        >
-                        <PermissionButton
-                            type="primary"
-                            hasPermission="device/Instance:update"
-                            :popConfirm="{
-                                title: '确定解绑吗？',
-                                onConfirm: handleUnBind,
+                            :disabled="i.disabled"
+                            :popConfirm="i.popConfirm"
+                            :tooltip="{
+                                ...i.tooltip,
                             }"
-                            >批量解除</PermissionButton
+                            @click="i.onClick"
+                            type="link"
+                            style="padding: 0px"
+                            :hasPermission="'device/Instance:' + i.key"
                         >
-                    </j-space>
-                </template>
-                <template #registryTime="slotProps">
-                    {{
-                        slotProps.registryTime
-                            ? moment(slotProps.registryTime).format(
-                                  'YYYY-MM-DD HH:mm:ss',
-                              )
-                            : ''
-                    }}
-                </template>
-                <template #state="slotProps">
-                    <j-badge
-                        :text="slotProps.state.text"
-                        :status="statusMap.get(slotProps.state.value)"
-                    />
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
-                        <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"
-                                :hasPermission="'device/Instance:' + i.key"
-                            >
-                                <template #icon
-                                    ><AIcon :type="i.icon"
-                                /></template>
-                            </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-            </JProTable>
-            <BindChildDevice v-if="visible" @change="closeBindDevice" />
-        </div>
-    </j-card>
+                            <template #icon><AIcon :type="i.icon" /></template>
+                        </PermissionButton>
+                    </template>
+                </j-space>
+            </template>
+        </JProTable>
+        <BindChildDevice v-if="visible" @change="closeBindDevice" />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -147,10 +146,10 @@ const columns = [
         dataIndex: 'id',
         key: 'id',
         ellipsis: true,
-        search:{
-            type:'string',
-            defaultTermType: 'eq'
-        }
+        search: {
+            type: 'string',
+            defaultTermType: 'eq',
+        },
     },
     {
         title: '设备名称',
@@ -303,12 +302,8 @@ const closeChildSave = () => {
 };
 </script>
 
-<style scoped lang="less">
-.child-device-search {
-    border-bottom: 1px solid #f0f0f0;
-}
-
-:deep(._jtable-body_1eyxz_1 ._jtable-body-header_1eyxz_6) {
-    justify-content: flex-end;
+<style lang="less">
+.device-child-device-search {
+    padding: 0px;
 }
 </style>
diff --git a/src/views/device/Instance/Detail/Diagnose/index.vue b/src/views/device/Instance/Detail/Diagnose/index.vue
index fd3a554d..fbdd85a3 100644
--- a/src/views/device/Instance/Detail/Diagnose/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/index.vue
@@ -1,96 +1,84 @@
 <template>
-    <j-card>
-        <div class="diagnose">
-            <div
-                class="diagnose-header"
-                :style="{ background: headerColorMap.get(topState) }"
-            >
-                <div class="diagnose-top">
-                    <div class="diagnose-img">
-                        <div
-                            v-if="topState === 'loading'"
-                            style="
-                                width: 100%;
-                                height: 100%;
-                                position: relative;
-                            "
-                        >
-                            <img
-                                :src="headerImgMap.get(topState)"
-                                style="
-                                    height: 100%;
-                                    position: absolute;
-                                    z-index: 2;
-                                "
-                            />
-                            <img
-                                :src="getImage('/diagnose/loading-1.png')"
-                                class="diagnose-loading"
-                                style="height: 100%"
-                            />
-                        </div>
+    <div class="diagnose">
+        <div
+            class="diagnose-header"
+            :style="{ background: headerColorMap.get(topState) }"
+        >
+            <div class="diagnose-top">
+                <div class="diagnose-img">
+                    <div
+                        v-if="topState === 'loading'"
+                        style="width: 100%; height: 100%; position: relative"
+                    >
                         <img
-                            v-else
                             :src="headerImgMap.get(topState)"
+                            style="height: 100%; position: absolute; z-index: 2"
+                        />
+                        <img
+                            :src="getImage('/diagnose/loading-1.png')"
+                            class="diagnose-loading"
                             style="height: 100%"
                         />
                     </div>
-                    <div class="diagnose-text">
-                        <div class="diagnose-title">
-                            {{ headerTitleMap.get(topState) }}
-                        </div>
-                        <div class="diagnose-desc">
-                            <template v-if="topState !== 'loading'">{{
-                                headerDescMap.get(topState)
-                            }}</template>
-                            <template v-else>已诊断{{ count }}个</template>
-                        </div>
-                    </div>
-                </div>
-                <div class="diagnose-progress">
-                    <j-progress
-                        :percent="percent"
-                        :showInfo="false"
-                        size="small"
-                        :strokeColor="progressMap.get(topState)"
-                        style="width: 100%"
+                    <img
+                        v-else
+                        :src="headerImgMap.get(topState)"
+                        style="height: 100%"
                     />
                 </div>
-                <div class="diagnose-radio">
-                    <div
-                        class="diagnose-radio-item"
-                        :class="
-                            item.key === 'message' && topState !== 'success'
-                                ? 'disabled'
-                                : ''
-                        "
-                        v-for="item in tabList"
-                        :key="item.key"
-                        :style="
-                            activeKey === item.key ? { ...activeStyle } : {}
-                        "
-                        @click="onTabChange(item.key)"
-                    >
-                        {{ item.text }}
+                <div class="diagnose-text">
+                    <div class="diagnose-title">
+                        {{ headerTitleMap.get(topState) }}
+                    </div>
+                    <div class="diagnose-desc">
+                        <template v-if="topState !== 'loading'">{{
+                            headerDescMap.get(topState)
+                        }}</template>
+                        <template v-else>已诊断{{ count }}个</template>
                     </div>
                 </div>
             </div>
-            <div>
-                <template v-if="!first">
-                    <Message v-show="activeKey === 'message'" />
-                </template>
-                <template v-if="flag">
-                    <Status
-                        v-show="activeKey !== 'message'"
-                        :providerType="providerType"
-                        @countChange="countChange"
-                        @percentChange="percentChange"
-                        @stateChange="stateChange"
-                    />
-                </template>
+            <div class="diagnose-progress">
+                <j-progress
+                    :percent="percent"
+                    :showInfo="false"
+                    size="small"
+                    :strokeColor="progressMap.get(topState)"
+                    style="width: 100%"
+                />
+            </div>
+            <div class="diagnose-radio">
+                <div
+                    class="diagnose-radio-item"
+                    :class="
+                        item.key === 'message' && topState !== 'success'
+                            ? 'disabled'
+                            : ''
+                    "
+                    v-for="item in tabList"
+                    :key="item.key"
+                    :style="activeKey === item.key ? { ...activeStyle } : {}"
+                    @click="onTabChange(item.key)"
+                >
+                    {{ item.text }}
+                </div>
             </div>
         </div>
-    </j-card>
+        <div>
+            <template v-if="!first">
+                <Message v-show="activeKey === 'message'" />
+            </template>
+            <template v-if="flag">
+                <Status
+                    v-show="activeKey !== 'message'"
+                    :providerType="providerType"
+                    @countChange="countChange"
+                    @percentChange="percentChange"
+                    @stateChange="stateChange"
+                />
+            </template>
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -160,7 +148,7 @@ const countChange = (num: number) => {
 };
 
 const init = () => {
-    flag.value = true
+    flag.value = true;
     activeKey.value = 'status';
     const provider = instanceStore.current?.accessProvider;
     if (provider === 'fixed-media' || provider === 'gb28181-2016') {
@@ -175,16 +163,16 @@ const init = () => {
         providerType.value = 'network';
     }
     topState.value = 'loading';
-}
+};
 
 onMounted(() => {
     setTimeout(() => {
-        init()
-    }, 500)
+        init();
+    }, 500);
 });
 
 onUnmounted(() => {
-    flag.value = false
+    flag.value = false;
 });
 </script>
 
diff --git a/src/views/device/Instance/Detail/EdgeMap/index.vue b/src/views/device/Instance/Detail/EdgeMap/index.vue
index 3f6f9e3f..c788901b 100644
--- a/src/views/device/Instance/Detail/EdgeMap/index.vue
+++ b/src/views/device/Instance/Detail/EdgeMap/index.vue
@@ -1,6 +1,6 @@
 <template>
     <j-spin :spinning="loading" v-if="metadata.properties.length">
-        <j-card>
+        <j-card :bordered="false" style="padding: 0">
             <template #extra>
                 <j-space>
                     <j-button @click="visible = true">批量映射</j-button>
@@ -188,7 +188,7 @@
             :edgeId="instanceStore.current.parentId"
         />
     </j-spin>
-    <j-card v-else>
+    <j-card v-else :bordered="false" style="padding: 0">
         <JEmpty description="暂无数据，请配置物模型" style="margin: 10% 0" />
     </j-card>
 </template>
diff --git a/src/views/device/Instance/Detail/Function/index.vue b/src/views/device/Instance/Detail/Function/index.vue
index 86b995fd..b758faee 100644
--- a/src/views/device/Instance/Detail/Function/index.vue
+++ b/src/views/device/Instance/Detail/Function/index.vue
@@ -1,23 +1,21 @@
 <template>
-    <j-card>
-        <j-empty
-            v-if="!metadata || (metadata && !metadata.functions.length)"
-            style="margin-top: 50px"
-        >
-            <template #description>
-                请配置对应产品的
-                <!-- <a @click="emits('onJump', 'Metadata')">物模型属性功能</a> -->
-                <a @click="onJump">物模型属性功能</a>
-            </template>
-        </j-empty>
-        <template v-else>
-            <j-tabs v-model:activeKey="activeKey">
-                <j-tab-pane key="Simple" tab="精简模式" />
-                <j-tab-pane key="Advance" tab="高级模式" />
-            </j-tabs>
-            <component :is="tabs[activeKey]" />
+    <j-empty
+        v-if="!metadata || (metadata && !metadata.functions.length)"
+        style="margin-top: 50px"
+    >
+        <template #description>
+            请配置对应产品的
+            <!-- <a @click="emits('onJump', 'Metadata')">物模型属性功能</a> -->
+            <a @click="onJump">物模型属性功能</a>
         </template>
-    </j-card>
+    </j-empty>
+    <template v-else>
+        <j-tabs v-model:activeKey="activeKey">
+            <j-tab-pane key="Simple" tab="精简模式" />
+            <j-tab-pane key="Advance" tab="高级模式" />
+        </j-tabs>
+        <component :is="tabs[activeKey]" />
+    </template>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/device/Instance/Detail/Info/index.vue b/src/views/device/Instance/Detail/Info/index.vue
index a16996f6..38616024 100644
--- a/src/views/device/Instance/Detail/Info/index.vue
+++ b/src/views/device/Instance/Detail/Info/index.vue
@@ -1,90 +1,88 @@
 <template>
-    <j-card>
-        <j-descriptions bordered>
-            <template #title>
-                设备信息
-                <PermissionButton
-                    type="link"
-                    @click="visible = true"
-                    hasPermission="device/Instance:update"
-                >
-                    <template #icon><AIcon type="EditOutlined" /></template>
-                    编辑
-                </PermissionButton>
-            </template>
-            <j-descriptions-item label="设备ID">{{
-                instanceStore.current?.id
-            }}</j-descriptions-item>
-            <j-descriptions-item label="产品名称">{{
-                instanceStore.current?.productName
-            }}</j-descriptions-item>
-            <j-descriptions-item label="产品分类">{{
-                instanceStore.current?.classifiedName
-            }}</j-descriptions-item>
-            <j-descriptions-item label="设备类型">{{
-                instanceStore.current?.deviceType?.text
-            }}</j-descriptions-item>
-            <j-descriptions-item label="固件版本">{{
-                instanceStore.current?.firmwareInfo?.version
-            }}</j-descriptions-item>
-            <j-descriptions-item label="连接协议">{{
-                instanceStore.current?.transport
-            }}</j-descriptions-item>
-            <j-descriptions-item label="消息协议">{{
-                instanceStore.current?.protocolName
-            }}</j-descriptions-item>
-            <j-descriptions-item label="创建时间">{{
-                instanceStore.current?.createTime
-                    ? moment(instanceStore.current?.createTime).format(
-                          'YYYY-MM-DD HH:mm:ss',
-                      )
-                    : ''
-            }}</j-descriptions-item>
-            <j-descriptions-item label="注册时间">{{
-                instanceStore.current?.registerTime
-                    ? moment(instanceStore.current?.registerTime).format(
-                          'YYYY-MM-DD HH:mm:ss',
-                      )
-                    : ''
-            }}</j-descriptions-item>
-            <j-descriptions-item label="最后上线时间">{{
-                instanceStore.current?.onlineTime
-                    ? moment(instanceStore.current?.onlineTime).format(
-                          'YYYY-MM-DD HH:mm:ss',
-                      )
-                    : ''
-            }}</j-descriptions-item>
-            <j-descriptions-item
-                label="父设备"
-                v-if="
-                    instanceStore.current?.deviceType?.value === 'childrenDevice'
-                "
-                >{{ instanceStore.current?.parentId }}</j-descriptions-item
+    <j-descriptions bordered>
+        <template #title>
+            设备信息
+            <PermissionButton
+                type="link"
+                @click="visible = true"
+                hasPermission="device/Instance:update"
             >
-            <j-descriptions-item label="说明">{{
-                instanceStore.current?.description
-            }}</j-descriptions-item>
-        </j-descriptions>
-        <Config />
-        <Tags
+                <template #icon><AIcon type="EditOutlined" /></template>
+                编辑
+            </PermissionButton>
+        </template>
+        <j-descriptions-item label="设备ID">{{
+            instanceStore.current?.id
+        }}</j-descriptions-item>
+        <j-descriptions-item label="产品名称">{{
+            instanceStore.current?.productName
+        }}</j-descriptions-item>
+        <j-descriptions-item label="产品分类">{{
+            instanceStore.current?.classifiedName
+        }}</j-descriptions-item>
+        <j-descriptions-item label="设备类型">{{
+            instanceStore.current?.deviceType?.text
+        }}</j-descriptions-item>
+        <j-descriptions-item label="固件版本">{{
+            instanceStore.current?.firmwareInfo?.version
+        }}</j-descriptions-item>
+        <j-descriptions-item label="连接协议">{{
+            instanceStore.current?.transport
+        }}</j-descriptions-item>
+        <j-descriptions-item label="消息协议">{{
+            instanceStore.current?.protocolName
+        }}</j-descriptions-item>
+        <j-descriptions-item label="创建时间">{{
+            instanceStore.current?.createTime
+                ? moment(instanceStore.current?.createTime).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                : ''
+        }}</j-descriptions-item>
+        <j-descriptions-item label="注册时间">{{
+            instanceStore.current?.registerTime
+                ? moment(instanceStore.current?.registerTime).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                : ''
+        }}</j-descriptions-item>
+        <j-descriptions-item label="最后上线时间">{{
+            instanceStore.current?.onlineTime
+                ? moment(instanceStore.current?.onlineTime).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                : ''
+        }}</j-descriptions-item>
+        <j-descriptions-item
+            label="父设备"
             v-if="
-                instanceStore.current?.tags &&
-                instanceStore.current?.tags.length > 0
+                instanceStore.current?.deviceType?.value === 'childrenDevice'
             "
-        />
-        <Relation
-            v-if="
-                instanceStore.current?.relations &&
-                instanceStore.current?.relations.length > 0
-            "
-        />
-        <Save
-            v-if="visible"
-            :data="instanceStore.current"
-            @close="visible = false"
-            @save="saveBtn"
-        />
-    </j-card>
+            >{{ instanceStore.current?.parentId }}</j-descriptions-item
+        >
+        <j-descriptions-item label="说明">{{
+            instanceStore.current?.description
+        }}</j-descriptions-item>
+    </j-descriptions>
+    <Config />
+    <Tags
+        v-if="
+            instanceStore.current?.tags &&
+            instanceStore.current?.tags.length > 0
+        "
+    />
+    <Relation
+        v-if="
+            instanceStore.current?.relations &&
+            instanceStore.current?.relations.length > 0
+        "
+    />
+    <Save
+        v-if="visible"
+        :data="instanceStore.current"
+        @close="visible = false"
+        @save="saveBtn"
+    />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Log/index.vue b/src/views/device/Instance/Detail/Log/index.vue
index 2ee9bf3d..b20e8991 100644
--- a/src/views/device/Instance/Detail/Log/index.vue
+++ b/src/views/device/Instance/Detail/Log/index.vue
@@ -1,51 +1,47 @@
 <template>
-    <j-card>
-        <pro-search
-            :columns="columns"
-            target="device-instance-log"
-            @search="handleSearch"
-            type="simple"
-            class="search"
-        />
-        <JProTable
-            ref="instanceRefLog"
-            :columns="columns"
-            :request="(e: Record<string, any>) => queryLog(instanceStore.current.id, e)"
-            model="TABLE"
-            :defaultParams="{ sorts: [{ name: 'timestamp', order: 'desc' }] }"
-            :params="params"
-            :bodyStyle="{ padding: 0 }"
-        >
-            <template #type="slotProps">
-                {{ slotProps?.type?.text }}
-            </template>
-            <template #timestamp="slotProps">
-                {{
-                    slotProps.timestamp
-                        ? moment(slotProps.timestamp).format(
-                              'YYYY-MM-DD HH:mm:ss',
-                          )
-                        : ''
-                }}
-            </template>
-            <template #action="slotProps">
-                <j-space>
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
+    <pro-search
+        :columns="columns"
+        target="device-instance-log"
+        @search="handleSearch"
+        type="simple"
+        class="device-log-search"
+    />
+    <JProTable
+        ref="instanceRefLog"
+        :columns="columns"
+        :request="(e: Record<string, any>) => queryLog(instanceStore.current.id, e)"
+        model="TABLE"
+        :defaultParams="{ sorts: [{ name: 'timestamp', order: 'desc' }] }"
+        :params="params"
+        :bodyStyle="{ padding: 0 }"
+    >
+        <template #type="slotProps">
+            {{ slotProps?.type?.text }}
+        </template>
+        <template #timestamp="slotProps">
+            {{
+                slotProps.timestamp
+                    ? moment(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss')
+                    : ''
+            }}
+        </template>
+        <template #action="slotProps">
+            <j-space>
+                <template
+                    v-for="i in getActions(slotProps, 'table')"
+                    :key="i.key"
+                >
+                    <j-button
+                        @click="i.onClick"
+                        type="link"
+                        style="padding: 0px"
                     >
-                        <j-button
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
-                        >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </j-button>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
-    </j-card>
+                        <template #icon><AIcon :type="i.icon" /></template>
+                    </j-button>
+                </template>
+            </j-space>
+        </template>
+    </JProTable>
 </template>
 
 <script lang="ts" setup>
@@ -125,11 +121,7 @@ const getActions = (
             onClick: () => {
                 let content = '';
                 try {
-                    content = JSON.stringify(
-                        JSON.parse(data.content),
-                        null,
-                        2,
-                    );
+                    content = JSON.stringify(JSON.parse(data.content), null, 2);
                 } catch (error) {
                     content = data.content;
                 }
@@ -139,7 +131,7 @@ const getActions = (
                     content: h(Textarea, {
                         bordered: false,
                         rows: 15,
-                        value: content
+                        value: content,
                     }),
                 });
             },
@@ -152,8 +144,8 @@ const handleSearch = (_params: any) => {
 };
 </script>
 
-<style lang="less" scoped>
-.search {
+<style lang="less">
+.device-log-search {
     padding: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Parsing/index.vue b/src/views/device/Instance/Detail/Parsing/index.vue
index 393407df..31e69529 100644
--- a/src/views/device/Instance/Detail/Parsing/index.vue
+++ b/src/views/device/Instance/Detail/Parsing/index.vue
@@ -1,187 +1,262 @@
 
 <template>
-    <j-card>
-        <div>
-            <div class="top">
-                <div class="top-left">
-                    <div>
-                        <AIcon type="ExclamationCircleOutlined" />
-                        <template v-if="topTitle === 'rest'">
-                            当前数据解析内容已脱离产品影响，
-                            <PermissionButton type="link" hasPermission="device/Instance:update" @click="rest()">
-                                重置
-                            </PermissionButton>
-                            后将继承产品数据解析内容
+    <div>
+        <div class="top">
+            <div class="top-left">
+                <div>
+                    <AIcon type="ExclamationCircleOutlined" />
+                    <template v-if="topTitle === 'rest'">
+                        当前数据解析内容已脱离产品影响，
+                        <PermissionButton
+                            type="link"
+                            hasPermission="device/Instance:update"
+                            @click="rest()"
+                        >
+                            重置
+                        </PermissionButton>
+                        后将继承产品数据解析内容
+                    </template>
+                    <template v-else>
+                        当前数据解析内容继承自产品,
+                        <PermissionButton
+                            type="link"
+                            hasPermission="device/Instance:update"
+                            @click="readOnly = false"
+                            :style="color"
+                        >
+                            修改
+                        </PermissionButton>
+                        后将脱离产品影响。
+                    </template>
+                </div>
+            </div>
+            <div>
+                脚本语言:
+                <j-select
+                    :defaultValue="'JavaScript'"
+                    style="width: 200px; margin-left: 5px"
+                >
+                    <j-select-option value="JavaScript"
+                        >JavaScript(ECMAScript 5)</j-select-option
+                    >
+                </j-select>
+                <AIcon
+                    type="ExpandOutlined"
+                    style="margin-left: 20px"
+                    @click="toggle"
+                />
+            </div>
+        </div>
+        <div class="edit" ref="el">
+            <div
+                v-show="readOnly"
+                class="edit-only"
+                @click="
+                    () => {
+                        message.warning({
+                            key: 1,
+                            content: () => '请点击上方修改字样,用以编辑脚本',
+                            style: {
+                                marginTop: '260px',
+                            },
+                        });
+                    }
+                "
+            ></div>
+            <j-monaco-editor
+                language="javascript"
+                style="height: 100%"
+                theme="vs"
+                v-model:modelValue="editorValue"
+            />
+        </div>
+        <div class="bottom">
+            <div style="width: 49.5%">
+                <div class="bottom-title">
+                    <div class="bottom-title-text">模拟输入</div>
+                    <div class="bottom-title-topic">
+                        <template
+                            v-if="instanceStore.current.transport === 'MQTT'"
+                        >
+                            <div style="margin-right: 5px">Topic:</div>
+                            <j-auto-complete
+                                placeholder="请输入Topic"
+                                style="width: 300px"
+                                :options="topicList"
+                                :allowClear="true"
+                                :filterOption="filterOption"
+                                v-model:value="topic"
+                            />
                         </template>
                         <template v-else>
-                            当前数据解析内容继承自产品,
-                            <PermissionButton type="link" hasPermission="device/Instance:update" @click="readOnly = false"
-                                :style="color">
-                                修改
-                            </PermissionButton>
-                            后将脱离产品影响。
+                            <div style="margin-right: 5px">URL:</div>
+                            <j-input
+                                placeholder="请输入URL"
+                                v-model:value="url"
+                                style="width: 300px"
+                            ></j-input>
                         </template>
                     </div>
                 </div>
-                <div>
-                    脚本语言:
-                    <j-select :defaultValue="'JavaScript'" style="width: 200px;margin-left: 5px;">
-                        <j-select-option value="JavaScript">JavaScript(ECMAScript 5)</j-select-option>
-                    </j-select>
-                    <AIcon type="ExpandOutlined" style="margin-left: 20px;" @click="toggle" />
-                </div>
+                <j-textarea
+                    :rows="5"
+                    placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串"
+                    style="margin-top: 10px"
+                    v-model:value="simulation"
+                />
             </div>
-            <div class="edit" ref="el">
-                <div v-show="readOnly" class="edit-only" @click="() => {
-                    message.warning({
-                        key: 1,
-                        content: () => '请点击上方修改字样,用以编辑脚本',
-                        style: {
-                            marginTop: '260px'
-                        }
-
-                    })
-                }"></div>
-                <j-monaco-editor language="javascript" style="height: 100%;" theme="vs" v-model:modelValue="editorValue" />
-            </div>
-            <div class="bottom">
-                <div style="width: 49.5%;">
-                    <div class="bottom-title">
-                        <div class="bottom-title-text">模拟输入</div>
-                        <div class="bottom-title-topic">
-                            <template v-if="instanceStore.current.transport === 'MQTT'">
-                                <div style="margin-right: 5px;">Topic:</div>
-                                <j-auto-complete placeholder="请输入Topic" style="width: 300px" :options="topicList"
-                                    :allowClear="true" :filterOption="filterOption" v-model:value="topic" />
-                            </template>
-                            <template v-else>
-                                <div style="margin-right: 5px;">URL:</div>
-                                <j-input placeholder="请输入URL" v-model:value="url" style="width: 300px"></j-input>
-                            </template>
-                        </div>
-
-                    </div>
-                    <j-textarea :rows="5" placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串" style="margin-top: 10px;"
-                        v-model:value="simulation" />
-                </div>
-                <div style="width: 49.5%;">
-                    <div class="bottom-title">
-                        <div class="bottom-title-text">运行结果</div>
-                    </div>
-                    <j-textarea :autoSize="{ minRows: 5 }" :style="resStyle" v-model:value="result" />
+            <div style="width: 49.5%">
+                <div class="bottom-title">
+                    <div class="bottom-title-text">运行结果</div>
                 </div>
+                <j-textarea
+                    :autoSize="{ minRows: 5 }"
+                    :style="resStyle"
+                    v-model:value="result"
+                />
             </div>
         </div>
-        <div style="margin-top: 10px;margin-left: 10px;">
-            <PermissionButton type="primary" hasPermission="device/Instance:update" :loading="loading"
-                :disabled="isDisabled" @click="debug()" :tooltip="{
-                    title: '需输入脚本和模拟数据后再点击',
-                }">
-                调试
-            </PermissionButton>
-            <PermissionButton hasPermission="device/Instance:update" :loading="loading" :disabled="!isTest" @click="save()"
-                :style="{ marginLeft: '10px' }" :tooltip="{
-                    title: isTest ? '' : '请先调试',
-                }">
-                保存
-            </PermissionButton>
-        </div>
-    </j-card>
+    </div>
+    <div style="margin-top: 10px; margin-left: 10px">
+        <PermissionButton
+            type="primary"
+            hasPermission="device/Instance:update"
+            :loading="loading"
+            :disabled="isDisabled"
+            @click="debug()"
+            :tooltip="{
+                title: '需输入脚本和模拟数据后再点击',
+            }"
+        >
+            调试
+        </PermissionButton>
+        <PermissionButton
+            hasPermission="device/Instance:update"
+            :loading="loading"
+            :disabled="!isTest"
+            @click="save()"
+            :style="{ marginLeft: '10px' }"
+            :tooltip="{
+                title: isTest ? '' : '请先调试',
+            }"
+        >
+            保存
+        </PermissionButton>
+    </div>
 </template>
 
 <script setup lang='ts' name="Parsing">
-import PermissionButton from '@/components/PermissionButton/index.vue'
+import PermissionButton from '@/components/PermissionButton/index.vue';
 // import MonacoEditor from '@/components/MonacoEditor/index.vue';
-import { useFullscreen } from '@vueuse/core'
+import { useFullscreen } from '@vueuse/core';
 import { useInstanceStore } from '@/store/instance';
 import {
     deviceCode,
     getProtocal,
     testCode,
     saveDeviceCode,
-    delDeviceCode
-} from '@/api/device/instance'
+    delDeviceCode,
+} from '@/api/device/instance';
 import { message } from 'jetlinks-ui-components';
 import { isBoolean } from 'lodash';
 
 const defaultValue =
     '//解码函数\r\nfunction decode(context) {\r\n    //原始报文\r\n    var buffer = context.payload();\r\n    // 转为json\r\n    // var json = context.json();\r\n    //mqtt 时通过此方法获取topic\r\n    // var topic = context.topic();\r\n\r\n    // 提取变量\r\n    // var topicVars = context.pathVars("/{deviceId}/**",topic)\r\n    //温度属性\r\n    var temperature = buffer.getShort(3) * 10;\r\n    //湿度属性\r\n    var humidity = buffer.getShort(6) * 10;\r\n    return {\r\n        "temperature": temperature,\r\n        "humidity": humidity\r\n    };\r\n}\r\n';
 
-const el = ref<HTMLElement | null>(null)
-const { toggle } = useFullscreen(el)
+const el = ref<HTMLElement | null>(null);
+const { toggle } = useFullscreen(el);
 const instanceStore = useInstanceStore();
 
-
-const topTitle = ref<string>('')
-const readOnly = ref<boolean>(true)
-const url = ref<string>('')
-const topic = ref<string>('')
-const topicList = ref([])
-const simulation = ref<string>('')
-const resultValue = ref<any>({})
-const loading = ref<boolean>(false)
-const isTest = ref<boolean>(false)
-const editorValue = ref<string>('')
+const topTitle = ref<string>('');
+const readOnly = ref<boolean>(true);
+const url = ref<string>('');
+const topic = ref<string>('');
+const topicList = ref([]);
+const simulation = ref<string>('');
+const resultValue = ref<any>({});
+const loading = ref<boolean>(false);
+const isTest = ref<boolean>(false);
+const editorValue = ref<string>('');
 
 const color = computed(() => ({
-    color: readOnly.value ? '#415ed1' : '#a6a6a6'
-}))
-const resStyle = computed(() => (isBoolean(resultValue.value.success) ? {
-    'margin-top': '10px',
-    'border-color': resultValue.value.success ? 'green' : 'red'
-} : {
-    'margin-top': '10px',
-}))
-const filterOption =  (inputValue: any, option: any) => option!.value.indexOf(inputValue) !== -1
+    color: readOnly.value ? '#415ed1' : '#a6a6a6',
+}));
+const resStyle = computed(() =>
+    isBoolean(resultValue.value.success)
+        ? {
+              'margin-top': '10px',
+              'border-color': resultValue.value.success ? 'green' : 'red',
+          }
+        : {
+              'margin-top': '10px',
+          },
+);
+const filterOption = (inputValue: any, option: any) =>
+    option!.value.indexOf(inputValue) !== -1;
 
-const isDisabled = computed(() => simulation.value === '')
+const isDisabled = computed(() => simulation.value === '');
 
-const result = computed(() => resultValue.value.success ? JSON.stringify(resultValue.value.outputs?.[0]) : resultValue.value.reason)
+const result = computed(() =>
+    resultValue.value.success
+        ? JSON.stringify(resultValue.value.outputs?.[0])
+        : resultValue.value.reason,
+);
 
 //重置
 const rest = async () => {
-    const res = await delDeviceCode(instanceStore.current.productId, instanceStore.current.id)
+    const res = await delDeviceCode(
+        instanceStore.current.productId,
+        instanceStore.current.id,
+    );
     if (res.status === 200) {
         getDeviceCode();
-        message.success('操作成功')
+        message.success('操作成功');
     }
 };
 //获取topic
 const getTopic = async () => {
-    const res: any = await getProtocal(instanceStore.current.protocol, instanceStore.current.transport)
+    const res: any = await getProtocal(
+        instanceStore.current.protocol,
+        instanceStore.current.transport,
+    );
     if (res.status === 200) {
         const item = res.result.routes?.map((items: any) => ({
             value: items.topic,
         }));
         // setTopicList(item);
-        topicList.value = item
+        topicList.value = item;
     }
 };
 //获取设备解析规则
 const getDeviceCode = async () => {
-    const res: any = await deviceCode(instanceStore.current.productId, instanceStore.current.id)
+    const res: any = await deviceCode(
+        instanceStore.current.productId,
+        instanceStore.current.id,
+    );
     if (res.status === 200) {
-        const item = res.result?.configuration?.script ? res.result?.configuration?.script : defaultValue
+        const item = res.result?.configuration?.script
+            ? res.result?.configuration?.script
+            : defaultValue;
         if (res.result?.deviceId) {
-            readOnly.value = false
-            topTitle.value = 'rest'
-            editorValue.value = item
+            readOnly.value = false;
+            topTitle.value = 'rest';
+            editorValue.value = item;
         } else {
-            readOnly.value = true
-            topTitle.value = 'edit'
-            editorValue.value = item
+            readOnly.value = true;
+            topTitle.value = 'edit';
+            editorValue.value = item;
         }
     }
-}
+};
 //调试
 const test = async (dataTest: any) => {
-    loading.value = true
-    const res = await testCode(dataTest)
+    loading.value = true;
+    const res = await testCode(dataTest);
     if (res.status === 200) {
-        loading.value = false
-        resultValue.value = res?.result
+        loading.value = false;
+        resultValue.value = res?.result;
     } else {
-        loading.value = false
+        loading.value = false;
     }
 };
 
@@ -193,15 +268,18 @@ const save = async () => {
             script: editorValue.value,
             lang: 'javascript',
         },
-    }
-    const res = await saveDeviceCode(instanceStore.current.productId, instanceStore.current.id, item)
+    };
+    const res = await saveDeviceCode(
+        instanceStore.current.productId,
+        instanceStore.current.id,
+        item,
+    );
     if (res.status === 200) {
         message.success('保存成功');
         getDeviceCode();
     }
 };
 
-
 const debug = () => {
     if (instanceStore.current.transport === 'MQTT') {
         if (topic.value !== '') {
@@ -215,8 +293,8 @@ const debug = () => {
                 },
                 provider: 'jsr223',
                 payload: simulation.value,
-            })
-            isTest.value = true
+            });
+            isTest.value = true;
         } else {
             message.error('请输入topic');
         }
@@ -233,19 +311,17 @@ const debug = () => {
                 },
                 payload: simulation.value,
             });
-            isTest.value = true
+            isTest.value = true;
         } else {
             message.error('请输入url');
         }
     }
-}
-
+};
 
 onMounted(() => {
-    getDeviceCode()
-    getTopic()
-})
-
+    getDeviceCode();
+    getTopic();
+});
 </script>
 
 <style scoped lang='less'>
diff --git a/src/views/device/Instance/Detail/Running/index.vue b/src/views/device/Instance/Detail/Running/index.vue
index 1d685cbe..b545d157 100644
--- a/src/views/device/Instance/Detail/Running/index.vue
+++ b/src/views/device/Instance/Detail/Running/index.vue
@@ -1,37 +1,31 @@
 <template>
-    <j-card>
-        <div class="property-box">
-            <div class="property-box-left">
-                <j-input-search
-                    v-model:value="value"
-                    placeholder="请输入事件名称"
-                    style="width: 200px; margin-bottom: 10px"
-                    @search="onSearch"
-                    :allowClear="true"
-                />
-                <j-tabs
-                    tab-position="left"
-                    style="height: 600px"
-                    v-if="tabList.length"
-                    v-model:activeKey="activeKey"
-                    :tabBarStyle="{ width: '200px' }"
-                    @change="tabChange"
-                >
-                    <j-tab-pane
-                        v-for="i in tabList"
-                        :key="i.key"
-                        :tab="i.tab"
-                    />
-                </j-tabs>
-                <JEmpty v-else style="margin: 180px 0" />
-            </div>
-            <div class="property-box-right">
-                <Event v-if="type === 'event'" :data="data" />
-                <Property v-else-if="type === 'property'" :data="properties" />
-                <JEmpty v-else style="margin: 220px 0" />
-            </div>
+    <div class="property-box">
+        <div class="property-box-left">
+            <j-input-search
+                v-model:value="value"
+                placeholder="请输入事件名称"
+                style="width: 200px; margin-bottom: 10px"
+                @search="onSearch"
+                :allowClear="true"
+            />
+            <j-tabs
+                tab-position="left"
+                style="height: 600px"
+                v-if="tabList.length"
+                v-model:activeKey="activeKey"
+                :tabBarStyle="{ width: '200px' }"
+                @change="tabChange"
+            >
+                <j-tab-pane v-for="i in tabList" :key="i.key" :tab="i.tab" />
+            </j-tabs>
+            <JEmpty v-else style="margin: 180px 0" />
         </div>
-    </j-card>
+        <div class="property-box-right">
+            <Event v-if="type === 'event'" :data="data" />
+            <Property v-else-if="type === 'property'" :data="properties" />
+            <JEmpty v-else style="margin: 220px 0" />
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -51,28 +45,32 @@ const tabList = ref<{ key: string; tab: string; type: 'property' | 'event' }[]>(
     ],
 );
 const type = ref<string>('property');
-const data = ref<Record<string, any>>({})
+const data = ref<Record<string, any>>({});
 const value = ref<string>('');
-const instanceStore = useInstanceStore()
-const metadata = JSON.parse(instanceStore.current?.metadata || '{}')
-const properties = metadata.properties
-const events = metadata.events
+const instanceStore = useInstanceStore();
+const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
+const properties = metadata.properties;
+const events = metadata.events;
 
-watch(() => events, (newVal) => {
-    if(events && newVal.length){
-        newVal.map((item: any) => {
-            tabList.value.push({
-                ...item,
-                key: item.id,
-                tab: item.name,
-                type: 'event',
-            })
-        })
-    }
-}, {
-    deep: true,
-    immediate: true
-})
+watch(
+    () => events,
+    (newVal) => {
+        if (events && newVal.length) {
+            newVal.map((item: any) => {
+                tabList.value.push({
+                    ...item,
+                    key: item.id,
+                    tab: item.name,
+                    type: 'event',
+                });
+            });
+        }
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
 
 const onSearch = () => {
     const arr = [
@@ -87,33 +85,32 @@ const onSearch = () => {
                 key: item.id,
                 tab: item.name,
                 type: 'event',
-            }
-        })
-    ]
-    if(value.value){
+            };
+        }),
+    ];
+    if (value.value) {
         const li = arr.filter((i: any) => {
             return i?.tab.indexOf(value.value) !== -1;
-        })
-        tabList.value = _.cloneDeep(li)
+        });
+        tabList.value = _.cloneDeep(li);
     } else {
-        tabList.value = _.cloneDeep(arr)
+        tabList.value = _.cloneDeep(arr);
     }
-    const dt = tabList.value?.[0]
+    const dt = tabList.value?.[0];
     if (dt) {
-        data.value = dt
+        data.value = dt;
         type.value = dt.type;
     } else {
-        type.value = ''
+        type.value = '';
     }
 };
 const tabChange = (key: string) => {
     const dt = tabList.value.find((i) => i.key === key);
     if (dt) {
-        data.value = dt
+        data.value = dt;
         type.value = dt.type;
     }
 };
-
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/device/Instance/Detail/components/EditTable/index.vue b/src/views/device/Instance/Detail/components/EditTable/index.vue
index c2c56279..f7bc99d7 100644
--- a/src/views/device/Instance/Detail/components/EditTable/index.vue
+++ b/src/views/device/Instance/Detail/components/EditTable/index.vue
@@ -1,6 +1,6 @@
 <template>
     <j-spin :spinning="loading" v-if="metadata.properties.length">
-        <j-card>
+        <j-card :bordered="false" borderStyle="padding: 0">
             <template #extra>
                 <j-space>
                     <j-button @click="visible = true">批量映射</j-button>
@@ -107,7 +107,7 @@
             :metaData="modelRef.dataSource"
         />
     </j-spin>
-    <j-card v-else>
+    <j-card v-else :bordered="false" borderStyle="padding: 0">
         <JEmpty description='暂无数据，请配置物模型' style="margin: 10% 0" />
     </j-card>
 </template>
diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue
index c51a5d85..7cadf19e 100644
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@@ -8,7 +8,9 @@
         <template #title>
             <div style="display: flex; align-items: center">
                 <j-tooltip :title="instanceStore.current?.name">
-                    <div class="deviceDetailHead">{{ instanceStore.current?.name }}</div>
+                    <div class="deviceDetailHead">
+                        {{ instanceStore.current?.name }}
+                    </div>
                 </j-tooltip>
                 <j-divider type="vertical" />
                 <j-space>
@@ -95,11 +97,15 @@
                 style="margin-right: 20px; cursor: pointer"
             />
         </template>
-        <component
-            :is="tabs[instanceStore.tabActiveKey]"
-            v-bind="{ type: 'device' }"
-            @onJump="onTabChange"
-        />
+        <FullPage>
+            <j-card :bordered="false">
+                <component
+                    :is="tabs[instanceStore.tabActiveKey]"
+                    v-bind="{ type: 'device' }"
+                    @onJump="onTabChange"
+                />
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
@@ -121,12 +127,12 @@ import { message } from 'jetlinks-ui-components';
 import { getImage } from '@/utils/comm';
 import { getWebSocket } from '@/utils/websocket';
 import { useMenuStore } from '@/store/menu';
-import {useRouterParams} from "@/utils/hooks/useParams";
+import { useRouterParams } from '@/utils/hooks/useParams';
 
 const menuStory = useMenuStore();
 
 const route = useRoute();
-const routerParams = useRouterParams()
+const routerParams = useRouterParams();
 const instanceStore = useInstanceStore();
 
 const statusMap = new Map();
@@ -266,18 +272,18 @@ const getDetail = () => {
 // );
 
 const getDetailFn = async () => {
-  const _id = route.params?.id
-  if (_id) {
-    await instanceStore.refresh(String(_id));
-    getStatus(String(_id));
-    list.value = [...initList];
-    getDetail();
-  }
-  instanceStore.tabActiveKey = routerParams.params.value.tab || 'Info';
-}
+    const _id = route.params?.id;
+    if (_id) {
+        await instanceStore.refresh(String(_id));
+        getStatus(String(_id));
+        list.value = [...initList];
+        getDetail();
+    }
+    instanceStore.tabActiveKey = routerParams.params.value.tab || 'Info';
+};
 
 onMounted(() => {
-    getDetailFn()
+    getDetailFn();
 });
 
 const onBack = () => {
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index 98ebab07..6c018c6d 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -5,37 +5,42 @@
             target="device-instance"
             @search="handleSearch"
         />
-        <JProTable
-            ref="instanceRef"
-            :columns="columns"
-            :request="query"
-            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
-            :rowSelection="
-                isCheck
-                    ? {
-                          selectedRowKeys: _selectedRowKeys,
-                          onChange: onSelectChange,
-                      }
-                    : false
-            "
-            :params="params"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        type="primary"
-                        @click="handleAdd"
-                        hasPermission="device/Instance:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                    <BatchDropdown
-                        v-model:isCheck="isCheck"
-                        :actions="batchActions"
-                        @change="onCheckChange"
-                    />
-                    <!-- <j-dropdown>
+        <FullPage>
+            <JProTable
+                ref="instanceRef"
+                :columns="columns"
+                :request="query"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :rowSelection="
+                    isCheck
+                        ? {
+                              selectedRowKeys: _selectedRowKeys,
+                              onChange: onSelectChange,
+                          }
+                        : false
+                "
+                :params="params"
+            >
+                <template #headerTitle>
+                    <j-space>
+                        <PermissionButton
+                            type="primary"
+                            @click="handleAdd"
+                            hasPermission="device/Instance:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                        <BatchDropdown
+                            v-model:isCheck="isCheck"
+                            :actions="batchActions"
+                            @change="onCheckChange"
+                        />
+                        <!-- <j-dropdown>
                         <j-button
                             >批量操作 <AIcon type="DownOutlined"
                         /></j-button>
@@ -141,116 +146,125 @@
                             </j-menu>
                         </template>
                     </j-dropdown> -->
-                </j-space>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    @click="handleClick"
-                    :actions="getActions(slotProps, 'card')"
-                    :active="_selectedRowKeys.includes(slotProps.id)"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                        notActive: 'warning',
-                    }"
-                >
-                    <template #img>
-                        <img
-                            :src="getImage('/device/instance/device-card.png')"
-                        />
-                    </template>
-                    <template #content>
-                        <Ellipsis style="width: calc(100% - 100px)">
-                            <span style="font-size: 16px; font-weight: 600">
-                                {{ slotProps.name }}
-                            </span>
-                        </Ellipsis>
-                        <j-row style="margin-top: 20px">
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    设备类型
-                                </div>
-                                <div>{{ slotProps.deviceType?.text }}</div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    产品名称
-                                </div>
-                                <Ellipsis style="width: 100%">
-                                    {{ slotProps.productName }}
-                                </Ellipsis>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="'device/Instance:' + 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">
-                <BadgeStatus
-                    :status="slotProps.state?.value"
-                    :text="slotProps.state?.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                        notActive: 'warning',
-                    }"
-                />
-            </template>
-            <template #createTime="slotProps">
-                <span>{{
-                    slotProps?.createTime ? dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
-                }}</span>
-            </template>
-            <template #action="slotProps">
-                <j-space>
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
+                    </j-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        @click="handleClick"
+                        :actions="getActions(slotProps, 'card')"
+                        :active="_selectedRowKeys.includes(slotProps.id)"
+                        :status="slotProps.state?.value"
+                        :statusText="slotProps.state?.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                            notActive: 'warning',
+                        }"
                     >
-                        <PermissionButton
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0 5px"
-                            :danger="i.key === 'delete'"
-                            :hasPermission="
-                                i.key === 'view'
-                                    ? true
-                                    : 'device/Instance:' + i.key
-                            "
+                        <template #img>
+                            <img
+                                :src="
+                                    getImage('/device/instance/device-card.png')
+                                "
+                            />
+                        </template>
+                        <template #content>
+                            <Ellipsis style="width: calc(100% - 100px)">
+                                <span style="font-size: 16px; font-weight: 600">
+                                    {{ slotProps.name }}
+                                </span>
+                            </Ellipsis>
+                            <j-row style="margin-top: 20px">
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        设备类型
+                                    </div>
+                                    <div>{{ slotProps.deviceType?.text }}</div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        产品名称
+                                    </div>
+                                    <Ellipsis style="width: 100%">
+                                        {{ slotProps.productName }}
+                                    </Ellipsis>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'device/Instance:' + 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">
+                    <BadgeStatus
+                        :status="slotProps.state?.value"
+                        :text="slotProps.state?.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                            notActive: 'warning',
+                        }"
+                    />
+                </template>
+                <template #createTime="slotProps">
+                    <span>{{
+                        slotProps?.createTime
+                            ? dayjs(slotProps.createTime).format(
+                                  'YYYY-MM-DD HH:mm:ss',
+                              )
+                            : ''
+                    }}</span>
+                </template>
+                <template #action="slotProps">
+                    <j-space>
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0 5px"
+                                :danger="i.key === 'delete'"
+                                :hasPermission="
+                                    i.key === 'view'
+                                        ? true
+                                        : 'device/Instance:' + i.key
+                                "
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
     </page-container>
     <Import
         v-if="importVisible"
@@ -867,7 +881,7 @@ const handleSearch = (_params: any) => {
             ) {
                 return {
                     ...item2,
-                    column: 'productId$product-info'
+                    column: 'productId$product-info',
                 };
             }
             return item2;
diff --git a/src/views/edge/Device/index.vue b/src/views/edge/Device/index.vue
index e275e26b..38315647 100644
--- a/src/views/edge/Device/index.vue
+++ b/src/views/edge/Device/index.vue
@@ -5,147 +5,166 @@
             target="edge-device"
             @search="handleSearch"
         />
-        <JProTable
-            ref="edgeDeviceRef"
-            :columns="columns"
-            :request="query"
-            :defaultParams="defaultParams"
-            :params="params"
-            :gridColumn="3"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        type="primary"
-                        @click="handleAdd"
-                        hasPermission="edge/Device:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                    <PermissionButton
-                        @click="importVisible = true"
-                        hasPermission="edge/Device:import"
-                    >
-                        <template #icon
-                            ><AIcon type="ImportOutlined"
-                        /></template>
-                        导入
-                    </PermissionButton>
-                </j-space>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    :actions="getActions(slotProps, 'card')"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                        notActive: 'warning',
-                    }"
-                >
-                    <template #img>
-                        <img
-                            :src="getImage('/device/instance/device-card.png')"
-                        />
-                    </template>
-                    <template #content>
-                        <Ellipsis style="width: calc(100% - 100px)">
-                            <span
-                                style="font-size: 16px; font-weight: 600"
-                                @click.stop="handleView(slotProps.id)"
-                            >
-                                {{ slotProps.name }}
-                            </span>
-                        </Ellipsis>
-                        <j-row style="margin-top: 20px">
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    设备类型
-                                </div>
-                                <div>{{ slotProps.deviceType?.text }}</div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    产品名称
-                                </div>
-                                <Ellipsis style="width: 100%">
-                                    {{ slotProps.productName }}
-                                </Ellipsis>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
+        <FullPage>
+            <JProTable
+                ref="edgeDeviceRef"
+                :columns="columns"
+                :request="query"
+                :defaultParams="defaultParams"
+                :params="params"
+                :gridColumn="3"
+            >
+                <template #headerTitle>
+                    <j-space>
                         <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="'edge/Device:' + item.key"
+                            type="primary"
+                            @click="handleAdd"
+                            hasPermission="edge/Device:add"
                         >
-                            <AIcon
-                                type="DeleteOutlined"
-                                v-if="item.key === 'delete'"
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                        <PermissionButton
+                            @click="importVisible = true"
+                            hasPermission="edge/Device:import"
+                        >
+                            <template #icon
+                                ><AIcon type="ImportOutlined"
+                            /></template>
+                            导入
+                        </PermissionButton>
+                    </j-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        :status="slotProps.state?.value"
+                        :statusText="slotProps.state?.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                            notActive: 'warning',
+                        }"
+                    >
+                        <template #img>
+                            <img
+                                :src="
+                                    getImage('/device/instance/device-card.png')
+                                "
                             />
-                            <template v-else>
-                                <AIcon :type="item.icon" />
-                                <span>{{ item?.text }}</span>
-                            </template>
-                        </PermissionButton>
-                    </template>
-                </CardBox>
-            </template>
-            <template #state="slotProps">
-                <BadgeStatus
-                    :status="slotProps.state?.value"
-                    :text="slotProps.state?.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                        notActive: 'warning',
-                    }"
-                />
-            </template>
-            <template #registryTime="slotProps">
-                <span>{{
-                    dayjs(slotProps.registryTime).format('YYYY-MM-DD HH:mm:ss')
-                }}</span>
-            </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,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0 5px"
-                            :danger="i.key === 'delete'"
-                            :hasPermission="i.key === 'view' ? true : 'edge/Device:' + i.key"
+                        </template>
+                        <template #content>
+                            <Ellipsis style="width: calc(100% - 100px)">
+                                <span
+                                    style="font-size: 16px; font-weight: 600"
+                                    @click.stop="handleView(slotProps.id)"
+                                >
+                                    {{ slotProps.name }}
+                                </span>
+                            </Ellipsis>
+                            <j-row style="margin-top: 20px">
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        设备类型
+                                    </div>
+                                    <div>{{ slotProps.deviceType?.text }}</div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        产品名称
+                                    </div>
+                                    <Ellipsis style="width: 100%">
+                                        {{ slotProps.productName }}
+                                    </Ellipsis>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'edge/Device:' + 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">
+                    <BadgeStatus
+                        :status="slotProps.state?.value"
+                        :text="slotProps.state?.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                            notActive: 'warning',
+                        }"
+                    />
+                </template>
+                <template #registryTime="slotProps">
+                    <span>{{
+                        dayjs(slotProps.registryTime).format(
+                            'YYYY-MM-DD HH:mm:ss',
+                        )
+                    }}</span>
+                </template>
+                <template #action="slotProps">
+                    <j-space>
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0 5px"
+                                :danger="i.key === 'delete'"
+                                :hasPermission="
+                                    i.key === 'view'
+                                        ? true
+                                        : 'edge/Device:' + i.key
+                                "
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
         <Save
             v-if="visible"
             :data="current"
             @close="visible = false"
             @save="saveBtn"
         />
-        <Import @save="onRefresh" @close="importVisible = false" v-if="importVisible" type="official-edge-gateway" />
+        <Import
+            @save="onRefresh"
+            @close="importVisible = false"
+            v-if="importVisible"
+            type="official-edge-gateway"
+        />
     </page-container>
 </template>
   
@@ -192,18 +211,18 @@ const visible = ref<boolean>(false);
 const current = ref<Record<string, any>>({});
 
 const transformData = (arr: any[]): any[] => {
-    if(Array.isArray(arr) && arr.length){
+    if (Array.isArray(arr) && arr.length) {
         return (arr || []).map((item: any) => {
             return {
                 ...item,
                 id: `classifiedId is ${item.id}`,
-                children: transformData(item.children)
-            }
-        })
+                children: transformData(item.children),
+            };
+        });
     } else {
-        return []
+        return [];
     }
-}
+};
 
 const columns = [
     {
@@ -471,9 +490,9 @@ const saveBtn = () => {
 };
 
 const onRefresh = () => {
-    importVisible.value = false
+    importVisible.value = false;
     edgeDeviceRef.value?.reload();
-}
+};
 </script>
   
   <style lang="less" scoped>
diff --git a/src/views/edge/Resource/index.vue b/src/views/edge/Resource/index.vue
index c5f7ed58..7fb822a5 100644
--- a/src/views/edge/Resource/index.vue
+++ b/src/views/edge/Resource/index.vue
@@ -5,131 +5,141 @@
             target="edge-resource"
             @search="handleSearch"
         />
-        <JProTable
-            ref="edgeResourceRef"
-            :columns="columns"
-            :request="query"
-            :defaultParams="defaultParams"
-            :params="params"
-        >
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    @click="handleView(slotProps)"
-                    :actions="getActions(slotProps, 'card')"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
-                        enabled: 'processing',
-                        disabled: 'error',
-                    }"
-                >
-                    <template #img>
-                        <img
-                            :src="getImage('/device/instance/device-card.png')"
-                        />
-                    </template>
-                    <template #content>
-                        <Ellipsis style="width: calc(100% - 100px)">
-                            <span style="font-size: 16px; font-weight: 600">
-                                {{ slotProps.name }}
-                            </span>
-                        </Ellipsis>
-                        <j-row style="margin-top: 20px">
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    通讯协议
-                                </div>
-                                <Ellipsis>{{
-                                    options.find(
-                                        (i) => i.value === slotProps.category,
-                                    )?.label || slotProps.category
-                                }}</Ellipsis>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    所属边缘网关
-                                </div>
-                                <Ellipsis style="width: 100%">
-                                    {{ slotProps.sourceName }}
-                                </Ellipsis>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="'edge/Resource:' + 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">
-                <BadgeStatus
-                    :status="slotProps.state?.value"
-                    :text="slotProps.state?.text"
-                    :statusNames="{
-                        enabled: 'processing',
-                        disabled: 'error',
-                    }"
-                />
-            </template>
-            <template #sourceId="slotProps">
-                {{ slotProps.sourceName }}
-            </template>
-            <template #category="slotProps">
-                {{
-                    options.find((i) => i.value === slotProps.category)
-                        ?.label || slotProps.category
-                }}
-            </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, 'table')"
-                        :key="i.key"
+        <FullPage>
+            <JProTable
+                ref="edgeResourceRef"
+                :columns="columns"
+                :request="query"
+                :defaultParams="defaultParams"
+                :params="params"
+            >
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        @click="handleView(slotProps)"
+                        :actions="getActions(slotProps, 'card')"
+                        :status="slotProps.state?.value"
+                        :statusText="slotProps.state?.text"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
                     >
-                        <PermissionButton
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0 5px"
-                            :danger="i.key === 'delete'"
-                            :hasPermission="
-                                i.key === 'view'
-                                    ? true
-                                    : 'edge/Resource:' + i.key
-                            "
+                        <template #img>
+                            <img
+                                :src="
+                                    getImage('/device/instance/device-card.png')
+                                "
+                            />
+                        </template>
+                        <template #content>
+                            <Ellipsis style="width: calc(100% - 100px)">
+                                <span style="font-size: 16px; font-weight: 600">
+                                    {{ slotProps.name }}
+                                </span>
+                            </Ellipsis>
+                            <j-row style="margin-top: 20px">
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        通讯协议
+                                    </div>
+                                    <Ellipsis>{{
+                                        options.find(
+                                            (i) =>
+                                                i.value === slotProps.category,
+                                        )?.label || slotProps.category
+                                    }}</Ellipsis>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        所属边缘网关
+                                    </div>
+                                    <Ellipsis style="width: 100%">
+                                        {{ slotProps.sourceName }}
+                                    </Ellipsis>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'edge/Resource:' + 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">
+                    <BadgeStatus
+                        :status="slotProps.state?.value"
+                        :text="slotProps.state?.text"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
+                    />
+                </template>
+                <template #sourceId="slotProps">
+                    {{ slotProps.sourceName }}
+                </template>
+                <template #category="slotProps">
+                    {{
+                        options.find((i) => i.value === slotProps.category)
+                            ?.label || slotProps.category
+                    }}
+                </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, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0 5px"
+                                :danger="i.key === 'delete'"
+                                :hasPermission="
+                                    i.key === 'view'
+                                        ? true
+                                        : 'edge/Resource:' + i.key
+                                "
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
+
         <Save
             v-if="visible"
             :data="current"
diff --git a/src/views/rule-engine/Scene/Save/action/Device/actions/index.vue b/src/views/rule-engine/Scene/Save/action/Device/actions/index.vue
index 0ad79958..3f84e887 100644
--- a/src/views/rule-engine/Scene/Save/action/Device/actions/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/actions/index.vue
@@ -278,7 +278,7 @@ watch(
             }
         }
     },
-    { immediate: true, deep: true },
+    { immediate: true },
 );
 
 watch(
diff --git a/src/views/rule-engine/Scene/Save/action/Device/device/index.vue b/src/views/rule-engine/Scene/Save/action/Device/device/index.vue
index d82ac107..79ac407e 100644
--- a/src/views/rule-engine/Scene/Save/action/Device/device/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/device/index.vue
@@ -154,7 +154,7 @@ const TypeList = [
     },
     {
         label: '按变量',
-        value: 'variable',
+        value: 'context',
         image: getImage('/scene/device-variable.png'),
         tip: '选择设备ID为上游变量值的设备',
     },
@@ -236,7 +236,7 @@ const filterType = async (newVal: any) => {
             !props.parallel &&
             props.name !== 0
         ) {
-            const array = TypeList.filter((item) => item.value === 'variable');
+            const array = TypeList.filter((item) => item.value === 'context');
             _list.push(...array);
         }
         list.value = _list;
@@ -246,7 +246,7 @@ const filterType = async (newVal: any) => {
             !props.parallel &&
             props.name !== 0
         ) {
-            const array = TypeList.filter((item) => item.value === 'variable');
+            const array = TypeList.filter((item) => item.value === 'context');
             _list.push(...array);
         }
         list.value = _list;
@@ -287,7 +287,12 @@ const onTagChange = (val: any[], arr: any[]) => {
         modelRef.source = 'fixed';
     }
     const tagName = arr.map((i, _index) => {
-        const _type = (_index !== 0 && _index !== (arr || []).length && i.type) ? (i.type === 'and' ? '并且' : '或者') : '';
+        const _type =
+            _index !== 0 && _index !== (arr || []).length && i.type
+                ? i.type === 'and'
+                    ? '并且'
+                    : '或者'
+                : '';
         return `${_type}${i.name}为${i.value}`;
     });
     emits('save', unref(modelRef), { tagName: tagName.join('') });
@@ -295,6 +300,8 @@ const onTagChange = (val: any[], arr: any[]) => {
 
 const onVariableChange = (val: any, node: any) => {
     modelRef.deviceId = val;
+    modelRef.source = 'upper';
+    modelRef.upperKey = val;
     modelRef.selectorValues = [{ value: val, name: node.description }] as any;
     emits('save', unref(modelRef), { name: node.description });
 };
@@ -333,7 +340,7 @@ watch(
                 return item.children.find((i: any) => i.id === param);
             });
             if (isVariable) {
-                modelRef.selector = 'variable';
+                modelRef.selector = 'context';
             }
         }
     },
diff --git a/src/views/rule-engine/Scene/Save/action/Device/index.vue b/src/views/rule-engine/Scene/Save/action/Device/index.vue
index 6ddf9adc..a015bbbe 100644
--- a/src/views/rule-engine/Scene/Save/action/Device/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/index.vue
@@ -181,6 +181,7 @@ const onProductChange = (_val: any, bol: boolean) => {
             JSON.parse(_val.metadata || '{}'),
             DeviceModel?.message,
         );
+        console.log(flag)
         if (!flag) {
             DeviceModel.message = {
                 messageType: 'INVOKE_FUNCTION',

From f960e2df76d9b4295499f2edcd9c5572497d3cdd Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Thu, 30 Mar 2023 17:06:04 +0800
Subject: [PATCH 05/12] =?UTF-8?q?update:=20=E9=80=9A=E7=9F=A5=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86,=E8=A7=86=E9=A2=91=E4=B8=AD=E5=BF=83=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E9=A1=B5=E9=9D=A2=E8=A1=A8=E6=A0=BC=E6=92=91=E6=BB=A1?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/Cascade/Channel/index.vue | 270 ++++++++--------
 src/views/media/Cascade/index.vue         | 269 ++++++++--------
 src/views/media/Device/Channel/index.vue  | 180 ++++++-----
 src/views/media/Device/Playback/index.vue | 347 ++++++++++----------
 src/views/media/Device/index.vue          | 289 +++++++++--------
 src/views/media/SplitScreen/index.vue     |  45 +--
 src/views/notice/Config/index.vue         | 365 +++++++++++-----------
 src/views/notice/Template/index.vue       | 357 ++++++++++-----------
 8 files changed, 1093 insertions(+), 1029 deletions(-)

diff --git a/src/views/media/Cascade/Channel/index.vue b/src/views/media/Cascade/Channel/index.vue
index 159bb892..c82de34f 100644
--- a/src/views/media/Cascade/Channel/index.vue
+++ b/src/views/media/Cascade/Channel/index.vue
@@ -2,149 +2,153 @@
 <template>
     <page-container>
         <pro-search :columns="columns" target="media" @search="handleSearch" />
-
-        <JProTable
-            ref="listRef"
-            model="table"
-            :columns="columns"
-            :request="(e:any) => CascadeApi.queryBindChannel(route?.query.id as string, e)"
-            :defaultParams="{
-                pageSize: 10,
-                sorts: [{ name: 'name', order: 'desc' }],
-            }"
-            :params="params"
-            :rowSelection="{
-                selectedRowKeys: _selectedRowKeys,
-                onChange: onSelectChange,
-            }"
-            @cancelSelect="_selectedRowKeys = []"
-            :pagination="{
-                showSizeChanger: true,
-                pageSizeOptions: ['10', '20', '50', '100'],
-            }"
-        >
-            <template #headerTitle>
-                <h3>通道列表</h3>
-            </template>
-            <template #rightExtraRender>
-                <j-space>
-                    <j-button type="primary" @click="bindVis = true">
-                        绑定通道
-                    </j-button>
-                    <j-popconfirm
-                        title="确认解绑?"
-                        @confirm="handleMultipleUnbind"
-                    >
-                        <j-button> 批量解绑 </j-button>
-                    </j-popconfirm>
-                </j-space>
-            </template>
-            <template #gbChannelIdHeader="title">
-                <j-tooltip
-                    title="国标级联有16位、20位两种格式。在当前页面修改不会修改视频设备-通道页面中的国标ID"
-                >
+        <FullPage>
+            <JProTable
+                ref="listRef"
+                model="table"
+                :columns="columns"
+                :request="(e:any) => CascadeApi.queryBindChannel(route?.query.id as string, e)"
+                :defaultParams="{
+                    pageSize: 10,
+                    sorts: [{ name: 'name', order: 'desc' }],
+                }"
+                :params="params"
+                :rowSelection="{
+                    selectedRowKeys: _selectedRowKeys,
+                    onChange: onSelectChange,
+                }"
+                @cancelSelect="_selectedRowKeys = []"
+                :pagination="{
+                    showSizeChanger: true,
+                    pageSizeOptions: ['10', '20', '50', '100'],
+                }"
+            >
+                <template #headerTitle>
+                    <h3>通道列表</h3>
+                </template>
+                <template #rightExtraRender>
                     <j-space>
-                        <span>{{ title }}</span>
-                        <AIcon type="InfoCircleOutlined" />
-                    </j-space>
-                </j-tooltip>
-            </template>
-            <template #channelId="slotProps">
-                <j-space>
-                    <Ellipsis style="width: 150px">
-                        {{ slotProps.gbChannelId }}
-                    </Ellipsis>
-                    <j-popover
-                        v-model:visible="slotProps.popVis"
-                        trigger="click"
-                    >
-                        <template #title>
-                            <div class="header">
-                                <span>编辑国标ID</span>
-                                <AIcon
-                                    type="CloseOutlined"
-                                    @click="handleClose(slotProps)"
-                                />
-                            </div>
-                        </template>
-                        <template #content>
-                            <div class="simple-form">
-                                <j-input
-                                    v-model:value="gbID"
-                                    @change="validField(slotProps)"
-                                    placeholder="请输入国标ID"
-                                />
-                                <div
-                                    class="error"
-                                    v-if="valid && !valid?.passed"
-                                >
-                                    <!-- {{ valid?.reason }} -->
-                                    该国标ID在同一设备下已存在
-                                </div>
-                            </div>
-                            <j-button
-                                type="primary"
-                                @click="handleSave(slotProps)"
-                                :loading="loading"
-                                style="width: 100%"
-                            >
-                                保存
-                            </j-button>
-                        </template>
-                        <j-button type="link" @click="slotProps.popVis = true">
-                            <AIcon type="EditOutlined" />
+                        <j-button type="primary" @click="bindVis = true">
+                            绑定通道
                         </j-button>
-                    </j-popover>
-                </j-space>
-            </template>
-            <template #status="slotProps">
-                <j-space>
-                    <j-badge
-                        :status="
-                            slotProps.status.value === 'online'
-                                ? 'success'
-                                : 'error'
-                        "
-                        :text="slotProps.status.text"
-                    ></j-badge>
-                </j-space>
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <j-tooltip
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
-                        v-bind="i.tooltip"
-                    >
                         <j-popconfirm
-                            v-if="i.popConfirm"
-                            v-bind="i.popConfirm"
-                            :disabled="i.disabled"
+                            title="确认解绑?"
+                            @confirm="handleMultipleUnbind"
                         >
-                            <j-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></j-button>
+                            <j-button> 批量解绑 </j-button>
                         </j-popconfirm>
-                        <j-button
-                            style="padding: 0"
-                            type="link"
-                            v-else
-                            @click="i.onClick && i.onClick(slotProps)"
+                    </j-space>
+                </template>
+                <template #gbChannelIdHeader="title">
+                    <j-tooltip
+                        title="国标级联有16位、20位两种格式。在当前页面修改不会修改视频设备-通道页面中的国标ID"
+                    >
+                        <j-space>
+                            <span>{{ title }}</span>
+                            <AIcon type="InfoCircleOutlined" />
+                        </j-space>
+                    </j-tooltip>
+                </template>
+                <template #channelId="slotProps">
+                    <j-space>
+                        <Ellipsis style="width: 150px">
+                            {{ slotProps.gbChannelId }}
+                        </Ellipsis>
+                        <j-popover
+                            v-model:visible="slotProps.popVis"
+                            trigger="click"
                         >
+                            <template #title>
+                                <div class="header">
+                                    <span>编辑国标ID</span>
+                                    <AIcon
+                                        type="CloseOutlined"
+                                        @click="handleClose(slotProps)"
+                                    />
+                                </div>
+                            </template>
+                            <template #content>
+                                <div class="simple-form">
+                                    <j-input
+                                        v-model:value="gbID"
+                                        @change="validField(slotProps)"
+                                        placeholder="请输入国标ID"
+                                    />
+                                    <div
+                                        class="error"
+                                        v-if="valid && !valid?.passed"
+                                    >
+                                        <!-- {{ valid?.reason }} -->
+                                        该国标ID在同一设备下已存在
+                                    </div>
+                                </div>
+                                <j-button
+                                    type="primary"
+                                    @click="handleSave(slotProps)"
+                                    :loading="loading"
+                                    style="width: 100%"
+                                >
+                                    保存
+                                </j-button>
+                            </template>
                             <j-button
+                                type="link"
+                                @click="slotProps.popVis = true"
+                            >
+                                <AIcon type="EditOutlined" />
+                            </j-button>
+                        </j-popover>
+                    </j-space>
+                </template>
+                <template #status="slotProps">
+                    <j-space>
+                        <j-badge
+                            :status="
+                                slotProps.status.value === 'online'
+                                    ? 'success'
+                                    : 'error'
+                            "
+                            :text="slotProps.status.text"
+                        ></j-badge>
+                    </j-space>
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <j-tooltip
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <j-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
                                 :disabled="i.disabled"
+                            >
+                                <j-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></j-button>
+                            </j-popconfirm>
+                            <j-button
                                 style="padding: 0"
                                 type="link"
-                                ><AIcon :type="i.icon"
-                            /></j-button>
-                        </j-button>
-                    </j-tooltip>
-                </j-space>
-            </template>
-        </JProTable>
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <j-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></j-button>
+                            </j-button>
+                        </j-tooltip>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
 
         <BindChannel v-model:visible="bindVis" @submit="listRef.reload()" />
     </page-container>
diff --git a/src/views/media/Cascade/index.vue b/src/views/media/Cascade/index.vue
index 77083a84..206d93dc 100644
--- a/src/views/media/Cascade/index.vue
+++ b/src/views/media/Cascade/index.vue
@@ -5,139 +5,146 @@
             target="media-cascade"
             @search="handleSearch"
         />
-
-        <JProTable
-            ref="listRef"
-            :columns="columns"
-            :request="(e:any) => lastValueFrom(e)"
-            :defaultParams="{
-                sorts: [{ name: 'createTime', order: 'desc' }],
-            }"
-            :params="params"
-            :gridColumn="2"
-        >
-            <template #headerTitle>
-                <PermissionButton
-                    type="primary"
-                    @click="handleAdd"
-                    hasPermission="media/Cascade:add"
-                >
-                    <template #icon><AIcon type="PlusOutlined" />新增</template>
-                </PermissionButton>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    :actions="getActions(slotProps, 'card')"
-                    v-bind="slotProps"
-                    :showStatus="true"
-                    :status="slotProps.status?.value"
-                    :statusText="slotProps.status?.text"
-                    :statusNames="{
-                        enabled: 'success',
-                        disabled: 'error',
-                    }"
-                >
-                    <template #img>
-                        <slot name="img">
-                            <img
-                                :src="
-                                    getImage('/device/instance/device-card.png')
-                                "
-                            />
-                        </slot>
-                    </template>
-                    <template #content>
-                        <h3 class="card-item-content-title">
-                            {{ slotProps.name }}
-                        </h3>
-                        <p>通道数量：{{ slotProps.count || 0 }}</p>
-                        <Ellipsis>
-                            <j-badge
-                                :text="`sip:${slotProps.sipConfigs[0]?.sipId}@${slotProps.sipConfigs[0]?.hostAndPort}`"
-                                :status="
-                                    slotProps.status?.value === 'enabled'
-                                        ? 'success'
-                                        : 'error'
-                                "
-                            />
-                        </Ellipsis>
-                    </template>
-                    <template #actions="item">
-                        <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="'media/Cascade:' + 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 #sipId="slotProps">
-                {{ slotProps.sipConfigs[0]?.sipId }}
-            </template>
-            <template #publicHost="slotProps">
-                {{ slotProps.sipConfigs[0]?.publicHost }}
-            </template>
-            <template #count="slotProps">
-                {{ slotProps.count || 0 }}
-            </template>
-            <template #status="slotProps">
-                <j-badge
-                    :text="slotProps.status?.text"
-                    :status="
-                        slotProps.status?.value === 'enabled'
-                            ? 'success'
-                            : 'error'
-                    "
-                />
-            </template>
-            <template #onlineStatus="slotProps">
-                <j-badge
-                    :text="slotProps.onlineStatus?.text"
-                    :status="
-                        slotProps.onlineStatus?.value === 'online'
-                            ? 'success'
-                            : 'error'
-                    "
-                />
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
+        <FullPage>
+            <JProTable
+                ref="listRef"
+                :columns="columns"
+                :request="(e:any) => lastValueFrom(e)"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+                :gridColumn="2"
+            >
+                <template #headerTitle>
+                    <PermissionButton
+                        type="primary"
+                        @click="handleAdd"
+                        hasPermission="media/Cascade:add"
                     >
-                        <PermissionButton
-                            :danger="i.key === 'delete'"
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
-                            :hasPermission="'media/Cascade:' + i.key"
+                        <template #icon
+                            ><AIcon type="PlusOutlined" />新增</template
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                    </PermissionButton>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                        :showStatus="true"
+                        :status="slotProps.status?.value"
+                        :statusText="slotProps.status?.text"
+                        :statusNames="{
+                            enabled: 'success',
+                            disabled: 'error',
+                        }"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="
+                                        getImage(
+                                            '/device/instance/device-card.png',
+                                        )
+                                    "
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <p>通道数量：{{ slotProps.count || 0 }}</p>
+                            <Ellipsis>
+                                <j-badge
+                                    :text="`sip:${slotProps.sipConfigs[0]?.sipId}@${slotProps.sipConfigs[0]?.hostAndPort}`"
+                                    :status="
+                                        slotProps.status?.value === 'enabled'
+                                            ? 'success'
+                                            : 'error'
+                                    "
+                                />
+                            </Ellipsis>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'media/Cascade:' + 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 #sipId="slotProps">
+                    {{ slotProps.sipConfigs[0]?.sipId }}
+                </template>
+                <template #publicHost="slotProps">
+                    {{ slotProps.sipConfigs[0]?.publicHost }}
+                </template>
+                <template #count="slotProps">
+                    {{ slotProps.count || 0 }}
+                </template>
+                <template #status="slotProps">
+                    <j-badge
+                        :text="slotProps.status?.text"
+                        :status="
+                            slotProps.status?.value === 'enabled'
+                                ? 'success'
+                                : 'error'
+                        "
+                    />
+                </template>
+                <template #onlineStatus="slotProps">
+                    <j-badge
+                        :text="slotProps.onlineStatus?.text"
+                        :status="
+                            slotProps.onlineStatus?.value === 'online'
+                                ? 'success'
+                                : 'error'
+                        "
+                    />
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                        >
+                            <PermissionButton
+                                :danger="i.key === 'delete'"
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0px"
+                                :hasPermission="'media/Cascade:' + i.key"
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
 
         <Publish v-model:visible="publishVis" :data="currentData" />
     </page-container>
diff --git a/src/views/media/Device/Channel/index.vue b/src/views/media/Device/Channel/index.vue
index f595c3b5..a36d9fb2 100644
--- a/src/views/media/Device/Channel/index.vue
+++ b/src/views/media/Device/Channel/index.vue
@@ -24,101 +24,109 @@
                     target="channel"
                     @search="handleSearch"
                 />
-
-                <JProTable
-                    ref="listRef"
-                    model="table"
-                    :columns="columns"
-                    :request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
-                    :defaultParams="{
-                        pageSize: 10,
-                        sorts: [{ name: 'notifyTime', order: 'desc' }],
-                    }"
-                    :params="params"
-                    :pagination="{
-                        showSizeChanger: true,
-                        pageSizeOptions: ['10', '20', '50', '100'],
-                    }"
-                >
-                    <template #headerTitle>
-                        <j-tooltip
-                            v-if="route?.query.type === 'gb28181-2016'"
-                            title="接入方式为GB/T28281时，不支持新增"
-                        >
-                            <j-button type="primary" disabled> 新增 </j-button>
-                        </j-tooltip>
-                        <PermissionButton
-                            type="primary"
-                            @click="handleAdd"
-                            hasPermission="media/Device:add"
-                        >
-                            <template #icon
-                                ><AIcon type="PlusOutlined" />新增</template
+                <FullPage>
+                    <JProTable
+                        ref="listRef"
+                        model="table"
+                        :columns="columns"
+                        :request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
+                        :defaultParams="{
+                            pageSize: 10,
+                            sorts: [{ name: 'notifyTime', order: 'desc' }],
+                        }"
+                        :params="params"
+                        :pagination="{
+                            showSizeChanger: true,
+                            pageSizeOptions: ['10', '20', '50', '100'],
+                        }"
+                    >
+                        <template #headerTitle>
+                            <j-tooltip
+                                v-if="route?.query.type === 'gb28181-2016'"
+                                title="接入方式为GB/T28281时，不支持新增"
                             >
-                        </PermissionButton>
-                    </template>
-                    <template #status="slotProps">
-                        <j-space>
-                            <j-badge
-                                :status="
-                                    slotProps.status.value === 'online'
-                                        ? 'success'
-                                        : 'error'
-                                "
-                                :text="slotProps.status.text"
-                            ></j-badge>
-                        </j-space>
-                    </template>
-                    <template #action="slotProps">
-                        <j-space>
-                            <template
-                                v-for="i in getActions(slotProps, 'table')"
-                                :key="i.key"
+                                <j-button type="primary" disabled>
+                                    新增
+                                </j-button>
+                            </j-tooltip>
+                            <PermissionButton
+                                v-else
+                                type="primary"
+                                @click="handleAdd"
+                                hasPermission="media/Device:add"
                             >
-                                <PermissionButton
-                                    v-if="
-                                        i.key !== 'play' && i.key !== 'backPlay'
-                                    "
-                                    :danger="i.key === 'delete'"
-                                    :disabled="i.disabled"
-                                    :popConfirm="i.popConfirm"
-                                    :tooltip="{
-                                        ...i.tooltip,
-                                    }"
-                                    @click="i.onClick"
-                                    type="link"
-                                    style="padding: 0px"
-                                    :hasPermission="'media/Device:' + i.key"
+                                <template #icon
+                                    ><AIcon type="PlusOutlined" />新增</template
                                 >
-                                    <template #icon
-                                        ><AIcon :type="i.icon"
-                                    /></template>
-                                </PermissionButton>
-                                <!-- 回放/播放不要权限控制 -->
-                                <template v-else>
-                                    <j-tooltip :key="i.key" v-bind="i.tooltip">
-                                        <j-button
-                                            style="padding: 0px"
-                                            type="link"
-                                            @click="
-                                                i.onClick &&
-                                                    i.onClick(slotProps)
-                                            "
+                            </PermissionButton>
+                        </template>
+                        <template #status="slotProps">
+                            <j-space>
+                                <j-badge
+                                    :status="
+                                        slotProps.status.value === 'online'
+                                            ? 'success'
+                                            : 'error'
+                                    "
+                                    :text="slotProps.status.text"
+                                ></j-badge>
+                            </j-space>
+                        </template>
+                        <template #action="slotProps">
+                            <j-space>
+                                <template
+                                    v-for="i in getActions(slotProps, 'table')"
+                                    :key="i.key"
+                                >
+                                    <PermissionButton
+                                        v-if="
+                                            i.key !== 'play' &&
+                                            i.key !== 'backPlay'
+                                        "
+                                        :danger="i.key === 'delete'"
+                                        :disabled="i.disabled"
+                                        :popConfirm="i.popConfirm"
+                                        :tooltip="{
+                                            ...i.tooltip,
+                                        }"
+                                        @click="i.onClick"
+                                        type="link"
+                                        style="padding: 0px"
+                                        :hasPermission="'media/Device:' + i.key"
+                                    >
+                                        <template #icon
+                                            ><AIcon :type="i.icon"
+                                        /></template>
+                                    </PermissionButton>
+                                    <!-- 回放/播放不要权限控制 -->
+                                    <template v-else>
+                                        <j-tooltip
+                                            :key="i.key"
+                                            v-bind="i.tooltip"
                                         >
                                             <j-button
-                                                :disabled="i.disabled"
-                                                style="padding: 0"
+                                                style="padding: 0px"
                                                 type="link"
+                                                @click="
+                                                    i.onClick &&
+                                                        i.onClick(slotProps)
+                                                "
                                             >
-                                                <AIcon :type="i.icon" />
+                                                <j-button
+                                                    :disabled="i.disabled"
+                                                    style="padding: 0"
+                                                    type="link"
+                                                >
+                                                    <AIcon :type="i.icon" />
+                                                </j-button>
                                             </j-button>
-                                        </j-button>
-                                    </j-tooltip>
+                                        </j-tooltip>
+                                    </template>
                                 </template>
-                            </template>
-                        </j-space>
-                    </template>
-                </JProTable>
+                            </j-space>
+                        </template>
+                    </JProTable>
+                </FullPage>
             </div>
         </div>
 
diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
index f91dfedb..b766567a 100644
--- a/src/views/media/Device/Playback/index.vue
+++ b/src/views/media/Device/Playback/index.vue
@@ -1,186 +1,191 @@
 <!-- 回放 -->
 <template>
     <page-container>
-        <div class="playback-warp">
-            <!-- 播放器/进度条 -->
-            <div class="playback-left">
-                <LivePlayer
-                    ref="player"
-                    autoplay
-                    :url="url"
-                    className="playback-media"
-                    :live="type === 'local'"
-                    :on-play="
-                        () => {
-                            isEnded = false;
-                            playStatus = 1;
-                        }
-                    "
-                    :on-pause="
-                        () => {
-                            playStatus = 2;
-                        }
-                    "
-                    :on-ended="
-                        () => {
-                            playStatus = 0;
-                            if (playTimeNode && isEnded) {
-                                isEnded = true;
-                                playTimeNode.onNextPlay();
+        <FullPage>
+            <div class="playback-warp">
+                <!-- 播放器/进度条 -->
+                <div class="playback-left">
+                    <LivePlayer
+                        ref="player"
+                        autoplay
+                        :url="url"
+                        className="playback-media"
+                        :live="type === 'local'"
+                        :on-play="
+                            () => {
+                                isEnded = false;
+                                playStatus = 1;
                             }
-                        }
-                    "
-                    :on-error="
-                        () => {
-                            playStatus = 0;
-                        }
-                    "
-                    :on-time-update="
-                        (e: any) => {
-                            playTime = e;
-                        }
-                    "
-                />
-                <TimeLine
-                    ref="playTimeNode"
-                    :type="type"
-                    :data="historyList"
-                    :date-time="time"
-                    :on-change="handleTimeLineChange"
-                    :play-status="playStatus"
-                    :play-time="playNowTime + playTime * 1000"
-                    :local-to-server="cloudTime"
-                />
-            </div>
-            <div class="playback-right">
-                <j-spin :spinning="loading">
-                    <j-tooltip placement="topLeft">
-                        <template #title>
-                            <div>云端：存储在服务器中</div>
-                            <div>本地：存储在设备本地</div>
-                        </template>
-                        <div>类型: <AIcon type="QuestionCircleOutlined" /></div>
-                    </j-tooltip>
-                    <RadioCard
-                        layout="horizontal"
-                        :options="[
-                            {
-                                label: '云端',
-                                value: 'cloud',
-                                logo: getImage('/media/cloud.png'),
-                            },
-                            {
-                                label: '本地',
-                                value: 'local',
-                                logo: getImage('/local.png'),
-                                disabled: deviceType === 'fixed-media',
-                            },
-                        ]"
-                        :checkStyle="true"
-                        v-model="type"
+                        "
+                        :on-pause="
+                            () => {
+                                playStatus = 2;
+                            }
+                        "
+                        :on-ended="
+                            () => {
+                                playStatus = 0;
+                                if (playTimeNode && isEnded) {
+                                    isEnded = true;
+                                    playTimeNode.onNextPlay();
+                                }
+                            }
+                        "
+                        :on-error="
+                            () => {
+                                playStatus = 0;
+                            }
+                        "
+                        :on-time-update="
+                            (e: any) => {
+                                playTime = e;
+                            }
+                        "
                     />
-                    <div class="playback-calendar">
-                        <j-calendar
-                            v-model:value="time"
-                            :fullscreen="false"
-                            :disabledDate="
-                                (currentDate: Dayjs) => currentDate > dayjs(new Date())
-                            "
-                            @change="handlePanelChange"
+                    <TimeLine
+                        ref="playTimeNode"
+                        :type="type"
+                        :data="historyList"
+                        :date-time="time"
+                        :on-change="handleTimeLineChange"
+                        :play-status="playStatus"
+                        :play-time="playNowTime + playTime * 1000"
+                        :local-to-server="cloudTime"
+                    />
+                </div>
+                <div class="playback-right">
+                    <j-spin :spinning="loading">
+                        <j-tooltip placement="topLeft">
+                            <template #title>
+                                <div>云端：存储在服务器中</div>
+                                <div>本地：存储在设备本地</div>
+                            </template>
+                            <div>
+                                类型: <AIcon type="QuestionCircleOutlined" />
+                            </div>
+                        </j-tooltip>
+                        <RadioCard
+                            layout="horizontal"
+                            :options="[
+                                {
+                                    label: '云端',
+                                    value: 'cloud',
+                                    logo: getImage('/media/cloud.png'),
+                                },
+                                {
+                                    label: '本地',
+                                    value: 'local',
+                                    logo: getImage('/local.png'),
+                                    disabled: deviceType === 'fixed-media',
+                                },
+                            ]"
+                            :checkStyle="true"
+                            v-model="type"
                         />
-                    </div>
-                    <div
-                        class="playback-list"
-                        :class="{ 'no-list': !historyList.length }"
-                    >
-                        <j-empty
-                            v-if="!historyList.length"
-                            description="暂无数据"
-                        />
-                        <j-list
-                            v-else
-                            class="playback-list-items"
-                            itemLayout="horizontal"
-                            :dataSource="historyList"
+                        <div class="playback-calendar">
+                            <j-calendar
+                                v-model:value="time"
+                                :fullscreen="false"
+                                :disabledDate="
+                                    (currentDate: Dayjs) => currentDate > dayjs(new Date())
+                                "
+                                @change="handlePanelChange"
+                            />
+                        </div>
+                        <div
+                            class="playback-list"
+                            :class="{ 'no-list': !historyList.length }"
                         >
-                            <template #renderItem="{ item }">
-                                <j-list-item>
-                                    <template #actions>
-                                        <j-tooltip
-                                            key="play-btn"
-                                            :title="
-                                                (item.startTime ||
-                                                    item.mediaStartTime) ===
-                                                    playNowTime &&
-                                                playStatus === 1
-                                                    ? '暂停'
-                                                    : '播放'
-                                            "
-                                        >
-                                            <a
-                                                @click="
-                                                    handlePlay(
-                                                        item.startTime ||
-                                                            item.mediaStartTime,
-                                                    )
+                            <j-empty
+                                v-if="!historyList.length"
+                                description="暂无数据"
+                            />
+                            <j-list
+                                v-else
+                                class="playback-list-items"
+                                itemLayout="horizontal"
+                                :dataSource="historyList"
+                            >
+                                <template #renderItem="{ item }">
+                                    <j-list-item>
+                                        <template #actions>
+                                            <j-tooltip
+                                                key="play-btn"
+                                                :title="
+                                                    (item.startTime ||
+                                                        item.mediaStartTime) ===
+                                                        playNowTime &&
+                                                    playStatus === 1
+                                                        ? '暂停'
+                                                        : '播放'
                                                 "
                                             >
-                                                <AIcon
-                                                    :type="
-                                                        (item.startTime ||
-                                                            item.mediaStartTime) ===
-                                                            playNowTime &&
-                                                        playStatus === 1
-                                                            ? 'PauseCircleOutlined'
-                                                            : 'PlayCircleOutlined'
+                                                <a
+                                                    @click="
+                                                        handlePlay(
+                                                            item.startTime ||
+                                                                item.mediaStartTime,
+                                                        )
+                                                    "
+                                                >
+                                                    <AIcon
+                                                        :type="
+                                                            (item.startTime ||
+                                                                item.mediaStartTime) ===
+                                                                playNowTime &&
+                                                            playStatus === 1
+                                                                ? 'PauseCircleOutlined'
+                                                                : 'PlayCircleOutlined'
+                                                        "
+                                                    />
+                                                </a>
+                                            </j-tooltip>
+                                            <j-tooltip
+                                                key="download"
+                                                :title="
+                                                    type !== 'local'
+                                                        ? '下载录像文件'
+                                                        : item.isServer
+                                                        ? '查看'
+                                                        : '下载到云端'
+                                                "
+                                            >
+                                                <IconNode
+                                                    :type="type"
+                                                    :item="item"
+                                                    :on-cloud-view="cloudView"
+                                                    :on-down-load="
+                                                        () =>
+                                                            downloadClick(item)
                                                     "
                                                 />
-                                            </a>
-                                        </j-tooltip>
-                                        <j-tooltip
-                                            key="download"
-                                            :title="
-                                                type !== 'local'
-                                                    ? '下载录像文件'
-                                                    : item.isServer
-                                                    ? '查看'
-                                                    : '下载到云端'
-                                            "
-                                        >
-                                            <IconNode
-                                                :type="type"
-                                                :item="item"
-                                                :on-cloud-view="cloudView"
-                                                :on-down-load="
-                                                    () => downloadClick(item)
-                                                "
-                                            />
-                                        </j-tooltip>
-                                    </template>
+                                            </j-tooltip>
+                                        </template>
 
-                                    <div>
-                                        {{
-                                            dayjs(
-                                                item.startTime ||
-                                                    item.mediaStartTime,
-                                            ).format('HH:mm:ss')
-                                        }}
-                                        ~
-                                        {{
-                                            dayjs(
-                                                item.endTime ||
-                                                    item.mediaEndTime,
-                                            ).format('HH:mm:ss')
-                                        }}
-                                    </div>
-                                </j-list-item>
-                            </template>
-                            <div></div>
-                        </j-list>
-                    </div>
-                </j-spin>
+                                        <div>
+                                            {{
+                                                dayjs(
+                                                    item.startTime ||
+                                                        item.mediaStartTime,
+                                                ).format('HH:mm:ss')
+                                            }}
+                                            ~
+                                            {{
+                                                dayjs(
+                                                    item.endTime ||
+                                                        item.mediaEndTime,
+                                                ).format('HH:mm:ss')
+                                            }}
+                                        </div>
+                                    </j-list-item>
+                                </template>
+                                <div></div>
+                            </j-list>
+                        </div>
+                    </j-spin>
+                </div>
             </div>
-        </div>
+        </FullPage>
     </page-container>
 </template>
 
@@ -216,7 +221,7 @@ const deviceType = ref('');
 
 /**
  * 查询本地视频
- * @param date 
+ * @param date
  */
 const queryLocalRecords = async (date: Dayjs) => {
     playStatus.value = 0;
diff --git a/src/views/media/Device/index.vue b/src/views/media/Device/index.vue
index 9a729dbc..ee593afd 100644
--- a/src/views/media/Device/index.vue
+++ b/src/views/media/Device/index.vue
@@ -5,146 +5,159 @@
             target="notice-config"
             @search="handleSearch"
         />
-        <JProTable
-            ref="listRef"
-            :columns="columns"
-            :request="DeviceApi.list"
-            :defaultParams="{
-                sorts: [{ name: 'createTime', order: 'desc' }],
-            }"
-            :params="params"
-            :gridColumn="4"
-        >
-            <template #headerTitle>
-                <PermissionButton
-                    type="primary"
-                    @click="handleAdd"
-                    hasPermission="media/Device:add"
-                >
-                    <template #icon><AIcon type="PlusOutlined" />新增</template>
-                </PermissionButton>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    :actions="getActions(slotProps, 'card')"
-                    v-bind="slotProps"
-                    :showStatus="true"
-                    :status="slotProps.state.value"
-                    :statusText="slotProps.state.text"
-                    :statusNames="{ online: 'processing', offline: 'error' }"
-                >
-                    <template #img>
-                        <slot name="img">
-                            <img :src="getImage('/device-media.png')" />
-                        </slot>
-                    </template>
-                    <template #content>
-                        <h3 class="card-item-content-title">
-                            {{ slotProps.name }}
-                        </h3>
-                        <j-row>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">厂商</div>
-                                <div>{{ slotProps.manufacturer }}</div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    通道数量
-                                </div>
-                                <div>{{ slotProps.channelNumber }}</div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">型号</div>
-                                <div>{{ slotProps.model }}</div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    接入方式
-                                </div>
-                                <div>
-                                    {{ providerType[slotProps.provider] }}
-                                </div>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="
-                                'media/Device:' +
-                                (item.key !== 'updateChannel'
-                                    ? item.key
-                                    : 'update')
-                            "
-                        >
-                            <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 #channelNumber="slotProps">
-                {{ slotProps.channelNumber || 0 }}
-            </template>
-            <template #provider="slotProps">
-                {{ providerType[slotProps.provider] }}
-            </template>
-            <template #productId="slotProps">
-                {{ getProductName(slotProps.productId) }}
-            </template>
-            <template #state="slotProps">
-                <j-badge
-                    :text="slotProps.state?.text"
-                    :status="
-                        slotProps.state?.value === 'online'
-                            ? 'success'
-                            : 'error'
-                    "
-                />
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
+        <FullPage>
+            <JProTable
+                ref="listRef"
+                :columns="columns"
+                :request="DeviceApi.list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+                :gridColumn="4"
+            >
+                <template #headerTitle>
+                    <PermissionButton
+                        type="primary"
+                        @click="handleAdd"
+                        hasPermission="media/Device:add"
                     >
-                        <PermissionButton
-                            :danger="i.key === 'delete'"
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
-                            :hasPermission="
-                                'media/Device:' +
-                                (i.key !== 'updateChannel' &&
-                                i.key !== 'viewDevice'
-                                    ? i.key
-                                    : 'update')
-                            "
+                        <template #icon
+                            ><AIcon type="PlusOutlined" />新增</template
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                    </PermissionButton>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                        :showStatus="true"
+                        :status="slotProps.state.value"
+                        :statusText="slotProps.state.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                        }"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img :src="getImage('/device-media.png')" />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <j-row>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        厂商
+                                    </div>
+                                    <div>{{ slotProps.manufacturer }}</div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        通道数量
+                                    </div>
+                                    <div>{{ slotProps.channelNumber }}</div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        型号
+                                    </div>
+                                    <div>{{ slotProps.model }}</div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        接入方式
+                                    </div>
+                                    <div>
+                                        {{ providerType[slotProps.provider] }}
+                                    </div>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="
+                                    'media/Device:' +
+                                    (item.key !== 'updateChannel'
+                                        ? item.key
+                                        : 'update')
+                                "
+                            >
+                                <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 #channelNumber="slotProps">
+                    {{ slotProps.channelNumber || 0 }}
+                </template>
+                <template #provider="slotProps">
+                    {{ providerType[slotProps.provider] }}
+                </template>
+                <template #productId="slotProps">
+                    {{ getProductName(slotProps.productId) }}
+                </template>
+                <template #state="slotProps">
+                    <j-badge
+                        :text="slotProps.state?.text"
+                        :status="
+                            slotProps.state?.value === 'online'
+                                ? 'success'
+                                : 'error'
+                        "
+                    />
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                        >
+                            <PermissionButton
+                                :danger="i.key === 'delete'"
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0px"
+                                :hasPermission="
+                                    'media/Device:' +
+                                    (i.key !== 'updateChannel' &&
+                                    i.key !== 'viewDevice'
+                                        ? i.key
+                                        : 'update')
+                                "
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/media/SplitScreen/index.vue b/src/views/media/SplitScreen/index.vue
index 2974adc2..c4e54a6a 100644
--- a/src/views/media/SplitScreen/index.vue
+++ b/src/views/media/SplitScreen/index.vue
@@ -1,23 +1,28 @@
 <template>
     <page-container>
-        <j-card class="splitScreen">
-            <div class="split-screen">
-                <LeftTree @onSelect="mediaStart" />
-                <div class="right-content">
-                    <ScreenPlayer
-                        ref="player"
-                        :id="deviceId"
-                        :channelId="channelId"
-                        :onMouseUp="(id, cId) => channelApi.ptzStop(id, cId)"
-                        :onMouseDown="
-                            (id, cId, type) => channelApi.ptzTool(id, cId, type)
-                        "
-                        :historyHandle="(dId, cId) => getMediaUrl(dId, cId)"
-                        showScreen
-                    />
+        <FullPage>
+            <j-card class="splitScreen">
+                <div class="split-screen">
+                    <LeftTree @onSelect="mediaStart" />
+                    <div class="right-content">
+                        <ScreenPlayer
+                            ref="player"
+                            :id="deviceId"
+                            :channelId="channelId"
+                            :onMouseUp="
+                                (id, cId) => channelApi.ptzStop(id, cId)
+                            "
+                            :onMouseDown="
+                                (id, cId, type) =>
+                                    channelApi.ptzTool(id, cId, type)
+                            "
+                            :historyHandle="(dId, cId) => getMediaUrl(dId, cId)"
+                            showScreen
+                        />
+                    </div>
                 </div>
-            </div>
-        </j-card>
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
@@ -32,8 +37,8 @@ const player = ref();
 
 /**
  * 获取视频链接
- * @param dId 
- * @param cId 
+ * @param dId
+ * @param cId
  */
 const getMediaUrl = (dId: string, cId: string): string => {
     return channelApi.ptzStart(dId, cId, 'mp4');
@@ -41,7 +46,7 @@ const getMediaUrl = (dId: string, cId: string): string => {
 
 /**
  * 点击左侧摄像头, 播放对应视频
- * @param e 
+ * @param e
  */
 const mediaStart = (e: { cId: string; dId: string }) => {
     channelId.value = e.cId;
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
index 091afafe..dba774f2 100644
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@@ -6,185 +6,198 @@
             target="notice-config"
             @search="handleSearch"
         />
-        <JProTable
-            ref="configRef"
-            :columns="columns"
-            :request="ConfigApi.list"
-            :defaultParams="{
-                sorts: [{ name: 'createTime', order: 'desc' }],
-            }"
-            :params="params"
-            :gridColumn="3"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        type="primary"
-                        @click="handleAdd"
-                        hasPermission="notice/Config:add"
-                    >
-                        新增
-                    </PermissionButton>
-                    <j-upload
-                        name="file"
-                        accept=".json"
-                        :showUploadList="false"
-                        :before-upload="beforeUpload"
-                    >
-                        <PermissionButton hasPermission="notice/Config:import">
-                            导入
-                        </PermissionButton>
-                    </j-upload>
-                    <j-popconfirm
-                        title="确认导出？"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="handleExport"
-                    >
-                        <PermissionButton hasPermission="notice/Config:export">
-                            导出
-                        </PermissionButton>
-                    </j-popconfirm>
-                </j-space>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :showStatus="false"
-                    :statusNames="{}"
-                    :value="slotProps"
-                    :actions="getActions(slotProps, 'card')"
-                >
-                    <template #img>
-                        <slot name="img">
-                            <img
-                                :src="
-                                    getLogo(slotProps.type, slotProps.provider)
-                                "
-                                class="logo"
-                            />
-                        </slot>
-                    </template>
-                    <template #content>
-                        <h3 class="card-item-content-title">
-                            {{ slotProps.name }}
-                        </h3>
-                        <j-row>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    通知方式
-                                </div>
-                                <div>
-                                    {{ getMethodTxt(slotProps.type) }}
-                                </div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">说明</div>
-                                <Ellipsis>
-                                    {{ slotProps.description }}
-                                </Ellipsis>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <j-tooltip
-                            v-bind="item.tooltip"
-                            :title="item.disabled && item.tooltip.title"
-                        >
-                            <j-dropdown
-                                placement="bottomRight"
-                                v-if="item.key === 'others'"
-                            >
-                                <j-button>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
-                                </j-button>
-                                <template #overlay>
-                                    <j-menu>
-                                        <j-menu-item
-                                            v-for="(o, i) in item.children"
-                                            :key="i"
-                                        >
-                                            <PermissionButton
-                                                type="link"
-                                                @click="o.onClick"
-                                                :hasPermission="`notice/Config:${o.key}`"
-                                            >
-                                                <template #icon>
-                                                    <AIcon :type="o.icon" />
-                                                </template>
-                                                <span>{{ o.text }}</span>
-                                            </PermissionButton>
-                                        </j-menu-item>
-                                    </j-menu>
-                                </template>
-                            </j-dropdown>
-                            <j-popconfirm
-                                v-else-if="item.key === 'delete'"
-                                v-bind="item.popConfirm"
-                                :disabled="item.disabled"
-                            >
-                                <PermissionButton
-                                    :disabled="item.disabled"
-                                    :hasPermission="`notice/Config:${item.key}`"
-                                >
-                                    <template #icon>
-                                        <AIcon type="DeleteOutlined" />
-                                    </template>
-                                </PermissionButton>
-                            </j-popconfirm>
-                            <template v-else>
-                                <PermissionButton
-                                    :disabled="item.disabled"
-                                    @click="item.onClick"
-                                    :hasPermission="`notice/Config:${item.key}`"
-                                >
-                                    <template #icon>
-                                        <AIcon :type="item.icon" />
-                                    </template>
-                                    <span>{{ item.text }}</span>
-                                </PermissionButton>
-                            </template>
-                        </j-tooltip>
-                    </template>
-                </CardBox>
-            </template>
-            <template #type="slotProps">
-                <span> {{ getMethodTxt(slotProps.type) }}</span>
-            </template>
-            <template #provider="slotProps">
-                <span>
-                    {{ getProviderTxt(slotProps.type, slotProps.provider) }}
-                </span>
-            </template>
-            <template #description="slotProps">
-                <Ellipsis>
-                    {{ slotProps.description }}
-                </Ellipsis>
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
-                    >
+        <FullPage>
+            <JProTable
+                ref="configRef"
+                :columns="columns"
+                :request="ConfigApi.list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+                :gridColumn="3"
+            >
+                <template #headerTitle>
+                    <j-space>
                         <PermissionButton
-                            :danger="i.key === 'delete'"
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
-                            :hasPermission="'notice/Config:' + i.key"
+                            type="primary"
+                            @click="handleAdd"
+                            hasPermission="notice/Config:add"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
+                            新增
                         </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                        <j-upload
+                            name="file"
+                            accept=".json"
+                            :showUploadList="false"
+                            :before-upload="beforeUpload"
+                        >
+                            <PermissionButton
+                                hasPermission="notice/Config:import"
+                            >
+                                导入
+                            </PermissionButton>
+                        </j-upload>
+                        <j-popconfirm
+                            title="确认导出？"
+                            ok-text="确定"
+                            cancel-text="取消"
+                            @confirm="handleExport"
+                        >
+                            <PermissionButton
+                                hasPermission="notice/Config:export"
+                            >
+                                导出
+                            </PermissionButton>
+                        </j-popconfirm>
+                    </j-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="false"
+                        :statusNames="{}"
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="
+                                        getLogo(
+                                            slotProps.type,
+                                            slotProps.provider,
+                                        )
+                                    "
+                                    class="logo"
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <j-row>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        通知方式
+                                    </div>
+                                    <div>
+                                        {{ getMethodTxt(slotProps.type) }}
+                                    </div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        说明
+                                    </div>
+                                    <Ellipsis>
+                                        {{ slotProps.description }}
+                                    </Ellipsis>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <j-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
+                            >
+                                <j-dropdown
+                                    placement="bottomRight"
+                                    v-if="item.key === 'others'"
+                                >
+                                    <j-button>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item.text }}</span>
+                                    </j-button>
+                                    <template #overlay>
+                                        <j-menu>
+                                            <j-menu-item
+                                                v-for="(o, i) in item.children"
+                                                :key="i"
+                                            >
+                                                <PermissionButton
+                                                    type="link"
+                                                    @click="o.onClick"
+                                                    :hasPermission="`notice/Config:${o.key}`"
+                                                >
+                                                    <template #icon>
+                                                        <AIcon :type="o.icon" />
+                                                    </template>
+                                                    <span>{{ o.text }}</span>
+                                                </PermissionButton>
+                                            </j-menu-item>
+                                        </j-menu>
+                                    </template>
+                                </j-dropdown>
+                                <j-popconfirm
+                                    v-else-if="item.key === 'delete'"
+                                    v-bind="item.popConfirm"
+                                    :disabled="item.disabled"
+                                >
+                                    <PermissionButton
+                                        :disabled="item.disabled"
+                                        :hasPermission="`notice/Config:${item.key}`"
+                                    >
+                                        <template #icon>
+                                            <AIcon type="DeleteOutlined" />
+                                        </template>
+                                    </PermissionButton>
+                                </j-popconfirm>
+                                <template v-else>
+                                    <PermissionButton
+                                        :disabled="item.disabled"
+                                        @click="item.onClick"
+                                        :hasPermission="`notice/Config:${item.key}`"
+                                    >
+                                        <template #icon>
+                                            <AIcon :type="item.icon" />
+                                        </template>
+                                        <span>{{ item.text }}</span>
+                                    </PermissionButton>
+                                </template>
+                            </j-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+                <template #type="slotProps">
+                    <span> {{ getMethodTxt(slotProps.type) }}</span>
+                </template>
+                <template #provider="slotProps">
+                    <span>
+                        {{ getProviderTxt(slotProps.type, slotProps.provider) }}
+                    </span>
+                </template>
+                <template #description="slotProps">
+                    <Ellipsis>
+                        {{ slotProps.description }}
+                    </Ellipsis>
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                        >
+                            <PermissionButton
+                                :danger="i.key === 'delete'"
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0px"
+                                :hasPermission="'notice/Config:' + i.key"
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
 
         <Debug v-model:visible="debugVis" :data="currentConfig" />
         <Log v-model:visible="logVis" :data="currentConfig" />
diff --git a/src/views/notice/Template/index.vue b/src/views/notice/Template/index.vue
index fd8b6081..dbc0fa7d 100644
--- a/src/views/notice/Template/index.vue
+++ b/src/views/notice/Template/index.vue
@@ -6,189 +6,198 @@
             target="notice-config"
             @search="handleSearch"
         />
-        <JProTable
-            ref="configRef"
-            :columns="columns"
-            :request="TemplateApi.list"
-            :defaultParams="{
-                sorts: [{ name: 'createTime', order: 'desc' }],
-            }"
-            :params="params"
-            :gridColumn="3"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        type="primary"
-                        @click="handleAdd"
-                        hasPermission="notice/Template:add"
-                    >
-                        新增
-                    </PermissionButton>
-                    <j-upload
-                        name="file"
-                        accept=".json"
-                        :showUploadList="false"
-                        :before-upload="beforeUpload"
-                    >
+        <FullPage>
+            <JProTable
+                ref="configRef"
+                :columns="columns"
+                :request="TemplateApi.list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+                :gridColumn="3"
+            >
+                <template #headerTitle>
+                    <j-space>
                         <PermissionButton
-                            hasPermission="notice/Template:import"
+                            type="primary"
+                            @click="handleAdd"
+                            hasPermission="notice/Template:add"
                         >
-                            导入
+                            新增
                         </PermissionButton>
-                    </j-upload>
-                    <j-popconfirm
-                        title="确认导出？"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="handleExport"
+                        <j-upload
+                            name="file"
+                            accept=".json"
+                            :showUploadList="false"
+                            :before-upload="beforeUpload"
+                        >
+                            <PermissionButton
+                                hasPermission="notice/Template:import"
+                            >
+                                导入
+                            </PermissionButton>
+                        </j-upload>
+                        <j-popconfirm
+                            title="确认导出？"
+                            ok-text="确定"
+                            cancel-text="取消"
+                            @confirm="handleExport"
+                        >
+                            <PermissionButton
+                                hasPermission="notice/Template:export"
+                            >
+                                导出
+                            </PermissionButton>
+                        </j-popconfirm>
+                    </j-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="false"
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        :statusNames="{}"
                     >
-                        <PermissionButton
-                            hasPermission="notice/Template:export"
-                        >
-                            导出
-                        </PermissionButton>
-                    </j-popconfirm>
-                </j-space>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :showStatus="false"
-                    :value="slotProps"
-                    :actions="getActions(slotProps, 'card')"
-                    :statusNames="{}"
-                >
-                    <template #img>
-                        <slot name="img">
-                            <img
-                                :src="
-                                    getLogo(slotProps.type, slotProps.provider)
-                                "
-                                class="logo"
-                            />
-                        </slot>
-                    </template>
-                    <template #content>
-                        <h3 class="card-item-content-title">
-                            {{ slotProps.name }}
-                        </h3>
-                        <j-row>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    通知方式
-                                </div>
-                                <div>
-                                    {{ getMethodTxt(slotProps.type) }}
-                                </div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">说明</div>
-                                <Ellipsis>
-                                    {{ slotProps.description }}
-                                </Ellipsis>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <j-tooltip
-                            v-bind="item.tooltip"
-                            :title="item.disabled && item.tooltip.title"
-                        >
-                            <j-dropdown
-                                placement="bottomRight"
-                                v-if="item.key === 'others'"
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="
+                                        getLogo(
+                                            slotProps.type,
+                                            slotProps.provider,
+                                        )
+                                    "
+                                    class="logo"
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <j-row>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        通知方式
+                                    </div>
+                                    <div>
+                                        {{ getMethodTxt(slotProps.type) }}
+                                    </div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        说明
+                                    </div>
+                                    <Ellipsis>
+                                        {{ slotProps.description }}
+                                    </Ellipsis>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <j-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
                             >
-                                <j-button>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
-                                </j-button>
-                                <template #overlay>
-                                    <j-menu>
-                                        <j-menu-item
-                                            v-for="(o, i) in item.children"
-                                            :key="i"
-                                        >
-                                            <PermissionButton
-                                                type="link"
-                                                @click="o.onClick"
-                                                :hasPermission="`notice/Template:${o.key}`"
-                                            >
-                                                <template #icon>
-                                                    <AIcon :type="o.icon" />
-                                                </template>
-                                                <span>{{ o.text }}</span>
-                                            </PermissionButton>
-                                        </j-menu-item>
-                                    </j-menu>
-                                </template>
-                            </j-dropdown>
-                            <j-popconfirm
-                                v-else-if="item.key === 'delete'"
-                                v-bind="item.popConfirm"
-                                :disabled="item.disabled"
-                            >
-                                <PermissionButton
-                                    :disabled="item.disabled"
-                                    :hasPermission="`notice/Template:${item.key}`"
+                                <j-dropdown
+                                    placement="bottomRight"
+                                    v-if="item.key === 'others'"
                                 >
-                                    <template #icon>
-                                        <AIcon type="DeleteOutlined" />
-                                    </template>
-                                </PermissionButton>
-                            </j-popconfirm>
-                            <template v-else>
-                                <PermissionButton
-                                    :disabled="item.disabled"
-                                    @click="item.onClick"
-                                    :hasPermission="`notice/Template:${item.key}`"
-                                >
-                                    <template #icon>
+                                    <j-button>
                                         <AIcon :type="item.icon" />
+                                        <span>{{ item.text }}</span>
+                                    </j-button>
+                                    <template #overlay>
+                                        <j-menu>
+                                            <j-menu-item
+                                                v-for="(o, i) in item.children"
+                                                :key="i"
+                                            >
+                                                <PermissionButton
+                                                    type="link"
+                                                    @click="o.onClick"
+                                                    :hasPermission="`notice/Template:${o.key}`"
+                                                >
+                                                    <template #icon>
+                                                        <AIcon :type="o.icon" />
+                                                    </template>
+                                                    <span>{{ o.text }}</span>
+                                                </PermissionButton>
+                                            </j-menu-item>
+                                        </j-menu>
                                     </template>
-                                    <span>{{ item.text }}</span>
-                                </PermissionButton>
-                            </template>
-                        </j-tooltip>
-                    </template>
-                </CardBox>
-            </template>
-            <template #type="slotProps">
-                <span> {{ getMethodTxt(slotProps.type) }}</span>
-            </template>
-            <template #provider="slotProps">
-                <span>
-                    {{ getProviderTxt(slotProps.type, slotProps.provider) }}
-                </span>
-            </template>
-            <template #description="slotProps">
-                <Ellipsis>
-                    {{ slotProps.description }}
-                </Ellipsis>
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
-                    >
-                        <PermissionButton
-                            :danger="i.key === 'delete'"
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
-                            :hasPermission="'notice/Template:' + i.key"
+                                </j-dropdown>
+                                <j-popconfirm
+                                    v-else-if="item.key === 'delete'"
+                                    v-bind="item.popConfirm"
+                                    :disabled="item.disabled"
+                                >
+                                    <PermissionButton
+                                        :disabled="item.disabled"
+                                        :hasPermission="`notice/Template:${item.key}`"
+                                    >
+                                        <template #icon>
+                                            <AIcon type="DeleteOutlined" />
+                                        </template>
+                                    </PermissionButton>
+                                </j-popconfirm>
+                                <template v-else>
+                                    <PermissionButton
+                                        :disabled="item.disabled"
+                                        @click="item.onClick"
+                                        :hasPermission="`notice/Template:${item.key}`"
+                                    >
+                                        <template #icon>
+                                            <AIcon :type="item.icon" />
+                                        </template>
+                                        <span>{{ item.text }}</span>
+                                    </PermissionButton>
+                                </template>
+                            </j-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+                <template #type="slotProps">
+                    <span> {{ getMethodTxt(slotProps.type) }}</span>
+                </template>
+                <template #provider="slotProps">
+                    <span>
+                        {{ getProviderTxt(slotProps.type, slotProps.provider) }}
+                    </span>
+                </template>
+                <template #description="slotProps">
+                    <Ellipsis>
+                        {{ slotProps.description }}
+                    </Ellipsis>
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :danger="i.key === 'delete'"
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0px"
+                                :hasPermission="'notice/Template:' + i.key"
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
 
         <Debug v-model:visible="debugVis" :data="currentConfig" />
         <Log v-model:visible="logVis" :data="currentConfig" />

From e98f168b207832176d84844c9bc20e109149ee89 Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Thu, 30 Mar 2023 17:07:33 +0800
Subject: [PATCH 06/12] =?UTF-8?q?fix:=20bug#11226=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=93=BA=E6=BB=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device/Category/index.vue           | 110 ++--
 .../device/Product/Detail/BasicInfo/indev.vue |  87 ++--
 .../Product/Detail/DataAnalysis/index.vue     | 260 ++++++----
 .../Product/Detail/DeviceAccess/index.vue     | 490 +++++++++---------
 src/views/device/Product/Detail/index.vue     |  18 +-
 src/views/device/Product/index.vue            | 323 ++++++------
 .../device/components/Metadata/index.vue      |   2 -
 src/views/rule-engine/Alarm/Config/index.vue  | 118 +++--
 .../Alarm/Configuration/Save/Base/index.vue   | 129 ++---
 .../Alarm/Configuration/Save/Scene/index.vue  | 162 +++---
 .../rule-engine/Alarm/Configuration/index.vue | 332 ++++++------
 .../rule-engine/Alarm/Log/Detail/index.vue    | 101 ++--
 .../rule-engine/Alarm/Log/Record/index.vue    |  70 +--
 .../Alarm/Log/TabComponent/indev.vue          | 217 ++++----
 src/views/rule-engine/Instance/index.vue      | 247 ++++-----
 15 files changed, 1393 insertions(+), 1273 deletions(-)

diff --git a/src/views/device/Category/index.vue b/src/views/device/Category/index.vue
index 8ddab919..dfb9051c 100644
--- a/src/views/device/Category/index.vue
+++ b/src/views/device/Category/index.vue
@@ -6,61 +6,65 @@
             target="category"
             @search="handleSearch"
         />
-        <JProTable
-            ref="tableRef"
-            :columns="table.columns"
-            :request="queryTree"
-            model="TABLE"
-            type="TREE"
-            v-model:expandedRowKeys="expandedRowKeys"
-            :scroll="{ y: 550 }"
-            :defaultParams="{
-                paging: false,
-                sorts: [
-                    { name: 'sortIndex', order: 'asc' },
-                    {
-                        name: 'createTime',
-                        order: 'desc',
-                    },
-                ],
-            }"
-            :params="params"
-            :loading="tableLoading"
-        >
-            <template #headerTitle>
-                <PermissionButton
-                    type="primary"
-                    @click="add"
-                    hasPermission="device/Category:add"
-                >
-                    <template #icon><AIcon type="PlusOutlined" /></template>
-                    新增
-                </PermissionButton>
-            </template>
-            <template #action="slotProps">
-                <j-space>
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
+        <FullPage>
+            <JProTable
+                ref="tableRef"
+                :columns="table.columns"
+                :request="queryTree"
+                model="TABLE"
+                type="TREE"
+                v-model:expandedRowKeys="expandedRowKeys"
+                :scroll="{ y: 550 }"
+                :defaultParams="{
+                    paging: false,
+                    sorts: [
+                        { name: 'sortIndex', order: 'asc' },
+                        {
+                            name: 'createTime',
+                            order: 'desc',
+                        },
+                    ],
+                }"
+                :params="params"
+                :loading="tableLoading"
+            >
+                <template #headerTitle>
+                    <PermissionButton
+                        type="primary"
+                        @click="add"
+                        hasPermission="device/Category:add"
                     >
-                        <PermissionButton
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :hasPermission="'device/Category:' + i.key"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
-                            :danger="i.key === 'delete'"
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
+                    </PermissionButton>
+                </template>
+                <template #action="slotProps">
+                    <j-space>
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :hasPermission="'device/Category:' + i.key"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0px"
+                                :danger="i.key === 'delete'"
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
         <!-- 新增和编辑弹窗 -->
         <ModifyModal
             ref="modifyRef"
diff --git a/src/views/device/Product/Detail/BasicInfo/indev.vue b/src/views/device/Product/Detail/BasicInfo/indev.vue
index 27d63a43..80ccde40 100644
--- a/src/views/device/Product/Detail/BasicInfo/indev.vue
+++ b/src/views/device/Product/Detail/BasicInfo/indev.vue
@@ -1,56 +1,51 @@
 <!-- 配置信息 -->
 <template>
-    <j-card style="min-height: 100%">
-        <j-descriptions bordered>
-            <template #title>
-                <div style="display: flex">
-                    <h3>配置信息</h3>
-                    <!-- <div style="margin: 0 0px 0 15px; color: #1d39c4">
+    <j-descriptions bordered>
+        <template #title>
+            <div style="display: flex">
+                <h3>配置信息</h3>
+                <!-- <div style="margin: 0 0px 0 15px; color: #1d39c4">
                         <AIcon type="EditOutlined" @click="editConfig" />
                     </div> -->
-                    <PermissionButton
-                        type="link"
-                        @click="editConfig"
-                        hasPermission="device/Product:update"
-                    >
-                        <template #icon><AIcon type="EditOutlined" /></template>
-                    </PermissionButton>
-                </div>
-            </template>
+                <PermissionButton
+                    type="link"
+                    @click="editConfig"
+                    hasPermission="device/Product:update"
+                >
+                    <template #icon><AIcon type="EditOutlined" /></template>
+                </PermissionButton>
+            </div>
+        </template>
 
-            <j-descriptions-item label="ID">
-                <Ellipsis>{{ productStore.current.id }}</Ellipsis>
-            </j-descriptions-item>
-            <j-descriptions-item label="产品分类">
-                <Ellipsis>{{ productStore.current.classifiedName }}</Ellipsis>
-            </j-descriptions-item>
-            <j-descriptions-item label="设备类型">{{
-                productStore.current.deviceType?.text
-            }}</j-descriptions-item>
+        <j-descriptions-item label="ID">
+            <Ellipsis>{{ productStore.current.id }}</Ellipsis>
+        </j-descriptions-item>
+        <j-descriptions-item label="产品分类">
+            <Ellipsis>{{ productStore.current.classifiedName }}</Ellipsis>
+        </j-descriptions-item>
+        <j-descriptions-item label="设备类型">{{
+            productStore.current.deviceType?.text
+        }}</j-descriptions-item>
 
-            <j-descriptions-item label="接入方式">
-                <j-button type="link" @click="changeTables">{{
-                    productStore.current.accessName
-                        ? productStore.current.accessName
-                        : '配置接入方式'
-                }}</j-button>
-            </j-descriptions-item>
-            <j-descriptions-item label="创建时间">{{
-                dayjs(productStore.current.createTime).format(
-                    'YYYY-MM-DD HH:mm:ss',
-                )
-            }}</j-descriptions-item>
-            <j-descriptions-item label="更新时间">{{
-                dayjs(productStore.current.modifyTime).format(
-                    'YYYY-MM-DD HH:mm:ss',
-                )
-            }}</j-descriptions-item>
+        <j-descriptions-item label="接入方式">
+            <j-button type="link" @click="changeTables">{{
+                productStore.current.accessName
+                    ? productStore.current.accessName
+                    : '配置接入方式'
+            }}</j-button>
+        </j-descriptions-item>
+        <j-descriptions-item label="创建时间">{{
+            dayjs(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss')
+        }}</j-descriptions-item>
+        <j-descriptions-item label="更新时间">{{
+            dayjs(productStore.current.modifyTime).format('YYYY-MM-DD HH:mm:ss')
+        }}</j-descriptions-item>
+
+        <j-descriptions-item label="说明" :span="3">
+            {{ productStore.current.describe }}
+        </j-descriptions-item>
+    </j-descriptions>
 
-            <j-descriptions-item label="说明" :span="3">
-                {{ productStore.current.describe }}
-            </j-descriptions-item>
-        </j-descriptions>
-    </j-card>
     <!-- 编辑 -->
     <Save ref="saveRef" :isAdd="isAdd" :title="title" @success="refresh" />
 </template>
diff --git a/src/views/device/Product/Detail/DataAnalysis/index.vue b/src/views/device/Product/Detail/DataAnalysis/index.vue
index 92f23a84..00b27f6a 100644
--- a/src/views/device/Product/Detail/DataAnalysis/index.vue
+++ b/src/views/device/Product/Detail/DataAnalysis/index.vue
@@ -1,138 +1,193 @@
 
 <template>
-    <j-card>
-        <div>
-            <div class="top">
-                <div>
-                    脚本语言:
-                    <j-select :defaultValue="'JavaScript'" style="width: 200;margin-left: 5px;">
-                        <j-select-option value="JavaScript">JavaScript(ECMAScript 5)</j-select-option>
-                    </j-select>
-                    <AIcon type="ExpandOutlined" style="margin-left: 20px;" @click="toggle" />
-                </div>
-            </div>
-            <div class="edit" ref="el">
-                <j-monaco-editor language="javascript" style="height: 100%;" theme="vs" v-model:modelValue="editorValue" />
-            </div>
-            <div class="bottom">
-                <div style="width: 49.5%;">
-                    <div class="bottom-title">
-                        <div class="bottom-title-text">模拟输入</div>
-                        <div class="bottom-title-topic">
-                            <template v-if="productStore.current.transportProtocol === 'MQTT'">
-                                <div style="margin-right: 5px;">Topic:</div>
-                                <j-auto-complete placeholder="请输入Topic" style="width: 300px" :options="topicList"
-                                    :allowClear="true" :filterOption="(inputValue: any, option: any) =>
-                                        option!.value.indexOf(inputValue) !== -1" v-model:value="topic" />
-                            </template>
-                            <template v-else>
-                                <div style="margin-right: 5px;">URL:</div>
-                                <j-input placeholder="请输入URL" v-model:value="url" style="width: 300px"></j-input>
-                            </template>
-                        </div>
-
-                    </div>
-                    <j-textarea :rows="5" placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串" style="margin-top: 10px;"
-                        v-model:value="simulation" />
-                </div>
-                <div style="width: 49.5%;">
-                    <div class="bottom-title">
-                        <div class="bottom-title-text">运行结果</div>
-                    </div>
-                    <j-textarea :autoSize="{ minRows: 5 }" :style="resStyle" v-model:value="result" />
-                </div>
+    <div>
+        <div class="top">
+            <div>
+                脚本语言:
+                <j-select
+                    :defaultValue="'JavaScript'"
+                    style="width: 200; margin-left: 5px"
+                >
+                    <j-select-option value="JavaScript"
+                        >JavaScript(ECMAScript 5)</j-select-option
+                    >
+                </j-select>
+                <AIcon
+                    type="ExpandOutlined"
+                    style="margin-left: 20px"
+                    @click="toggle"
+                />
             </div>
         </div>
-        <div style="margin-top: 10px;margin-left: 10px;">
-            <PermissionButton type="primary" hasPermission="device/Instance:update" :loading="loading"
-                :disabled="isDisabled" @click="debug()" :tooltip="{
-                    title: '需输入脚本和模拟数据后再点击',
-                }">
-                调试
-            </PermissionButton>
-            <PermissionButton hasPermission="device/Instance:update" :loading="loading" :disabled="!isTest" @click="save()"
-                :style="{ marginLeft: '10px' }" :tooltip="{
-                    title: isTest ? '' : '请先调试',
-                }">
-                保存
-            </PermissionButton>
+        <div class="edit" ref="el">
+            <j-monaco-editor
+                language="javascript"
+                style="height: 100%"
+                theme="vs"
+                v-model:modelValue="editorValue"
+            />
         </div>
-    </j-card>
+        <div class="bottom">
+            <div style="width: 49.5%">
+                <div class="bottom-title">
+                    <div class="bottom-title-text">模拟输入</div>
+                    <div class="bottom-title-topic">
+                        <template
+                            v-if="
+                                productStore.current.transportProtocol ===
+                                'MQTT'
+                            "
+                        >
+                            <div style="margin-right: 5px">Topic:</div>
+                            <j-auto-complete
+                                placeholder="请输入Topic"
+                                style="width: 300px"
+                                :options="topicList"
+                                :allowClear="true"
+                                :filterOption="(inputValue: any, option: any) =>
+                                        option!.value.indexOf(inputValue) !== -1"
+                                v-model:value="topic"
+                            />
+                        </template>
+                        <template v-else>
+                            <div style="margin-right: 5px">URL:</div>
+                            <j-input
+                                placeholder="请输入URL"
+                                v-model:value="url"
+                                style="width: 300px"
+                            ></j-input>
+                        </template>
+                    </div>
+                </div>
+                <j-textarea
+                    :rows="5"
+                    placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串"
+                    style="margin-top: 10px"
+                    v-model:value="simulation"
+                />
+            </div>
+            <div style="width: 49.5%">
+                <div class="bottom-title">
+                    <div class="bottom-title-text">运行结果</div>
+                </div>
+                <j-textarea
+                    :autoSize="{ minRows: 5 }"
+                    :style="resStyle"
+                    v-model:value="result"
+                />
+            </div>
+        </div>
+    </div>
+    <div style="margin-top: 10px; margin-left: 10px">
+        <PermissionButton
+            type="primary"
+            hasPermission="device/Instance:update"
+            :loading="loading"
+            :disabled="isDisabled"
+            @click="debug()"
+            :tooltip="{
+                title: '需输入脚本和模拟数据后再点击',
+            }"
+        >
+            调试
+        </PermissionButton>
+        <PermissionButton
+            hasPermission="device/Instance:update"
+            :loading="loading"
+            :disabled="!isTest"
+            @click="save()"
+            :style="{ marginLeft: '10px' }"
+            :tooltip="{
+                title: isTest ? '' : '请先调试',
+            }"
+        >
+            保存
+        </PermissionButton>
+    </div>
 </template>
 
 <script setup lang='ts' name="DataAnalysis">
-import PermissionButton from '@/components/PermissionButton/index.vue'
+import PermissionButton from '@/components/PermissionButton/index.vue';
 // import MonacoEditor from '@/components/MonacoEditor/index.vue';
-import { useFullscreen } from '@vueuse/core'
+import { useFullscreen } from '@vueuse/core';
 import { useProductStore } from '@/store/product';
 import {
     productCode,
     getProtocal,
     testCode,
     saveProductCode,
-} from '@/api/device/instance'
+} from '@/api/device/instance';
 import { message } from 'jetlinks-ui-components';
 import { isBoolean } from 'lodash';
 
 const defaultValue =
     '//解码函数\r\nfunction decode(context) {\r\n    //原始报文\r\n    var buffer = context.payload();\r\n    // 转为json\r\n    // var json = context.json();\r\n    //mqtt 时通过此方法获取topic\r\n    // var topic = context.topic();\r\n\r\n    // 提取变量\r\n    // var topicVars = context.pathVars("/{deviceId}/**",topic)\r\n    //温度属性\r\n    var temperature = buffer.getShort(3) * 10;\r\n    //湿度属性\r\n    var humidity = buffer.getShort(6) * 10;\r\n    return {\r\n        "temperature": temperature,\r\n        "humidity": humidity\r\n    };\r\n}\r\n';
 
-const el = ref<HTMLElement | null>(null)
-const { toggle } = useFullscreen(el)
-const productStore = useProductStore()
+const el = ref<HTMLElement | null>(null);
+const { toggle } = useFullscreen(el);
+const productStore = useProductStore();
 
+const url = ref<string>('');
+const topic = ref<string>('');
+const topicList = ref([]);
+const simulation = ref<string>('');
+const resultValue = ref<any>({});
+const loading = ref<boolean>(false);
+const isTest = ref<boolean>(false);
+const editorValue = ref<string>('');
 
-const url = ref<string>('')
-const topic = ref<string>('')
-const topicList = ref([])
-const simulation = ref<string>('')
-const resultValue = ref<any>({})
-const loading = ref<boolean>(false)
-const isTest = ref<boolean>(false)
-const editorValue = ref<string>('')
+const resStyle = computed(() =>
+    isBoolean(resultValue.value.success)
+        ? {
+              'margin-top': '10px',
+              'border-color': resultValue.value.success ? 'green' : 'red',
+          }
+        : {
+              'margin-top': '10px',
+          },
+);
 
-const resStyle = computed(() => (isBoolean(resultValue.value.success) ? {
-    'margin-top': '10px',
-    'border-color': resultValue.value.success ? 'green' : 'red'
-} : {
-    'margin-top': '10px',
-}))
-
-const isDisabled = computed(() => simulation.value === '')
-
-const result = computed(() => resultValue.value.success ? JSON.stringify(resultValue.value.outputs?.[0]) : resultValue.value.reason)
+const isDisabled = computed(() => simulation.value === '');
 
+const result = computed(() =>
+    resultValue.value.success
+        ? JSON.stringify(resultValue.value.outputs?.[0])
+        : resultValue.value.reason,
+);
 
 //获取topic
 const getTopic = async () => {
-    const res: any = await getProtocal(productStore.current.messageProtocol, productStore.current.transportProtocol)
+    const res: any = await getProtocal(
+        productStore.current.messageProtocol,
+        productStore.current.transportProtocol,
+    );
     if (res.status === 200) {
         const item = res.result.routes?.map((items: any) => ({
             value: items.topic,
         }));
-        topicList.value = item
+        topicList.value = item;
     }
 };
 //获取产品解析规则
 const getProductCode = async () => {
-    const res: any = await productCode(productStore.current.id)
+    const res: any = await productCode(productStore.current.id);
     if (res.status === 200) {
-        if(res.result){
-            editorValue.value = res.result?.configuration?.script
-        }else{
-            editorValue.value = defaultValue
+        if (res.result) {
+            editorValue.value = res.result?.configuration?.script;
+        } else {
+            editorValue.value = defaultValue;
         }
     }
-}
+};
 //调试
 const test = async (dataTest: any) => {
-    loading.value = true
-    const res = await testCode(dataTest)
+    loading.value = true;
+    const res = await testCode(dataTest);
     if (res.status === 200) {
-        loading.value = false
-        resultValue.value = res?.result
+        loading.value = false;
+        resultValue.value = res?.result;
     } else {
-        loading.value = false
+        loading.value = false;
     }
 };
 
@@ -144,15 +199,14 @@ const save = async () => {
             script: editorValue.value,
             lang: 'javascript',
         },
-    }
-    const res = await saveProductCode(productStore.current.id, item)
+    };
+    const res = await saveProductCode(productStore.current.id, item);
     if (res.status === 200) {
         message.success('保存成功');
         getProductCode();
     }
 };
 
-
 const debug = () => {
     if (productStore.current.transportProtocol === 'MQTT') {
         if (topic.value !== '') {
@@ -166,8 +220,8 @@ const debug = () => {
                 },
                 provider: 'jsr223',
                 payload: simulation.value,
-            })
-            isTest.value = true
+            });
+            isTest.value = true;
         } else {
             message.error('请输入topic');
         }
@@ -184,19 +238,17 @@ const debug = () => {
                 },
                 payload: simulation.value,
             });
-            isTest.value = true
+            isTest.value = true;
         } else {
             message.error('请输入url');
         }
     }
-}
-
+};
 
 onMounted(() => {
-    getProductCode()
-    getTopic()
-})
-
+    getProductCode();
+    getTopic();
+});
 </script>
 
 <style scoped lang='less'>
diff --git a/src/views/device/Product/Detail/DeviceAccess/index.vue b/src/views/device/Product/Detail/DeviceAccess/index.vue
index 22d10f64..b7aa4c1c 100644
--- a/src/views/device/Product/Detail/DeviceAccess/index.vue
+++ b/src/views/device/Product/Detail/DeviceAccess/index.vue
@@ -1,30 +1,26 @@
 <!-- 设备接入 -->
 <template>
-    <j-card style="min-height: 100%">
-        <div v-if="productStore.current.accessId === undefined || null">
-            <j-empty :image="simpleImage">
-                <template #description>
-                    <span
-                        v-if="
-                            permissionStore.hasPermission(
-                                'device/Product:update',
-                            )
-                        "
-                    >
-                        请先<j-button type="link" @click="showModal"
-                            >选择</j-button
-                        >设备接入网关，用以提供设备接入能力
-                    </span>
-                    <span v-else>请联系管理员配置产品接入方式</span>
-                </template>
-            </j-empty>
-        </div>
-        <div v-else>
-            <j-row :gutter="24">
-                <j-col :span="12">
-                    <Title data="接入方式">
-                        <template #extra>
-                            <!-- <j-tooltip
+    <div v-if="productStore.current.accessId === undefined || null">
+        <j-empty :image="simpleImage">
+            <template #description>
+                <span
+                    v-if="
+                        permissionStore.hasPermission('device/Product:update')
+                    "
+                >
+                    请先<j-button type="link" @click="showModal">选择</j-button
+                    >设备接入网关，用以提供设备接入能力
+                </span>
+                <span v-else>请联系管理员配置产品接入方式</span>
+            </template>
+        </j-empty>
+    </div>
+    <div v-else>
+        <j-row :gutter="24">
+            <j-col :span="12">
+                <Title data="接入方式">
+                    <template #extra>
+                        <!-- <j-tooltip
                                 :title="
                                     productStore.current?.count &&
                                     productStore.current?.count > 0
@@ -45,249 +41,229 @@
                                     >更换</j-button
                                 >
                             </j-tooltip> -->
-                            <PermissionButton
-                                style="margin: 0 0 0 20px"
-                                type="primary"
-                                size="small"
-                                :tooltip="{
-                                    title:
-                                        productStore.current?.count &&
-                                        productStore.current?.count > 0
-                                            ? '产品下有设备实例时不能更换接入方式'
-                                            : '',
-                                }"
-                                :disabled="
+                        <PermissionButton
+                            style="margin: 0 0 0 20px"
+                            type="primary"
+                            size="small"
+                            :tooltip="{
+                                title:
                                     productStore.current?.count &&
                                     productStore.current?.count > 0
-                                "
-                                ghost
-                                @click="showDevice"
-                                hasPermission="device/Product:update"
-                            >
-                                更换
-                            </PermissionButton>
-                        </template>
-                    </Title>
+                                        ? '产品下有设备实例时不能更换接入方式'
+                                        : '',
+                            }"
+                            :disabled="
+                                productStore.current?.count &&
+                                productStore.current?.count > 0
+                            "
+                            ghost
+                            @click="showDevice"
+                            hasPermission="device/Product:update"
+                        >
+                            更换
+                        </PermissionButton>
+                    </template>
+                </Title>
+                <div>
                     <div>
-                        <div>
-                            {{ access?.name }}
+                        {{ access?.name }}
+                    </div>
+                    <div>
+                        {{
+                            access?.description ||
+                            dataSource.find(
+                                (item) => item?.id === access?.provider,
+                            )?.description
+                        }}
+                    </div>
+                </div>
+                <div class="item-style">
+                    <Title data="消息协议"></Title>
+                    <div>
+                        {{ access?.protocolDetail?.name }}
+                    </div>
+                    <!-- 显示md文件内容 -->
+                    <div v-if="config?.document" v-html="markdownToHtml"></div>
+                </div>
+                <div class="item-style">
+                    <Title data="连接信息"></Title>
+                    <div v-if="access?.channelInfo?.addresses.length > 0">
+                        <div
+                            v-for="item in access?.channelInfo?.addresses"
+                            :key="item.address"
+                        >
+                            <j-badge
+                                :color="item.health === -1 ? 'red' : 'green'"
+                                :text="item.address"
+                            >
+                            </j-badge>
                         </div>
-                        <div>
+                    </div>
+                    <div v-else>{{ '暂无连接信息' }}</div>
+                </div>
+                <Title
+                    v-if="metadata?.name"
+                    :data="metadata?.name"
+                    class="config"
+                >
+                    <template #extra>
+                        <j-tooltip title="此配置来自于产品接入方式所选择的协议">
+                            <AIcon
+                                type="QuestionCircleOutlined"
+                                style="margin-left: 2px"
+                            />
+                        </j-tooltip>
+                    </template>
+                </Title>
+                <j-form ref="formRef" :model="formData.data" layout="vertical">
+                    <j-form-item
+                        :name="item.property"
+                        v-for="item in metadata.properties"
+                        :key="item"
+                        :label="item.name"
+                        :rules="[
+                            {
+                                required: !!item?.type?.expands?.required,
+                                message: `${
+                                    item.type.type === 'enum'
+                                        ? '请选择'
+                                        : '请输入'
+                                }${item.name}`,
+                            },
+                        ]"
+                    >
+                        <j-input
+                            placeholder="请输入"
+                            v-if="item.type.type === 'string'"
+                            v-model:value="formData.data[item.property]"
+                        ></j-input>
+                        <j-input-password
+                            placeholder="请输入"
+                            v-if="item.type.type === 'password'"
+                            v-model:value="formData.data[item.property]"
+                        ></j-input-password>
+                        <j-select
+                            placeholder="请选择"
+                            v-if="item.type.type === 'enum'"
+                            v-model:value="formData.data[item.name]"
+                        >
+                            <j-select-option
+                                v-for="el in item?.type?.type === 'enum' &&
+                                item?.type?.elements
+                                    ? item?.type?.elements
+                                    : []"
+                                :key="el"
+                                :value="el.value"
+                            >
+                                {{ el.text }}
+                            </j-select-option>
+                        </j-select>
+                    </j-form-item>
+                </j-form>
+                <Title data="存储策略">
+                    <template #extra>
+                        <j-tooltip
+                            title="若修改存储策略,需要手动做数据迁移,平台只能搜索最新存储策略中的数据"
+                        >
+                            <AIcon
+                                type="QuestionCircleOutlined"
+                                style="margin-left: 2px"
+                            />
+                        </j-tooltip>
+                    </template>
+                </Title>
+                <j-form layout="vertical">
+                    <j-form-item>
+                        <j-select ref="select" v-model:value="form.storePolicy">
+                            <j-select-option
+                                v-for="(item, index) in storageList"
+                                :key="index"
+                                :value="item.id"
+                                >{{ item.name }}</j-select-option
+                            >
+                        </j-select>
+                    </j-form-item>
+                </j-form>
+                <PermissionButton
+                    type="primary"
+                    @click="submitDevice"
+                    hasPermission="device/Instance:update"
+                    >保存</PermissionButton
+                >
+            </j-col>
+            <j-col
+                :span="12"
+                v-if="config?.routes && config?.routes?.length > 0"
+            >
+                <div class="info">
+                    <div>
+                        <div style="font-weight: 600; margin: 0 0 10 px 0">
                             {{
-                                access?.description ||
-                                dataSource.find(
-                                    (item) => item?.id === access?.provider,
-                                )?.description
+                                access?.provider === 'mqtt-server-gateway' ||
+                                access?.provider === 'mqtt-client-gateway'
+                                    ? 'topic'
+                                    : 'URL信息'
                             }}
                         </div>
-                    </div>
-                    <div class="item-style">
-                        <Title data="消息协议"></Title>
-                        <div>
-                            {{ access?.protocolDetail?.name }}
-                        </div>
-                        <!-- 显示md文件内容 -->
-                        <div
-                            v-if="config?.document"
-                            v-html="markdownToHtml"
-                        ></div>
-                    </div>
-                    <div class="item-style">
-                        <Title data="连接信息"></Title>
-                        <div v-if="access?.channelInfo?.addresses.length > 0">
-                            <div
-                                v-for="item in access?.channelInfo?.addresses"
-                                :key="item.address"
-                            >
-                                <j-badge
-                                    :color="
-                                        item.health === -1 ? 'red' : 'green'
-                                    "
-                                    :text="item.address"
-                                >
-                                </j-badge>
-                            </div>
-                        </div>
-                        <div v-else>{{ '暂无连接信息' }}</div>
-                    </div>
-                    <Title
-                        v-if="metadata?.name"
-                        :data="metadata?.name"
-                        class="config"
-                    >
-                        <template #extra>
-                            <j-tooltip
-                                title="此配置来自于产品接入方式所选择的协议"
-                            >
-                                <AIcon
-                                    type="QuestionCircleOutlined"
-                                    style="margin-left: 2px"
-                                />
-                            </j-tooltip>
-                        </template>
-                    </Title>
-                    <j-form
-                        ref="formRef"
-                        :model="formData.data"
-                        layout="vertical"
-                    >
-                        <j-form-item
-                            :name="item.property"
-                            v-for="item in metadata.properties"
-                            :key="item"
-                            :label="item.name"
-                            :rules="[
-                                {
-                                    required: !!item?.type?.expands?.required,
-                                    message: `${
-                                        item.type.type === 'enum'
-                                            ? '请选择'
-                                            : '请输入'
-                                    }${item.name}`,
-                                },
-                            ]"
+                        <j-table
+                            :columns="
+                                config.id === 'MQTT' ? columnsMQTT : columnsHTTP
+                            "
+                            :data-source="config?.routes"
+                            :pagination="false"
+                            :scroll="{ y: 500 }"
                         >
-                            <j-input
-                                placeholder="请输入"
-                                v-if="item.type.type === 'string'"
-                                v-model:value="formData.data[item.property]"
-                            ></j-input>
-                            <j-input-password
-                                placeholder="请输入"
-                                v-if="item.type.type === 'password'"
-                                v-model:value="formData.data[item.property]"
-                            ></j-input-password>
-                            <j-select
-                                placeholder="请选择"
-                                v-if="item.type.type === 'enum'"
-                                v-model:value="formData.data[item.name]"
-                            >
-                                <j-select-option
-                                    v-for="el in item?.type?.type === 'enum' &&
-                                    item?.type?.elements
-                                        ? item?.type?.elements
-                                        : []"
-                                    :key="el"
-                                    :value="el.value"
-                                >
-                                    {{ el.text }}
-                                </j-select-option>
-                            </j-select>
-                        </j-form-item>
-                    </j-form>
-                    <Title data="存储策略">
-                        <template #extra>
-                            <j-tooltip
-                                title="若修改存储策略,需要手动做数据迁移,平台只能搜索最新存储策略中的数据"
-                            >
-                                <AIcon
-                                    type="QuestionCircleOutlined"
-                                    style="margin-left: 2px"
-                                />
-                            </j-tooltip>
-                        </template>
-                    </Title>
-                    <j-form layout="vertical">
-                        <j-form-item>
-                            <j-select
-                                ref="select"
-                                v-model:value="form.storePolicy"
-                            >
-                                <j-select-option
-                                    v-for="(item, index) in storageList"
-                                    :key="index"
-                                    :value="item.id"
-                                    >{{ item.name }}</j-select-option
-                                >
-                            </j-select>
-                        </j-form-item>
-                    </j-form>
-                    <PermissionButton
-                        type="primary"
-                        @click="submitDevice"
-                        hasPermission="device/Instance:update"
-                        >保存</PermissionButton
-                    >
-                </j-col>
-                <j-col
-                    :span="12"
-                    v-if="config?.routes && config?.routes?.length > 0"
-                >
-                    <div class="info">
-                        <div>
-                            <div style="font-weight: 600; margin: 0 0 10 px 0">
-                                {{
-                                    access?.provider ===
-                                        'mqtt-server-gateway' ||
-                                    access?.provider === 'mqtt-client-gateway'
-                                        ? 'topic'
-                                        : 'URL信息'
-                                }}
-                            </div>
-                            <j-table
-                                :columns="
-                                    config.id === 'MQTT'
-                                        ? columnsMQTT
-                                        : columnsHTTP
-                                "
-                                :data-source="config?.routes"
-                                :pagination="false"
-                                :scroll="{ y: 500 }"
-                            >
-                                <template #bodyCell="{ text, column, record }">
-                                    <template v-if="column.key === 'topic'">
-                                        <j-tooltip
-                                            placement="topLeft"
-                                            :title="text"
-                                        >
-                                            <div class="ellipsis-style">
-                                                {{ text }}
-                                            </div>
-                                        </j-tooltip>
-                                    </template>
-                                    <template v-if="column.key === 'stream'">
-                                        <div>{{ getStream(record) }}</div>
-                                    </template>
-                                    <template
-                                        v-if="column.key === 'description'"
+                            <template #bodyCell="{ text, column, record }">
+                                <template v-if="column.key === 'topic'">
+                                    <j-tooltip
+                                        placement="topLeft"
+                                        :title="text"
                                     >
-                                        <j-tooltip
-                                            placement="topLeft"
-                                            :title="text"
-                                        >
-                                            <div class="ellipsis-style">
-                                                {{ text }}
-                                            </div>
-                                        </j-tooltip>
-                                    </template>
-                                    <template v-if="column.key === 'address'">
-                                        <j-tooltip
-                                            placement="topLeft"
-                                            :title="text"
-                                        >
-                                            <div class="ellipsis-style">
-                                                {{ text }}
-                                            </div>
-                                        </j-tooltip>
-                                    </template>
-                                    <template v-if="column.key === 'example'">
-                                        <j-tooltip
-                                            placement="topLeft"
-                                            :title="text"
-                                        >
-                                            <div class="ellipsis-style">
-                                                {{ text }}
-                                            </div>
-                                        </j-tooltip>
-                                    </template>
+                                        <div class="ellipsis-style">
+                                            {{ text }}
+                                        </div>
+                                    </j-tooltip>
                                 </template>
-                            </j-table>
-                        </div>
+                                <template v-if="column.key === 'stream'">
+                                    <div>{{ getStream(record) }}</div>
+                                </template>
+                                <template v-if="column.key === 'description'">
+                                    <j-tooltip
+                                        placement="topLeft"
+                                        :title="text"
+                                    >
+                                        <div class="ellipsis-style">
+                                            {{ text }}
+                                        </div>
+                                    </j-tooltip>
+                                </template>
+                                <template v-if="column.key === 'address'">
+                                    <j-tooltip
+                                        placement="topLeft"
+                                        :title="text"
+                                    >
+                                        <div class="ellipsis-style">
+                                            {{ text }}
+                                        </div>
+                                    </j-tooltip>
+                                </template>
+                                <template v-if="column.key === 'example'">
+                                    <j-tooltip
+                                        placement="topLeft"
+                                        :title="text"
+                                    >
+                                        <div class="ellipsis-style">
+                                            {{ text }}
+                                        </div>
+                                    </j-tooltip>
+                                </template>
+                            </template>
+                        </j-table>
                     </div>
-                </j-col>
-            </j-row>
-        </div>
-    </j-card>
+                </div>
+            </j-col>
+        </j-row>
+    </div>
     <!-- 选择设备 -->
     <j-modal
         title="设备接入配置"
diff --git a/src/views/device/Product/Detail/index.vue b/src/views/device/Product/Detail/index.vue
index ea2cae76..f311ede6 100644
--- a/src/views/device/Product/Detail/index.vue
+++ b/src/views/device/Product/Detail/index.vue
@@ -90,11 +90,19 @@
                 >应用配置</PermissionButton
             >
         </template>
-        <component
-            :is="tabs[productStore.tabActiveKey]"
-            :class="productStore.tabActiveKey === 'Metadata' ? 'metedata' : ''"
-            v-bind="{ type: 'product' }"
-        />
+        <FullPage>
+            <j-card :bordered="false">
+                <component
+                    :is="tabs[productStore.tabActiveKey]"
+                    :class="
+                        productStore.tabActiveKey === 'Metadata'
+                            ? 'metedata'
+                            : ''
+                    "
+                    v-bind="{ type: 'product' }"
+                />
+            </j-card>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/device/Product/index.vue b/src/views/device/Product/index.vue
index 1477968a..4a5b509e 100644
--- a/src/views/device/Product/index.vue
+++ b/src/views/device/Product/index.vue
@@ -5,152 +5,167 @@
             target="product-manage"
             @search="handleSearch"
         />
-        <JProTable
-            :columns="columns"
-            :request="queryProductList"
-            ref="tableRef"
-            :defaultParams="{
-                sorts: [{ name: 'createTime', order: 'desc' }],
-            }"
-            :params="params"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        type="primary"
-                        @click="add"
-                        hasPermission="device/Product:add"
-                    >
-                        <template #icon><AIcon type="PlusOutlined" /></template>
-                        新增
-                    </PermissionButton>
-                    <j-upload
-                        name="file"
-                        accept=".json"
-                        :showUploadList="false"
-                        :before-upload="beforeUpload"
-                    >
-                        <PermissionButton hasPermission="device/Product:import"
-                            >导入</PermissionButton
+        <FullPage>
+            <JProTable
+                :columns="columns"
+                :request="queryProductList"
+                ref="tableRef"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <j-space>
+                        <PermissionButton
+                            type="primary"
+                            @click="add"
+                            hasPermission="device/Product:add"
                         >
-                    </j-upload>
-                </j-space>
-            </template>
-            <template #deviceType="slotProps">
-                <div>{{ slotProps.deviceType.text }}</div>
-            </template>
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    :actions="getActions(slotProps, 'card')"
-                    v-bind="slotProps"
-                    :active="_selectedRowKeys.includes(slotProps.id)"
-                    :status="slotProps.state"
-                    @click="handleView(slotProps.id)"
-                    :statusText="slotProps.state === 1 ? '正常' : '禁用'"
-                    :statusNames="{
-                        1: 'processing',
-                        0: 'error',
-                    }"
-                >
-                    <template #img>
-                        <slot name="img">
-                            <img
-                                :src="
-                                    slotProps.photoUrl ||
-                                    getImage('/device-product.png')
-                                "
-                                class="productImg"
-                            />
-                        </slot>
-                    </template>
-                    <template #content>
-                        <Ellipsis style="width: calc(100% - 100px)"
-                            ><span
-                                style="font-weight: 600; font-size: 16px"
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                        <j-upload
+                            name="file"
+                            accept=".json"
+                            :showUploadList="false"
+                            :before-upload="beforeUpload"
+                        >
+                            <PermissionButton
+                                hasPermission="device/Product:import"
+                                >导入</PermissionButton
                             >
-                                {{ slotProps.name }}
-                            </span></Ellipsis
-                        >
-                        <j-row>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    设备类型
-                                </div>
-                                <div>{{ slotProps?.deviceType?.text }}</div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    接入方式
-                                </div>
-                                <Ellipsis
-                                    ><div>
-                                        {{
-                                            slotProps?.accessName
-                                                ? slotProps?.accessName
-                                                : '未接入'
-                                        }}
-                                    </div></Ellipsis
-                                >
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <PermissionButton
-                            :disabled="item.disabled"
-                            :popConfirm="item.popConfirm"
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="item.key ==='view' ? true : 'device/Product:' + 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">
-                <BadgeStatus
-                    :text="slotProps.state === 1 ? '正常' : '禁用'"
-                    :status="slotProps.state"
-                    :statusNames="{
-                        1: 'processing',
-                        0: 'error',
-                    }"
-                />
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <template
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
+                        </j-upload>
+                    </j-space>
+                </template>
+                <template #deviceType="slotProps">
+                    <div>{{ slotProps.deviceType.text }}</div>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                        :active="_selectedRowKeys.includes(slotProps.id)"
+                        :status="slotProps.state"
+                        @click="handleView(slotProps.id)"
+                        :statusText="slotProps.state === 1 ? '正常' : '禁用'"
+                        :statusNames="{
+                            1: 'processing',
+                            0: 'error',
+                        }"
                     >
-                        <PermissionButton
-                            :disabled="i.disabled"
-                            :popConfirm="i.popConfirm"
-                            :hasPermission="i.key === 'view' ? true : 'device/Product:' + i.key"
-                            :tooltip="{
-                                ...i.tooltip,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
-                            :danger="i.key === 'delete'"
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="
+                                        slotProps.photoUrl ||
+                                        getImage('/device-product.png')
+                                    "
+                                    class="productImg"
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <Ellipsis style="width: calc(100% - 100px)"
+                                ><span
+                                    style="font-weight: 600; font-size: 16px"
+                                >
+                                    {{ slotProps.name }}
+                                </span></Ellipsis
+                            >
+                            <j-row>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        设备类型
+                                    </div>
+                                    <div>{{ slotProps?.deviceType?.text }}</div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        接入方式
+                                    </div>
+                                    <Ellipsis
+                                        ><div>
+                                            {{
+                                                slotProps?.accessName
+                                                    ? slotProps?.accessName
+                                                    : '未接入'
+                                            }}
+                                        </div></Ellipsis
+                                    >
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="
+                                    item.key === 'view'
+                                        ? true
+                                        : 'device/Product:' + 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">
+                    <BadgeStatus
+                        :text="slotProps.state === 1 ? '正常' : '禁用'"
+                        :status="slotProps.state"
+                        :statusNames="{
+                            1: 'processing',
+                            0: 'error',
+                        }"
+                    />
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon" /></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                :popConfirm="i.popConfirm"
+                                :hasPermission="
+                                    i.key === 'view'
+                                        ? true
+                                        : 'device/Product:' + i.key
+                                "
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                @click="i.onClick"
+                                type="link"
+                                style="padding: 0px"
+                                :danger="i.key === 'delete'"
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon"
+                                /></template>
+                            </PermissionButton>
+                        </template>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
         <!-- 新增、编辑 -->
         <Save ref="saveRef" :isAdd="isAdd" :title="title" @success="refresh" />
     </page-container>
@@ -181,8 +196,8 @@ import { typeOptions } from '@/components/Search/util';
 import Save from './Save/index.vue';
 import { useMenuStore } from 'store/menu';
 import { useRoute } from 'vue-router';
-import {useRouterParams} from "@/utils/hooks/useParams";
-import { accessConfigTypeFilter } from '@/utils/setting'
+import { useRouterParams } from '@/utils/hooks/useParams';
+import { accessConfigTypeFilter } from '@/utils/setting';
 /**
  * 表格数据
  */
@@ -196,21 +211,21 @@ const columns = [
         dataIndex: 'id',
         key: 'id',
         scopedSlots: true,
-        width:200,
+        width: 200,
         ellipsis: true,
     },
     {
         title: '产品名称',
         dataIndex: 'name',
         key: 'name',
-        width:220,
+        width: 220,
         ellipsis: true,
     },
     {
         title: '接入方式',
         dataIndex: 'accessName',
         key: 'accessName',
-        width:220,
+        width: 220,
         ellipsis: true,
     },
     {
@@ -219,7 +234,7 @@ const columns = [
         key: 'deviceType',
         scopedSlots: true,
         ellipsis: true,
-        width:120,
+        width: 120,
     },
     {
         title: '状态',
@@ -227,7 +242,7 @@ const columns = [
         key: 'state',
         scopedSlots: true,
         ellipsis: true,
-        width:90,
+        width: 90,
     },
     {
         title: '说明',
@@ -434,7 +449,7 @@ const query = reactive({
             key: 'id',
             search: {
                 type: 'string',
-                defaultTermType: 'eq'
+                defaultTermType: 'eq',
             },
         },
         {
@@ -446,8 +461,8 @@ const query = reactive({
                 options: () => {
                     return new Promise((resolve) => {
                         getProviders().then((resp: any) => {
-                          const data = resp.result || []
-                          resolve(accessConfigTypeFilter(data))
+                            const data = resp.result || [];
+                            resolve(accessConfigTypeFilter(data));
                         });
                     });
                 },
@@ -592,9 +607,9 @@ const saveRef = ref();
 const handleSearch = (e: any) => {
     params.value = e;
 };
-const routerParams = useRouterParams()
+const routerParams = useRouterParams();
 onMounted(() => {
-    if(routerParams.params?.value.save){
+    if (routerParams.params?.value.save) {
         add();
     }
 });
diff --git a/src/views/device/components/Metadata/index.vue b/src/views/device/components/Metadata/index.vue
index f24aca63..e3c5a070 100644
--- a/src/views/device/components/Metadata/index.vue
+++ b/src/views/device/components/Metadata/index.vue
@@ -1,5 +1,4 @@
 <template>
-  <j-card>
     <div class='device-detail-metadata' style="position: relative;">
       <div class="tips">
         <j-tooltip :title="instanceStore.detail?.independentMetadata && type === 'device'
@@ -44,7 +43,6 @@
       <Import v-if="visible" v-model:visible="visible" :type="type" @close="visible = false" />
       <Cat v-model:visible="cat" @close="cat = false" :type="type" />
     </div>
-  </j-card>
 </template>
 <script setup lang="ts" name="Metadata">
 import PermissionButton from '@/components/PermissionButton/index.vue'
diff --git a/src/views/rule-engine/Alarm/Config/index.vue b/src/views/rule-engine/Alarm/Config/index.vue
index 6e664ac9..0556b3e1 100644
--- a/src/views/rule-engine/Alarm/Config/index.vue
+++ b/src/views/rule-engine/Alarm/Config/index.vue
@@ -1,58 +1,79 @@
 <template>
-    <page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab">
-        <div v-if="tab=='config'">
+    <page-container
+        :tabList="list"
+        @tabChange="onTabChange"
+        :tabActiveKey="tab"
+    >
+        <div v-if="tab == 'config'">
             <j-row :gutter="24">
                 <j-col :span="14">
-                    <div class="alarm-level">
-                        <j-card
-                            :headStyle="{ borderBottom: 'none', padding: 0 }"
-                            :bodyStyle="{ padding: 0 }"
-                            :bordered="false"
-                        >
-                            <template #title>
-                                <div class="alarmLevelTitle">告警级别配置</div>
-                            </template>
-                            <div
-                                v-for="(item, i) in levels"
-                                :key="i"
-                                class="alarmInputItem"
+                    <FullPage>
+                        <div class="alarm-level">
+                            <j-card
+                                :headStyle="{
+                                    borderBottom: 'none',
+                                    padding: 0,
+                                }"
+                                :bodyStyle="{ padding: 0 }"
+                                :bordered="false"
                             >
-                                <div>
-                                    <img
-                                        :src="
-                                            getImage(`/alarm/alarm${i + 1}.png`)
-                                        "
-                                        alt=""
-                                    />
-                                    <span>{{ `级别${i + 1}` }}</span>
+                                <template #title>
+                                    <div class="alarmLevelTitle">
+                                        告警级别配置
+                                    </div>
+                                </template>
+                                <div
+                                    v-for="(item, i) in levels"
+                                    :key="i"
+                                    class="alarmInputItem"
+                                >
+                                    <div>
+                                        <img
+                                            :src="
+                                                getImage(
+                                                    `/alarm/alarm${i + 1}.png`,
+                                                )
+                                            "
+                                            alt=""
+                                        />
+                                        <span>{{ `级别${i + 1}` }}</span>
+                                    </div>
+                                    <div>
+                                        <j-input
+                                            type="text"
+                                            v-model:value="item.title"
+                                            :maxlength="64"
+                                        ></j-input>
+                                    </div>
                                 </div>
-                                <div>
-                                    <j-input
-                                        type="text"
-                                        v-model:value="item.title"
-                                        :maxlength="64"
-                                    ></j-input>
-                                </div>
-                            </div>
-                        </j-card>
-                        <!-- <j-button
+                            </j-card>
+                            <!-- <j-button
                             type="primary"
                             size="middle"
                             @click="handleSaveLevel"
                             >保存</j-button
                         > -->
-                        <PermissionButton type="primary" size="middle" @click="handleSaveLevel" hasPermission="rule-engine/Alarm/Config:update">保存</PermissionButton>
-                    </div>
+                            <PermissionButton
+                                type="primary"
+                                size="middle"
+                                @click="handleSaveLevel"
+                                hasPermission="rule-engine/Alarm/Config:update"
+                                >保存</PermissionButton
+                            >
+                        </div>
+                    </FullPage>
                 </j-col>
                 <j-col :span="10">
-                    <div class="description">
-                        <h1>功能说明</h1>
-                        <div>
-                            1、告警级别用于描述告警的严重程度，请根据业务管理方式进行自定义。
+                    <FullPage>
+                        <div class="description">
+                            <h1>功能说明</h1>
+                            <div>
+                                1、告警级别用于描述告警的严重程度，请根据业务管理方式进行自定义。
+                            </div>
+                            <div>2、告警级别将会在告警配置中被引用。</div>
+                            <div>3、最多可配置5个级别。</div>
                         </div>
-                        <div>2、告警级别将会在告警配置中被引用。</div>
-                        <div>3、最多可配置5个级别。</div>
-                    </div>
+                    </FullPage>
                 </j-col>
             </j-row>
         </div>
@@ -65,7 +86,7 @@ import { getImage } from '@/utils/comm';
 import { queryLevel, saveLevel } from '@/api/rule-engine/config';
 import { LevelItem } from './typing';
 import { message } from 'jetlinks-ui-components';
-import Io from './Io/index.vue'
+import Io from './Io/index.vue';
 const list = ref([
     {
         key: 'config',
@@ -77,7 +98,7 @@ const list = ref([
     },
 ]);
 let levels = ref<LevelItem[]>([]);
-let tab = ref<'io'|'config'|string>('config');
+let tab = ref<'io' | 'config' | string>('config');
 const getAlarmLevel = () => {
     queryLevel().then((res: any) => {
         if (res.status == 200) {
@@ -133,9 +154,10 @@ const onTabChange = (e: string) => {
     font-size: 14px;
     background-color: #fff;
     h1 {
-    margin: 16px 0;
-    color: rgba(#000, 0.85);
-    font-weight: bold;
-    font-size: 14px;}
+        margin: 16px 0;
+        color: rgba(#000, 0.85);
+        font-weight: bold;
+        font-size: 14px;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/rule-engine/Alarm/Configuration/Save/Base/index.vue b/src/views/rule-engine/Alarm/Configuration/Save/Base/index.vue
index 6cffefd6..5d84b94f 100644
--- a/src/views/rule-engine/Alarm/Configuration/Save/Base/index.vue
+++ b/src/views/rule-engine/Alarm/Configuration/Save/Base/index.vue
@@ -1,67 +1,74 @@
 <template>
-    <div>
-        <j-form layout="vertical" :rules="rule" :model="form" ref="formRef">
-            <j-row :gutter="24">
-                <j-col :span="12">
-                    <j-form-item label="名称" name="name">
-                        <j-input
-                            placeholder="请输入名称"
-                            v-model:value="form.name"
-                        ></j-input> </j-form-item
-                ></j-col>
-                <j-col :span="12">
-                    <j-form-item label="类型" name="targetType">
-                        <j-select
-                            :options="options"
-                            v-model:value="form.targetType"
-                            :disabled="selectDisable"
-                        ></j-select>
-                    </j-form-item>
-                </j-col>
-            </j-row>
-            <j-form-item label="级别" name="level">
-                <j-radio-group v-model:value="form.level" class="levelSelect">
-                    <j-radio-button
-                        v-for="(item, index) in levelOption"
-                        :key="index"
-                        :value="item.value"
+    <FullPage>
+        <div>
+            <j-form layout="vertical" :rules="rule" :model="form" ref="formRef">
+                <j-row :gutter="24">
+                    <j-col :span="12">
+                        <j-form-item label="名称" name="name">
+                            <j-input
+                                placeholder="请输入名称"
+                                v-model:value="form.name"
+                            ></j-input> </j-form-item
+                    ></j-col>
+                    <j-col :span="12">
+                        <j-form-item label="类型" name="targetType">
+                            <j-select
+                                :options="options"
+                                v-model:value="form.targetType"
+                                :disabled="selectDisable"
+                            ></j-select>
+                        </j-form-item>
+                    </j-col>
+                </j-row>
+                <j-form-item label="级别" name="level">
+                    <j-radio-group
+                        v-model:value="form.level"
+                        class="levelSelect"
                     >
-                        <div
-                            style="
-                                text-align: center;
-                                margin-top: 10px;
-                                font-size: 15px;
-                                width: 90%;
-                            "
+                        <j-radio-button
+                            v-for="(item, index) in levelOption"
+                            :key="index"
+                            :value="item.value"
                         >
-                            <img
-                                :src="getImage(`/alarm/alarm${index + 1}.png`)"
-                                style="height: 40px"
-                                alt=""
-                            />{{ item.label }}
-                        </div>
-                    </j-radio-button>
-                </j-radio-group>
-            </j-form-item>
-            <j-form-item label="说明" name="description">
-                <j-textarea
-                    v-model:value="form.description"
-                    showCount
-                    :maxlength="200"
-                ></j-textarea>
-            </j-form-item>
-            <PermissionButton
-                type="primary"
-                :loading="loading"
-                @click="handleSave"
-                :hasPermission="[
-                    'rule-engine/Alarm/Configuration:add',
-                    'rule-engine/Alarm/Configuration:update',
-                ]"
-                >保存</PermissionButton
-            >
-        </j-form>
-    </div>
+                            <div
+                                style="
+                                    text-align: center;
+                                    margin-top: 10px;
+                                    font-size: 15px;
+                                    width: 90%;
+                                "
+                            >
+                                <img
+                                    :src="
+                                        getImage(`/alarm/alarm${index + 1}.png`)
+                                    "
+                                    style="height: 40px"
+                                    alt=""
+                                />{{ item.label }}
+                            </div>
+                        </j-radio-button>
+                    </j-radio-group>
+                </j-form-item>
+                <j-form-item label="说明" name="description">
+                    <j-textarea
+                        v-model:value="form.description"
+                        showCount
+                        :maxlength="200"
+                    ></j-textarea>
+                </j-form-item>
+                <PermissionButton
+                    type="primary"
+                    :loading="loading"
+                    @click="handleSave"
+                    :hasPermission="[
+                        'rule-engine/Alarm/Configuration:add',
+                        'rule-engine/Alarm/Configuration:update',
+                    ]"
+                    >保存</PermissionButton
+                >
+            </j-form>
+        </div>
+    </FullPage>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue b/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue
index 67f3d86b..0e5f765d 100644
--- a/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue
+++ b/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue
@@ -1,86 +1,90 @@
 <template>
-    <JProTable
-        model="CARD"
-        :request="query"
-        :defaultParams="{
-            sorts: [{ name: 'createTime', order: 'desc' }],
-            terms,
-        }"
-        ref="actionRef"
-    >
-        <template #headerTitle>
-            <j-space>
-                <PermissionButton
-                    type="primary"
-                    @click="showModal"
-                    hasPermission="rule-engine/Alarm/Configuration:add"
-                >
-                    <template #icon><AIcon type="PlusOutlined" /></template>
-                    新增
-                </PermissionButton>
-            </j-space>
-        </template>
-        <template #card="slotProps">
-            <CardBox
-                :value="slotProps"
-                :actions="getActions(slotProps, 'card')"
-                :status="slotProps.state?.value"
-                :statusText="slotProps.state?.text"
-                :statusNames="{
-                    started: 'processing',
-                    disable: 'error',
-                }"
-            >
-                <template #type>
-                    <span
-                        ><img
-                            :height="16"
-                            :src="typeMap.get(slotProps.triggerType)?.icon"
-                            style="margin-right: 5px"
-                        />{{ typeMap.get(slotProps.triggerType)?.text }}</span
-                    >
-                </template>
-                <template #img>
-                    <img :src="typeMap.get(slotProps.triggerType)?.img" />
-                </template>
-                <template #content>
-                    <Ellipsis style="width: calc(100% - 100px)">
-                        <span style="font-size: 16px; font-weight: 600">
-                            {{ slotProps.name }}
-                        </span>
-                    </Ellipsis>
-                    <Ellipsis :lineClamp="2">
-                        <div class="subTitle">
-                            说明：{{
-                                slotProps?.description ||
-                                typeMap.get(slotProps.triggerType)?.tip
-                            }}
-                        </div>
-                    </Ellipsis>
-                </template>
-                <template #actions="item">
+    <FullPage>
+        <JProTable
+            model="CARD"
+            :request="query"
+            :defaultParams="{
+                sorts: [{ name: 'createTime', order: 'desc' }],
+                terms,
+            }"
+            ref="actionRef"
+        >
+            <template #headerTitle>
+                <j-space>
                     <PermissionButton
-                        :disabled="item.disabled"
-                        :popConfirm="item.popConfirm"
-                        :tooltip="{
-                            ...item.tooltip,
-                        }"
-                        @click="item.onClick"
-                        :hasPermission="'rule-engine/Scene:' + item.key"
+                        type="primary"
+                        @click="showModal"
+                        hasPermission="rule-engine/Alarm/Configuration:add"
                     >
-                        <AIcon
-                            type="DeleteOutlined"
-                            v-if="item.key === 'delete'"
-                        />
-                        <template v-else>
-                            <AIcon :type="item.icon" />
-                            <span>{{ item?.text }}</span>
-                        </template>
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
                     </PermissionButton>
-                </template>
-            </CardBox>
-        </template>
-    </JProTable>
+                </j-space>
+            </template>
+            <template #card="slotProps">
+                <CardBox
+                    :value="slotProps"
+                    :actions="getActions(slotProps, 'card')"
+                    :status="slotProps.state?.value"
+                    :statusText="slotProps.state?.text"
+                    :statusNames="{
+                        started: 'processing',
+                        disable: 'error',
+                    }"
+                >
+                    <template #type>
+                        <span
+                            ><img
+                                :height="16"
+                                :src="typeMap.get(slotProps.triggerType)?.icon"
+                                style="margin-right: 5px"
+                            />{{
+                                typeMap.get(slotProps.triggerType)?.text
+                            }}</span
+                        >
+                    </template>
+                    <template #img>
+                        <img :src="typeMap.get(slotProps.triggerType)?.img" />
+                    </template>
+                    <template #content>
+                        <Ellipsis style="width: calc(100% - 100px)">
+                            <span style="font-size: 16px; font-weight: 600">
+                                {{ slotProps.name }}
+                            </span>
+                        </Ellipsis>
+                        <Ellipsis :lineClamp="2">
+                            <div class="subTitle">
+                                说明：{{
+                                    slotProps?.description ||
+                                    typeMap.get(slotProps.triggerType)?.tip
+                                }}
+                            </div>
+                        </Ellipsis>
+                    </template>
+                    <template #actions="item">
+                        <PermissionButton
+                            :disabled="item.disabled"
+                            :popConfirm="item.popConfirm"
+                            :tooltip="{
+                                ...item.tooltip,
+                            }"
+                            @click="item.onClick"
+                            :hasPermission="'rule-engine/Scene:' + 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>
+        </JProTable>
+    </FullPage>
     <Save
         :id="id"
         :type="configurationData.current?.targetType"
diff --git a/src/views/rule-engine/Alarm/Configuration/index.vue b/src/views/rule-engine/Alarm/Configuration/index.vue
index f2eff490..7a79de68 100644
--- a/src/views/rule-engine/Alarm/Configuration/index.vue
+++ b/src/views/rule-engine/Alarm/Configuration/index.vue
@@ -6,172 +6,182 @@
                 target="device-instance"
                 @search="handleSearch"
             />
-            <JProTable
-                :columns="columns"
-                :request="queryList"
-                :gridColumn="3"
-                :gridColumns="[1, 2, 3]"
-                ref="tableRef"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <j-space>
-                        <PermissionButton
-                            type="primary"
-                            @click="add"
-                            hasPermission="rule-engine/Alarm/Configuration:add"
-                        >
-                            <template #icon
-                                ><AIcon type="PlusOutlined"
-                            /></template>
-                            新增
-                        </PermissionButton>
-                    </j-space>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :value="slotProps"
-                        :actions="getActions(slotProps, 'card')"
-                        v-bind="slotProps"
-                        :status="slotProps.state?.value"
-                        :statusText="slotProps.state?.text"
-                        :statusNames="{
-                            enabled: 'processing',
-                            disabled: 'error',
-                        }"
-                        @click="
-                            () => {
-                                menuStory.jumpPage(
-                                    'rule-engine/Alarm/Configuration/Save',
-                                    {},
-                                    { id: slotProps.id },
-                                );
-                            }
-                        "
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img
-                                    :src="getImage('/alarm/alarm-config.png')"
-                                />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <Ellipsis style="width: calc(100% - 100px)">
-                                <span style="font-weight: 600; font-size: 16px">
-                                    {{ slotProps.name }}
-                                </span>
-                            </Ellipsis>
-                            <j-row>
-                                <j-col :span="12">
-                                    <div class="content-des-title">
-                                        关联场景联动
-                                    </div>
-                                    <Ellipsis
-                                        ><div>
-                                            {{ (slotProps?.scene || []).map((item: any) => item?.name).join(',') || '' }}
-                                        </div></Ellipsis
-                                    >
-                                </j-col>
-                                <j-col :span="12">
-                                    <div class="content-des-title">
-                                        告警级别
-                                    </div>
-                                    <div>
-                                        {{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
-            slotProps.level }}
-                                    </div>
-                                </j-col>
-                            </j-row>
-                        </template>
-                        <template #actions="item">
+            <FullPage>
+                <JProTable
+                    :columns="columns"
+                    :request="queryList"
+                    :gridColumn="3"
+                    :gridColumns="[1, 2, 3]"
+                    ref="tableRef"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <j-space>
                             <PermissionButton
-                                :disabled="item.disabled"
-                                :popConfirm="item.popConfirm"
-                                :tooltip="{ ...item.tooltip }"
-                                @click="item.onClick"
-                                :hasPermission="
-                                    'rule-engine/Alarm/Configuration:' +
-                                    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 #targetType="slotProps">
-                    <span>{{ map[slotProps.targetType] }}</span>
-                </template>
-                <template #level="slotProps">
-                    <j-tooltip
-                        placement="topLeft"
-                        :title="(Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
-            slotProps.level"
-                    >
-                        <div class="ellipsis">
-                            {{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
-            slotProps.level }}
-                        </div>
-                    </j-tooltip>
-                </template>
-                <template #sceneId="slotProps">
-                    <span
-                        >{{(slotProps?.scene || []).map((item: any) => item?.name).join(',') || ''}}</span
-                    >
-                </template>
-                <template #state="slotProps">
-                    <BadgeStatus
-                        :text="
-                            slotProps.state?.value === 'enabled'
-                                ? '正常'
-                                : '禁用'
-                        "
-                        :status="slotProps.state?.value"
-                        :statusNames="{
-                            enabled: 'processing',
-                            disabled: 'error',
-                        }"
-                    />
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
-                        <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"
-                                :hasPermission="
-                                    'rule-engine/Alarm/Configuration:' + i.key
-                                "
-                                :danger="i.key === 'delete'"
+                                type="primary"
+                                @click="add"
+                                hasPermission="rule-engine/Alarm/Configuration:add"
                             >
                                 <template #icon
-                                    ><AIcon :type="i.icon"
+                                    ><AIcon type="PlusOutlined"
                                 /></template>
+                                新增
                             </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-            </JProTable>
+                        </j-space>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :value="slotProps"
+                            :actions="getActions(slotProps, 'card')"
+                            v-bind="slotProps"
+                            :status="slotProps.state?.value"
+                            :statusText="slotProps.state?.text"
+                            :statusNames="{
+                                enabled: 'processing',
+                                disabled: 'error',
+                            }"
+                            @click="
+                                () => {
+                                    menuStory.jumpPage(
+                                        'rule-engine/Alarm/Configuration/Save',
+                                        {},
+                                        { id: slotProps.id },
+                                    );
+                                }
+                            "
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img
+                                        :src="
+                                            getImage('/alarm/alarm-config.png')
+                                        "
+                                    />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <Ellipsis style="width: calc(100% - 100px)">
+                                    <span
+                                        style="
+                                            font-weight: 600;
+                                            font-size: 16px;
+                                        "
+                                    >
+                                        {{ slotProps.name }}
+                                    </span>
+                                </Ellipsis>
+                                <j-row>
+                                    <j-col :span="12">
+                                        <div class="content-des-title">
+                                            关联场景联动
+                                        </div>
+                                        <Ellipsis
+                                            ><div>
+                                                {{ (slotProps?.scene || []).map((item: any) => item?.name).join(',') || '' }}
+                                            </div></Ellipsis
+                                        >
+                                    </j-col>
+                                    <j-col :span="12">
+                                        <div class="content-des-title">
+                                            告警级别
+                                        </div>
+                                        <div>
+                                            {{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
+            slotProps.level }}
+                                        </div>
+                                    </j-col>
+                                </j-row>
+                            </template>
+                            <template #actions="item">
+                                <PermissionButton
+                                    :disabled="item.disabled"
+                                    :popConfirm="item.popConfirm"
+                                    :tooltip="{ ...item.tooltip }"
+                                    @click="item.onClick"
+                                    :hasPermission="
+                                        'rule-engine/Alarm/Configuration:' +
+                                        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 #targetType="slotProps">
+                        <span>{{ map[slotProps.targetType] }}</span>
+                    </template>
+                    <template #level="slotProps">
+                        <j-tooltip
+                            placement="topLeft"
+                            :title="(Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
+            slotProps.level"
+                        >
+                            <div class="ellipsis">
+                                {{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
+            slotProps.level }}
+                            </div>
+                        </j-tooltip>
+                    </template>
+                    <template #sceneId="slotProps">
+                        <span
+                            >{{(slotProps?.scene || []).map((item: any) => item?.name).join(',') || ''}}</span
+                        >
+                    </template>
+                    <template #state="slotProps">
+                        <BadgeStatus
+                            :text="
+                                slotProps.state?.value === 'enabled'
+                                    ? '正常'
+                                    : '禁用'
+                            "
+                            :status="slotProps.state?.value"
+                            :statusNames="{
+                                enabled: 'processing',
+                                disabled: 'error',
+                            }"
+                        />
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <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"
+                                    :hasPermission="
+                                        'rule-engine/Alarm/Configuration:' +
+                                        i.key
+                                    "
+                                    :danger="i.key === 'delete'"
+                                >
+                                    <template #icon
+                                        ><AIcon :type="i.icon"
+                                    /></template>
+                                </PermissionButton>
+                            </template>
+                        </j-space>
+                    </template>
+                </JProTable>
+            </FullPage>
         </div>
     </page-container>
 </template>
diff --git a/src/views/rule-engine/Alarm/Log/Detail/index.vue b/src/views/rule-engine/Alarm/Log/Detail/index.vue
index e7da7342..f465f220 100644
--- a/src/views/rule-engine/Alarm/Log/Detail/index.vue
+++ b/src/views/rule-engine/Alarm/Log/Detail/index.vue
@@ -5,48 +5,57 @@
             target="alarm-log-detail"
             @search="handleSearch"
         />
-        <JProTable
-            :columns="columns"
-            model="TABLE"
-            :request="queryList"
-            :params="params"
-            :defaultParams="{
-                terms,
-                sorts: [{ name: 'alarmTime', order: 'desc' }],
-            }"
-        >
-            <template #alarmTime="slotProps">{{
-                dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
-            }}</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,
-                            }"
-                            @click="i.onClick"
-                            type="link"
-                            style="padding: 0px"
+        <FullPage>
+            <JProTable
+                :columns="columns"
+                model="TABLE"
+                :request="queryList"
+                :params="params"
+                :defaultParams="{
+                    terms,
+                    sorts: [{ name: 'alarmTime', order: 'desc' }],
+                }"
+            >
+                <template #alarmTime="slotProps">{{
+                    dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
+                }}</template>
+                <template #action="slotProps">
+                    <j-space
+                        ><template
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
                         >
-                            <template #icon><AIcon :type="i.icon"/></template>
-                        </PermissionButton>
-                    </template>
-                </j-space>
-            </template>
-        </JProTable>
-        <Info v-if="visiable"  :data="current" @close="close" :description="description"/>
+                            <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>
+                    </j-space>
+                </template>
+            </JProTable>
+        </FullPage>
+        <Info
+            v-if="visiable"
+            :data="current"
+            @close="close"
+            :description="description"
+        />
     </page-container>
 </template>
 
 <script lang="ts" setup>
 import { detail, queryHistoryList } from '@/api/rule-engine/log';
-import { detail as configurationDetail} from '@/api/rule-engine/configuration'
+import { detail as configurationDetail } from '@/api/rule-engine/configuration';
 import { useRoute } from 'vue-router';
 import dayjs from 'dayjs';
 import type { ActionsType } from '@/components/Table/index.vue';
@@ -54,10 +63,10 @@ import { message } from 'jetlinks-ui-components';
 import { useAlarmStore } from '@/store/alarm';
 import Info from './info.vue';
 import { storeToRefs } from 'pinia';
-import {useRouterParams} from "@/utils/hooks/useParams";
+import { useRouterParams } from '@/utils/hooks/useParams';
 const route = useRoute();
 const id = route.params?.id;
-const { params: routerParams } = useRouterParams()
+const { params: routerParams } = useRouterParams();
 let visiable = ref(false);
 let description = ref<string>();
 const columns = [
@@ -170,11 +179,11 @@ watchEffect(async () => {
                 key: 'targetName',
             });
         }
-        configurationDetail(res.result?.alarmConfigId).then((res:any)=>{
-            if(res.status === 200){
+        configurationDetail(res.result?.alarmConfigId).then((res: any) => {
+            if (res.status === 200) {
                 description.value = res.result?.description;
             }
-        })
+        });
     }
 });
 const handleSearch = (_params: any) => {
@@ -185,15 +194,15 @@ const handleSearch = (_params: any) => {
  * 关闭模态弹窗
  */
 const close = () => {
-  visiable.value = false
-}
+    visiable.value = false;
+};
 
-watchEffect(()=>{
+watchEffect(() => {
     current.value = details.value;
-    if(routerParams.value.detail && details.value){
+    if (routerParams.value.detail && details.value) {
         visiable.value = true;
     }
-})
+});
 </script>
 <style lang="less" scoped>
 </style>
\ No newline at end of file
diff --git a/src/views/rule-engine/Alarm/Log/Record/index.vue b/src/views/rule-engine/Alarm/Log/Record/index.vue
index 48e91259..158b20f6 100644
--- a/src/views/rule-engine/Alarm/Log/Record/index.vue
+++ b/src/views/rule-engine/Alarm/Log/Record/index.vue
@@ -5,39 +5,43 @@
             target="bind-channel"
             @search="handleSearch"
         />
-        <JProTable
-            model="TABLE"
-            :columns="columns"
-            :defaultParams="{
-                sorts: [{ name: 'createTime', order: 'desc' }],
-                terms,
-            }"
-            :request="queryHandleHistory"
-            :params="params"
-        >
-            <template #headerTitle>
-                <h3>记录列表</h3>
-            </template>
-            <template #handleTime="slotsProps">
-                <span>
-                    {{
-                        dayjs(slotsProps.handleTime).format(
-                            'YYYY-MM-DD HH:mm:ss',
-                        )
-                    }}
-                </span>
-            </template>
-            <template #handleType="slotProps">
-                <span>{{ slotProps.handleType.text }}</span>
-            </template>
-            <template #alarmTime="slotProps">
-                <span>
-                    {{
-                        dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
-                    }}
-                </span>
-            </template>
-        </JProTable>
+        <FullPage>
+            <JProTable
+                model="TABLE"
+                :columns="columns"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                    terms,
+                }"
+                :request="queryHandleHistory"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <h3>记录列表</h3>
+                </template>
+                <template #handleTime="slotsProps">
+                    <span>
+                        {{
+                            dayjs(slotsProps.handleTime).format(
+                                'YYYY-MM-DD HH:mm:ss',
+                            )
+                        }}
+                    </span>
+                </template>
+                <template #handleType="slotProps">
+                    <span>{{ slotProps.handleType.text }}</span>
+                </template>
+                <template #alarmTime="slotProps">
+                    <span>
+                        {{
+                            dayjs(slotProps.alarmTime).format(
+                                'YYYY-MM-DD HH:mm:ss',
+                            )
+                        }}
+                    </span>
+                </template>
+            </JProTable>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/rule-engine/Alarm/Log/TabComponent/indev.vue b/src/views/rule-engine/Alarm/Log/TabComponent/indev.vue
index aa22321b..ac0e58c1 100644
--- a/src/views/rule-engine/Alarm/Log/TabComponent/indev.vue
+++ b/src/views/rule-engine/Alarm/Log/TabComponent/indev.vue
@@ -24,113 +24,118 @@
             v-if="props.type === 'org'"
             @search="search"
         />
-        <JProTable
-            :columns="columns"
-            :request="handleSearch"
-            :params="params"
-            :gridColumns="[1, 1, 2]"
-            :gridColumn="2"
-            model="CARD"
-            ref="tableRef"
-        >
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    v-bind="slotProps"
-                    :actions="getActions(slotProps, 'card')"
-                    :statusText="
-                        data.defaultLevel.find(
-                            (i) => i.level === slotProps.level,
-                        )?.title || slotProps.level
-                    "
-                    :status="slotProps.level"
-                    :statusNames="{
-                        1: 'level1',
-                        2: 'level2',
-                        3: 'level3',
-                        4: 'level4',
-                        5: 'level5',
-                    }"
-                >
-                    <template #img>
-                        <img :src="imgMap.get(slotProps.targetType)" alt="" />
-                    </template>
-                    <template #content>
-                        <Ellipsis style="width: calc(100% - 100px)">
-                            <span style="font-weight: 500">
-                                {{ slotProps.alarmName }}
-                            </span>
-                        </Ellipsis>
-                        <j-row :gutter="24">
-                            <j-col :span="8" class="content-left">
-                                <div class="content-left-title">
-                                    {{ titleMap.get(slotProps.targetType) }}
-                                </div>
-                                <Ellipsis
-                                    ><div>
-                                        {{ slotProps?.targetName }}
-                                    </div></Ellipsis
-                                >
-                            </j-col>
-                            <j-col :span="8">
-                                <div class="content-right-title">
-                                    最近告警时间
-                                </div>
-                                <Ellipsis
-                                    ><div>
-                                        {{
-                                            dayjs(slotProps?.alarmTime).format(
-                                                'YYYY-MM-DD HH:mm:ss',
-                                            )
-                                        }}
-                                    </div></Ellipsis
-                                >
-                            </j-col>
-                            <j-col :span="8">
-                                <div class="content-right-title">状态</div>
-                                <BadgeStatus
-                                    :status="slotProps.state.value"
-                                    :statusName="{
-                                        warning: 'warning',
-                                        normal: 'default',
-                                    }"
-                                >
-                                </BadgeStatus
-                                ><span
-                                    :style="
-                                        slotProps.state.value === 'warning'
-                                            ? 'color: #E50012'
-                                            : 'color:black'
-                                    "
-                                >
-                                    {{ slotProps.state.text }}
+        <FullPage>
+            <JProTable
+                :columns="columns"
+                :request="handleSearch"
+                :params="params"
+                :gridColumns="[1, 1, 2]"
+                :gridColumn="2"
+                model="CARD"
+                ref="tableRef"
+            >
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        v-bind="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        :statusText="
+                            data.defaultLevel.find(
+                                (i) => i.level === slotProps.level,
+                            )?.title || slotProps.level
+                        "
+                        :status="slotProps.level"
+                        :statusNames="{
+                            1: 'level1',
+                            2: 'level2',
+                            3: 'level3',
+                            4: 'level4',
+                            5: 'level5',
+                        }"
+                    >
+                        <template #img>
+                            <img
+                                :src="imgMap.get(slotProps.targetType)"
+                                alt=""
+                            />
+                        </template>
+                        <template #content>
+                            <Ellipsis style="width: calc(100% - 100px)">
+                                <span style="font-weight: 500">
+                                    {{ slotProps.alarmName }}
                                 </span>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <PermissionButton
-                            :disabled="
-                                item.key === 'solve' &&
-                                slotProps.state.value === 'normal'
-                            "
-                            :tooltip="{
-                                ...item.tooltip,
-                            }"
-                            @click="item.onClick"
-                            :hasPermission="
-                                item.key == 'solve'
-                                    ? 'rule-engine/Alarm/Log:action'
-                                    : 'rule-engine/Alarm/Log:view'
-                            "
-                        >
-                            <AIcon :type="item.icon" />
-                            <span>{{ item?.text }}</span>
-                        </PermissionButton>
-                    </template>
-                </CardBox>
-            </template>
-        </JProTable>
+                            </Ellipsis>
+                            <j-row :gutter="24">
+                                <j-col :span="8" class="content-left">
+                                    <div class="content-left-title">
+                                        {{ titleMap.get(slotProps.targetType) }}
+                                    </div>
+                                    <Ellipsis
+                                        ><div>
+                                            {{ slotProps?.targetName }}
+                                        </div></Ellipsis
+                                    >
+                                </j-col>
+                                <j-col :span="8">
+                                    <div class="content-right-title">
+                                        最近告警时间
+                                    </div>
+                                    <Ellipsis
+                                        ><div>
+                                            {{
+                                                dayjs(
+                                                    slotProps?.alarmTime,
+                                                ).format('YYYY-MM-DD HH:mm:ss')
+                                            }}
+                                        </div></Ellipsis
+                                    >
+                                </j-col>
+                                <j-col :span="8">
+                                    <div class="content-right-title">状态</div>
+                                    <BadgeStatus
+                                        :status="slotProps.state.value"
+                                        :statusName="{
+                                            warning: 'warning',
+                                            normal: 'default',
+                                        }"
+                                    >
+                                    </BadgeStatus
+                                    ><span
+                                        :style="
+                                            slotProps.state.value === 'warning'
+                                                ? 'color: #E50012'
+                                                : 'color:black'
+                                        "
+                                    >
+                                        {{ slotProps.state.text }}
+                                    </span>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="
+                                    item.key === 'solve' &&
+                                    slotProps.state.value === 'normal'
+                                "
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="
+                                    item.key == 'solve'
+                                        ? 'rule-engine/Alarm/Log:action'
+                                        : 'rule-engine/Alarm/Log:view'
+                                "
+                            >
+                                <AIcon :type="item.icon" />
+                                <span>{{ item?.text }}</span>
+                            </PermissionButton>
+                        </template>
+                    </CardBox>
+                </template>
+            </JProTable>
+        </FullPage>
         <SolveComponent
             :data="data"
             v-if="data.solveVisible"
diff --git a/src/views/rule-engine/Instance/index.vue b/src/views/rule-engine/Instance/index.vue
index 79a41cc2..fba87fe4 100644
--- a/src/views/rule-engine/Instance/index.vue
+++ b/src/views/rule-engine/Instance/index.vue
@@ -6,127 +6,138 @@
                 target="device-instance"
                 @search="handleSearch"
             />
-            <JProTable
-                :columns="columns"
-                :request="queryList"
-                ref="tableRef"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="params"
-            >
-                <template #headerTitle>
-                    <j-space>
-                        <PermissionButton
-                            type="primary"
-                            @click="add"
-                            hasPermission="rule-engine/Instance:add"
-                        >
-                            <template #icon
-                                ><AIcon type="PlusOutlined"
-                            /></template>
-                            新增
-                        </PermissionButton>
-                    </j-space>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :value="slotProps"
-                        :actions="getActions(slotProps, 'card')"
-                        v-bind="slotProps"
-                        :status="slotProps.state?.value"
-                        :statusText="slotProps.state?.text"
-                        @click="openRuleEditor"
-                        :statusNames="{
-                            started: 'processing',
-                            disable: 'error',
-                        }"
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img :src="getImage('/device-product.png')" />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <Ellipsis style="width: calc(100% - 100px)">
-                                <span style="font-weight: 600; font-size: 16px">
-                                    {{ slotProps.name }}
-                                </span>
-                            </Ellipsis>
-                            <j-row>
-                                <j-col :span="12">
-                                    <Ellipsis>
-                                        <div>
-                                            {{ slotProps.description }}
-                                        </div>
-                                    </Ellipsis>
-                                </j-col>
-                            </j-row>
-                        </template>
-                        <template #actions="item">
+            <FullPage>
+                <JProTable
+                    :columns="columns"
+                    :request="queryList"
+                    ref="tableRef"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                >
+                    <template #headerTitle>
+                        <j-space>
                             <PermissionButton
-                                :disabled="item.disabled"
-                                :popConfirm="item.popConfirm"
-                                :tooltip="{
-                                    ...item.tooltip,
-                                }"
-                                :hasPermission="
-                                    'rule-engine/Instance:' + item.key
-                                "
-                                @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>
-                <template #state="slotProps">
-                    <BadgeStatus
-                        :text="
-                            slotProps.state?.value === 'started'
-                                ? '正常'
-                                : '禁用'
-                        "
-                        :status="slotProps.state?.value"
-                        :statusNames="{
-                            started: 'processing',
-                            disable: 'error',
-                        }"
-                    />
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
-                        <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"
-                                :hasPermission="'rule-engine/Instance:' + i.key"
-                                :danger="i.key === 'delete'"
+                                type="primary"
+                                @click="add"
+                                hasPermission="rule-engine/Instance:add"
                             >
                                 <template #icon
-                                    ><AIcon :type="i.icon"
+                                    ><AIcon type="PlusOutlined"
                                 /></template>
+                                新增
                             </PermissionButton>
-                        </template>
-                    </j-space>
-                </template>
-            </JProTable>
+                        </j-space>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :value="slotProps"
+                            :actions="getActions(slotProps, 'card')"
+                            v-bind="slotProps"
+                            :status="slotProps.state?.value"
+                            :statusText="slotProps.state?.text"
+                            @click="openRuleEditor"
+                            :statusNames="{
+                                started: 'processing',
+                                disable: 'error',
+                            }"
+                        >
+                            <template #img>
+                                <slot name="img">
+                                    <img
+                                        :src="getImage('/device-product.png')"
+                                    />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <Ellipsis style="width: calc(100% - 100px)">
+                                    <span
+                                        style="
+                                            font-weight: 600;
+                                            font-size: 16px;
+                                        "
+                                    >
+                                        {{ slotProps.name }}
+                                    </span>
+                                </Ellipsis>
+                                <j-row>
+                                    <j-col :span="12">
+                                        <Ellipsis>
+                                            <div>
+                                                {{ slotProps.description }}
+                                            </div>
+                                        </Ellipsis>
+                                    </j-col>
+                                </j-row>
+                            </template>
+                            <template #actions="item">
+                                <PermissionButton
+                                    :disabled="item.disabled"
+                                    :popConfirm="item.popConfirm"
+                                    :tooltip="{
+                                        ...item.tooltip,
+                                    }"
+                                    :hasPermission="
+                                        'rule-engine/Instance:' + item.key
+                                    "
+                                    @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>
+                    <template #state="slotProps">
+                        <BadgeStatus
+                            :text="
+                                slotProps.state?.value === 'started'
+                                    ? '正常'
+                                    : '禁用'
+                            "
+                            :status="slotProps.state?.value"
+                            :statusNames="{
+                                started: 'processing',
+                                disable: 'error',
+                            }"
+                        />
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <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"
+                                    :hasPermission="
+                                        'rule-engine/Instance:' + i.key
+                                    "
+                                    :danger="i.key === 'delete'"
+                                >
+                                    <template #icon
+                                        ><AIcon :type="i.icon"
+                                    /></template>
+                                </PermissionButton>
+                            </template>
+                        </j-space>
+                    </template>
+                </JProTable>
+            </FullPage>
             <!-- 新增、编辑 -->
             <Save
                 :data="current"
@@ -151,11 +162,11 @@ import { getImage } from '@/utils/comm';
 import { message } from 'jetlinks-ui-components';
 import Save from './Save/index.vue';
 import { SystemConst } from '@/utils/consts';
-import {useRouterParams} from "@/utils/hooks/useParams";
+import { useRouterParams } from '@/utils/hooks/useParams';
 const params = ref<Record<string, any>>({});
 let visiable = ref(false);
 const tableRef = ref<Record<string, any>>({});
-const { params: routeParams } = useRouterParams()
+const { params: routeParams } = useRouterParams();
 const query = {
     columns: [
         {

From f08e28560aab95f3658944057f52c7bdf9e40856 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Thu, 30 Mar 2023 17:18:43 +0800
Subject: [PATCH 07/12] =?UTF-8?q?update:=20=E7=B3=BB=E7=BB=9F=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=88=97=E8=A1=A8=E6=92=91=E6=BB=A1=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Apply/index.vue              | 326 ++++++-----
 src/views/system/Basis/index.vue              | 540 +++++++++---------
 src/views/system/DataSource/index.vue         | 251 ++++----
 src/views/system/Department/device/index.vue  | 323 +++++------
 src/views/system/Department/product/index.vue | 372 ++++++------
 src/views/system/Department/user/index.vue    | 126 ++--
 src/views/system/Menu/index.vue               | 121 ++--
 src/views/system/Permission/index.vue         | 248 ++++----
 src/views/system/Relationship/index.vue       | 101 ++--
 src/views/system/Role/index.vue               | 113 ++--
 src/views/system/User/index.vue               | 228 ++++----
 11 files changed, 1406 insertions(+), 1343 deletions(-)

diff --git a/src/views/system/Apply/index.vue b/src/views/system/Apply/index.vue
index cc6fbb52..0cef67fd 100644
--- a/src/views/system/Apply/index.vue
+++ b/src/views/system/Apply/index.vue
@@ -6,166 +6,176 @@
                 target="category"
                 @search="(params:any)=>queryParams = {...params}"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="getApplyList_api"
-                :defaultParams="{
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :params="queryParams"
-                :gridColumn="3"
-            >
-                <template #headerTitle>
-                    <div style="display: flex; align-items: center">
-                        <PermissionButton
-                            :hasPermission="`${permission}:add`"
-                            type="primary"
-                            @click="() => table.toSave()"
-                        >
-                            <AIcon type="PlusOutlined" />新增
-                        </PermissionButton>
-                        <p style="margin: 0 0 0 30px; color: #0000008c">
-                            <AIcon
-                                type="ExclamationCircleOutlined"
-                                style="margin-right: 12px"
-                            />
-                            应用管理将多个应用系统的登录简化为一次登录，实现多处访问、集中管控的业务场景。
-                        </p>
-                    </div>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :value="slotProps"
-                        :actions="table.getActions(slotProps, 'card')"
-                        v-bind="slotProps"
-                        :status="slotProps.state?.value"
-                        :statusText="slotProps.state?.text"
-                        :statusNames="{
-                            enabled: 'success',
-                            disabled: 'error',
-                        }"
-                    >
-                        <template #img>
-                            <slot name="img">
-                                <img :src="getImage('/apply.png')" />
-                            </slot>
-                        </template>
-                        <template #content>
-                            <h3 class="card-item-content-title">
-                                <Ellipsis>
-                                    {{ slotProps.name }}
-                                </Ellipsis>
-                            </h3>
-                            <j-row>
-                                <j-col :span="12">
-                                    <div class="card-item-content-text">
-                                        类型
-                                    </div>
-                                    <div>
-                                        {{
-                                            table.getTypeLabel(
-                                                slotProps.provider,
-                                            )
-                                        }}
-                                    </div>
-                                </j-col>
-                                <j-col :span="12">
-                                    <div class="card-item-content-text">
-                                        说明
-                                    </div>
-                                    <Ellipsis>
-                                        {{ slotProps.description }}
-                                    </Ellipsis>
-                                </j-col>
-                            </j-row>
-                        </template>
-                        <template #actions="item">
-                            <j-tooltip
-                                v-bind="item.tooltip"
-                                :title="item.disabled && item.tooltip.title"
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="getApplyList_api"
+                    :defaultParams="{
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :params="queryParams"
+                    :gridColumn="3"
+                >
+                    <template #headerTitle>
+                        <div style="display: flex; align-items: center">
+                            <PermissionButton
+                                :hasPermission="`${permission}:add`"
+                                type="primary"
+                                @click="() => table.toSave()"
                             >
-                                <j-dropdown
-                                    placement="bottomRight"
-                                    v-if="item.key === 'others'"
-                                >
-                                    <j-button>
-                                        <AIcon :type="item.icon" />
-                                        <span>{{ item.text }}</span>
-                                    </j-button>
-                                    <template #overlay>
-                                        <j-menu>
-                                            <j-menu-item
-                                                v-for="(o, i) in item.children"
-                                                :key="i"
-                                            >
-                                                <j-button
-                                                    type="link"
-                                                    @click="o.onClick"
-                                                >
-                                                    <AIcon :type="o.icon" />
-                                                    <span>{{ o.text }}</span>
-                                                </j-button>
-                                            </j-menu-item>
-                                        </j-menu>
-                                    </template>
-                                </j-dropdown>
-                                <PermissionButton
-                                    v-else
-                                    :hasPermission="item.permission"
-                                    :tooltip="item.tooltip"
-                                    :pop-confirm="item.popConfirm"
-                                    @click="item.onClick"
-                                    :disabled="item.disabled"
-                                >
-                                    <AIcon :type="item.icon" />
-                                    <span v-if="item.key !== 'delete'">{{
-                                        item.text
-                                    }}</span>
-                                </PermissionButton>
-                            </j-tooltip>
-                        </template>
-
-                        <template #mark>
-                            <AIcon
-                                type="EyeOutlined"
-                                style="font-size: 24px"
-                                @click="() => table.toSave(slotProps.id, true)"
-                            />
-                        </template>
-                    </CardBox>
-                </template>
-
-                <template #provider="slotProps">
-                    {{ table.getTypeLabel(slotProps.provider) }}
-                </template>
-                <template #status="slotProps">
-                    <BadgeStatus
-                        :status="slotProps.state.value"
-                        :text="slotProps.state.text"
-                        :statusNames="{
-                            enabled: 'success',
-                            disabled: 'error',
-                        }"
-                    ></BadgeStatus>
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
-                        <PermissionButton
-                            v-for="i in table.getActions(slotProps, 'table')"
-                            :hasPermission="i.permission"
-                            type="link"
-                            :tooltip="i.tooltip"
-                            :pop-confirm="i.popConfirm"
-                            @click="i.onClick"
-                            :disabled="i.disabled"
+                                <AIcon type="PlusOutlined" />新增
+                            </PermissionButton>
+                            <p style="margin: 0 0 0 30px; color: #0000008c">
+                                <AIcon
+                                    type="ExclamationCircleOutlined"
+                                    style="margin-right: 12px"
+                                />
+                                应用管理将多个应用系统的登录简化为一次登录，实现多处访问、集中管控的业务场景。
+                            </p>
+                        </div>
+                    </template>
+                    <template #card="slotProps">
+                        <CardBox
+                            :value="slotProps"
+                            :actions="table.getActions(slotProps, 'card')"
+                            v-bind="slotProps"
+                            :status="slotProps.state?.value"
+                            :statusText="slotProps.state?.text"
+                            :statusNames="{
+                                enabled: 'success',
+                                disabled: 'error',
+                            }"
                         >
-                            <AIcon :type="i.icon" />
-                        </PermissionButton>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                            <template #img>
+                                <slot name="img">
+                                    <img :src="getImage('/apply.png')" />
+                                </slot>
+                            </template>
+                            <template #content>
+                                <h3 class="card-item-content-title">
+                                    <Ellipsis>
+                                        {{ slotProps.name }}
+                                    </Ellipsis>
+                                </h3>
+                                <j-row>
+                                    <j-col :span="12">
+                                        <div class="card-item-content-text">
+                                            类型
+                                        </div>
+                                        <div>
+                                            {{
+                                                table.getTypeLabel(
+                                                    slotProps.provider,
+                                                )
+                                            }}
+                                        </div>
+                                    </j-col>
+                                    <j-col :span="12">
+                                        <div class="card-item-content-text">
+                                            说明
+                                        </div>
+                                        <Ellipsis>
+                                            {{ slotProps.description }}
+                                        </Ellipsis>
+                                    </j-col>
+                                </j-row>
+                            </template>
+                            <template #actions="item">
+                                <j-tooltip
+                                    v-bind="item.tooltip"
+                                    :title="item.disabled && item.tooltip.title"
+                                >
+                                    <j-dropdown
+                                        placement="bottomRight"
+                                        v-if="item.key === 'others'"
+                                    >
+                                        <j-button>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </j-button>
+                                        <template #overlay>
+                                            <j-menu>
+                                                <j-menu-item
+                                                    v-for="(
+                                                        o, i
+                                                    ) in item.children"
+                                                    :key="i"
+                                                >
+                                                    <j-button
+                                                        type="link"
+                                                        @click="o.onClick"
+                                                    >
+                                                        <AIcon :type="o.icon" />
+                                                        <span>{{
+                                                            o.text
+                                                        }}</span>
+                                                    </j-button>
+                                                </j-menu-item>
+                                            </j-menu>
+                                        </template>
+                                    </j-dropdown>
+                                    <PermissionButton
+                                        v-else
+                                        :hasPermission="item.permission"
+                                        :tooltip="item.tooltip"
+                                        :pop-confirm="item.popConfirm"
+                                        @click="item.onClick"
+                                        :disabled="item.disabled"
+                                    >
+                                        <AIcon :type="item.icon" />
+                                        <span v-if="item.key !== 'delete'">{{
+                                            item.text
+                                        }}</span>
+                                    </PermissionButton>
+                                </j-tooltip>
+                            </template>
+
+                            <template #mark>
+                                <AIcon
+                                    type="EyeOutlined"
+                                    style="font-size: 24px"
+                                    @click="
+                                        () => table.toSave(slotProps.id, true)
+                                    "
+                                />
+                            </template>
+                        </CardBox>
+                    </template>
+
+                    <template #provider="slotProps">
+                        {{ table.getTypeLabel(slotProps.provider) }}
+                    </template>
+                    <template #status="slotProps">
+                        <BadgeStatus
+                            :status="slotProps.state.value"
+                            :text="slotProps.state.text"
+                            :statusNames="{
+                                enabled: 'success',
+                                disabled: 'error',
+                            }"
+                        ></BadgeStatus>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <PermissionButton
+                                v-for="i in table.getActions(
+                                    slotProps,
+                                    'table',
+                                )"
+                                :hasPermission="i.permission"
+                                type="link"
+                                :tooltip="i.tooltip"
+                                :pop-confirm="i.popConfirm"
+                                @click="i.onClick"
+                                :disabled="i.disabled"
+                            >
+                                <AIcon :type="i.icon" />
+                            </PermissionButton>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
         <div class="dialogs">
             <MenuDialog
diff --git a/src/views/system/Basis/index.vue b/src/views/system/Basis/index.vue
index 2017d631..8561c46b 100644
--- a/src/views/system/Basis/index.vue
+++ b/src/views/system/Basis/index.vue
@@ -1,285 +1,313 @@
 <template>
     <page-container>
-        <div class="basis-container">
-            <j-form
-                layout="vertical"
-                ref="formRef"
-                :rules="rulesFrom"
-                :model="formValue"
-            >
-                <j-row :span="24" :gutter="24">
-                    <j-col :span="10">
-                        <j-form-item label="系统名称" name="title">
-                            <j-input
-                                v-model:value="formValue.title"
-                                placeholder="请输入系统名称"
-                            />
-                        </j-form-item>
-                        <j-form-item label="主题色" name="headerTheme">
-                            <j-select v-model:value="formValue.headerTheme">
-                                <j-select-option value="light">
-                                    白色
-                                </j-select-option>
-                                <j-select-option value="dark">
-                                    黑色
-                                </j-select-option>
-                            </j-select>
-                        </j-form-item>
-                        <j-form-item>
-                            <template #label>
-                                <span>高德API Key</span>
-                                <j-tooltip
-                                    title="配置后平台可调用高德地图GIS服务"
-                                >
-                                    <img
-                                        class="img-style"
-                                        :src="getImage('/init-home/mark.png')"
-                                    />
-                                </j-tooltip>
-                            </template>
-                            <j-input
-                                v-model:value="formValue.apiKey"
-                                placeholder="请输入高德API Key"
-                            />
-                        </j-form-item>
-                        <j-form-item name="base-path">
-                            <template #label>
-                                <span>base-path</span>
-                                <j-tooltip title="系统后台访问的url">
-                                    <img
-                                        class="img-style"
-                                        :src="getImage('/init-home/mark.png')"
-                                    />
-                                </j-tooltip>
-                            </template>
-                            <j-input
-                                v-model:value="formValue['base-path']"
-                                placeholder="请输入高德API Key"
-                            />
-                        </j-form-item>
-                        <j-row :gutter="24" :span="24">
-                            <j-col>
-                                <j-form-item label="系统logo">
-                                    <div class="upload-image-warp-logo">
-                                        <div class="upload-image-border-logo">
-                                            <j-upload
-                                                name="file"
-                                                :action="action"
-                                                :headers="headers"
-                                                :showUploadList="false"
-                                                :beforeUpload="
-                                                    uploader.beforeLogoUpload
-                                                "
-                                                @change="
-                                                    uploader.handleChangeLogo
-                                                "
-                                                :accept="uploader.imageTypes"
+        <FullPage>
+            <div class="basis-container">
+                <j-form
+                    layout="vertical"
+                    ref="formRef"
+                    :rules="rulesFrom"
+                    :model="formValue"
+                >
+                    <j-row :span="24" :gutter="24">
+                        <j-col :span="10">
+                            <j-form-item label="系统名称" name="title">
+                                <j-input
+                                    v-model:value="formValue.title"
+                                    placeholder="请输入系统名称"
+                                />
+                            </j-form-item>
+                            <j-form-item label="主题色" name="headerTheme">
+                                <j-select v-model:value="formValue.headerTheme">
+                                    <j-select-option value="light">
+                                        白色
+                                    </j-select-option>
+                                    <j-select-option value="dark">
+                                        黑色
+                                    </j-select-option>
+                                </j-select>
+                            </j-form-item>
+                            <j-form-item>
+                                <template #label>
+                                    <span>高德API Key</span>
+                                    <j-tooltip
+                                        title="配置后平台可调用高德地图GIS服务"
+                                    >
+                                        <img
+                                            class="img-style"
+                                            :src="
+                                                getImage('/init-home/mark.png')
+                                            "
+                                        />
+                                    </j-tooltip>
+                                </template>
+                                <j-input
+                                    v-model:value="formValue.apiKey"
+                                    placeholder="请输入高德API Key"
+                                />
+                            </j-form-item>
+                            <j-form-item name="base-path">
+                                <template #label>
+                                    <span>base-path</span>
+                                    <j-tooltip title="系统后台访问的url">
+                                        <img
+                                            class="img-style"
+                                            :src="
+                                                getImage('/init-home/mark.png')
+                                            "
+                                        />
+                                    </j-tooltip>
+                                </template>
+                                <j-input
+                                    v-model:value="formValue['base-path']"
+                                    placeholder="请输入高德API Key"
+                                />
+                            </j-form-item>
+                            <j-row :gutter="24" :span="24">
+                                <j-col>
+                                    <j-form-item label="系统logo">
+                                        <div class="upload-image-warp-logo">
+                                            <div
+                                                class="upload-image-border-logo"
                                             >
-                                                <div
-                                                    class="upload-image-content-logo"
+                                                <j-upload
+                                                    name="file"
+                                                    :action="action"
+                                                    :headers="headers"
+                                                    :showUploadList="false"
+                                                    :beforeUpload="
+                                                        uploader.beforeLogoUpload
+                                                    "
+                                                    @change="
+                                                        uploader.handleChangeLogo
+                                                    "
+                                                    :accept="
+                                                        uploader.imageTypes
+                                                    "
                                                 >
                                                     <div
-                                                        class="loading-logo"
-                                                        v-if="form.logoLoading"
+                                                        class="upload-image-content-logo"
+                                                    >
+                                                        <div
+                                                            class="loading-logo"
+                                                            v-if="
+                                                                form.logoLoading
+                                                            "
+                                                        >
+                                                            <AIcon
+                                                                type="LoadingOutlined"
+                                                            />
+                                                        </div>
+                                                        <div
+                                                            class="upload-image"
+                                                            style="height: 100%"
+                                                            v-if="
+                                                                formValue.logo
+                                                            "
+                                                            :style="
+                                                                formValue.logo
+                                                                    ? `background-image: url(${formValue.logo});`
+                                                                    : ''
+                                                            "
+                                                        ></div>
+                                                        <div
+                                                            v-if="
+                                                                formValue.logo
+                                                            "
+                                                            class="upload-image-mask"
+                                                        >
+                                                            点击修改
+                                                        </div>
+                                                        <div v-else>
+                                                            <AIcon
+                                                                :type="
+                                                                    form.logoLoading
+                                                                        ? 'LoadingOutlined'
+                                                                        : 'PlusOutlined'
+                                                                "
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </j-upload>
+                                                <div v-if="form.logoLoading">
+                                                    <div
+                                                        class="upload-loading-mask"
                                                     >
                                                         <AIcon
                                                             type="LoadingOutlined"
                                                         />
                                                     </div>
-                                                    <div
-                                                        class="upload-image"
-                                                        style="height: 100%"
-                                                        v-if="formValue.logo"
-                                                        :style="
-                                                            formValue.logo
-                                                                ? `background-image: url(${formValue.logo});`
-                                                                : ''
-                                                        "
-                                                    ></div>
-                                                    <div
-                                                        v-if="formValue.logo"
-                                                        class="upload-image-mask"
-                                                    >
-                                                        点击修改
-                                                    </div>
-                                                    <div v-else>
-                                                        <AIcon
-                                                            :type="
-                                                                form.logoLoading
-                                                                    ? 'LoadingOutlined'
-                                                                    : 'PlusOutlined'
-                                                            "
-                                                        />
-                                                    </div>
                                                 </div>
-                                            </j-upload>
-                                            <div v-if="form.logoLoading">
+                                            </div>
+                                        </div>
+
+                                        <div class="upload-tips">
+                                            推荐尺寸200*200
+                                        </div>
+                                        <div class="upload-tips">
+                                            支持jpg,png,jfif,pjp,pjpeg,jpeg
+                                        </div>
+                                    </j-form-item>
+                                </j-col>
+                                <j-col>
+                                    <j-form-item>
+                                        <template #label>
+                                            <span>浏览器页签</span>
+                                            <j-tooltip
+                                                title="浏览器tab页中显示的图片元素"
+                                            >
+                                                <img
+                                                    class="img-style"
+                                                    :src="
+                                                        getImage(
+                                                            '/init-home/mark.png',
+                                                        )
+                                                    "
+                                                />
+                                            </j-tooltip>
+                                        </template>
+                                        <div class="upload-image-warp-logo">
+                                            <div
+                                                class="upload-image-border-logo"
+                                            >
+                                                <j-upload
+                                                    name="file"
+                                                    :action="action"
+                                                    :headers="headers"
+                                                    :showUploadList="false"
+                                                    :beforeUpload="
+                                                        uploader.beforeIconUpload
+                                                    "
+                                                    @change="
+                                                        uploader.changeIconUpload
+                                                    "
+                                                    :accept="uploader.iconTypes"
+                                                >
+                                                    <div
+                                                        class="upload-image-content-logo"
+                                                    >
+                                                        <div
+                                                            v-if="
+                                                                form.iconLoading
+                                                            "
+                                                            class="loading-icon"
+                                                        >
+                                                            <AIcon
+                                                                type="LoadingOutlined"
+                                                            />
+                                                        </div>
+                                                        <div
+                                                            class="upload-image-icon"
+                                                            v-if="formValue.ico"
+                                                            :style="
+                                                                formValue.ico
+                                                                    ? `background-image: url(${formValue.ico});`
+                                                                    : ''
+                                                            "
+                                                        ></div>
+                                                        <div
+                                                            v-if="formValue.ico"
+                                                            class="upload-image-mask"
+                                                        >
+                                                            点击修改
+                                                        </div>
+                                                        <div v-else>
+                                                            <div>
+                                                                <AIcon
+                                                                    type="PlusOutlined"
+                                                                />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </j-upload>
+                                            </div>
+                                        </div>
+
+                                        <div class="upload-tips">
+                                            推荐尺寸64*64
+                                        </div>
+                                        <div class="upload-tips">
+                                            支持ico格式
+                                        </div>
+                                    </j-form-item>
+                                </j-col>
+                            </j-row>
+                        </j-col>
+                        <j-col :span="14">
+                            <j-form-item label="登录背景图">
+                                <div class="upload-image-warp-back">
+                                    <div class="upload-image-border-back">
+                                        <j-upload
+                                            name="file"
+                                            :action="action"
+                                            :headers="headers"
+                                            :beforeUpload="
+                                                uploader.beforeLogoUpload
+                                            "
+                                            :showUploadList="false"
+                                            @change="uploader.changeBackUpload"
+                                            :accept="uploader.imageTypes"
+                                        >
+                                            <div
+                                                class="upload-image-content-back"
+                                            >
                                                 <div
-                                                    class="upload-loading-mask"
+                                                    v-if="form.backLoading"
+                                                    class="loading-back"
                                                 >
                                                     <AIcon
                                                         type="LoadingOutlined"
                                                     />
                                                 </div>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="upload-tips">
-                                        推荐尺寸200*200
-                                    </div>
-                                    <div class="upload-tips">
-                                        支持jpg,png,jfif,pjp,pjpeg,jpeg
-                                    </div>
-                                </j-form-item>
-                            </j-col>
-                            <j-col>
-                                <j-form-item>
-                                    <template #label>
-                                        <span>浏览器页签</span>
-                                        <j-tooltip
-                                            title="浏览器tab页中显示的图片元素"
-                                        >
-                                            <img
-                                                class="img-style"
-                                                :src="
-                                                    getImage(
-                                                        '/init-home/mark.png',
-                                                    )
-                                                "
-                                            />
-                                        </j-tooltip>
-                                    </template>
-                                    <div class="upload-image-warp-logo">
-                                        <div class="upload-image-border-logo">
-                                            <j-upload
-                                                name="file"
-                                                :action="action"
-                                                :headers="headers"
-                                                :showUploadList="false"
-                                                :beforeUpload="
-                                                    uploader.beforeIconUpload
-                                                "
-                                                @change="
-                                                    uploader.changeIconUpload
-                                                "
-                                                :accept="uploader.iconTypes"
-                                            >
                                                 <div
-                                                    class="upload-image-content-logo"
+                                                    class="upload-image"
+                                                    v-if="formValue.backgroud"
+                                                    :style="
+                                                        formValue.backgroud
+                                                            ? `background-image: url(${formValue.backgroud});`
+                                                            : ''
+                                                    "
+                                                ></div>
+                                                <div
+                                                    v-if="formValue.backgroud"
+                                                    class="upload-image-mask"
                                                 >
-                                                    <div
-                                                        v-if="form.iconLoading"
-                                                        class="loading-icon"
-                                                    >
+                                                    点击修改
+                                                </div>
+                                                <div v-else>
+                                                    <div>
                                                         <AIcon
-                                                            type="LoadingOutlined"
+                                                            type="PlusOutlined"
                                                         />
                                                     </div>
-                                                    <div
-                                                        class="upload-image-icon"
-                                                        v-if="formValue.ico"
-                                                        :style="
-                                                            formValue.ico
-                                                                ? `background-image: url(${formValue.ico});`
-                                                                : ''
-                                                        "
-                                                    ></div>
-                                                    <div
-                                                        v-if="formValue.ico"
-                                                        class="upload-image-mask"
-                                                    >
-                                                        点击修改
-                                                    </div>
-                                                    <div v-else>
-                                                        <div>
-                                                            <AIcon
-                                                                type="PlusOutlined"
-                                                            />
-                                                        </div>
-                                                    </div>
                                                 </div>
-                                            </j-upload>
-                                        </div>
+                                            </div>
+                                        </j-upload>
                                     </div>
-
-                                    <div class="upload-tips">推荐尺寸64*64</div>
-                                    <div class="upload-tips">支持ico格式</div>
-                                </j-form-item>
-                            </j-col>
-                        </j-row>
-                    </j-col>
-                    <j-col :span="14">
-                        <j-form-item label="登录背景图">
-                            <div class="upload-image-warp-back">
-                                <div class="upload-image-border-back">
-                                    <j-upload
-                                        name="file"
-                                        :action="action"
-                                        :headers="headers"
-                                        :beforeUpload="
-                                            uploader.beforeLogoUpload
-                                        "
-                                        :showUploadList="false"
-                                        @change="uploader.changeBackUpload"
-                                        :accept="uploader.imageTypes"
-                                    >
-                                        <div class="upload-image-content-back">
-                                            <div
-                                                v-if="form.backLoading"
-                                                class="loading-back"
-                                            >
-                                                <AIcon type="LoadingOutlined" />
-                                            </div>
-                                            <div
-                                                class="upload-image"
-                                                v-if="formValue.backgroud"
-                                                :style="
-                                                    formValue.backgroud
-                                                        ? `background-image: url(${formValue.backgroud});`
-                                                        : ''
-                                                "
-                                            ></div>
-                                            <div
-                                                v-if="formValue.backgroud"
-                                                class="upload-image-mask"
-                                            >
-                                                点击修改
-                                            </div>
-                                            <div v-else>
-                                                <div>
-                                                    <AIcon
-                                                        type="PlusOutlined"
-                                                    />
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </j-upload>
                                 </div>
-                            </div>
-                            <div class="upload-tips">
-                                支持4M以内的图片:
-                                支持jpg,png,jfif,pjp,pjpeg,jpeg
-                            </div>
-                            <div class="upload-tips">建议尺寸1400x1080</div>
-                        </j-form-item>
-                    </j-col>
-                </j-row>
-            </j-form>
+                                <div class="upload-tips">
+                                    支持4M以内的图片:
+                                    支持jpg,png,jfif,pjp,pjpeg,jpeg
+                                </div>
+                                <div class="upload-tips">建议尺寸1400x1080</div>
+                            </j-form-item>
+                        </j-col>
+                    </j-row>
+                </j-form>
 
-            <j-button
-                type="primary"
-                @click="form.clickSave"
-                :disabled="
-                    form.saveLoading ||
-                    form.logoLoading ||
-                    form.iconLoading ||
-                    form.backLoading
-                "
-            >
-                保存
-            </j-button>
-        </div>
+                <j-button
+                    type="primary"
+                    @click="form.clickSave"
+                    :disabled="
+                        form.saveLoading ||
+                        form.logoLoading ||
+                        form.iconLoading ||
+                        form.backLoading
+                    "
+                >
+                    保存
+                </j-button>
+            </div>
+        </FullPage>
     </page-container>
 </template>
 
diff --git a/src/views/system/DataSource/index.vue b/src/views/system/DataSource/index.vue
index 6329b935..e7068e31 100644
--- a/src/views/system/DataSource/index.vue
+++ b/src/views/system/DataSource/index.vue
@@ -6,133 +6,134 @@
                 target="category"
                 @search="(params:any)=>queryParams = {...params}"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="getDataSourceList_api"
-                model="TABLE"
-                :params="queryParams"
-                :defaultParams="{
-                    pageSize: 10,
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :pagination="{
-                    showSizeChanger: true,
-                    pageSizeOptions: ['10', '20', '50', '100'],
-                }"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        :hasPermission="`${permission}:add`"
-                        @click="table.openDialog({})"
-                    >
-                        <AIcon type="PlusOutlined" />新增
-                    </PermissionButton>
-                </template>
-                <template #state="slotProps">
-                    <BadgeStatus
-                        :status="slotProps.state?.value"
-                        :text="slotProps.state?.text"
-                        :statusNames="{
-                            enabled: 'processing',
-                            disabled: 'error',
-                        }"
-                    >
-                    </BadgeStatus>
-                </template>
-                <template #typeId="slotProps">
-                    {{
-                        (table.typeOptions.value.length &&
-                            table.getTypeLabel(slotProps.typeId)) ||
-                        ''
-                    }}
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="getDataSourceList_api"
+                    model="TABLE"
+                    :params="queryParams"
+                    :defaultParams="{
+                        pageSize: 10,
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :pagination="{
+                        showSizeChanger: true,
+                        pageSizeOptions: ['10', '20', '50', '100'],
+                    }"
+                >
+                    <template #headerTitle>
                         <PermissionButton
-                            :hasPermission="`${permission}:update`"
-                            type="link"
-                            :tooltip="{
-                                title: '编辑',
-                            }"
-                            @click="table.openDialog(slotProps)"
+                            type="primary"
+                            :hasPermission="`${permission}:add`"
+                            @click="table.openDialog({})"
                         >
-                            <AIcon type="EditOutlined" />
+                            <AIcon type="PlusOutlined" />新增
                         </PermissionButton>
-                        <PermissionButton
-                            :hasPermission="`${permission}:manage`"
-                            type="link"
-                            :tooltip="{
-                                title:
-                                    slotProps?.typeId === 'rabbitmq'
-                                        ? '暂不支持管理功能'
-                                        : table.getRowStatus(slotProps)
-                                        ? '管理'
-                                        : '请先启用数据源',
-                            }"
-                            @click="
-                                () =>
-                                    router.push(
-                                        `/system/DataSource/Management?id=${slotProps.id}`,
-                                    )
-                            "
-                            :disabled="
-                                slotProps?.typeId === 'rabbitmq' ||
-                                !table.getRowStatus(slotProps)
-                            "
-                        >
-                            <AIcon type="icon-ziyuankuguanli" />
-                        </PermissionButton>
-                        <PermissionButton
-                            :hasPermission="`${permission}:action`"
-                            type="link"
-                            :popConfirm="{
-                                title: `确定要${
-                                    table.getRowStatus(slotProps)
-                                        ? '禁用'
-                                        : '启用'
-                                }吗？`,
-                                onConfirm: () =>
-                                    table.clickChangeStatus(slotProps),
-                            }"
-                            :tooltip="{
-                                title: table.getRowStatus(slotProps)
-                                    ? '禁用'
-                                    : '启用',
+                    </template>
+                    <template #state="slotProps">
+                        <BadgeStatus
+                            :status="slotProps.state?.value"
+                            :text="slotProps.state?.text"
+                            :statusNames="{
+                                enabled: 'processing',
+                                disabled: 'error',
                             }"
                         >
-                            <AIcon
-                                :type="
-                                    table.getRowStatus(slotProps)
-                                        ? 'StopOutlined'
-                                        : 'PlayCircleOutlined'
+                        </BadgeStatus>
+                    </template>
+                    <template #typeId="slotProps">
+                        {{
+                            (table.typeOptions.value.length &&
+                                table.getTypeLabel(slotProps.typeId)) ||
+                            ''
+                        }}
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <PermissionButton
+                                :hasPermission="`${permission}:update`"
+                                type="link"
+                                :tooltip="{
+                                    title: '编辑',
+                                }"
+                                @click="table.openDialog(slotProps)"
+                            >
+                                <AIcon type="EditOutlined" />
+                            </PermissionButton>
+                            <PermissionButton
+                                :hasPermission="`${permission}:manage`"
+                                type="link"
+                                :tooltip="{
+                                    title:
+                                        slotProps?.typeId === 'rabbitmq'
+                                            ? '暂不支持管理功能'
+                                            : table.getRowStatus(slotProps)
+                                            ? '管理'
+                                            : '请先启用数据源',
+                                }"
+                                @click="
+                                    () =>
+                                        router.push(
+                                            `/system/DataSource/Management?id=${slotProps.id}`,
+                                        )
                                 "
-                            />
-                            <!-- <AIcon type="PlayCircleOutlined" /> -->
-                        </PermissionButton>
+                                :disabled="
+                                    slotProps?.typeId === 'rabbitmq' ||
+                                    !table.getRowStatus(slotProps)
+                                "
+                            >
+                                <AIcon type="icon-ziyuankuguanli" />
+                            </PermissionButton>
+                            <PermissionButton
+                                :hasPermission="`${permission}:action`"
+                                type="link"
+                                :popConfirm="{
+                                    title: `确定要${
+                                        table.getRowStatus(slotProps)
+                                            ? '禁用'
+                                            : '启用'
+                                    }吗？`,
+                                    onConfirm: () =>
+                                        table.clickChangeStatus(slotProps),
+                                }"
+                                :tooltip="{
+                                    title: table.getRowStatus(slotProps)
+                                        ? '禁用'
+                                        : '启用',
+                                }"
+                            >
+                                <AIcon
+                                    :type="
+                                        table.getRowStatus(slotProps)
+                                            ? 'StopOutlined'
+                                            : 'PlayCircleOutlined'
+                                    "
+                                />
+                                <!-- <AIcon type="PlayCircleOutlined" /> -->
+                            </PermissionButton>
 
-                        <PermissionButton
-                            :hasPermission="`${permission}:delete`"
-                            type="link"
-                            :tooltip="{
-                                title: table.getRowStatus(slotProps)
-                                    ? '请先禁用，再删除'
-                                    : '删除',
-                            }"
-                            :danger="true"
-                            :popConfirm="{
-                                title: `确认删除`,
-                                onConfirm: () => table.clickDel(slotProps),
-                            }"
-                            :disabled="table.getRowStatus(slotProps)"
-                        >
-                            <AIcon type="DeleteOutlined" />
-                        </PermissionButton>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                            <PermissionButton
+                                :hasPermission="`${permission}:delete`"
+                                type="link"
+                                :tooltip="{
+                                    title: table.getRowStatus(slotProps)
+                                        ? '请先禁用，再删除'
+                                        : '删除',
+                                }"
+                                :danger="true"
+                                :popConfirm="{
+                                    title: `确认删除`,
+                                    onConfirm: () => table.clickDel(slotProps),
+                                }"
+                                :disabled="table.getRowStatus(slotProps)"
+                            >
+                                <AIcon type="DeleteOutlined" />
+                            </PermissionButton>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
 
             <EditDialog
                 v-if="dialog.visible"
@@ -283,13 +284,13 @@ const table = {
     // 刷新列表
     refresh: () => {
         tableRef.value.reload();
-        dialog.visible = false
-        dialog.selectItem = {}
+        dialog.visible = false;
+        dialog.selectItem = {};
     },
     cancel: () => {
-        dialog.visible = false
-        dialog.selectItem = {}
-    }
+        dialog.visible = false;
+        dialog.selectItem = {};
+    },
 };
 table.getTypeOption();
 
diff --git a/src/views/system/Department/device/index.vue b/src/views/system/Department/device/index.vue
index 54cd5802..0ab7d4e6 100644
--- a/src/views/system/Department/device/index.vue
+++ b/src/views/system/Department/device/index.vue
@@ -5,170 +5,175 @@
             target="category"
             @search="(params:any)=>queryParams = {...params}"
         />
-        <j-pro-table
-            ref="tableRef"
-            :request="table.requestFun"
-            :gridColumn="2"
-            :params="queryParams"
-            :rowSelection="{
-                selectedRowKeys: table._selectedRowKeys.value,
-                onChange:(keys:string[])=>table._selectedRowKeys.value = [...keys],
-                onSelectNone: table.cancelSelect
-            }"
-            :columns="columns"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        :hasPermission="`${permission}:assert`"
-                        type="primary"
-                        @click="table.clickAdd('handle')"
-                    >
-                        <AIcon type="PlusOutlined" />资产分配
-                    </PermissionButton>
-                    <j-dropdown trigger="hover">
-                        <j-button>批量操作</j-button>
-                        <template #overlay>
-                            <j-menu>
-                                <j-menu-item>
-                                    <PermissionButton
-                                        :hasPermission="`${permission}:bind`"
-                                        :popConfirm="{
-                                            title: `是否批量解除绑定`,
-                                            onConfirm: () =>
-                                                table.clickUnBind(),
-                                        }"
-                                    >
-                                        <AIcon
-                                            type="DisconnectOutlined"
-                                        />批量解绑
-                                    </PermissionButton>
-                                </j-menu-item>
-                                <j-menu-item>
-                                    <PermissionButton
-                                        :hasPermission="`${permission}:assert`"
-                                        @click="table.clickEdit()"
-                                    >
-                                        <AIcon type="EditOutlined" />批量编辑
-                                    </PermissionButton>
-                                </j-menu-item>
-                            </j-menu>
-                        </template>
-                    </j-dropdown>
-                </j-space>
-            </template>
-
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    :actions="[{ key: 1 }]"
-                    v-bind="slotProps"
-                    :active="
-                        table._selectedRowKeys.value.includes(slotProps.id)
-                    "
-                    @click="table.onSelectChange"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                        notActive: 'warning',
-                    }"
-                >
-                    <template #img>
-                        <slot name="img">
-                            <img
-                                :src="getImage('/device-product.png')"
-                                style="cursor: pointer"
-                            />
-                        </slot>
-                    </template>
-                    <template #content>
-                        <h3 class="card-item-content-title">
-                            {{ slotProps.name }}
-                        </h3>
-                        <j-row>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">ID</div>
-                                <div
-                                    style="cursor: pointer"
-                                    class="card-item-content-value"
-                                >
-                                    {{ slotProps.id }}
-                                </div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    资产权限
-                                </div>
-                                <div
-                                    style="cursor: pointer"
-                                    class="card-item-content-value"
-                                >
-                                    {{
-                                        table.permissionList.value.length &&
-                                        table.getPermissLabel(
-                                            slotProps.permission,
-                                        )
-                                    }}
-                                </div>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions>
+        <FullPage>
+            <j-pro-table
+                ref="tableRef"
+                :request="table.requestFun"
+                :gridColumn="2"
+                :params="queryParams"
+                :rowSelection="{
+                    selectedRowKeys: table._selectedRowKeys.value,
+                    onChange:(keys:string[])=>table._selectedRowKeys.value = [...keys],
+                    onSelectNone: table.cancelSelect
+                }"
+                :columns="columns"
+            >
+                <template #headerTitle>
+                    <j-space>
                         <PermissionButton
                             :hasPermission="`${permission}:assert`"
-                            @click="table.clickEdit(slotProps)"
+                            type="primary"
+                            @click="table.clickAdd('handle')"
                         >
-                            <AIcon type="EditOutlined" />
+                            <AIcon type="PlusOutlined" />资产分配
                         </PermissionButton>
+                        <j-dropdown trigger="hover">
+                            <j-button>批量操作</j-button>
+                            <template #overlay>
+                                <j-menu>
+                                    <j-menu-item>
+                                        <PermissionButton
+                                            :hasPermission="`${permission}:bind`"
+                                            :popConfirm="{
+                                                title: `是否批量解除绑定`,
+                                                onConfirm: () =>
+                                                    table.clickUnBind(),
+                                            }"
+                                        >
+                                            <AIcon
+                                                type="DisconnectOutlined"
+                                            />批量解绑
+                                        </PermissionButton>
+                                    </j-menu-item>
+                                    <j-menu-item>
+                                        <PermissionButton
+                                            :hasPermission="`${permission}:assert`"
+                                            @click="table.clickEdit()"
+                                        >
+                                            <AIcon
+                                                type="EditOutlined"
+                                            />批量编辑
+                                        </PermissionButton>
+                                    </j-menu-item>
+                                </j-menu>
+                            </template>
+                        </j-dropdown>
+                    </j-space>
+                </template>
 
-                        <PermissionButton
-                            :hasPermission="`${permission}:bind`"
-                            :popConfirm="{
-                                title: `是否解除绑定`,
-                                onConfirm: () => table.clickUnBind(slotProps),
-                            }"
-                        >
-                            <AIcon type="DisconnectOutlined" />
-                        </PermissionButton>
-                    </template>
-                </CardBox>
-            </template>
-
-            <template #permission="slotProps">
-                {{
-                    table.permissionList.value.length &&
-                    table.getPermissLabel(slotProps.permission)
-                }}
-            </template>
-            <template #state="slotProps">
-                <BadgeStatus
-                    :status="slotProps.state.value"
-                    :text="slotProps.state.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                        notActive: 'warning',
-                    }"
-                ></BadgeStatus>
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <PermissionButton
-                        v-for="i in table.getActions(slotProps, 'table')"
-                        :hasPermission="i.permission"
-                        type="link"
-                        :tooltip="i?.tooltip"
-                        :pop-confirm="i.popConfirm"
-                        @click="i.onClick"
-                        :disabled="i?.disabled"
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        :actions="[{ key: 1 }]"
+                        v-bind="slotProps"
+                        :active="
+                            table._selectedRowKeys.value.includes(slotProps.id)
+                        "
+                        @click="table.onSelectChange"
+                        :status="slotProps.state?.value"
+                        :statusText="slotProps.state?.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                            notActive: 'warning',
+                        }"
                     >
-                        <AIcon :type="i.icon" />
-                    </PermissionButton>
-                </j-space>
-            </template>
-        </j-pro-table>
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="getImage('/device-product.png')"
+                                    style="cursor: pointer"
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <j-row>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">ID</div>
+                                    <div
+                                        style="cursor: pointer"
+                                        class="card-item-content-value"
+                                    >
+                                        {{ slotProps.id }}
+                                    </div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        资产权限
+                                    </div>
+                                    <div
+                                        style="cursor: pointer"
+                                        class="card-item-content-value"
+                                    >
+                                        {{
+                                            table.permissionList.value.length &&
+                                            table.getPermissLabel(
+                                                slotProps.permission,
+                                            )
+                                        }}
+                                    </div>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions>
+                            <PermissionButton
+                                :hasPermission="`${permission}:assert`"
+                                @click="table.clickEdit(slotProps)"
+                            >
+                                <AIcon type="EditOutlined" />
+                            </PermissionButton>
+
+                            <PermissionButton
+                                :hasPermission="`${permission}:bind`"
+                                :popConfirm="{
+                                    title: `是否解除绑定`,
+                                    onConfirm: () =>
+                                        table.clickUnBind(slotProps),
+                                }"
+                            >
+                                <AIcon type="DisconnectOutlined" />
+                            </PermissionButton>
+                        </template>
+                    </CardBox>
+                </template>
+
+                <template #permission="slotProps">
+                    {{
+                        table.permissionList.value.length &&
+                        table.getPermissLabel(slotProps.permission)
+                    }}
+                </template>
+                <template #state="slotProps">
+                    <BadgeStatus
+                        :status="slotProps.state.value"
+                        :text="slotProps.state.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                            notActive: 'warning',
+                        }"
+                    ></BadgeStatus>
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <PermissionButton
+                            v-for="i in table.getActions(slotProps, 'table')"
+                            :hasPermission="i.permission"
+                            type="link"
+                            :tooltip="i?.tooltip"
+                            :pop-confirm="i.popConfirm"
+                            @click="i.onClick"
+                            :disabled="i?.disabled"
+                        >
+                            <AIcon :type="i.icon" />
+                        </PermissionButton>
+                    </j-space>
+                </template>
+            </j-pro-table>
+        </FullPage>
 
         <div class="dialogs">
             <AddDeviceOrProductDialog
@@ -471,7 +476,7 @@ const table = {
     },
     clickAdd: (type?: string) => {
         // 设备资产分配弹窗操作类型: type = 'handle': 手动点击资产分配按钮, !type产品资产分配后, 自动弹出设备资产分配
-        departmentStore.setType(type)
+        departmentStore.setType(type);
         dialogs.addShow = true;
     },
     clickEdit: (row?: any) => {
diff --git a/src/views/system/Department/product/index.vue b/src/views/system/Department/product/index.vue
index 53ab716a..a57f31e9 100644
--- a/src/views/system/Department/product/index.vue
+++ b/src/views/system/Department/product/index.vue
@@ -5,193 +5,199 @@
             target="category"
             @search="(params:any)=>queryParams = {...params}"
         />
-        <j-pro-table
-            ref="tableRef"
-            :request="table.requestFun"
-            :gridColumn="2"
-            :params="queryParams"
-            :rowSelection="{
-                selectedRowKeys: tableData._selectedRowKeys,
-                onChange:(keys:string[])=>tableData._selectedRowKeys = [...keys],
-                onSelectNone: table.cancelSelect
-            }"
-            :columns="columns"
-        >
-            <template #headerTitle>
-                <j-space>
-                    <PermissionButton
-                        :hasPermission="`${permission}:assert`"
-                        type="primary"
-                        @click="dialogs.addShow = true"
-                    >
-                        <AIcon type="PlusOutlined" />资产分配
-                    </PermissionButton>
-                    <j-dropdown trigger="hover">
-                        <j-button>批量操作</j-button>
-                        <template #overlay>
-                            <j-menu>
-                                <j-menu-item>
-                                    <PermissionButton
-                                        :hasPermission="`${permission}:bind`"
-                                        :popConfirm="{
-                                            title: `是否批量解除绑定`,
-                                            onConfirm: () =>
-                                                table.clickUnBind(),
-                                        }"
-                                    >
-                                        <AIcon
-                                            type="DisconnectOutlined"
-                                        />批量解绑
-                                    </PermissionButton>
-                                </j-menu-item>
-                                <j-menu-item>
-                                    <PermissionButton
-                                        :hasPermission="`${permission}:assert`"
-                                        @click="() => table.clickEdit()"
-                                    >
-                                        <AIcon type="EditOutlined" />批量编辑
-                                    </PermissionButton>
-                                </j-menu-item>
-                            </j-menu>
-                        </template>
-                    </j-dropdown>
-                </j-space>
-            </template>
-
-            <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    :actions="table.getActions(slotProps, 'card')"
-                    v-bind="slotProps"
-                    :active="tableData._selectedRowKeys.includes(slotProps.id)"
-                    @click="table.onSelectChange"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                    }"
-                >
-                    <template #img>
-                        <slot name="img">
-                            <img
-                                :src="getImage('/device-product.png')"
-                                style="cursor: pointer"
-                            />
-                        </slot>
-                    </template>
-                    <template #content>
-                        <h3 class="card-item-content-title">
-                            {{ slotProps.name }}
-                        </h3>
-                        <j-row>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">ID</div>
-                                <div
-                                    style="cursor: pointer"
-                                    class="card-item-content-value"
-                                >
-                                    {{ slotProps.id }}
-                                </div>
-                            </j-col>
-                            <j-col :span="12">
-                                <div class="card-item-content-text">
-                                    资产权限
-                                </div>
-                                <div
-                                    style="cursor: pointer"
-                                    class="card-item-content-value"
-                                >
-                                    {{
-                                        tableData.permissionList.length &&
-                                        table.getPermissLabel(
-                                            slotProps.permission,
-                                        )
-                                    }}
-                                </div>
-                            </j-col>
-                        </j-row>
-                    </template>
-                    <template #actions="item">
-                        <j-tooltip
-                            v-bind="item.tooltip"
-                            :title="item.disabled && item.tooltip.title"
+        <FullPage>
+            <j-pro-table
+                ref="tableRef"
+                :request="table.requestFun"
+                :gridColumn="2"
+                :params="queryParams"
+                :rowSelection="{
+                    selectedRowKeys: tableData._selectedRowKeys,
+                    onChange:(keys:string[])=>tableData._selectedRowKeys = [...keys],
+                    onSelectNone: table.cancelSelect
+                }"
+                :columns="columns"
+            >
+                <template #headerTitle>
+                    <j-space>
+                        <PermissionButton
+                            :hasPermission="`${permission}:assert`"
+                            type="primary"
+                            @click="dialogs.addShow = true"
                         >
-                            <j-dropdown
-                                placement="bottomRight"
-                                v-if="item.key === 'others'"
-                            >
-                                <j-button>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
-                                </j-button>
-                                <template #overlay>
-                                    <j-menu>
-                                        <j-menu-item
-                                            v-for="(o, i) in item.children"
-                                            :key="i"
+                            <AIcon type="PlusOutlined" />资产分配
+                        </PermissionButton>
+                        <j-dropdown trigger="hover">
+                            <j-button>批量操作</j-button>
+                            <template #overlay>
+                                <j-menu>
+                                    <j-menu-item>
+                                        <PermissionButton
+                                            :hasPermission="`${permission}:bind`"
+                                            :popConfirm="{
+                                                title: `是否批量解除绑定`,
+                                                onConfirm: () =>
+                                                    table.clickUnBind(),
+                                            }"
                                         >
-                                            <j-button
-                                                type="link"
-                                                @click="o.onClick"
-                                            >
-                                                <AIcon :type="o.icon" />
-                                                <span>{{ o.text }}</span>
-                                            </j-button>
-                                        </j-menu-item>
-                                    </j-menu>
-                                </template>
-                            </j-dropdown>
-                            <PermissionButton
-                                v-else
-                                :hasPermission="item.permission"
-                                :tooltip="item.tooltip"
-                                :pop-confirm="item.popConfirm"
-                                @click="item.onClick"
-                                :disabled="item.disabled"
-                            >
-                                <AIcon :type="item.icon" />
-                                <span v-if="item.key !== 'delete'">{{
-                                    item.text
-                                }}</span>
-                            </PermissionButton>
-                        </j-tooltip>
-                    </template>
-                </CardBox>
-            </template>
+                                            <AIcon
+                                                type="DisconnectOutlined"
+                                            />批量解绑
+                                        </PermissionButton>
+                                    </j-menu-item>
+                                    <j-menu-item>
+                                        <PermissionButton
+                                            :hasPermission="`${permission}:assert`"
+                                            @click="() => table.clickEdit()"
+                                        >
+                                            <AIcon
+                                                type="EditOutlined"
+                                            />批量编辑
+                                        </PermissionButton>
+                                    </j-menu-item>
+                                </j-menu>
+                            </template>
+                        </j-dropdown>
+                    </j-space>
+                </template>
 
-            <template #permission="slotProps">
-                {{
-                    tableData.permissionList.length &&
-                    table.getPermissLabel(slotProps.permission)
-                }}
-            </template>
-            <template #state="slotProps">
-                <BadgeStatus
-                    :status="slotProps.state.value"
-                    :text="slotProps.state.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                    }"
-                ></BadgeStatus>
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <PermissionButton
-                        v-for="i in table.getActions(slotProps, 'table')"
-                        :hasPermission="i.permission"
-                        type="link"
-                        :tooltip="i?.tooltip"
-                        :pop-confirm="i.popConfirm"
-                        @click="i.onClick"
-                        :disabled="i?.disabled"
+                <template #card="slotProps">
+                    <CardBox
+                        :value="slotProps"
+                        :actions="table.getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                        :active="
+                            tableData._selectedRowKeys.includes(slotProps.id)
+                        "
+                        @click="table.onSelectChange"
+                        :status="slotProps.state?.value"
+                        :statusText="slotProps.state?.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                        }"
                     >
-                        <AIcon :type="i.icon" />
-                    </PermissionButton>
-                </j-space>
-            </template>
-        </j-pro-table>
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="getImage('/device-product.png')"
+                                    style="cursor: pointer"
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <j-row>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">ID</div>
+                                    <div
+                                        style="cursor: pointer"
+                                        class="card-item-content-value"
+                                    >
+                                        {{ slotProps.id }}
+                                    </div>
+                                </j-col>
+                                <j-col :span="12">
+                                    <div class="card-item-content-text">
+                                        资产权限
+                                    </div>
+                                    <div
+                                        style="cursor: pointer"
+                                        class="card-item-content-value"
+                                    >
+                                        {{
+                                            tableData.permissionList.length &&
+                                            table.getPermissLabel(
+                                                slotProps.permission,
+                                            )
+                                        }}
+                                    </div>
+                                </j-col>
+                            </j-row>
+                        </template>
+                        <template #actions="item">
+                            <j-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
+                            >
+                                <j-dropdown
+                                    placement="bottomRight"
+                                    v-if="item.key === 'others'"
+                                >
+                                    <j-button>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item.text }}</span>
+                                    </j-button>
+                                    <template #overlay>
+                                        <j-menu>
+                                            <j-menu-item
+                                                v-for="(o, i) in item.children"
+                                                :key="i"
+                                            >
+                                                <j-button
+                                                    type="link"
+                                                    @click="o.onClick"
+                                                >
+                                                    <AIcon :type="o.icon" />
+                                                    <span>{{ o.text }}</span>
+                                                </j-button>
+                                            </j-menu-item>
+                                        </j-menu>
+                                    </template>
+                                </j-dropdown>
+                                <PermissionButton
+                                    v-else
+                                    :hasPermission="item.permission"
+                                    :tooltip="item.tooltip"
+                                    :pop-confirm="item.popConfirm"
+                                    @click="item.onClick"
+                                    :disabled="item.disabled"
+                                >
+                                    <AIcon :type="item.icon" />
+                                    <span v-if="item.key !== 'delete'">{{
+                                        item.text
+                                    }}</span>
+                                </PermissionButton>
+                            </j-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+
+                <template #permission="slotProps">
+                    {{
+                        tableData.permissionList.length &&
+                        table.getPermissLabel(slotProps.permission)
+                    }}
+                </template>
+                <template #state="slotProps">
+                    <BadgeStatus
+                        :status="slotProps.state.value"
+                        :text="slotProps.state.text"
+                        :statusNames="{
+                            online: 'processing',
+                            offline: 'error',
+                        }"
+                    ></BadgeStatus>
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <PermissionButton
+                            v-for="i in table.getActions(slotProps, 'table')"
+                            :hasPermission="i.permission"
+                            type="link"
+                            :tooltip="i?.tooltip"
+                            :pop-confirm="i.popConfirm"
+                            @click="i.onClick"
+                            :disabled="i?.disabled"
+                        >
+                            <AIcon :type="i.icon" />
+                        </PermissionButton>
+                    </j-space>
+                </template>
+            </j-pro-table>
+        </FullPage>
 
         <div class="dialogs">
             <AddDeviceOrProductDialog
diff --git a/src/views/system/Department/user/index.vue b/src/views/system/Department/user/index.vue
index cb79dd88..ec3857f7 100644
--- a/src/views/system/Department/user/index.vue
+++ b/src/views/system/Department/user/index.vue
@@ -5,72 +5,74 @@
             target="category"
             @search="handleParams"
         />
-        <j-pro-table
-            ref="tableRef"
-            :columns="columns"
-            :request="table.requestFun"
-            :params="queryParams"
-            :rowSelection="{
-                selectedRowKeys: table._selectedRowKeys,
-                onChange: table.onSelectChange,
-            }"
-            @cancelSelect="table.cancelSelect"
-            model="TABLE"
-            :defaultParams="{
-                pageSize: 10,
-            }"
-            :pagination="{
-                showSizeChanger: true,
-                pageSizeOptions: ['10', '20', '50', '100'],
-            }"
-        >
-            <template #headerTitle>
-                <PermissionButton
-                    type="primary"
-                    :hasPermission="`${permission}:bind-user`"
-                    @click="dialogVisible = true"
-                    style="margin-right: 15px"
-                >
-                    <AIcon type="PlusOutlined" />绑定用户
-                </PermissionButton>
-                <div
-                    style="display: inline-block; width: 12px; height: 1px"
-                ></div>
-                <PermissionButton
-                    :hasPermission="`${permission}:bind`"
-                    :popConfirm="{
-                        title: `是否解除绑定`,
-                        onConfirm: () => table.unBind(),
-                    }"
-                >
-                    <AIcon type="DisconnectOutlined" />批量解绑
-                </PermissionButton>
-            </template>
-            <template #status="slotProps">
-                <BadgeStatus
-                    :status="slotProps.status"
-                    :text="slotProps.status ? '正常' : '禁用'"
-                    :statusNames="{
-                        1: 'success',
-                        0: 'error',
-                    }"
-                ></BadgeStatus>
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
+        <FullPage>
+            <j-pro-table
+                ref="tableRef"
+                :columns="columns"
+                :request="table.requestFun"
+                :params="queryParams"
+                :rowSelection="{
+                    selectedRowKeys: table._selectedRowKeys,
+                    onChange: table.onSelectChange,
+                }"
+                @cancelSelect="table.cancelSelect"
+                model="TABLE"
+                :defaultParams="{
+                    pageSize: 10,
+                }"
+                :pagination="{
+                    showSizeChanger: true,
+                    pageSizeOptions: ['10', '20', '50', '100'],
+                }"
+            >
+                <template #headerTitle>
+                    <PermissionButton
+                        type="primary"
+                        :hasPermission="`${permission}:bind-user`"
+                        @click="dialogVisible = true"
+                        style="margin-right: 15px"
+                    >
+                        <AIcon type="PlusOutlined" />绑定用户
+                    </PermissionButton>
+                    <div
+                        style="display: inline-block; width: 12px; height: 1px"
+                    ></div>
                     <PermissionButton
-                        type="link"
                         :hasPermission="`${permission}:bind`"
                         :popConfirm="{
                             title: `是否解除绑定`,
-                            onConfirm: () => table.unBind(slotProps),
+                            onConfirm: () => table.unBind(),
                         }"
                     >
-                        <AIcon type="DisconnectOutlined" />
+                        <AIcon type="DisconnectOutlined" />批量解绑
                     </PermissionButton>
-                </j-space>
-            </template>
-        </j-pro-table>
+                </template>
+                <template #status="slotProps">
+                    <BadgeStatus
+                        :status="slotProps.status"
+                        :text="slotProps.status ? '正常' : '禁用'"
+                        :statusNames="{
+                            1: 'success',
+                            0: 'error',
+                        }"
+                    ></BadgeStatus>
+                </template>
+                <template #action="slotProps">
+                    <j-space :size="16">
+                        <PermissionButton
+                            type="link"
+                            :hasPermission="`${permission}:bind`"
+                            :popConfirm="{
+                                title: `是否解除绑定`,
+                                onConfirm: () => table.unBind(slotProps),
+                            }"
+                        >
+                            <AIcon type="DisconnectOutlined" />
+                        </PermissionButton>
+                    </j-space>
+                </template>
+            </j-pro-table>
+        </FullPage>
 
         <div class="dialogs">
             <AddBindUserDialog
@@ -150,8 +152,8 @@ const columns = [
 const queryParams = ref({});
 
 const handleParams = (params: any) => {
-  queryParams.value = params
-}
+    queryParams.value = params;
+};
 
 // 表格
 const tableRef = ref<Record<string, any>>({}); // 表格实例
@@ -174,7 +176,7 @@ const table = reactive({
                                 value: props.parentId,
                             },
                         ],
-                      type: 'and'
+                        type: 'and',
                     },
                 ],
             };
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
index c7875e19..021a0f6c 100644
--- a/src/views/system/Menu/index.vue
+++ b/src/views/system/Menu/index.vue
@@ -6,70 +6,73 @@
                 target="category"
                 @search="handleSearch"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="table.getList"
-                model="TABLE"
-                :params="queryParams"
-                noPagination
-                v-model:expandedRowKeys="expandedRowKeys"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        :hasPermission="`${permission}:add`"
-                        @click="table.toDetails({})"
-                    >
-                        <AIcon type="PlusOutlined" />新增
-                    </PermissionButton>
-                    <j-button
-                        style="margin-left: 12px"
-                        @click="router.push('/system/Menu/Setting')"
-                        >菜单配置</j-button
-                    >
-                </template>
-                <template #createTime="slotProps">
-                    {{
-                        dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss')
-                    }}
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
-                        <j-tooltip>
-                            <template #title>查看</template>
-                            <j-button
-                                style="padding: 0"
-                                type="link"
-                                @click="table.toDetails(slotProps)"
-                            >
-                                <AIcon type="SearchOutlined" />
-                            </j-button>
-                        </j-tooltip>
-
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="table.getList"
+                    model="TABLE"
+                    :params="queryParams"
+                    noPagination
+                    v-model:expandedRowKeys="expandedRowKeys"
+                >
+                    <template #headerTitle>
                         <PermissionButton
-                            type="link"
+                            type="primary"
                             :hasPermission="`${permission}:add`"
-                            :tooltip="{ title: '新增子菜单' }"
-                            @click="table.addChildren(slotProps)"
+                            @click="table.toDetails({})"
                         >
-                            <AIcon type="PlusCircleOutlined" />
+                            <AIcon type="PlusOutlined" />新增
                         </PermissionButton>
-                        <PermissionButton
-                            type="link"
-                            :hasPermission="`${permission}:delete`"
-                            :tooltip="{ title: '删除' }"
-                            :popConfirm="{
-                                title: `是否删除该菜单`,
-                                onConfirm: () => table.clickDel(slotProps),
-                            }"
+                        <j-button
+                            style="margin-left: 12px"
+                            @click="router.push('/system/Menu/Setting')"
+                            >菜单配置</j-button
                         >
-                            <AIcon type="DeleteOutlined" />
-                        </PermissionButton>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                    </template>
+                    <template #createTime="slotProps">
+                        {{
+                            dayjs(slotProps.createTime).format(
+                                'YYYY-MM-DD HH:mm:ss',
+                            )
+                        }}
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <j-tooltip>
+                                <template #title>查看</template>
+                                <j-button
+                                    style="padding: 0"
+                                    type="link"
+                                    @click="table.toDetails(slotProps)"
+                                >
+                                    <AIcon type="SearchOutlined" />
+                                </j-button>
+                            </j-tooltip>
+
+                            <PermissionButton
+                                type="link"
+                                :hasPermission="`${permission}:add`"
+                                :tooltip="{ title: '新增子菜单' }"
+                                @click="table.addChildren(slotProps)"
+                            >
+                                <AIcon type="PlusCircleOutlined" />
+                            </PermissionButton>
+                            <PermissionButton
+                                type="link"
+                                :hasPermission="`${permission}:delete`"
+                                :tooltip="{ title: '删除' }"
+                                :popConfirm="{
+                                    title: `是否删除该菜单`,
+                                    onConfirm: () => table.clickDel(slotProps),
+                                }"
+                            >
+                                <AIcon type="DeleteOutlined" />
+                            </PermissionButton>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
         </div>
     </page-container>
 </template>
diff --git a/src/views/system/Permission/index.vue b/src/views/system/Permission/index.vue
index 98d72c05..7f6dc35f 100644
--- a/src/views/system/Permission/index.vue
+++ b/src/views/system/Permission/index.vue
@@ -6,134 +6,136 @@
                 target="system-permission"
                 @search="handleSearch"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="getPermission_api"
-                model="TABLE"
-                :params="queryParams"
-                :defaultParams="{
-                    pageSize: 10,
-                    sorts: [{ name: 'id', order: 'asc' }],
-                }"
-                :pagination="{
-                    showSizeChanger: true,
-                    pageSizeOptions: ['10', '20', '50', '100'],
-                }"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        :hasPermission="`${permission}:add`"
-                        @click="table.openDialog(undefined)"
-                    >
-                        <AIcon type="PlusOutlined" />新增
-                    </PermissionButton>
-                    <j-dropdown trigger="hover">
-                        <j-button>批量操作</j-button>
-                        <template #overlay>
-                            <j-menu>
-                                <j-menu-item>
-                                    <j-upload
-                                        name="file"
-                                        action="#"
-                                        accept=".json"
-                                        :showUploadList="false"
-                                        :before-upload="table.clickImport"
-                                        :disabled="
-                                            !hasPermission(
-                                                `${permission}:import`,
-                                            )
-                                        "
-                                    >
-                                        <PermissionButton
-                                            :hasPermission="`${permission}:import`"
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="getPermission_api"
+                    model="TABLE"
+                    :params="queryParams"
+                    :defaultParams="{
+                        pageSize: 10,
+                        sorts: [{ name: 'id', order: 'asc' }],
+                    }"
+                    :pagination="{
+                        showSizeChanger: true,
+                        pageSizeOptions: ['10', '20', '50', '100'],
+                    }"
+                >
+                    <template #headerTitle>
+                        <PermissionButton
+                            type="primary"
+                            :hasPermission="`${permission}:add`"
+                            @click="table.openDialog(undefined)"
+                        >
+                            <AIcon type="PlusOutlined" />新增
+                        </PermissionButton>
+                        <j-dropdown trigger="hover">
+                            <j-button>批量操作</j-button>
+                            <template #overlay>
+                                <j-menu>
+                                    <j-menu-item>
+                                        <j-upload
+                                            name="file"
+                                            action="#"
+                                            accept=".json"
+                                            :showUploadList="false"
+                                            :before-upload="table.clickImport"
+                                            :disabled="
+                                                !hasPermission(
+                                                    `${permission}:import`,
+                                                )
+                                            "
                                         >
-                                            导入
+                                            <PermissionButton
+                                                :hasPermission="`${permission}:import`"
+                                            >
+                                                导入
+                                            </PermissionButton>
+                                        </j-upload>
+                                    </j-menu-item>
+                                    <j-menu-item>
+                                        <PermissionButton
+                                            :hasPermission="`${permission}:export`"
+                                            :popConfirm="{
+                                                title: `确认导出？`,
+                                                onConfirm: () =>
+                                                    table.clickExport(),
+                                            }"
+                                        >
+                                            导出
                                         </PermissionButton>
-                                    </j-upload>
-                                </j-menu-item>
-                                <j-menu-item>
-                                    <PermissionButton
-                                        :hasPermission="`${permission}:export`"
-                                        :popConfirm="{
-                                            title: `确认导出？`,
-                                            onConfirm: () =>
-                                                table.clickExport(),
-                                        }"
-                                    >
-                                        导出
-                                    </PermissionButton>
-                                </j-menu-item>
-                            </j-menu>
-                        </template>
-                    </j-dropdown>
-                </template>
-                <template #status="slotProps">
-                    <BadgeStatus
-                        :status="slotProps.status"
-                        :text="slotProps.status ? '启用' : '禁用'"
-                        :statusNames="{
-                            1: 'success',
-                            0: 'error',
-                        }"
-                    ></BadgeStatus>
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
-                        <PermissionButton
-                            :hasPermission="`${permission}:update`"
-                            type="link"
-                            :tooltip="{
-                                title: '编辑',
+                                    </j-menu-item>
+                                </j-menu>
+                            </template>
+                        </j-dropdown>
+                    </template>
+                    <template #status="slotProps">
+                        <BadgeStatus
+                            :status="slotProps.status"
+                            :text="slotProps.status ? '启用' : '禁用'"
+                            :statusNames="{
+                                1: 'success',
+                                0: 'error',
                             }"
-                            @click="table.openDialog(slotProps)"
-                        >
-                            <AIcon type="EditOutlined" />
-                        </PermissionButton>
+                        ></BadgeStatus>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <PermissionButton
+                                :hasPermission="`${permission}:update`"
+                                type="link"
+                                :tooltip="{
+                                    title: '编辑',
+                                }"
+                                @click="table.openDialog(slotProps)"
+                            >
+                                <AIcon type="EditOutlined" />
+                            </PermissionButton>
 
-                        <PermissionButton
-                            :hasPermission="`${permission}:action`"
-                            type="link"
-                            :popConfirm="{
-                                title: `确定要${
-                                    slotProps.status ? '禁用' : '启用'
-                                }吗？`,
-                                onConfirm: () => table.changeStatus(slotProps),
-                            }"
-                            :tooltip="{
-                                title: slotProps.status ? '禁用' : '启用',
-                            }"
-                        >
-                            <AIcon
-                                :type="
-                                    slotProps.status
-                                        ? 'StopOutlined'
-                                        : 'PlayCircleOutlined'
-                                "
-                            />
-                        </PermissionButton>
+                            <PermissionButton
+                                :hasPermission="`${permission}:action`"
+                                type="link"
+                                :popConfirm="{
+                                    title: `确定要${
+                                        slotProps.status ? '禁用' : '启用'
+                                    }吗？`,
+                                    onConfirm: () =>
+                                        table.changeStatus(slotProps),
+                                }"
+                                :tooltip="{
+                                    title: slotProps.status ? '禁用' : '启用',
+                                }"
+                            >
+                                <AIcon
+                                    :type="
+                                        slotProps.status
+                                            ? 'StopOutlined'
+                                            : 'PlayCircleOutlined'
+                                    "
+                                />
+                            </PermissionButton>
 
-                        <PermissionButton
-                            :hasPermission="`${permission}:delete`"
-                            type="link"
-                            :tooltip="{
-                                title: slotProps.status
-                                    ? '请先禁用，再删除'
-                                    : '删除',
-                            }"
-                            :popConfirm="{
-                                title: `确认删除`,
-                                onConfirm: () => table.clickDel(slotProps),
-                            }"
-                            :disabled="slotProps.status"
-                        >
-                            <AIcon type="DeleteOutlined" />
-                        </PermissionButton>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                            <PermissionButton
+                                :hasPermission="`${permission}:delete`"
+                                type="link"
+                                :tooltip="{
+                                    title: slotProps.status
+                                        ? '请先禁用，再删除'
+                                        : '删除',
+                                }"
+                                :popConfirm="{
+                                    title: `确认删除`,
+                                    onConfirm: () => table.clickDel(slotProps),
+                                }"
+                                :disabled="slotProps.status"
+                            >
+                                <AIcon type="DeleteOutlined" />
+                            </PermissionButton>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
 
             <EditDialog
                 v-if="dialog.visible"
diff --git a/src/views/system/Relationship/index.vue b/src/views/system/Relationship/index.vue
index 2c9f9f24..65e86825 100644
--- a/src/views/system/Relationship/index.vue
+++ b/src/views/system/Relationship/index.vue
@@ -6,60 +6,61 @@
                 target="category"
                 @search="(params:any)=>queryParams = {...params}"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="getRelationshipList_api"
-                model="TABLE"
-                :params="queryParams"
-                :defaultParams="{
-                    pageSize: 10,
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :pagination="{
-                    showSizeChanger: true,
-                    pageSizeOptions: ['10', '20', '50', '100'],
-                }"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        :hasPermission="`${permission}:add`"
-                        @click="table.openDialog(undefined)"
-                    >
-                        <AIcon type="PlusOutlined" />新增
-                    </PermissionButton>
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="getRelationshipList_api"
+                    model="TABLE"
+                    :params="queryParams"
+                    :defaultParams="{
+                        pageSize: 10,
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :pagination="{
+                        showSizeChanger: true,
+                        pageSizeOptions: ['10', '20', '50', '100'],
+                    }"
+                >
+                    <template #headerTitle>
                         <PermissionButton
-                            :hasPermission="`${permission}:update`"
-                            type="link"
-                            :tooltip="{
-                                title: '编辑',
-                            }"
-                            @click="table.openDialog(slotProps)"
+                            type="primary"
+                            :hasPermission="`${permission}:add`"
+                            @click="table.openDialog(undefined)"
                         >
-                            <AIcon type="EditOutlined" />
+                            <AIcon type="PlusOutlined" />新增
                         </PermissionButton>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <PermissionButton
+                                :hasPermission="`${permission}:update`"
+                                type="link"
+                                :tooltip="{
+                                    title: '编辑',
+                                }"
+                                @click="table.openDialog(slotProps)"
+                            >
+                                <AIcon type="EditOutlined" />
+                            </PermissionButton>
 
-                        <PermissionButton
-                            :danger="true"
-                            :hasPermission="`${permission}:delete`"
-                            type="link"
-                            :tooltip="{ title: '删除' }"
-                            :popConfirm="{
-                                title: `确认删除`,
-                                onConfirm: () => table.clickDel(slotProps),
-                            }"
-                            :disabled="slotProps.status"
-                        >
-                            <AIcon type="DeleteOutlined" />
-                        </PermissionButton>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                            <PermissionButton
+                                :danger="true"
+                                :hasPermission="`${permission}:delete`"
+                                type="link"
+                                :tooltip="{ title: '删除' }"
+                                :popConfirm="{
+                                    title: `确认删除`,
+                                    onConfirm: () => table.clickDel(slotProps),
+                                }"
+                                :disabled="slotProps.status"
+                            >
+                                <AIcon type="DeleteOutlined" />
+                            </PermissionButton>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
 
             <EditDialog
                 v-if="dialog.visible"
diff --git a/src/views/system/Role/index.vue b/src/views/system/Role/index.vue
index 2b3eecde..c52a1931 100644
--- a/src/views/system/Role/index.vue
+++ b/src/views/system/Role/index.vue
@@ -6,65 +6,66 @@
                 target="category"
                 @search="(params:any)=>queryParams = {...params}"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="getRoleList_api"
-                model="TABLE"
-                :params="queryParams"
-                :defaultParams="{
-                    pageSize: 10,
-                    sorts: [
-                        { name: 'createTime', order: 'desc' },
-                        { name: 'id', order: 'desc' },
-                    ],
-                }"
-                :pagination="{
-                    showSizeChanger: true,
-                    pageSizeOptions: ['10', '20', '50', '100'],
-                }"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        type="primary"
-                        :hasPermission="`${permission}:add`"
-                        @click="dialogVisible = true"
-                    >
-                        <AIcon type="PlusOutlined" />新增
-                    </PermissionButton>
-                </template>
-
-                <template #action="slotProps">
-                    <j-space :size="16">
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="getRoleList_api"
+                    model="TABLE"
+                    :params="queryParams"
+                    :defaultParams="{
+                        pageSize: 10,
+                        sorts: [
+                            { name: 'createTime', order: 'desc' },
+                            { name: 'id', order: 'desc' },
+                        ],
+                    }"
+                    :pagination="{
+                        showSizeChanger: true,
+                        pageSizeOptions: ['10', '20', '50', '100'],
+                    }"
+                >
+                    <template #headerTitle>
                         <PermissionButton
-                            :hasPermission="`${permission}:update`"
-                            type="link"
-                            :tooltip="{
-                                title: '编辑',
-                            }"
-                            @click="
-                                jumpPage(`system/Role/Detail`, {
-                                    id: slotProps.id,
-                                })
-                            "
+                            type="primary"
+                            :hasPermission="`${permission}:add`"
+                            @click="dialogVisible = true"
                         >
-                            <AIcon type="EditOutlined" />
+                            <AIcon type="PlusOutlined" />新增
                         </PermissionButton>
-                        <PermissionButton
-                            type="link"
-                            :hasPermission="`${permission}:delete`"
-                            :tooltip="{ title: '删除' }"
-                            :popConfirm="{
-                                title: `确定要删除吗`,
-                                onConfirm: () => clickDel(slotProps),
-                            }"
-                        >
-                            <AIcon type="DeleteOutlined" />
-                        </PermissionButton>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                    </template>
+
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <PermissionButton
+                                :hasPermission="`${permission}:update`"
+                                type="link"
+                                :tooltip="{
+                                    title: '编辑',
+                                }"
+                                @click="
+                                    jumpPage(`system/Role/Detail`, {
+                                        id: slotProps.id,
+                                    })
+                                "
+                            >
+                                <AIcon type="EditOutlined" />
+                            </PermissionButton>
+                            <PermissionButton
+                                type="link"
+                                :hasPermission="`${permission}:delete`"
+                                :tooltip="{ title: '删除' }"
+                                :popConfirm="{
+                                    title: `确定要删除吗`,
+                                    onConfirm: () => clickDel(slotProps),
+                                }"
+                            >
+                                <AIcon type="DeleteOutlined" />
+                            </PermissionButton>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
 
             <AddDialog v-if="dialogVisible" v-model:visible="dialogVisible" />
         </div>
diff --git a/src/views/system/User/index.vue b/src/views/system/User/index.vue
index 2283af2d..fe28b7d1 100644
--- a/src/views/system/User/index.vue
+++ b/src/views/system/User/index.vue
@@ -6,106 +6,111 @@
                 target="category"
                 @search="handleParams"
             />
-
-            <j-pro-table
-                ref="tableRef"
-                :columns="columns"
-                :request="getUserList_api"
-                model="TABLE"
-                :params="queryParams"
-                :defaultParams="{
-                    pageSize: 10,
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                }"
-                :pagination="{
-                    showSizeChanger: true,
-                    pageSizeOptions: ['10', '20', '50', '100'],
-                }"
-            >
-                <template #headerTitle>
-                    <PermissionButton
-                        :hasPermission="`${permission}:add`"
-                        type="primary"
-                        @click="table.openDialog('add')"
-                    >
-                        <AIcon type="PlusOutlined" />新增
-                    </PermissionButton>
-                </template>
-                <template #type="slotProps">
-                    {{ slotProps.type.name }}
-                </template>
-                <template #status="slotProps">
-                    <BadgeStatus
-                        :status="slotProps.status"
-                        :text="slotProps.status ? '正常' : '禁用'"
-                        :statusNames="{
-                            1: 'success',
-                            0: 'error',
-                        }"
-                    ></BadgeStatus>
-                </template>
-                <template #action="slotProps">
-                    <j-space :size="16">
+            <FullPage>
+                <j-pro-table
+                    ref="tableRef"
+                    :columns="columns"
+                    :request="getUserList_api"
+                    model="TABLE"
+                    :params="queryParams"
+                    :defaultParams="{
+                        pageSize: 10,
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                    }"
+                    :pagination="{
+                        showSizeChanger: true,
+                        pageSizeOptions: ['10', '20', '50', '100'],
+                    }"
+                >
+                    <template #headerTitle>
                         <PermissionButton
-                            :hasPermission="`${permission}:update`"
-                            type="link"
-                            :tooltip="{
-                                title: '编辑',
-                            }"
-                            @click="table.openDialog('edit', slotProps)"
+                            :hasPermission="`${permission}:add`"
+                            type="primary"
+                            @click="table.openDialog('add')"
                         >
-                            <AIcon type="EditOutlined" />
+                            <AIcon type="PlusOutlined" />新增
                         </PermissionButton>
-                        <PermissionButton
-                            :hasPermission="`${permission}:action`"
-                            type="link"
-                            :tooltip="{
-                                title: `${slotProps.status ? '禁用' : '启用'}`,
+                    </template>
+                    <template #type="slotProps">
+                        {{ slotProps.type.name }}
+                    </template>
+                    <template #status="slotProps">
+                        <BadgeStatus
+                            :status="slotProps.status"
+                            :text="slotProps.status ? '正常' : '禁用'"
+                            :statusNames="{
+                                1: 'success',
+                                0: 'error',
                             }"
-                            :popConfirm="{
-                                title: `确定${
-                                    slotProps.status ? '禁用' : '启用'
-                                }吗？`,
-                                onConfirm: () => table.changeStatus(slotProps),
-                            }"
-                        >
-                            <AIcon
-                                :type="
-                                    slotProps.status
-                                        ? 'StopOutlined'
-                                        : 'PlayCircleOutlined'
-                                "
-                            />
-                        </PermissionButton>
-                        <PermissionButton
-                            :hasPermission="`${permission}:update`"
-                            type="link"
-                            :tooltip="{
-                                title: '重置密码',
-                            }"
-                            @click="table.openDialog('reset', slotProps)"
-                        >
-                            <AIcon type="icon-zhongzhimima" />
-                        </PermissionButton>
-                        <PermissionButton
-                            type="link"
-                            :hasPermission="`${permission}:delete`"
-                            :tooltip="{
-                                title: slotProps.status
-                                    ? '请先禁用，再删除'
-                                    : '删除',
-                            }"
-                            :popConfirm="{
-                                title: `确认删除`,
-                                onConfirm: () => table.clickDel(slotProps.id),
-                            }"
-                            :disabled="slotProps.status"
-                        >
-                            <AIcon type="DeleteOutlined" />
-                        </PermissionButton>
-                    </j-space>
-                </template>
-            </j-pro-table>
+                        ></BadgeStatus>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <PermissionButton
+                                :hasPermission="`${permission}:update`"
+                                type="link"
+                                :tooltip="{
+                                    title: '编辑',
+                                }"
+                                @click="table.openDialog('edit', slotProps)"
+                            >
+                                <AIcon type="EditOutlined" />
+                            </PermissionButton>
+                            <PermissionButton
+                                :hasPermission="`${permission}:action`"
+                                type="link"
+                                :tooltip="{
+                                    title: `${
+                                        slotProps.status ? '禁用' : '启用'
+                                    }`,
+                                }"
+                                :popConfirm="{
+                                    title: `确定${
+                                        slotProps.status ? '禁用' : '启用'
+                                    }吗？`,
+                                    onConfirm: () =>
+                                        table.changeStatus(slotProps),
+                                }"
+                            >
+                                <AIcon
+                                    :type="
+                                        slotProps.status
+                                            ? 'StopOutlined'
+                                            : 'PlayCircleOutlined'
+                                    "
+                                />
+                            </PermissionButton>
+                            <PermissionButton
+                                :hasPermission="`${permission}:update`"
+                                type="link"
+                                :tooltip="{
+                                    title: '重置密码',
+                                }"
+                                @click="table.openDialog('reset', slotProps)"
+                            >
+                                <AIcon type="icon-zhongzhimima" />
+                            </PermissionButton>
+                            <PermissionButton
+                                type="link"
+                                :hasPermission="`${permission}:delete`"
+                                :tooltip="{
+                                    title: slotProps.status
+                                        ? '请先禁用，再删除'
+                                        : '删除',
+                                }"
+                                :popConfirm="{
+                                    title: `确认删除`,
+                                    onConfirm: () =>
+                                        table.clickDel(slotProps.id),
+                                }"
+                                :disabled="slotProps.status"
+                            >
+                                <AIcon type="DeleteOutlined" />
+                            </PermissionButton>
+                        </j-space>
+                    </template>
+                </j-pro-table>
+            </FullPage>
 
             <EditUserDialog
                 v-if="dialog.visible"
@@ -263,22 +268,21 @@ type dictType = {
 };
 type modalType = '' | 'add' | 'edit' | 'reset';
 
-const handleParams = (params: any)=> {
-
-  const newParams = (params?.terms as any[])?.map(item1 => {
-    item1.terms = item1.terms.map((item2: any) => {
-      if (['telephone', 'email'].includes(item2.column)) {
-        return {
-          column: 'id$user-detail',
-          value: [item2]
-        }
-      }
-      return item2
-    })
-    return item1
-  })
-  queryParams.value = { terms: newParams || [] }
-}
+const handleParams = (params: any) => {
+    const newParams = (params?.terms as any[])?.map((item1) => {
+        item1.terms = item1.terms.map((item2: any) => {
+            if (['telephone', 'email'].includes(item2.column)) {
+                return {
+                    column: 'id$user-detail',
+                    value: [item2],
+                };
+            }
+            return item2;
+        });
+        return item1;
+    });
+    queryParams.value = { terms: newParams || [] };
+};
 </script>
 
 <style lang="less" scoped>

From a69adc0033292422e332f36946dbb6bbdc17c4d1 Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Thu, 30 Mar 2023 17:24:26 +0800
Subject: [PATCH 08/12] fix: bug#11230

---
 src/views/init-home/InitData/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/init-home/InitData/index.vue b/src/views/init-home/InitData/index.vue
index 21ba6c54..79252144 100644
--- a/src/views/init-home/InitData/index.vue
+++ b/src/views/init-home/InitData/index.vue
@@ -264,6 +264,7 @@ const saveCurrentData = () => {
                             port: modalForm.port,
                             publicHost: modalForm.publicHost,
                             publicPort: modalForm.publicPort,
+                            maxMessageSize:8192,
                         },
                     });
                     // 保存协议

From f1e3c1046834f7700b818c9bcd72f9f086a2dcaf Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Thu, 30 Mar 2023 17:45:55 +0800
Subject: [PATCH 09/12] =?UTF-8?q?fix:=20=E8=AE=BE=E5=A4=87=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device/Instance/index.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index 6c018c6d..c8ccc016 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -164,7 +164,10 @@
                     >
                         <template #img>
                             <img
+                                :width="88"
+                                :height="88"
                                 :src="
+                                    slotProps?.photoUrl ||
                                     getImage('/device/instance/device-card.png')
                                 "
                             />

From fff3922717bad42c9ec59f9039cc218117bcc583 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Thu, 30 Mar 2023 17:53:20 +0800
Subject: [PATCH 10/12] fix: bug#11239

---
 src/views/notice/Template/Detail/index.vue | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/views/notice/Template/Detail/index.vue b/src/views/notice/Template/Detail/index.vue
index 0ae11735..1338afdc 100644
--- a/src/views/notice/Template/Detail/index.vue
+++ b/src/views/notice/Template/Detail/index.vue
@@ -783,6 +783,7 @@ import { LocalStore } from '@/utils/comm';
 import { TOKEN_KEY } from '@/utils/variable';
 import { phoneRegEx } from '@/utils/validate';
 import type { Rule } from 'ant-design-vue/es/form';
+import { cloneDeep } from 'lodash-es';
 
 const router = useRouter();
 const route = useRoute();
@@ -1005,7 +1006,8 @@ const formRules = ref({
             trigger: 'change',
             validator(_rule: Rule, value: string) {
                 if (!value) return Promise.resolve();
-                if (!phoneRegEx(value)) return Promise.reject('该字段不是有效的手机号');
+                if (!phoneRegEx(value))
+                    return Promise.reject('该字段不是有效的手机号');
                 return Promise.resolve();
             },
         },
@@ -1032,10 +1034,7 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
 watch(
     () => formData.value.template.markdown?.title,
     (val) => {
-        if (!val) {
-            formData.value.variableDefinitions = [];
-            return;
-        }
+        if (!val) return;
         variableReg();
     },
     { deep: true },
@@ -1044,10 +1043,7 @@ watch(
 watch(
     () => formData.value.template.link?.title,
     (val) => {
-        if (!val) {
-            formData.value.variableDefinitions = [];
-            return;
-        }
+        if (!val) return;
         variableReg();
     },
     { deep: true },
@@ -1176,7 +1172,7 @@ const handleMessageTypeChange = () => {
             content: formData.value.template.message as string,
         };
     }
-    formData.value.variableDefinitions = [];
+    // formData.value.variableDefinitions = [];
 };
 
 /**
@@ -1186,7 +1182,10 @@ const getDetail = async () => {
     if (route.params.id !== ':id') {
         const res = await templateApi.detail(route.params.id as string);
         // formData.value = res.result;
-        Object.assign(formData.value, res.result);
+        // Object.assign(formData.value, res.result);
+        console.log('res.result: ', res.result);
+        formData.value = cloneDeep(res.result);
+        console.log('formData.value: ', formData.value);
     }
 };
 getDetail();

From 8f992dd1f30e864dcedf6364c78e19c62d29188f Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Thu, 30 Mar 2023 17:57:39 +0800
Subject: [PATCH 11/12] fix: bug#11243

---
 src/views/notice/Template/Detail/index.vue | 73 +++-------------------
 1 file changed, 10 insertions(+), 63 deletions(-)

diff --git a/src/views/notice/Template/Detail/index.vue b/src/views/notice/Template/Detail/index.vue
index 1338afdc..96519f40 100644
--- a/src/views/notice/Template/Detail/index.vue
+++ b/src/views/notice/Template/Detail/index.vue
@@ -1030,72 +1030,19 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
     formRules.value,
 );
 
-// 钉钉机器人markdown标题变量提取
+// 字段提取变量
 watch(
-    () => formData.value.template.markdown?.title,
-    (val) => {
-        if (!val) return;
+    [
+        () => formData.value.template.markdown?.title,
+        () => formData.value.template.link?.title,
+        () => formData.value.template.subject,
+        () => formData.value.template.message,
+        () => formData.value.template.ttsmessage,
+        () => formData.value.template.body,
+    ],
+    () => {
         variableReg();
     },
-    { deep: true },
-);
-// 钉钉机器人link标题变量提取
-watch(
-    () => formData.value.template.link?.title,
-    (val) => {
-        if (!val) return;
-        variableReg();
-    },
-    { deep: true },
-);
-// 邮件标题变量提取
-watch(
-    () => formData.value.template.subject,
-    (val) => {
-        if (!val) {
-            formData.value.variableDefinitions = [];
-            return;
-        }
-        variableReg();
-    },
-    { deep: true },
-);
-
-// 模板内容变量提取
-watch(
-    () => formData.value.template.message,
-    (val) => {
-        if (!val) {
-            formData.value.variableDefinitions = [];
-            return;
-        }
-        variableReg();
-    },
-    { deep: true },
-);
-// 模板内容变量提取
-watch(
-    () => formData.value.template.ttsmessage,
-    (val) => {
-        if (!val) {
-            formData.value.variableDefinitions = [];
-            return;
-        }
-        variableReg();
-    },
-    { deep: true },
-);
-// webhook请求体变量提取
-watch(
-    () => formData.value.template.body,
-    (val) => {
-        if (!val) {
-            formData.value.variableDefinitions = [];
-            return;
-        }
-        variableReg();
-    },
-    { deep: true },
 );
 
 /**

From 1826574d41fa55cc56a9682d60e10180a6cbede5 Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Thu, 30 Mar 2023 18:01:00 +0800
Subject: [PATCH 12/12] =?UTF-8?q?fix:=20bug=20=E4=BA=A7=E5=93=81=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/Product/Detail/BasicInfo/indev.vue   | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/device/Product/Detail/BasicInfo/indev.vue b/src/views/device/Product/Detail/BasicInfo/indev.vue
index 80ccde40..0c6ceeff 100644
--- a/src/views/device/Product/Detail/BasicInfo/indev.vue
+++ b/src/views/device/Product/Detail/BasicInfo/indev.vue
@@ -28,11 +28,16 @@
         }}</j-descriptions-item>
 
         <j-descriptions-item label="接入方式">
-            <j-button type="link" @click="changeTables">{{
-                productStore.current.accessName
-                    ? productStore.current.accessName
-                    : '配置接入方式'
-            }}</j-button>
+            <PermissionButton
+                type="link"
+                @click="changeTables"
+                hasPermission="device/Product:update"
+                >{{
+                    productStore.current.accessName
+                        ? productStore.current.accessName
+                        : '配置接入方式'
+                }}</PermissionButton
+            >
         </j-descriptions-item>
         <j-descriptions-item label="创建时间">{{
             dayjs(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss')
@@ -55,6 +60,8 @@ import { useProductStore } from '@/store/product';
 import Save from '../../Save/index.vue';
 import dayjs from 'dayjs';
 import { useRoute } from 'vue-router';
+import { useMenuStore } from '@/store/menu';
+const menuSotre = useMenuStore();
 const productStore = useProductStore();
 const route = useRoute();
 const saveRef = ref();