feat: 删除家具配置的注释代码，微调界面的展示；

src/components/EditableFurniture/index.vue

@@ -29,15 +29,15 @@
       @mousedown.stop
     >
       <div class="panel-header" @mousedown.prevent="startPanelDrag">
-        <div class="title">家具属性</div>
+        <div class="title">{{ localItem.name }} 属性</div>
         <div class="close" @click="showPanel = false">×</div>
         <div class="capsule" @mousedown.prevent="startPanelDrag"></div>
       </div>
 
-      <div class="panel-item">
+      <!-- <div class="panel-item">
         <label>家具名称：</label>
         <a-input v-model:value="localItem.name" size="small" />
-      </div>
+      </div> -->
 
       <div class="panel-item">
         <label>家具尺寸：</label>
@@ -95,7 +95,7 @@
         </a-space>
       </div>
 
-      <pre class="debug">{{ localItem }}</pre>
+      <!-- <pre class="debug">{{ localItem }}</pre> -->
     </div>
   </div>
 </template>

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

@@ -49,134 +49,6 @@
         :furnitureItems="furnitureItems"
         @update:furnitureItems="mapCanvasList = $event"
       />
-      {{ props.angle }}
-      <div>furnitureItems{{ furnitureItems }} </div>
-      <div>mapCanvasList{{ mapCanvasList }} </div>
-
-      <!-- <div v-if="!areaAvailable" class="viewer-content">
-        <div
-          ref="contentEl"
-          class="mapBox"
-          :style="{
-            width: `${areaWidth}px`,
-            height: `${areaHeight}px`,
-            cursor: !isEditDraggable ? 'no-drop' : 'default',
-          }"
-          @mousedown="handleMouseDownMapCanvas"
-        >
-          <furniture-icon
-            v-for="(item, index) in mapCanvasList"
-            :key="index"
-            :icon="item.type"
-            :width="item.width"
-            :height="item.height"
-            :style="{
-              left: `${item.left}px`,
-              top: `${item.top}px`,
-              position: 'absolute',
-              transform: `rotate(${item.rotate}deg)`,
-              cursor: item.type === 'radar' ? 'default' : isEditDraggable ? 'move' : 'default',
-              pointerEvents: item.type === 'radar' ? 'none' : isEditDraggable ? 'auto' : 'none',
-              border: `${item.isActice && item.type !== 'radar' ? '2px solid yellow' : 'none'}`,
-            }"
-            :class="{ 'dragging-item': item.isDragging }"
-            tabindex="0"
-            :draggable="item.type === 'radar' ? false : isEditDraggable"
-            @dragstart="onDragstartListItem($event, item)"
-            @dragend="onDragendEndListItem($event, item)"
-            @click="onClickMapItem($event, item)"
-          />
-        </div>
-
-        <div v-if="clickedDragItem" class="mapConfig">
-          <div class="mapConfig-header">家具属性</div>
-          <div class="mapConfig-item">
-            <div class="mapConfig-item-label">家具名称：</div>
-            <div class="mapConfig-item-content">
-              <a-input
-                v-if="clickedDragItem"
-                v-model:value.trim="clickedDragItem.name"
-                size="small"
-                style="width: 128px"
-              />
-            </div>
-          </div>
-
-          <div class="mapConfig-item">
-            <div class="mapConfig-item-label">家具大小：</div>
-            <div class="mapConfig-item-content">
-              <a-space v-if="clickedDragItem">
-                <a-input-number
-                  v-model:value.trim="clickedDragItem.width"
-                  size="small"
-                  style="width: 60px"
-                />
-                <a-input-number
-                  v-model:value.trim="clickedDragItem.height"
-                  size="small"
-                  style="width: 60px"
-                />
-              </a-space>
-            </div>
-          </div>
-
-          <div class="mapConfig-item">
-            <div class="mapConfig-item-label">家具旋转：</div>
-            <div class="mapConfig-item-content">
-              <a-space>
-                <UndoOutlined
-                  :rotate="-270"
-                  @click="rotateFurnitureIcon(1, clickedDragItem?.nanoid || '')"
-                />
-                <RedoOutlined
-                  :rotate="-90"
-                  @click="rotateFurnitureIcon(2, clickedDragItem?.nanoid || '')"
-                />
-              </a-space>
-            </div>
-          </div>
-
-          <div class="mapConfig-item">
-            <div class="mapConfig-item-label">微调位置：</div>
-            <div class="mapConfig-item-content">
-              <a-space>
-                <ArrowLeftOutlined
-                  @click="positonFurnitureIcon('left', clickedDragItem?.nanoid || '', distance)"
-                />
-                <ArrowUpOutlined
-                  @click="positonFurnitureIcon('up', clickedDragItem?.nanoid || '', distance)"
-                />
-                <ArrowDownOutlined
-                  @click="positonFurnitureIcon('down', clickedDragItem?.nanoid || '', distance)"
-                />
-                <ArrowRightOutlined
-                  @click="positonFurnitureIcon('right', clickedDragItem?.nanoid || '', distance)"
-                />
-                <a-input-number v-model:value.trim="distance" size="small" style="width: 60px" />
-              </a-space>
-            </div>
-          </div>
-
-          <div class="mapConfig-item">
-            <div class="mapConfig-item-label">删除家具：</div>
-            <div class="mapConfig-item-content">
-              <a-popconfirm
-                v-if="clickedDragItem.type === 'bed'"
-                placement="bottom"
-                @confirm="deleteFurnitureBed(clickedDragItem?.nanoid || '')"
-              >
-                <template #icon><question-circle-outlined style="color: red" /></template>
-                <template #title>
-                  <div>删除 “床”也会删除子区域，</div>
-                  <div>是否继续删除？</div>
-                </template>
-                <DeleteOutlined />
-              </a-popconfirm>
-              <DeleteOutlined v-else @click="deleteFurnitureIcon(clickedDragItem?.nanoid || '')" />
-            </div>
-          </div>
-        </div>
-      </div> -->
     </div>
 
     <div class="viewer">
