refactor(device-detail): 重构点位图布局并优化样式结构，实时点位超出也可看到；

- 将雷达图相关类名重命名为更语义化的pointMap和radarArea
- 提取家具图标渲染逻辑为独立组件
- 优化全屏视图的布局结构
- 调整CSS样式以提高代码可维护性

src/views/device/detail/index.vue

@@ -16,48 +16,86 @@
           banner
           style="margin-bottom: 10px"
         />
-        <div class="radarMap">
+        <div class="pointMap">
           <div
-            class="radarBox"
+            class="radarArea"
             :style="{
               width: `${detailState?.length || 400}px`,
               height: `${detailState?.width || 400}px`,
             }"
           >
-            <template v-if="targets && Object.keys(targets).length > 0">
-              <template v-for="t in targets" :key="t.id">
-                <div
-                  class="target-dot"
-                  :style="{
-                    position: 'absolute',
-                    width: '18px',
-                    height: '18px',
-                    background: t.id === 0 ? 'red' : t.id === 1 ? 'blue' : 'green',
-                    borderRadius: '50%',
-                    transform: `translate3d(${t.displayX + 200}px, ${-t.displayY + 200}px, 0) translate(-50%, -50%)`,
-                    zIndex: 10,
-                    transition: 'transform 1s linear',
-                    willChange: 'transform',
-                  }"
+            <furniture-icon
+              v-for="(item, index) in furnitureItems"
+              :key="index"
+              :icon="item.type"
+              :width="item.width"
+              :height="item.length"
+              :style="{
+                left: `${item.left}px`,
+                top: `${item.top}px`,
+                position: 'absolute',
+                rotate: `${item.rotate}deg`,
+                cursor: 'default',
+                pointerEvents: 'none',
+              }"
+              :draggable="false"
+            />
+          </div>
+
+          <template v-if="targets && Object.keys(targets).length > 0">
+            <template v-for="t in targets" :key="t.id">
+              <div
+                class="target-dot"
+                :style="{
+                  position: 'absolute',
+                  width: '18px',
+                  height: '18px',
+                  background: t.id === 0 ? 'red' : t.id === 1 ? 'blue' : 'green',
+                  borderRadius: '50%',
+                  transform: `translate3d(${t.displayX + 200}px, ${-t.displayY + 200}px, 0) translate(-50%, -50%)`,
+                  zIndex: 10,
+                  transition: 'transform 1s linear',
+                  willChange: 'transform',
+                }"
+              >
+                <span
+                  style="
+                    color: #fff;
+                    font-size: 12px;
+                    font-weight: 600;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    pointer-events: none;
+                  "
                 >
-                  <span
-                    style="
-                      color: #fff;
-                      font-size: 12px;
-                      font-weight: 600;
-                      position: absolute;
-                      left: 50%;
-                      top: 50%;
-                      transform: translate(-50%, -50%);
-                      pointer-events: none;
-                    "
-                  >
-                    {{ t.id + 1 }}
-                  </span>
-                </div>
-              </template>
+                  {{ t.id + 1 }}
+                </span>
+              </div>
             </template>
-            <div>
+          </template>
+
+          <div
+            v-if="furnitureItems && furnitureItems.some((item) => item.type === 'bed')"
+            class="breathLine"
+          >
+            <BreathLineChart :data="breathRpmList"></BreathLineChart>
+          </div>
+        </div>
+      </info-card>
+
+      <FullViewModal v-model:open="openFullView" :title="detailState.devName">
+        <div class="fullView">
+          <div class="pointTitle">实时点位图</div>
+          <div class="pointMap">
+            <div
+              class="radarArea"
+              :style="{
+                width: `${detailState?.length || 400}px`,
+                height: `${detailState?.width || 400}px`,
+              }"
+            >
               <furniture-icon
                 v-for="(item, index) in furnitureItems"
                 :key="index"
@@ -75,27 +113,7 @@
                 :draggable="false"
               />
             </div>
-          </div>
 
-          <div
-            v-if="furnitureItems && furnitureItems.some((item) => item.type === 'bed')"
-            class="breathLine"
-          >
-            <BreathLineChart :data="breathRpmList"></BreathLineChart>
-          </div>
-        </div>
-      </info-card>
-
-      <FullViewModal v-model:open="openFullView" :title="detailState.devName">
-        <div class="fullView">
-          <div class="pointTitle">实时点位图</div>
-          <div
-            class="radarBox"
-            :style="{
-              width: `${detailState?.length || 400}px`,
-              height: `${detailState?.width || 400}px`,
-            }"
-          >
             <template v-if="targets && Object.keys(targets).length > 0">
               <template v-for="t in targets" :key="t.id">
                 <div
@@ -129,24 +147,6 @@
                 </div>
               </template>
             </template>
-            <div>
-              <furniture-icon
-                v-for="(item, index) in furnitureItems"
-                :key="index"
-                :icon="item.type"
-                :width="item.width"
-                :height="item.length"
-                :style="{
-                  left: `${item.left}px`,
-                  top: `${item.top}px`,
-                  position: 'absolute',
-                  rotate: `${item.rotate}deg`,
-                  cursor: 'default',
-                  pointerEvents: 'none',
-                }"
-                :draggable="false"
-              />
-            </div>
           </div>
 
           <div
@@ -155,6 +155,7 @@
           >
             <BreathLineChart :data="breathRpmList"></BreathLineChart>
           </div>
+          <BreathLineChart :data="breathRpmList"></BreathLineChart>
         </div>
       </FullViewModal>
 
@@ -560,18 +561,18 @@ const openFullView = ref(false)
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
+}
 
-  .radarMap {
-    flex-shrink: 0;
-    min-width: 400px;
-    min-height: 400px;
-    border-radius: 10px;
-    display: flex;
-    flex-direction: row;
-  }
+.pointMap {
+  flex-shrink: 0;
+  min-width: 400px;
+  min-height: 400px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
 }
 
-.radarBox {
+.radarArea {
   position: relative;
   background-image:
     linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
@@ -580,6 +581,7 @@ const openFullView = ref(false)
   border: 1px solid rgba(0, 0, 0, 0.8);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   overflow: hidden;
+  flex-shrink: 0;
 
   .furniture-item {
     position: absolute;
@@ -601,8 +603,9 @@ const openFullView = ref(false)
 
 .fullView {
   margin-top: 50px;
-  .radarBox {
-    margin: auto;
+  .pointMap {
+    justify-content: center;
+    min-height: auto;
   }
 
   .pointTitle {