refactor(ui): 优化设备详情和系统配置页面的样式和布局

- 调整设备详情页面的警报计划项样式，增加边框和间距
- 为信息项组件添加ellipsis属性支持文本溢出省略
- 重构系统配置页面，使用自定义布局替代a-descriptions组件
- 添加空状态显示和响应式样式改进

src/views/device/detail/components/infoItem/index.vue

@@ -3,7 +3,7 @@
     <div class="info-item-label">
       {{ props.label }}<template v-if="props.column">：</template>
     </div>
-    <div class="info-item-content"><slot></slot></div>
+    <div :class="['info-item-content', props.ellipsis ? 'ellipsis' : '']"><slot></slot></div>
   </div>
 </template>
 
@@ -15,11 +15,13 @@ defineOptions({
 type Props = {
   label: string
   column?: boolean
+  ellipsis?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   label: '',
   column: true,
+  ellipsis: false,
 })
 </script>
 
@@ -43,5 +45,11 @@ const props = withDefaults(defineProps<Props>(), {
     word-break: break-all;
     line-height: 1.5;
   }
+
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 </style>

src/views/device/detail/index.vue

@@ -910,6 +910,9 @@ const swtichAlarmItem = async (id: number, swtich: boolean, item: AlarmPlanItem)
       align-items: center;
       flex: 1;
       padding: 8px 12px;
+      border-radius: 8px;
+      border: 1px solid #d9d9d9;
+      margin-bottom: 10px;
       &:hover {
         border-radius: 8px;
         background: #f5f5f5;
@@ -922,7 +925,7 @@ const swtichAlarmItem = async (id: number, swtich: boolean, item: AlarmPlanItem)
     .alarmPlan-item-contant {
       font-size: 14px;
       flex-grow: 1;
-      max-width: 250px;
+      max-width: 200px;
       word-break: break-all;
       line-height: 1.5;
       padding: 0 12px;

src/views/system/config/index.vue

@@ -9,18 +9,16 @@ vabse
           </a-space>
         </template>
         <ScrollContainer style="max-height: 300px">
-          <a-descriptions title="" bordered :column="1" size="small">
-            <a-descriptions-item
-              v-for="(item, index) in systemConfigList"
-              :key="index"
-              :label="item.paramName"
-            >
-              <div class="alarmPeriod-configValue">
-                <a-space class="alarmPeriod-configValue-content">
-                  <div>{{ item.paramValue }}</div>
-                  <div style="color: #888">{{ item.paramDesc }}</div>
-                </a-space>
-                <a-space class="alarmPeriod-configValue-action">
+          <div v-if="systemConfigList && systemConfigList.length" class="alarmPlan">
+            <div class="alarmPlan-item" v-for="(item, index) in systemConfigList" :key="index">
+              <div class="alarmPlan-item-contant">
+                <infoItem label="参数名称" ellipsis>{{ item.paramName }}</infoItem>
+                <infoItem label="参数值" ellipsis>{{ item.paramValue }}</infoItem>
+                <infoItem label="参数描述" ellipsis>{{ item.paramDesc }}</infoItem>
+                <infoItem label="备注" ellipsis>{{ item.remark }}</infoItem>
+              </div>
+              <div class="alarmPlan-item-action">
+                <a-space>
                   <EditOutlined @click="editParamHandler(index)" />
                   <a-popconfirm
                     title="确认删除参数吗？"
@@ -32,8 +30,11 @@ vabse
                   </a-popconfirm>
                 </a-space>
               </div>
-            </a-descriptions-item>
-          </a-descriptions>
+            </div>
+          </div>
+          <div v-else class="alarmPlan-empty">
+            <a-empty :image="simpleImage" />
+          </div>
         </ScrollContainer>
       </info-item-group>
     </info-card>
@@ -125,6 +126,10 @@ import infoItemGroup from '@/views/device/detail/components/infoItemGroup/index.
 import { message, type FormInstance } from 'ant-design-vue'
 import * as systemApi from '@/api/system'
 import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { Empty } from 'ant-design-vue'
+import infoItem from '@/views/device/detail/components/infoItem/index.vue'
+
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
 
 defineOptions({
   name: 'SystemConfigIndex',
@@ -243,11 +248,18 @@ const deleteParamHandler = async (parameterId: string) => {
     &-content {
       display: flex;
       align-items: center;
-      justify-content: space-between;
       width: 100%;
       font-size: 14px;
-      &:last-child {
-        color: #888;
+      &-item {
+        width: 30%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:last-child {
+          color: #888;
+          width: 70%;
+        }
       }
     }
 
@@ -257,6 +269,54 @@ const deleteParamHandler = async (parameterId: string) => {
       color: #888;
     }
   }
+
+  .alarmPlan {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 100%;
+    color: #555;
+    &-empty {
+      padding: 50px 0;
+    }
+
+    .alarmPlan-item {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      padding: 8px 12px;
+      border-radius: 8px;
+      border: 1px solid #d9d9d9;
+      margin-bottom: 10px;
+      justify-content: space-between;
+      &:hover {
+        border-radius: 8px;
+        background: #f5f5f5;
+      }
+    }
+
+    .alarmPlan-item-contant {
+      font-size: 14px;
+      flex-grow: 1;
+      word-break: break-all;
+      line-height: 1.5;
+      // 超出一行显示省略号
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
+    .alarmPlan-item-action {
+      flex-shrink: 0;
+      color: #888;
+      :deep(.ant-space) {
+        cursor: pointer;
+        .ant-space-item:hover {
+          color: #40a9ff;
+        }
+      }
+    }
+  }
 }
 
 :deep(.ant-descriptions-item-label) {