@@ -376,17 +248,7 @@ import { furnitureIconNameMap, furnitureIconSizeMap } from '@/const/furniture'
 import type { FurnitureIconType } from '@/types/furniture'
 import furnitureCard from '../furnitureCard/index.vue'
 import RadarEditor from '@/components/RadarEditor/index.vue'
-import {
-  // RedoOutlined,
-  // UndoOutlined,
-  // ArrowUpOutlined,
-  // ArrowDownOutlined,
-  // ArrowLeftOutlined,
-  // ArrowRightOutlined,
-  DeleteOutlined,
-  // QuestionCircleOutlined,
-  CloseOutlined,
-} from '@ant-design/icons-vue'
+import { DeleteOutlined, CloseOutlined } from '@ant-design/icons-vue'
 import { getOriginPosition } from '@/utils'
 import type { FurnitureItem } from '@/types/radar'
 
@@ -548,7 +410,7 @@ const radarEditorRef = ref<InstanceType<typeof RadarEditor>>()
 
 // 画布上的家具列表
 const mapCanvasList = ref<CanvaseItem[]>([])
-const isEditDraggable = ref(false)
+const isEditDraggable = ref(true)
 // 家具列表添加
 const addHandler = (icon: FurnitureIconType) => {
   console.log('addHandler', icon)
@@ -636,137 +498,12 @@ useDropZone(contentEl, {
   },
 })
 
-// 家具列表元素开始拖拽
-// const onDragstartListItem = (event: DragEvent, item: CanvaseItem) => {
-//   console.log('🔥onDragstartListItem', event, item)
-//   currentDragItem.value = item
-//   item.isDragging = true
-
-//   // 创建拖拽镜像
-//   const target = event.currentTarget as HTMLElement
-//   const clone = target.cloneNode(true) as HTMLElement
-//   const rect = target.getBoundingClientRect()
-//   // 获取实际渲染样式
-//   const computedStyle = window.getComputedStyle(target)
-//   // 复制所有关键样式
-//   clone.style.cssText = `
-//     position: fixed;
-//     left: -9999px;
-//     opacity: 0.5;
-//     pointer-events: none;
-//     width: ${rect.width}px;
-//     height: ${rect.height}px;
-//     transform: ${computedStyle.transform || `rotate(${item.rotate}deg)`};
-//     transform-origin: ${computedStyle.transformOrigin || 'center center'};
-//     border: ${computedStyle.border};
-//     box-shadow: ${computedStyle.boxShadow};
-//     background: ${computedStyle.background};
-//   `
-//   console.log('克隆元素尺寸:', clone.style.cssText)
-//   document.body.appendChild(clone)
-//   // 计算中心点偏移量
-//   const offsetX = rect.width / 2 // 水平中心偏移
-//   const offsetY = rect.height / 2 // 垂直中心偏移
-//   // 设置拖拽镜像和偏移量
-//   event.dataTransfer?.setDragImage(clone, offsetX, offsetY)
-//   // 隐藏原元素
-//   target.style.opacity = '0'
-// }
-
-// 家具列表元素结束拖拽
-// const onDragendEndListItem = (event: DragEvent, item: CanvaseItem) => {
-//   item.isDragging = false
-//   if (currentDragItem.value) {
-//     currentDragItem.value.x = originOffsetX
-//     currentDragItem.value.y = originOffsetY
-//     currentDragItem.value.isDragging = false
-//   }
-//   requestAnimationFrame(() => {
-//     item.isActice = true
-//     clickedDragItem.value = item
-//   })
-//   console.log('🔥onDragendEndListItem', event, item, {
-//     x: currentDragItem.value?.x,
-//     y: currentDragItem.value?.y,
-//   })
-//   if (event.currentTarget) {
-//     ;(event.currentTarget as HTMLElement).style.opacity = '1'
-//   }
-// }
-
 const clickedDragItem = ref<CanvaseItem | null>()
