vue-openlayers-plugin 1.0.56 → 1.0.57

package/lib/index.umd.js

@@ -479687,7 +479687,22 @@ ${this.attributes_.map(
           fullScreen: false,
           scaleLine: true,
           mousePosition: false,
-          overviewMap: false
+          overviewMap: false,
+          layerPanel: {
+            enabled: true,
+            defaultOpen: false,
+            position: "right",
+            title: "图层管理",
+            width: "350px",
+            height: "600px",
+            modal: false,
+            draggable: true,
+            resizable: true,
+            showClose: true,
+            cacheId: "layer-dialog",
+            className: "layer-dialog",
+            collapsible: true
+          }
         },
         baseLayers: [
           {
@@ -480959,8 +480974,18 @@ ${this.attributes_.map(
       const layerTreeManager = new LayerTreeManager();
       const layerConfigManager = new LayerConfigManager();
       const defaultExpandedKeys = vue.computed(() => layerTreeManager.defaultExpandedKeys.value);
-      const defaultCheckedKeys = vue.computed(() => layerTreeManager.defaultCheckedKeys.value);
-      const treeData = vue.computed(() => layerTreeManager.treeData.value);
+      const defaultCheckedKeys = vue.ref([]);
+      const treeData = vue.ref([]);
+      vue.onMounted(() => {
+        try {
+          defaultCheckedKeys.value = Array.isArray(layerTreeManager.defaultCheckedKeys.value) ? [...layerTreeManager.defaultCheckedKeys.value] : [];
+          const source = layerTreeManager.treeData.value;
+          treeData.value = source ? JSON.parse(JSON.stringify(source)) : [];
+        } catch (e3) {
+          defaultCheckedKeys.value = layerTreeManager.defaultCheckedKeys.value || [];
+          treeData.value = layerTreeManager.treeData.value || [];
+        }
+      });
       const handleLayerDoubleClick = (data2) => {
         layerTreeManager.handleLayerDoubleClick(data2, layerManager.value, map2.value);
       };
@@ -481071,6 +481096,22 @@ ${this.attributes_.map(
       vue.inject("eventBus");
       vue.inject("storage");
       const mapManager = vue.inject("mapManager");
+      const dialogProps = vue.computed(() => {
+        var _a3;
+        const ui2 = ((_a3 = config == null ? void 0 : config.value) == null ? void 0 : _a3.ui) || {};
+        return {
+          title: ui2.title ?? "图层管理",
+          width: ui2.width ?? "350px",
+          height: ui2.height ?? "600px",
+          modal: ui2.modal ?? false,
+          draggable: ui2.draggable ?? true,
+          resizable: ui2.resizable ?? true,
+          showClose: ui2.showClose ?? true,
+          position: ui2.position ?? "right",
+          cacheId: ui2.cacheId ?? "layer-dialog",
+          className: ui2.className ?? "layer-dialog"
+        };
+      });
       vue.watch(config, (newConfig) => {
         var _a3, _b3, _c2;
         console.log("🔍 [LayerPanel] config变化:", newConfig);
@@ -481326,11 +481367,33 @@ ${this.attributes_.map(
           treeRef.value.setCheckedKeys(checkedKeys);
         }
       };
+      const hasTreeSnapshot = vue.ref(false);
+      const expectedLayerCount = vue.computed(() => {
+        var _a3, _b3, _c2;
+        const c2 = (config == null ? void 0 : config.value) || {};
+        const total = (((_a3 = c2.baseLayers) == null ? void 0 : _a3.length) || 0) + (((_b3 = c2.overlayLayers) == null ? void 0 : _b3.length) || 0) + (((_c2 = c2.vectorLayers) == null ? void 0 : _c2.length) || 0);
+        return total;
+      });
       vue.watchEffect(() => {
         if (layerGroups.value.length > 0) {
           layerTreeManager.setLayerGroups(layerGroups.value);
           layerTreeManager.setDefaultExpandedKeys(layerGroups.value.map((group2) => group2.id));
           initializeExpandedKeys();
+          if (!hasTreeSnapshot.value) {
+            const isInitialRegistrationDone = layers.value.length >= expectedLayerCount.value || expectedLayerCount.value === 0;
+            console.log("🔍 [LayerPanel] 快照准备检查: layers.length=", layers.value.length, " expected=", expectedLayerCount.value, " done=", isInitialRegistrationDone);
+            if (isInitialRegistrationDone) {
+              try {
+                defaultCheckedKeys.value = Array.isArray(layerTreeManager.defaultCheckedKeys.value) ? [...layerTreeManager.defaultCheckedKeys.value] : [];
+                const source = layerTreeManager.treeData.value;
+                treeData.value = source ? JSON.parse(JSON.stringify(source)) : [];
+              } catch (e3) {
+                defaultCheckedKeys.value = layerTreeManager.defaultCheckedKeys.value || [];
+                treeData.value = layerTreeManager.treeData.value || [];
+              }
+              hasTreeSnapshot.value = true;
+            }
+          }
           vue.nextTick(() => {
             syncTreeCheckedState();
           });
@@ -481528,20 +481591,41 @@ ${this.attributes_.map(
         return vue.openBlock(), vue.createBlock(CustomDialog, {
           modelValue: visible.value,
           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => visible.value = $event),
-          title: "图层管理",
-          width: "350px",
-          height: "600px",
-          "show-modal": false,
-          draggable: true,
-          resizable: true,
-          "show-close": true,
-          position: "right",
-          cacheId: "layer-dialog",
-          class: "layer-dialog",
+          title: dialogProps.value.title,
+          width: dialogProps.value.width,
+          height: dialogProps.value.height,
+          "show-modal": dialogProps.value.modal,
+          draggable: dialogProps.value.draggable,
+          resizable: dialogProps.value.resizable,
+          "show-close": dialogProps.value.showClose,
+          position: dialogProps.value.position,
+          cacheId: dialogProps.value.cacheId,
+          class: vue.normalizeClass(dialogProps.value.className),
           onClose: handleClose
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_component_el_tabs, {
+            _ctx.$slots.default ? vue.renderSlot(_ctx.$slots, "default", {
+              key: 0,
+              layers: layers.value,
+              layerGroups: layerGroups.value,
+              onTreeCheck,
+              handleLayerVisibilityChange,
+              updateLayerOpacity,
+              updateClusterDistance,
+              updateSuperMapConfig,
+              resetLayerStyle,
+              layerManager: layerManager.value,
+              layerTreeManager: vue.unref(layerTreeManager),
+              layerConfigManager: vue.unref(layerConfigManager),
+              treeRef: treeRef.value,
+              treeData: treeData.value,
+              treeProps,
+              defaultExpandedKeys: defaultExpandedKeys.value,
+              defaultCheckedKeys: defaultCheckedKeys.value,
+              syncTreeCheckedState,
+              getAllTreeNodes
+            }, void 0, true) : (vue.openBlock(), vue.createBlock(_component_el_tabs, {
+              key: 1,
               modelValue: activeMainTab.value,
               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => activeMainTab.value = $event),
               class: "main-tabs"
@@ -481647,15 +481731,15 @@ ${this.attributes_.map(
                 })
               ]),
               _: 1
-            }, 8, ["modelValue"])
+            }, 8, ["modelValue"]))
           ]),
-          _: 1
-        }, 8, ["modelValue"]);
+          _: 3
+        }, 8, ["modelValue", "title", "width", "height", "show-modal", "draggable", "resizable", "show-close", "position", "cacheId", "class"]);
       };
     }
   });
-  const LayerPanel_vue_vue_type_style_index_0_scoped_c66f28f2_lang = "";
-  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c66f28f2"]]);
+  const LayerPanel_vue_vue_type_style_index_0_scoped_d12fef13_lang = "";
+  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d12fef13"]]);
   const _hoisted_1$1 = {
     key: 2,
     class: "tooltip-content"
@@ -481906,7 +481990,7 @@ ${this.attributes_.map(
     }
   });
   const _hoisted_1 = {
-    key: 10,
+    key: 8,
     class: "absolute top-15 right-2.5 w-62.5 max-h-75 bg-white rounded-md shadow-lg z-1000 overflow-hidden md:w-50 md:top-20 md:right-1.25"
   };
   const _hoisted_2 = { class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50" };
@@ -481993,6 +482077,12 @@ ${this.attributes_.map(
       const hasMapInfoSlot = vue.computed(() => !!slots.mapInfo || !!slots["map-info"]);
       const hasLayerPanelSlot = vue.computed(() => !!slots.layerPanel || !!slots["layer-panel"]);
       const hasLegendSlot = vue.computed(() => !!slots.legend);
+      const finalEnableLayerPanel = vue.computed(() => {
+        var _a3, _b3;
+        if (hasLayerPanelSlot.value)
+          return true;
+        return props.showLayerPanel !== void 0 ? props.showLayerPanel : ((_b3 = (_a3 = finalMapConfig.value.controls) == null ? void 0 : _a3.layerPanel) == null ? void 0 : _b3.enabled) ?? false;
+      });
       const finalShowToolbar = vue.computed(() => {
         var _a3;
         if (hasToolbarSlot.value)
@@ -482005,12 +482095,6 @@ ${this.attributes_.map(
           return false;
         return props.showMapInfo !== void 0 ? props.showMapInfo : ((_a3 = finalMapConfig.value.ui) == null ? void 0 : _a3.showMapInfo) ?? true;
       });
-      const finalShowLayerPanel = vue.computed(() => {
-        var _a3;
-        if (hasLayerPanelSlot.value)
-          return false;
-        return props.showLayerPanel !== void 0 ? props.showLayerPanel : ((_a3 = finalMapConfig.value.ui) == null ? void 0 : _a3.showLayerPanel) ?? false;
-      });
       const showLegend = vue.computed(() => {
         var _a3;
         if (hasLegendSlot.value)
@@ -482053,18 +482137,22 @@ ${this.attributes_.map(
       });
       const finalShowControls = vue.computed(() => {
         var _a3;
-        return props.showControls !== void 0 ? props.showControls : ((_a3 = finalMapConfig.value.controls) == null ? void 0 : _a3.useCustomStyle) ?? false;
+        const controls = finalMapConfig.value.controls || {};
+        const useCustomStyle = controls.useCustomStyle ?? ((_a3 = controls.tools) == null ? void 0 : _a3.useCustomStyle) ?? false;
+        return props.showControls !== void 0 ? props.showControls : useCustomStyle;
       });
       const finalControlsConfig = vue.computed(() => {
-        var _a3, _b3, _c2, _d, _e2, _f;
+        const controls = finalMapConfig.value.controls || {};
+        const { tools = {}, ...controlsRest } = controls;
         return {
-          ...finalMapConfig.value.controls,
-          position: props.controlsPosition || ((_a3 = finalMapConfig.value.controls) == null ? void 0 : _a3.position) || "bottom-left",
-          direction: props.controlsDirection || ((_b3 = finalMapConfig.value.controls) == null ? void 0 : _b3.direction) || "vertical",
-          leftOffset: props.controlsLeftOffset || ((_c2 = finalMapConfig.value.controls) == null ? void 0 : _c2.leftOffset),
-          rightOffset: props.controlsRightOffset || ((_d = finalMapConfig.value.controls) == null ? void 0 : _d.rightOffset),
-          topOffset: props.controlsTopOffset || ((_e2 = finalMapConfig.value.controls) == null ? void 0 : _e2.topOffset),
-          bottomOffset: props.controlsBottomOffset || ((_f = finalMapConfig.value.controls) == null ? void 0 : _f.bottomOffset),
+          ...tools,
+          ...controlsRest,
+          position: props.controlsPosition || controlsRest.position || tools.position || "bottom-left",
+          direction: props.controlsDirection || controlsRest.direction || tools.direction || "vertical",
+          leftOffset: props.controlsLeftOffset || controlsRest.leftOffset,
+          rightOffset: props.controlsRightOffset || controlsRest.rightOffset,
+          topOffset: props.controlsTopOffset || controlsRest.topOffset,
+          bottomOffset: props.controlsBottomOffset || controlsRest.bottomOffset,
           ...props.controlsConfig
         };
       });
@@ -482115,9 +482203,23 @@ ${this.attributes_.map(
       });
       const measurementResults = vue.ref([]);
       const layerPanelConfig = vue.computed(() => {
+        var _a3, _b3;
         console.log("🔍 [CustomOpenlayer] layerPanelConfig计算中...");
         console.log("🔍 [CustomOpenlayer] loadedConfig.value:", loadedConfig.value);
         console.log("🔍 [CustomOpenlayer] props.mapConfig:", props.mapConfig);
+        const lpControls = ((_b3 = (_a3 = finalMapConfig.value) == null ? void 0 : _a3.controls) == null ? void 0 : _b3.layerPanel) || {};
+        const ui2 = {
+          title: lpControls.title ?? "图层管理",
+          width: lpControls.width ?? "350px",
+          height: lpControls.height ?? "600px",
+          modal: lpControls.modal ?? false,
+          draggable: lpControls.draggable ?? true,
+          resizable: lpControls.resizable ?? true,
+          showClose: lpControls.showClose ?? true,
+          position: lpControls.position ?? "right",
+          cacheId: lpControls.cacheId ?? "layer-dialog",
+          className: lpControls.className ?? "layer-dialog"
+        };
         if (loadedConfig.value) {
           const hasLayers = loadedConfig.value.baseLayers && loadedConfig.value.baseLayers.length > 0 || loadedConfig.value.overlayLayers && loadedConfig.value.overlayLayers.length > 0 || loadedConfig.value.vectorLayers && loadedConfig.value.vectorLayers.length > 0;
           console.log("🔍 [CustomOpenlayer] loadedConfig hasLayers:", hasLayers);
@@ -482125,7 +482227,8 @@ ${this.attributes_.map(
             const config = {
               baseLayers: loadedConfig.value.baseLayers || [],
               overlayLayers: loadedConfig.value.overlayLayers || [],
-              vectorLayers: loadedConfig.value.vectorLayers || []
+              vectorLayers: loadedConfig.value.vectorLayers || [],
+              ui: ui2
             };
             console.log("🔍 [CustomOpenlayer] 使用loadedConfig，返回配置:", config);
             return config;
@@ -482135,7 +482238,8 @@ ${this.attributes_.map(
           const config = {
             baseLayers: props.mapConfig.baseLayers || [],
             overlayLayers: props.mapConfig.overlayLayers || [],
-            vectorLayers: props.mapConfig.vectorLayers || []
+            vectorLayers: props.mapConfig.vectorLayers || [],
+            ui: ui2
           };
           console.log("🔍 [CustomOpenlayer] 使用props.mapConfig，返回配置:", config);
           console.log("🔍 [CustomOpenlayer] overlayLayers数量:", config.overlayLayers.length);
@@ -482148,7 +482252,8 @@ ${this.attributes_.map(
         return {
           baseLayers: [],
           overlayLayers: [],
-          vectorLayers: []
+          vectorLayers: [],
+          ui: ui2
         };
       });
       const measurementTool = vue.ref(null);
@@ -482179,6 +482284,14 @@ ${this.attributes_.map(
         },
         { deep: true }
       );
+      vue.watch(
+        () => props.showLayerPanel,
+        (val) => {
+          if (val !== void 0) {
+            showLayerPanel.value = val;
+          }
+        }
+      );
       vue.watch(
         finalMapConfig,
         (newConfig) => {
@@ -482195,7 +482308,12 @@ ${this.attributes_.map(
         { deep: true }
       );
       vue.onMounted(async () => {
+        var _a3, _b3;
         await loadConfig();
+        const defaultLayerPanelOpen = props.showLayerPanel !== void 0 ? props.showLayerPanel : ((_b3 = (_a3 = finalMapConfig.value.controls) == null ? void 0 : _a3.layerPanel) == null ? void 0 : _b3.defaultOpen) ?? false;
+        if (defaultLayerPanelOpen) {
+          showLayerPanel.value = true;
+        }
         if (props.enableStorage) {
           loadStoredData();
         }
@@ -482431,10 +482549,6 @@ ${this.attributes_.map(
       const onSearchClear = () => {
         emit("search-clear");
       };
-      const onLayerChange = (layer2) => {
-        emit("layer-change", layer2);
-        console.log("Layer changed:", layer2);
-      };
       const onShowLayerPanel = () => {
         showLayerPanel.value = true;
       };
@@ -482990,16 +483104,22 @@ ${this.attributes_.map(
           hasToolbarSlot.value ? vue.renderSlot(_ctx.$slots, "toolbar", { key: 2 }, void 0, true) : vue.createCommentVNode("", true),
           hasMapInfoSlot.value ? vue.renderSlot(_ctx.$slots, "mapInfo", { key: 3 }, void 0, true) : vue.createCommentVNode("", true),
           hasMapInfoSlot.value ? vue.renderSlot(_ctx.$slots, "map-info", { key: 4 }, void 0, true) : vue.createCommentVNode("", true),
-          finalShowLayerPanel.value ? (vue.openBlock(), vue.createBlock(LayerPanel, {
+          finalEnableLayerPanel.value ? (vue.openBlock(), vue.createBlock(LayerPanel, {
             key: 5,
             modelValue: showLayerPanel.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showLayerPanel.value = $event),
-            onLayerChange
-          }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-          hasLayerPanelSlot.value ? vue.renderSlot(_ctx.$slots, "layerPanel", { key: 6 }, void 0, true) : vue.createCommentVNode("", true),
-          hasLayerPanelSlot.value ? vue.renderSlot(_ctx.$slots, "layer-panel", { key: 7 }, void 0, true) : vue.createCommentVNode("", true),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showLayerPanel.value = $event)
+          }, vue.createSlots({ _: 2 }, [
+            hasLayerPanelSlot.value ? {
+              name: "default",
+              fn: vue.withCtx((panel) => [
+                vue.renderSlot(_ctx.$slots, "layerPanel", vue.normalizeProps(vue.guardReactiveProps(panel)), void 0, true),
+                vue.renderSlot(_ctx.$slots, "layer-panel", vue.normalizeProps(vue.guardReactiveProps(panel)), void 0, true)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue"])) : vue.createCommentVNode("", true),
           showLegend.value ? (vue.openBlock(), vue.createBlock(LegendPanel, {
-            key: 8,
+            key: 6,
             position: finalLegendPosition.value,
             width: finalLegendWidth.value,
             collapsible: finalLegendCollapsible.value,
@@ -483010,7 +483130,7 @@ ${this.attributes_.map(
             "top-offset": props.legendTopOffset,
             "bottom-offset": props.legendBottomOffset
           }, null, 8, ["position", "width", "collapsible", "default-collapsed", "show-only-visible", "left-offset", "right-offset", "top-offset", "bottom-offset"])) : vue.createCommentVNode("", true),
-          hasLegendSlot.value ? vue.renderSlot(_ctx.$slots, "legend", { key: 9 }, void 0, true) : vue.createCommentVNode("", true),
+          hasLegendSlot.value ? vue.renderSlot(_ctx.$slots, "legend", { key: 7 }, void 0, true) : vue.createCommentVNode("", true),
           measurementResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
             vue.createElementVNode("div", _hoisted_2, [
               _cache[6] || (_cache[6] = vue.createElementVNode("h4", { class: "m-0 text-sm font-semibold text-gray-800" }, "测量结果", -1)),
@@ -483057,8 +483177,8 @@ ${this.attributes_.map(
       };
     }
   });
-  const index_vue_vue_type_style_index_0_scoped_c8137b4e_lang = "";
-  const CustomOpenlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8137b4e"]]);
+  const index_vue_vue_type_style_index_0_scoped_a8800082_lang = "";
+  const CustomOpenlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a8800082"]]);
   const base = "";
   var u8 = Uint8Array, u16 = Uint16Array, i32 = Int32Array;
   var fleb = new u8([

package/lib/style.css

@@ -2160,18 +2160,18 @@ label[data-v-21ab8d8c] {
 }
 
 .layer-dialog {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
   /* 全局样式面板样式 */
 
 /* 主标签页样式 */
 }
 .global-style-panel {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
     padding: 16px;
     border-bottom: 1px solid #eee;
     background-color: #f8f9fa;
 }
-.panel-title[data-v-c66f28f2] {
+.panel-title[data-v-d12fef13] {
       margin: 0 0 16px 0;
       font-size: 14px;
       font-weight: 600;
@@ -2180,32 +2180,32 @@ label[data-v-21ab8d8c] {
       padding-bottom: 8px;
 }
 .config-section {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
       margin-bottom: 16px;
 }
-h5[data-v-c66f28f2] {
+h5[data-v-d12fef13] {
         margin: 0 0 12px 0;
         font-size: 13px;
         font-weight: 500;
         color: #666;
 }
 .config-item {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
         display: flex;
         align-items: center;
         margin-bottom: 12px;
         gap: 8px;
 }
-label[data-v-c66f28f2] {
+label[data-v-d12fef13] {
           flex: 0 0 60px;
           font-size: 12px;
           color: #666;
 }
-.el-slider[data-v-c66f28f2] {
+.el-slider[data-v-d12fef13] {
           flex: 1;
           margin: 0 8px;
 }
-.value-text[data-v-c66f28f2] {
+.value-text[data-v-d12fef13] {
           flex: 0 0 45px;
           font-size: 12px;
           color: #999;
@@ -2213,29 +2213,29 @@ label[data-v-c66f28f2] {
 }
 }
 .preset-buttons {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
         display: flex;
         gap: 6px;
         flex-wrap: wrap;
 }
-.el-button[data-v-c66f28f2] {
+.el-button[data-v-d12fef13] {
           flex: 1;
           min-width: 60px;
 }
 }
 }
-.panel-actions[data-v-c66f28f2] {
+.panel-actions[data-v-d12fef13] {
       margin-top: 16px;
       padding-top: 12px;
       border-top: 1px solid #ddd;
       text-align: center;
 }
-.custom-css-input[data-v-c66f28f2] {
+.custom-css-input[data-v-d12fef13] {
       font-family: 'Courier New', monospace;
       font-size: 12px;
       line-height: 1.4;
 }
-.custom-css-input[data-v-c66f28f2] .el-textarea__inner {
+.custom-css-input[data-v-d12fef13] .el-textarea__inner {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        line-height: 1.4;
@@ -2243,37 +2243,37 @@ label[data-v-c66f28f2] {
        border: 1px solid #e9ecef;
 }
 .style-tabs {
-[data-v-c66f28f2] .el-tabs__header {
+[data-v-d12fef13] .el-tabs__header {
          margin: 0 0 16px 0;
 }
-[data-v-c66f28f2] .el-tabs__nav-wrap {
+[data-v-d12fef13] .el-tabs__nav-wrap {
          padding: 0;
 }
-[data-v-c66f28f2] .el-tabs__item {
+[data-v-d12fef13] .el-tabs__item {
          font-size: 12px;
          padding: 0 16px;
          height: 32px;
          line-height: 32px;
 }
-[data-v-c66f28f2] .el-tabs__content {
+[data-v-d12fef13] .el-tabs__content {
          padding: 0;
 }
 }
 .current-style-display {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
        margin-top: 16px;
        padding: 12px;
        background-color: #f5f5f5;
        border-radius: 4px;
        border: 1px solid #e9ecef;
 }
-h6[data-v-c66f28f2] {
+h6[data-v-d12fef13] {
          margin: 0 0 8px 0;
          font-size: 12px;
          font-weight: 500;
          color: #666;
 }
-.style-preview[data-v-c66f28f2] {
+.style-preview[data-v-d12fef13] {
          font-family: 'Courier New', monospace;
          font-size: 11px;
          line-height: 1.4;
@@ -2289,17 +2289,17 @@ h6[data-v-c66f28f2] {
 }
 }
 }
-.main-tabs[data-v-c66f28f2] {
+.main-tabs[data-v-d12fef13] {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.main-tabs .el-tabs__content[data-v-c66f28f2] {
+.main-tabs .el-tabs__content[data-v-d12fef13] {
   flex: 1;
   overflow: hidden;
   padding: 0;
 }
-.main-tabs .el-tab-pane[data-v-c66f28f2] {
+.main-tabs .el-tab-pane[data-v-d12fef13] {
   height: 100%;
   overflow: auto;
   display: flex;
@@ -2307,16 +2307,16 @@ h6[data-v-c66f28f2] {
 }
 .layer-tree {
 .tree-node-content {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
       width: 100%;
 }
-.group-node[data-v-c66f28f2] {
+.group-node[data-v-d12fef13] {
         display: flex;
         align-items: center;
         padding: 8px 0;
 }
 .layer-item {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -2324,17 +2324,17 @@ h6[data-v-c66f28f2] {
           padding: 6px 0;
 }
 .layer-info {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
             display: flex;
             align-items: center;
             flex: 1;
             min-width: 0;
 }
-.layer-icon[data-v-c66f28f2] {
+.layer-icon[data-v-d12fef13] {
               margin-right: 8px;
               flex-shrink: 0;
 }
-.layer-name[data-v-c66f28f2] {
+.layer-name[data-v-d12fef13] {
               font-size: 14px;
               color: #333;
               white-space: nowrap;
@@ -2343,23 +2343,23 @@ h6[data-v-c66f28f2] {
 }
 }
 .layer-controls {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
             display: flex;
             align-items: center;
             gap: 8px;
 }
 .opacity-control {
-&[data-v-c66f28f2] {
+&[data-v-d12fef13] {
               display: flex;
               align-items: center;
               gap: 8px;
               min-width: 120px;
 }
-.opacity-slider[data-v-c66f28f2] {
+.opacity-slider[data-v-d12fef13] {
                 flex: 1;
                 min-width: 80px;
 }
-.opacity-value[data-v-c66f28f2] {
+.opacity-value[data-v-d12fef13] {
                 font-size: 12px;
                 color: #666;
                 min-width: 35px;
@@ -2367,7 +2367,7 @@ h6[data-v-c66f28f2] {
                 white-space: nowrap;
 }
 }
-.style-config-btn[data-v-c66f28f2] {
+.style-config-btn[data-v-d12fef13] {
               width: 24px;
               height: 24px;
               padding: 0;
@@ -2380,7 +2380,7 @@ h6[data-v-c66f28f2] {
 }
 
 /* 样式配置面板样式 */
-[data-v-c66f28f2] .layer-style-popover {
+[data-v-d12fef13] .layer-style-popover {
 .style-config-panel {
 & {
     padding: 0;
@@ -2459,7 +2459,7 @@ label {
 }
 }
 
-.context-menu[data-v-c8137b4e] {
+.context-menu[data-v-a8800082] {
   background: white;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
@@ -2467,7 +2467,7 @@ label {
   padding: 4px 0;
   min-width: 120px;
 }
-.context-menu-item[data-v-c8137b4e] {
+.context-menu-item[data-v-a8800082] {
   display: flex;
   align-items: center;
   padding: 8px 12px;
@@ -2476,10 +2476,10 @@ label {
   color: #606266;
   transition: background-color 0.3s;
 }
-.context-menu-item[data-v-c8137b4e]:hover {
+.context-menu-item[data-v-a8800082]:hover {
   background-color: #f5f7fa;
 }
-.context-menu-item .el-icon[data-v-c8137b4e] {
+.context-menu-item .el-icon[data-v-a8800082] {
   margin-right: 8px;
   font-size: 16px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-openlayers-plugin",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "description": "A Vue 3 plugin for OpenLayers with custom components and utilities",
   "main": "lib/index.umd.js",
   "module": "lib/index.esm.js",