feat(组件): 为DragResizeBox添加localStorage持久化功能

添加storageKey属性支持将位置和尺寸保存到localStorage
初始化时优先读取存储值，拖动结束后自动保存
同时优化了CoilSelector的钢卷地图显示逻辑

klp-ui/src/components/DragResizeBox/index.vue

@@ -48,6 +48,11 @@ export default {
     minSize: {
       type: Object,
       default: () => ({ width: 100, height: 80 })
+    },
+    // 用于localStorage存储的唯一标识
+    storageKey: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -67,9 +72,8 @@ export default {
     };
   },
   mounted() {
-    // 初始化位置和尺寸
-    this.position = { ...this.initPosition };
-    this.size = { ...this.initSize };
+    // 初始化位置和尺寸（优先从localStorage读取）
+    this.initFromStorage();
     // 监听全局鼠标移动和松开事件
     document.addEventListener('mousemove', this.handleMouseMove);
     document.addEventListener('mouseup', this.handleMouseUp);
@@ -83,6 +87,68 @@ export default {
     window.removeEventListener('resize', this.updateScreenSize);
   },
   methods: {
+    /**
+     * 从localStorage初始化位置和尺寸
+     * 有key时优先读取存储值，无则使用props传入的初始值
+     */
+    initFromStorage() {
+      if (this.storageKey) {
+        try {
+          const storageKey = `dnd-ps-${this.storageKey}`;
+          const storedData = localStorage.getItem(storageKey);
+          
+          if (storedData) {
+            const { position, size } = JSON.parse(storedData);
+            // 验证存储的数据是否合法，防止异常值
+            const isValidPosition = position && typeof position.x === 'number' && typeof position.y === 'number';
+            const isValidSize = size && typeof size.width === 'number' && typeof size.height === 'number';
+            
+            if (isValidPosition && isValidSize) {
+              // 使用存储的位置和尺寸（确保不小于最小尺寸）
+              this.position = {
+                x: Math.max(0, position.x),
+                y: Math.max(0, position.y)
+              };
+              this.size = {
+                width: Math.max(this.minSize.width, size.width),
+                height: Math.max(this.minSize.height, size.height)
+              };
+              return;
+            }
+          }
+        } catch (error) {
+          console.warn('读取拖拽元素存储数据失败，使用默认值:', error);
+        }
+      }
+      
+      // 无存储数据或存储异常时，使用props初始值
+      this.position = { ...this.initPosition };
+      this.size = { ...this.initSize };
+    },
+
+    /**
+     * 将当前位置和尺寸保存到localStorage
+     */
+    saveToStorage() {
+      if (this.storageKey) {
+        try {
+          const storageKey = `dnd-ps-${this.storageKey}`;
+          const saveData = {
+            position: { ...this.position },
+            size: { ...this.size },
+            updateTime: new Date().getTime()
+          };
+          console.log('saveData', saveData);
+          localStorage.setItem(storageKey, JSON.stringify(saveData));
+          // 触发存储成功事件
+          this.$emit('save-success', saveData);
+        } catch (error) {
+          console.error('保存拖拽元素数据失败:', error);
+          this.$emit('save-fail', error);
+        }
+      }
+    },
+
     /**
      * 更新屏幕尺寸（窗口大小变化时）
      */
@@ -174,6 +240,9 @@ export default {
       // 恢复鼠标样式
       document.body.style.cursor = 'default';
       
+      // 保存当前状态到localStorage（有key时）
+      this.saveToStorage();
+      
       // 触发结束事件
       this.$emit('drag-end', { position: { ...this.position }, size: { ...this.size } });
     }
@@ -203,6 +272,7 @@ export default {
   overflow: hidden;
   pointer-events: auto; /* 元素本身响应鼠标事件 */
   z-index: 9999; /* 确保元素在最上层 */
+  background-color: #ffffff; /* 添加背景色，提升可视性 */
 }
 
 /* 元素内容区 */