-// const onClickMapItem = (event: MouseEvent, item: CanvaseItem) => {
-//   if (!isEditDraggable.value || item.type === 'radar' || item.isDragging) return
-//   console.log('onClickMapItem', event, item)
-//   item.isActice = true
-//   clickedDragItem.value = item
-// }
-
-// const handleMouseDownMapCanvas = () => {
+
 mapCanvasList.value.forEach((item) => {
   item.isActice = false
 })
 clickedDragItem.value = null
-// }
-
-// 家具旋转
-// const rotateFurnitureIcon = (type: number, nanoid: string) => {
-//   console.log('rotateFurnitureIcon', type, nanoid, mapCanvasList.value)
-//   const rotateMap = [0, 90, 180, 270]
-
-//   if (nanoid) {
-//     mapCanvasList.value.forEach((item) => {
-//       if (item.nanoid === nanoid) {
-//         // 获取当前角度在rotateMap中的索引
-//         const currentIndex = rotateMap.indexOf(item.rotate)
-
-//         if (type === 1) {
-//           // 逆时针（索引递减）
-//           const newIndex = (currentIndex - 1 + rotateMap.length) % rotateMap.length
-//           item.rotate = rotateMap[newIndex]
-//         } else if (type === 2) {
-//           // 顺时针（索引递增）
-//           const newIndex = (currentIndex + 1) % rotateMap.length
-//           item.rotate = rotateMap[newIndex]
-//         }
-//       }
-//     })
-//   }
-// }
-
-// 微调距离
-// const distance = ref(5)
-// 家具位置微调
-// const positonFurnitureIcon = (type: string, nanoid: string, distance: number) => {
-//   console.log('positonFurnitureIcon', type, nanoid, mapCanvasList.value)
-//   if (nanoid) {
-//     mapCanvasList.value.forEach((item) => {
-//       if (item.nanoid === nanoid) {
-//         if (type === 'up') {
-//           item.top -= distance
-//         }
-//         if (type === 'down') {
-//           item.top += distance
-//         }
-//         if (type === 'left') {
-//           item.left -= distance
-//         }
-//         if (type === 'right') {
-//           item.left += distance
-//         }
-//       }
-//     })
-//   }
-// }
-
-// 删除家具
-// const deleteFurnitureIcon = (nanoid: string) => {
-//   console.log('deleteFurnitureIcon', clickedDragItem.value)
-//   if (nanoid) {
-//     mapCanvasList.value = mapCanvasList.value.filter((item) => item.nanoid !== nanoid)
-//     clickedDragItem.value = null
-//   }
-// }
 
 // 关闭子区域属性
 const closeSubregionAttr = () => {
@@ -776,15 +513,6 @@ const closeSubregionAttr = () => {
   selectedBlock.value = null
 }
 
-// 删除家具床
-// const deleteFurnitureBed = (nanoid: string) => {
-//   console.log('deleteFurnitureBed', nanoid)
-//   // 先从家具画布移除床
-//   deleteFurnitureIcon(nanoid)
-//   // 再从子区域画布删除对应的子区域
-//   blocks.value.shift()
-// }
-
 // 新增区块类型
 interface BlockItem {
   // 本地用
@@ -968,39 +696,14 @@ const selectBlock = (block: BlockItem) => {
   })
 }
 
-const { originX, originY, originOffsetX, originOffsetY, radarX, radarY } = getOriginPosition(
-  props.ranges,
-  [currentDragItem.value?.left as number, currentDragItem.value?.top as number]
-)
+const { originX, originY } = getOriginPosition(props.ranges, [
+  currentDragItem.value?.left as number,
+  currentDragItem.value?.top as number,
+])
 
 // 初始化添加雷达图标
 const initRadarIcon = () => {
   console.log('initRadarIcon', mapCanvasList.value, furnitureItems.value)
-  // 在家具地图添加雷达图标
-  // mapCanvasList.value.push({
-  //   name: '雷达',
-  //   type: 'radar',
-  //   width: furnitureIconSizeMap['radar'].width,
-  //   height: furnitureIconSizeMap['radar'].height,
-  //   top: radarY,
-  //   left: radarX,
-  //   x: originOffsetX,
-  //   y: originOffsetY,
-  //   rotate: 0,
-  //   nanoid: nanoid(),
-  // })
-  // 在屏蔽子区域添加雷达图标
-  // furnitureItems.value.push({
-  //   name: '雷达',
-  //   type: 'radar',
-  //   width: furnitureIconSizeMap['radar'].width,
-  //   length: furnitureIconSizeMap['radar'].height,
-  //   top: radarY,
-  //   left: radarX,
-  //   x: originOffsetX,
-  //   y: originOffsetY,
-  //   rotate: 0,
-  // })
 }
 
 // 保存所有配置
@@ -1034,7 +737,7 @@ const saveAllConfig = () => {
             name: item.name,
             type: item.type as FurnitureType,
             width: item.width,
-            length: item.height || item.length,
+            length: item.height || (item.length as number),
             top: item.top,
             left: item.left,
             rotate: item.rotate as 0 | 90 | 180 | 270,