diff --git a/src/views/device/manager/components/preview/AddNuPreviewForm.vue b/src/views/device/manager/components/preview/AddNuPreviewForm.vue index bed39bd..37c3ab8 100644 --- a/src/views/device/manager/components/preview/AddNuPreviewForm.vue +++ b/src/views/device/manager/components/preview/AddNuPreviewForm.vue @@ -3,9 +3,9 @@ + style="height: auto; min-height: 320px;" @click="handleCardClick(item.nuId, $event)"> -
+
名称:{{ item.nuName }}
@@ -22,7 +22,7 @@
-
+
@@ -168,6 +168,25 @@ const disabled = computed(() => { return props.formDisabled; }); +// 处理卡片点击(阻止内部元素的冒泡) +function handleCardClick(nuId: string, event: Event) { + // 检查点击目标是否可能是可交互元素 + const target = event.target as HTMLElement; + const isInputElement = target.tagName === 'INPUT' || + target.tagName === 'BUTTON' || + target.closest('.ant-input-number') || + target.closest('.ant-checkbox-wrapper') || + target.closest('button'); + + // 如果点击的是输入框、按钮等交互元素,且当前卡片是展开状态,则不触发展开/收起 + if (isInputElement && expandedCard.value === nuId) { + return; + } + + // 否则执行展开/收起逻辑 + expandCard(nuId); +} + // 展开/收起卡片 function expandCard(nuId: string) { // 如果点击的是已经展开的卡片,则收起 @@ -413,6 +432,7 @@ defineExpose({ transition: all 0.3s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); overflow: hidden; + cursor: pointer; } /* 鼠标悬停效果 */ @@ -438,12 +458,12 @@ defineExpose({ transition: padding 0.3s ease; } -/* 卡片头部 */ +/* 卡片头部的鼠标样式 */ .card-header { display: flex; align-items: center; justify-content: space-between; - cursor: pointer; + cursor: inherit; user-select: none; } @@ -595,6 +615,7 @@ defineExpose({ /* 强制 checkbox 文字显示为黑色 */ .right-area { + :deep(.ant-checkbox-wrapper), :deep(.ant-checkbox-wrapper-disabled), :deep(.ant-checkbox + span),