From c8ce1a89119b65704b8513f8635b78a45e8b9101 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 21 May 2026 17:27:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(iot):=20=E8=AE=BE=E5=A4=87=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E8=AF=A6=E6=83=85=E7=BB=9F=E4=B8=80=20460px=20?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=20+=20=E6=8C=89=E9=92=AE=E5=8A=A0=208px=20?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D=EF=BC=8C=E5=8D=A1=E7=89=87=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E6=94=B9=20!h-8=20?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E5=85=B6=E5=AE=83=E6=8C=89=E9=92=AE=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/device/detail/modules/config.vue   | 20 +++++--------
 .../iot/device/device/modules/card-view.vue   | 28 +++++++++++--------
 .../iot/product/product/modules/card-view.vue |  7 +++--
 .../device/device/detail/modules/config.vue   | 21 ++++++--------
 .../iot/device/device/modules/card-view.vue   |  2 +-
 .../iot/product/product/modules/card-view.vue |  4 +--
 6 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
index abde01f96..b45349dda 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
@@ -127,7 +127,7 @@ async function updateDeviceConfig() {
   <div>
     <!-- 使用说明提示 -->
     <Alert
-      class="my-4"
+      class="!mb-4"
       description="如需编辑文件，请点击下方编辑按钮"
       message="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「配置推送」按钮，设备即可进行远程配置。"
       show-icon
@@ -135,28 +135,22 @@ async function updateDeviceConfig() {
     />
 
     <!-- 代码视图 - 只读展示 -->
-    <div
+    <pre
       v-if="!isEditing"
-      class="max-h-[600px] overflow-y-auto rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 dark:border-[#3a3a3a] dark:bg-[#1a1a1a]"
-    >
-      <pre
-        class="m-0 whitespace-pre-wrap break-words font-mono text-[13px] leading-normal text-[#333] dark:text-gray-300"
-      >
-        <code>{{ formattedConfig }}</code>
-      </pre>
-    </div>
+      class="m-0 h-[460px] overflow-y-auto whitespace-pre-wrap break-words rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 font-mono text-[13px] leading-normal text-[#333] dark:border-[#3a3a3a] dark:bg-[#1a1a1a] dark:text-gray-300"
+      v-text="formattedConfig"
+    ></pre>
 
     <!-- 编辑器视图 - 可编辑 -->
     <Textarea
       v-else
       v-model:value="configString"
-      :rows="20"
-      class="font-mono text-[13px]"
+      class="!h-[460px] font-mono text-[13px]"
       placeholder="请输入 JSON 格式的配置信息"
     />
 
     <!-- 操作按钮 -->
-    <div class="mt-5 text-center">
+    <div class="mt-4 flex justify-center gap-2">
       <Button v-if="isEditing" @click="handleCancelEdit">取消</Button>
       <Button
         v-if="isEditing"
diff --git a/apps/web-antd/src/views/iot/device/device/modules/card-view.vue b/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
index 456e23260..880c51934 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
@@ -236,19 +236,23 @@ onMounted(() => {
                 <IconifyIcon icon="lucide:database" class="mr-1" />
                 数据
               </Button>
-              <Popconfirm
-                v-if="hasAccessByCodes(['iot:device:delete'])"
-                :title="`确认删除设备 ${item.deviceName} 吗?`"
-                @confirm="emit('delete', item)"
-              >
-                <Button
-                  size="small"
-                  danger
-                  class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+              <template v-if="hasAccessByCodes(['iot:device:delete'])">
+                <div
+                  class="h-5 w-px self-center bg-[#dcdfe6] dark:bg-[#3a3a3a]"
+                ></div>
+                <Popconfirm
+                  :title="`确认删除设备 ${item.deviceName} 吗?`"
+                  @confirm="emit('delete', item)"
                 >
-                  <IconifyIcon icon="lucide:trash-2" class="text-sm" />
-                </Button>
-              </Popconfirm>
+                  <Button
+                    size="small"
+                    danger
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                  >
+                    <IconifyIcon icon="lucide:trash-2" class="text-sm" />
+                  </Button>
+                </Popconfirm>
+              </template>
             </div>
           </Card>
         </Col>
diff --git a/apps/web-antd/src/views/iot/product/product/modules/card-view.vue b/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
index fd61b494b..476fc4166 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
+++ b/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
@@ -213,6 +213,9 @@ onMounted(() => {
                 物模型
               </Button>
               <template v-if="hasAccessByCodes(['iot:product:delete'])">
+                <div
+                  class="h-5 w-px self-center bg-[#dcdfe6] dark:bg-[#3a3a3a]"
+                ></div>
                 <Tooltip
                   v-if="item.status === ProductStatusEnum.PUBLISHED"
                   title="已发布的产品不能删除"
@@ -221,7 +224,7 @@ onMounted(() => {
                     size="small"
                     danger
                     disabled
-                    class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
                   >
                     <IconifyIcon icon="lucide:trash-2" class="text-sm" />
                   </Button>
@@ -234,7 +237,7 @@ onMounted(() => {
                   <Button
                     size="small"
                     danger
-                    class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
                   >
                     <IconifyIcon icon="lucide:trash-2" class="text-sm" />
                   </Button>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/config.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/config.vue
index 8a5c346b8..3e4105851 100644
--- a/apps/web-ele/src/views/iot/device/device/detail/modules/config.vue
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/config.vue
@@ -133,7 +133,7 @@ async function updateDeviceConfig() {
   <div>
     <!-- 使用说明提示 -->
     <ElAlert
-      class="my-4"
+      class="!mb-4"
       description="如需编辑文件，请点击下方编辑按钮"
       title="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「配置推送」按钮，设备即可进行远程配置。"
       show-icon
@@ -142,29 +142,24 @@ async function updateDeviceConfig() {
     />
 
     <!-- 代码视图 - 只读展示 -->
-    <div
+    <pre
       v-if="!isEditing"
-      class="max-h-[600px] overflow-y-auto rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 dark:border-[#3a3a3a] dark:bg-[#1a1a1a]"
-    >
-      <pre
-        class="m-0 whitespace-pre-wrap break-words font-mono text-[13px] leading-normal text-[#333] dark:text-gray-300"
-      >
-        <code>{{ formattedConfig }}</code>
-      </pre>
-    </div>
+      class="m-0 h-[460px] overflow-y-auto whitespace-pre-wrap break-words rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 font-mono text-[13px] leading-normal text-[#333] dark:border-[#3a3a3a] dark:bg-[#1a1a1a] dark:text-gray-300"
+      v-text="formattedConfig"
+    ></pre>
 
     <!-- 编辑器视图 - 可编辑 -->
     <ElInput
       v-else
       v-model="configString"
       type="textarea"
-      :rows="20"
-      class="font-mono text-[13px]"
+      :autosize="{ minRows: 20, maxRows: 20 }"
+      class="!h-[460px] font-mono text-[13px]"
       placeholder="请输入 JSON 格式的配置信息"
     />
 
     <!-- 操作按钮 -->
-    <div class="mt-5 text-center">
+    <div class="mt-4 flex justify-center gap-2">
       <ElButton v-if="isEditing" @click="handleCancelEdit">取消</ElButton>
       <ElButton
         v-if="isEditing"
diff --git a/apps/web-ele/src/views/iot/device/device/modules/card-view.vue b/apps/web-ele/src/views/iot/device/device/modules/card-view.vue
index d15883b25..d12b9a4a6 100644
--- a/apps/web-ele/src/views/iot/device/device/modules/card-view.vue
+++ b/apps/web-ele/src/views/iot/device/device/modules/card-view.vue
@@ -241,7 +241,7 @@ onMounted(() => {
                   <ElButton
                     size="small"
                     type="danger"
-                    class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
                   >
                     <IconifyIcon icon="lucide:trash-2" class="text-sm" />
                   </ElButton>
diff --git a/apps/web-ele/src/views/iot/product/product/modules/card-view.vue b/apps/web-ele/src/views/iot/product/product/modules/card-view.vue
index a9eece169..ad2f193d4 100644
--- a/apps/web-ele/src/views/iot/product/product/modules/card-view.vue
+++ b/apps/web-ele/src/views/iot/product/product/modules/card-view.vue
@@ -218,7 +218,7 @@ onMounted(() => {
                     size="small"
                     type="danger"
                     disabled
-                    class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
                   >
                     <IconifyIcon icon="lucide:trash-2" class="text-sm" />
                   </ElButton>
@@ -232,7 +232,7 @@ onMounted(() => {
                     <ElButton
                       size="small"
                       type="danger"
-                      class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                      class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
                     >
                       <IconifyIcon icon="lucide:trash-2" class="text-sm" />
                     </ElButton>