vue-openlayers-plugin 1.0.87 → 1.0.89

package/lib/style.css

@@ -448,7 +448,6 @@
 }
 .search-input {
   width: 100%;
-  padding: 8px 12px;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   font-size: 14px;
@@ -683,14 +682,15 @@
 }
 
 
-.map-toolbar[data-v-65f64ab9] {
+.map-toolbar[data-v-b8c938a3] {
   position: absolute;
-  top: 10px;
-  right: 20px;
-  height: 32px;
+  top: 20px;
+  right: 1%;
+  z-index: 100;
 }
-[data-v-65f64ab9].el-menu--horizontal {
-  height: 100% !important;
+.map-toolbar[data-v-b8c938a3]:hover {
+  box-shadow: var(--el-box-shadow);
+  border-color: var(--el-border-color-hover);
 }.map-search-container {
   position: absolute;
   z-index: 99;
@@ -725,14 +725,14 @@
   transition: all 0.3s ease;
 }
 .search-active .search-input :deep(.el-input__inner) {
-  border-color: #409eff;
-  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
+  border-color: var(--el-color-primary);
+  box-shadow: 0 0 0 1px var(--el-color-primary-light-5);
 }
 .search-icon {
-  color: #909399;
+  color: var(--el-text-color-placeholder);
 }
 .loading-icon {
-  color: #409eff;
+  color: var(--el-color-primary);
   animation: rotate 1s linear infinite;
 }
 @keyframes rotate {
@@ -748,10 +748,10 @@ to {
   top: 100%;
   left: 0;
   right: 0;
-  background: white;
-  border: 1px solid #e4e7ed;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
+  box-shadow: var(--el-box-shadow-light);
   max-height: 400px;
   overflow-y: auto;
   z-index: 10000;
@@ -761,7 +761,7 @@ to {
   padding: 8px 0;
 }
 .search-section:not(:last-child) {
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
 }
 .section-title {
   display: flex;
@@ -769,11 +769,11 @@ to {
   align-items: center;
   padding: 8px 16px;
   font-size: 12px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   font-weight: 500;
 }
 .result-count {
-  color: #c0c4cc;
+  color: var(--el-text-color-placeholder);
 }
 .search-item {
   display: flex;
@@ -784,19 +784,19 @@ to {
 }
 .search-item:hover,
 .search-item.active {
-  background-color: #f5f7fa;
+  background-color: var(--el-fill-color-light);
 }
 .item-icon {
   margin-right: 12px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   font-size: 16px;
   flex-shrink: 0;
 }
 .history-item .item-icon {
-  color: #c0c4cc;
+  color: var(--el-text-color-placeholder);
 }
 .result-item .item-icon {
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .item-content {
   flex: 1;
@@ -804,39 +804,39 @@ to {
 }
 .item-name {
   font-size: 14px;
-  color: #303133;
+  color: var(--el-text-color-primary);
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .item-name :deep(mark) {
-  background-color: #fff2cc;
-  color: #e6a23c;
+  background-color: var(--el-color-warning-light-9);
+  color: var(--el-color-warning);
   padding: 0 2px;
   border-radius: 2px;
 }
 .item-address {
   font-size: 12px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .item-address :deep(mark) {
-  background-color: #fff2cc;
-  color: #e6a23c;
+  background-color: var(--el-color-warning-light-9);
+  color: var(--el-color-warning);
   padding: 0 2px;
   border-radius: 2px;
 }
 .item-type {
   font-size: 11px;
-  color: #c0c4cc;
+  color: var(--el-text-color-placeholder);
   margin-top: 2px;
 }
 .item-confidence {
   font-size: 12px;
-  color: #67c23a;
+  color: var(--el-color-success);
   margin-left: 8px;
   flex-shrink: 0;
 }
@@ -845,7 +845,7 @@ to {
   align-items: center;
   justify-content: center;
   padding: 24px 16px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   font-size: 14px;
 }
 .no-results .el-icon {
@@ -875,107 +875,198 @@ to {
   .position-bottom-right {
     bottom: 5px;
 }
-}.control-group[data-v-e2bbe659] {
+}.control-group[data-v-2fc6cae7] {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   /* re-enable interactions inside the controls container */
   pointer-events: auto;
+  background-color: var(--el-bg-color-overlay);
+  backdrop-filter: blur(4px);
+  padding: 4px;
+  border-radius: var(--el-border-radius-base);
+  box-shadow: var(--el-box-shadow-light);
+  border: 1px solid var(--el-border-color-light);
+  transition: all 0.3s ease;
+}
+.control-group[data-v-2fc6cae7]:hover {
+  box-shadow: var(--el-box-shadow);
+  border-color: var(--el-border-color-hover);
 }
 
 /* when direction becomes column, keep spacing vertical */
-.control-group.flex-col[data-v-e2bbe659] {
+.control-group.flex-col[data-v-2fc6cae7] {
   flex-direction: column;
-  align-items: stretch;
-  gap: 6px;
+  align-items: center; /* Center items in vertical mode */
+  gap: 8px;
+  padding: 6px 4px;
 }
 
 /* ensure buttons themselves are interactive */
-.control-btn[data-v-e2bbe659] {
+.control-btn[data-v-2fc6cae7] {
   pointer-events: auto;
+  margin: 0 !important; /* Ensure no margin interferes */
+  transition: transform 0.1s;
+}
+.control-btn[data-v-2fc6cae7]:active {
+  transform: scale(0.95);
 }
 
 /* reset Element Plus button default adjacent margin and use our gap instead */
-[data-v-e2bbe659] .el-button + .el-button {
+[data-v-2fc6cae7] .el-button + .el-button {
   margin-left: 0 !important;
 }
 
 /* make sure all EP interactive widgets are clickable */
-[data-v-e2bbe659] .el-button,[data-v-e2bbe659] .el-slider,[data-v-e2bbe659] .el-icon {
+[data-v-2fc6cae7] .el-button,[data-v-2fc6cae7] .el-slider,[data-v-2fc6cae7] .el-icon {
   pointer-events: auto;
-}
-.absolute { 
+}.ol-legend-panel[data-v-b1b6d5ed] {
   position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 140px);
+  overflow: hidden;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
+  box-shadow: var(--el-box-shadow-light);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 }
-.bottom-40px {
-  bottom: 40px;
-}
-
-/* 图例面板样式 */
-.legend-collapsed {
-  transform: translateX(calc(100% - 40px));
+.ol-legend-panel.is-collapsed[data-v-b1b6d5ed] {
+  width: auto !important;
+  height: 40px;
+  max-height: 40px;
 }
-.legend-collapsed:hover {
-  transform: translateX(0);
-}
-
-/* 图例项样式 */
-.legend-item {
-@apply mb-2 last:mb-0;
+.ol-legend-panel.is-collapsed .ol-legend-body[data-v-b1b6d5ed] {
+  opacity: 0;
+  pointer-events: none;
 }
-.legend-title {
-@apply text-sm font-medium text-gray-700 mb-2;
+.ol-legend-panel.is-collapsed .header-title[data-v-b1b6d5ed] {
+  display: none;
 }
-.legend-content {
-@apply space-y-1;
+.ol-legend-header[data-v-b1b6d5ed] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: 0 12px;
+  background-color: var(--el-fill-color-light);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  flex-shrink: 0;
 }
-.legend-symbol {
-@apply inline-block mr-2 align-middle;
+.ol-legend-header .header-title[data-v-b1b6d5ed] {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
 }
-.legend-label {
-@apply text-xs text-gray-600 align-middle;
-}
-
-/* 渐变图例样式 */
-.gradient-legend {
-@apply h-4 rounded mb-1;
+.ol-legend-header .action-icon[data-v-b1b6d5ed] {
+  cursor: pointer;
+  color: var(--el-text-color-secondary);
+  transition: color 0.2s;
 }
-.gradient-labels {
-@apply flex justify-between text-xs text-gray-500;
-}
-
-/* 分类图例样式 */
-.category-legend {
-@apply flex items-center mb-1;
+.ol-legend-header .action-icon[data-v-b1b6d5ed]:hover {
+  color: var(--el-color-primary);
 }
-.category-symbol {
-@apply w-4 h-4 mr-2 rounded-sm;
-}
-
-/* 符号图例样式 */
-.symbol-legend {
-@apply flex items-center mb-1;
+.ol-legend-body[data-v-b1b6d5ed] {
+  flex: 1;
+  overflow-y: auto;
+  background-color: transparent;
+  padding: 8px 0;
+  /* 自定义滚动条 */
 }
-.symbol-item {
-@apply w-4 h-4 mr-2;
-}
-
-/* 面板头部样式 */
-.legend-header {
-@apply flex items-center justify-between p-3 border-b border-gray-200;
+.ol-legend-body[data-v-b1b6d5ed]::-webkit-scrollbar {
+  width: 6px;
 }
-.legend-body {
-@apply p-3 max-h-96 overflow-y-auto;
-}
-
-/* 折叠按钮样式 */
-.collapse-btn {
-@apply p-1 rounded hover:bg-gray-100 transition-colors;
+.ol-legend-body[data-v-b1b6d5ed]::-webkit-scrollbar-thumb {
+  background: var(--el-border-color-lighter);
+  border-radius: 3px;
+}
+.legend-collapse[data-v-b1b6d5ed] {
+  border: none;
+}
+.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__header {
+  box-sizing: border-box;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 12px;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+  background-color: transparent;
+  border-bottom-color: var(--el-border-color-lighter);
+}
+.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__header.is-active {
+  color: var(--el-text-color-primary);
+  font-weight: 500;
+}
+.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__wrap {
+  background-color: transparent;
+  border-bottom: none;
+}
+.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__content {
+  padding: 8px 12px;
+  padding-bottom: 12px;
+}
+.layer-title[data-v-b1b6d5ed] {
+  display: inline-block;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.legend-row[data-v-b1b6d5ed] {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.legend-row[data-v-b1b6d5ed]:last-child {
+  margin-bottom: 0;
+}
+.legend-row .legend-icon[data-v-b1b6d5ed] {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.legend-row .legend-icon .icon-img[data-v-b1b6d5ed] {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.legend-row .legend-icon .symbol-shape[data-v-b1b6d5ed] {
+  /* style injected by js */
+}
+.legend-row .legend-label[data-v-b1b6d5ed] {
+  font-size: 12px;
+  color: var(--el-text-color-primary);
+  line-height: 1.4;
+}
+.legend-gradient-box .gradient-bar[data-v-b1b6d5ed] {
+  height: 12px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+.legend-gradient-box .gradient-labels[data-v-b1b6d5ed] {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+}
+.legend-gradient-box .gradient-unit[data-v-b1b6d5ed] {
+  text-align: center;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  margin-top: 2px;
+}
+.legend-desc[data-v-b1b6d5ed] {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.4;
+}
+.empty-state[data-v-b1b6d5ed] {
+  padding: 20px 0;
 }
-.close-btn {
-@apply p-1 rounded hover:bg-gray-100 transition-colors text-gray-500 hover:text-gray-700;
-}
-
 .filter-panel {
 .config-section {
     margin-bottom: 16px;
@@ -1136,14 +1227,14 @@ label {
   /* 全局样式面板样式 */
 .global-style-panel {
     padding: 16px;
-    border-bottom: 1px solid #eee;
-    background-color: #f8f9fa;
+    border-bottom: 1px solid var(--el-border-color-light);
+    background-color: var(--el-fill-color-light);
 .panel-title {
       margin: 0 0 16px 0;
       font-size: 14px;
       font-weight: 600;
-      color: #333;
-      border-bottom: 1px solid #ddd;
+      color: var(--el-text-color-primary);
+      border-bottom: 1px solid var(--el-border-color-light);
       padding-bottom: 8px;
 }
 .config-section {
@@ -1152,7 +1243,7 @@ h5 {
         margin: 0 0 12px 0;
         font-size: 13px;
         font-weight: 500;
-        color: #666;
+        color: var(--el-text-color-regular);
 }
 .config-item {
         display: flex;
@@ -1162,7 +1253,7 @@ h5 {
 label {
           flex: 0 0 60px;
           font-size: 12px;
-          color: #666;
+          color: var(--el-text-color-regular);
 }
 .el-slider {
           flex: 1;
@@ -1171,7 +1262,7 @@ label {
 .value-text {
           flex: 0 0 45px;
           font-size: 12px;
-          color: #999;
+          color: var(--el-text-color-secondary);
           text-align: right;
 }
 }
@@ -1188,7 +1279,7 @@ label {
 .panel-actions {
       margin-top: 16px;
       padding-top: 12px;
-      border-top: 1px solid #ddd;
+      border-top: 1px solid var(--el-border-color-light);
       text-align: center;
 }
 .custom-css-input {
@@ -1200,8 +1291,8 @@ label {
       font-family: "Courier New", monospace;
       font-size: 12px;
       line-height: 1.4;
-      background-color: #fff;
-      border: 1px solid #e9ecef;
+      background-color: var(--el-bg-color-overlay);
+      border: 1px solid var(--el-border-color-light);
 }
 .style-tabs {
 :deep(.el-tabs__header) {
@@ -1223,24 +1314,24 @@ label {
 .current-style-display {
       margin-top: 16px;
       padding: 12px;
-      background-color: #f5f5f5;
+      background-color: var(--el-fill-color-light);
       border-radius: 4px;
-      border: 1px solid #e9ecef;
+      border: 1px solid var(--el-border-color-light);
 h6 {
         margin: 0 0 8px 0;
         font-size: 12px;
         font-weight: 500;
-        color: #666;
+        color: var(--el-text-color-regular);
 }
 .style-preview {
         font-family: "Courier New", monospace;
         font-size: 11px;
         line-height: 1.4;
-        color: #333;
-        background-color: #fff;
+        color: var(--el-text-color-primary);
+        background-color: var(--el-bg-color-overlay);
         padding: 8px;
         border-radius: 3px;
-        border: 1px solid #ddd;
+        border: 1px solid var(--el-border-color-light);
         word-break: break-all;
         white-space: pre-wrap;
         max-height: 120px;
@@ -1291,7 +1382,7 @@ h6 {
 }
 .layer-name {
             font-size: 14px;
-            color: #333;
+            color: var(--el-text-color-primary);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -1312,7 +1403,7 @@ h6 {
 }
 .opacity-value {
               font-size: 12px;
-              color: #666;
+              color: var(--el-text-color-regular);
               min-width: 35px;
               text-align: right;
               white-space: nowrap;
@@ -1338,8 +1429,8 @@ h6 {
       margin: 0 0 16px 0;
       font-size: 14px;
       font-weight: 600;
-      color: #333;
-      border-bottom: 1px solid #eee;
+      color: var(--el-text-color-primary);
+      border-bottom: 1px solid var(--el-border-color-light);
       padding-bottom: 8px;
 }
 .config-section {
@@ -1348,7 +1439,7 @@ h5 {
         margin: 0 0 12px 0;
         font-size: 13px;
         font-weight: 500;
-        color: #666;
+        color: var(--el-text-color-regular);
 }
 .config-item {
         display: flex;
@@ -1358,7 +1449,7 @@ h5 {
 label {
           flex: 0 0 60px;
           font-size: 12px;
-          color: #666;
+          color: var(--el-text-color-regular);
 }
 .el-slider {
           flex: 1;
@@ -1367,7 +1458,7 @@ label {
 .value-text {
           flex: 0 0 45px;
           font-size: 12px;
-          color: #999;
+          color: var(--el-text-color-secondary);
           text-align: right;
 }
 }
@@ -1384,7 +1475,7 @@ label {
 .panel-actions {
       margin-top: 16px;
       padding-top: 12px;
-      border-top: 1px solid #eee;
+      border-top: 1px solid var(--el-border-color-light);
       text-align: center;
 }
 .custom-css-input {
@@ -1396,8 +1487,8 @@ label {
       font-family: "Courier New", monospace;
       font-size: 12px;
       line-height: 1.4;
-      background-color: #f8f9fa;
-      border: 1px solid #e9ecef;
+      background-color: var(--el-fill-color-light);
+      border: 1px solid var(--el-border-color-light);
 }
 }
 }
@@ -1546,32 +1637,37 @@ label {
   width: 100% !important;
   height: 100% !important;
 }
-
-.context-menu {
-  background: white;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  padding: 4px 0;
-  min-width: 120px;
+.context-menu[data-v-736d12b7] {
+  background: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
+  box-shadow: var(--el-box-shadow-light);
+  padding: 4px 0;
+  min-width: 140px;
+  overflow: hidden;
 }
-.context-menu-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #606266;
-  transition: background-color 0.3s;
+.context-menu .context-menu-item[data-v-736d12b7] {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: var(--el-font-size-base);
+  color: var(--el-text-color-primary);
+  transition: all 0.2s;
 }
-.context-menu-item:hover {
-  background-color: #f5f7fa;
+.context-menu .context-menu-item[data-v-736d12b7]:hover {
+  background-color: var(--el-fill-color-light);
+  color: var(--el-color-primary);
 }
-.context-menu-item .el-icon {
-  margin-right: 8px;
+.context-menu .context-menu-item:hover .el-icon[data-v-736d12b7] {
+  color: var(--el-color-primary);
+}
+.context-menu .context-menu-item .el-icon[data-v-736d12b7] {
+  margin-right: 8px;
   font-size: 16px;
-}
-
+  color: var(--el-text-color-secondary);
+  transition: color 0.2s;
+}
 /* 右侧滑入动画 */
 .fixed.items-stretch.justify-end .bg-white {
   animation: slideInRight 0.3s ease-out;
@@ -2437,51 +2533,30 @@ to {
 /* 图例面板相关样式 */
 .legend-collapsed .panel-content {
   display: none;
-}/* 让样式穿透到 CustomDialog 内部容器（其上有我们传入的 class="measurement-dialog"） */
-[data-v-ac238457] .measurement-dialog {
-  background-color: transparent !important; /* 覆盖 CustomDialog 根容器的 bg-white */
-  box-shadow: none !important;
-}
-
-/* 让 CustomDialog 自带的标题栏不再是灰底 */
-[data-v-ac238457] .measurement-dialog .bg-gray-50 {
-  background-color: transparent !important;
-  border-bottom-color: transparent !important;
-}
-
-/* 保留以下原有样式 */
-.measurement-dialog[data-v-ac238457] {
-  --el-dialog-bg-color: transparent;
-  --el-dialog-title-font-size: 16px;
-  --el-dialog-box-shadow: none;
-}
-.measurement-content[data-v-ac238457] {
-  background: transparent;
-  border-radius: 12px;
+}.measurement-content[data-v-60e80f64] {
+  background: var(--el-bg-color);
+  border-radius: var(--el-border-radius-base);
   overflow: hidden;
 }
-.measurement-header[data-v-ac238457] {
-  background: transparent;
-  backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(226, 232, 240, 0);
+.measurement-header[data-v-60e80f64] {
+  background: var(--el-bg-color-overlay);
+  border-bottom: 1px solid var(--el-border-color-light);
 }
-.measurement-result[data-v-ac238457] {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+.measurement-result[data-v-60e80f64] {
+  background: var(--el-fill-color-light);
+  border-bottom: 1px solid var(--el-border-color-light);
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.result-value[data-v-ac238457] {
+.result-value[data-v-60e80f64] {
   font-size: 42px;
   font-weight: 600;
-  color: #3b82f6;
+  color: var(--el-color-primary);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1;
-  text-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
 }
-.tool-grid[data-v-ac238457] {
+.tool-grid[data-v-60e80f64] {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 18px;
@@ -2489,7 +2564,7 @@ to {
   justify-items: center;
   align-items: start;
 }
-.tool-item[data-v-ac238457] {
+.tool-item[data-v-60e80f64] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -2498,240 +2573,129 @@ to {
   user-select: none;
   transition: transform 0.2s ease;
 }
-.tool-icon[data-v-ac238457] {
+.tool-icon[data-v-60e80f64] {
   width: 28px;
   height: 28px;
-  padding: 14px; /* 28 + 14*2 = 56px 的方块 */
+  padding: 14px;
   border-radius: 10px;
-  background: linear-gradient(180deg, #f2f4f8 0%, #e9eef5 100%);
-  border: 1px solid #e6ebf2;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  background: var(--el-fill-color);
+  border: 1px solid var(--el-border-color);
+  box-shadow: var(--el-box-shadow-lighter);
+  transition: all 0.2s ease;
   margin-bottom: 10px;
 }
-.tool-item:hover .tool-icon[data-v-ac238457],
-.tool-item.active .tool-icon[data-v-ac238457] {
+.tool-item:hover .tool-icon[data-v-60e80f64],
+.tool-item.active .tool-icon[data-v-60e80f64] {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  border-color: #c8d4e6;
+  box-shadow: var(--el-box-shadow-light);
+  border-color: var(--el-color-primary-light-5);
+  background-color: var(--el-color-primary-light-9);
 }
-.tool-label[data-v-ac238457] {
+.tool-label[data-v-60e80f64] {
   font-size: 14px;
   line-height: 1.2;
-  color: #334155; /* 不改变整体背景，仅优化文字可读性 */
+  color: var(--el-text-color-regular);
   font-weight: 500;
   white-space: nowrap;
 }
-.dialog-footer[data-v-ac238457] {
-@apply hidden;
+.dialog-footer[data-v-60e80f64] {
+  display: none;
 }
 /* 底图对话框样式 */
-.basemap-dialog {
+.basemap-dialog[data-v-75f232fd] {
   /* CustomDialog 会处理右侧滑入动画 */
 }
 
 /* 底图内容容器 */
-.basemap-content {
-  padding: 16px;
+.basemap-content[data-v-75f232fd] {
+  padding: 8px;
   height: 100%;
-  overflow: visible;
+  overflow: visible;
+  background-color: var(--el-bg-color);
 }
 
 /* 底图网格布局 */
-.basemap-grid {
+.basemap-grid[data-v-75f232fd] {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
   padding: 8px 0;
 }
 
 /* 底图项目 */
-.basemap-item {
+.basemap-item[data-v-75f232fd] {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 12px;
+  padding: 8px;
   border: 2px solid transparent;
-  border-radius: 12px;
+  border-radius: var(--el-border-radius-base);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.9) 100%);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  background: var(--el-bg-color-overlay);
+  box-shadow: var(--el-box-shadow-light);
+  border: 1px solid var(--el-border-color-light);
 }
-.basemap-item:hover {
+.basemap-item[data-v-75f232fd]:hover {
   transform: translateY(-2px) scale(1.02);
-  border-color: rgba(59, 130, 246, 0.3);
-  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 1) 100%);
-}
-.basemap-item.active {
-  border-color: #3b82f6;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.15) 100%);
-  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: var(--el-color-primary-light-5);
+  box-shadow: var(--el-box-shadow);
+}
+.basemap-item.active[data-v-75f232fd] {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  box-shadow: var(--el-box-shadow);
 }
 
 /* 底图预览图片 */
-.basemap-preview {
-  width: 100px;
-  height: 75px;
-  border-radius: 8px;
+.basemap-preview[data-v-75f232fd] {
+  width: 92px;
+  height: 68px;
+  border-radius: var(--el-border-radius-small);
   overflow: hidden;
   margin-bottom: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
+  box-shadow: var(--el-box-shadow-lighter);
+  transition: all 0.3s ease;
+  background: var(--el-fill-color-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.basemap-item:hover .basemap-preview {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+.basemap-item:hover .basemap-preview[data-v-75f232fd] {
+  box-shadow: var(--el-box-shadow-light);
   transform: scale(1.05);
 }
-.basemap-preview img {
+.basemap-preview img[data-v-75f232fd] {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all 0.3s ease;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
+  transition: all 0.3s ease;
 }
 
 /* 底图名称 */
-.basemap-name {
-  font-size: 12px;
+.basemap-name[data-v-75f232fd] {
+  font-size: 11px;
   font-weight: 500;
-  color: #374151;
+  color: var(--el-text-color-regular);
   text-align: center;
   line-height: 1.4;
-  transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  margin-top: 4px;
 }
-.basemap-item:hover .basemap-name {
-  color: #1f2937;
+.basemap-item:hover .basemap-name[data-v-75f232fd] {
+  color: var(--el-text-color-primary);
   font-weight: 600;
 }
-.basemap-item.active .basemap-name {
-  color: #3b82f6;
-  font-weight: 600;
-}
-
-/* 底图网格 */
-.basemap-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 16px;
-}
-
-/* 底图项 */
-.basemap-item {
-  cursor: pointer;
-  border-radius: 12px;
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  border: 2px solid rgba(0, 0, 0, 0.08);
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(10px);
-  position: relative;
-}
-.basemap-item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 1;
-}
-.basemap-item:hover {
-  transform: translateY(-4px) scale(1.02);
-  border-color: rgba(59, 130, 246, 0.3);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-}
-.basemap-item:hover::before {
-  opacity: 1;
-}
-.basemap-item.active {
-  border-color: #3b82f6;
-  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
-  transform: translateY(-2px);
-}
-.basemap-item.active::before {
-  opacity: 0.7;
-}
-
-/* 底图预览 */
-.basemap-preview {
-  width: 100%;
-  height: 80px;
-  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  z-index: 2;
-}
-.basemap-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.3s ease;
-}
-.basemap-item:hover .basemap-preview img {
-  transform: scale(1.1);
-}
-
-/* 底图名称 */
-.basemap-name {
-  padding: 12px 16px;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 500;
-  color: #374151;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(5px);
-  position: relative;
-  z-index: 2;
-  letter-spacing: 0.3px;
-}
-.basemap-item.active .basemap-name {
-  color: #1f2937;
+.basemap-item.active .basemap-name[data-v-75f232fd] {
+  color: var(--el-color-primary);
   font-weight: 600;
 }
 
 /* 响应式设计 */
 @media (max-width: 480px) {
-.basemap-panel {
-    width: 100%;
-}
-.basemap-grid {
+.basemap-grid[data-v-75f232fd] {
     grid-template-columns: 1fr;
 }
-.panel-content {
-    padding: 16px;
-}
-}
-
-/* 动画关键帧 */
-@keyframes slideInRight {
-from {
-    transform: translateX(100%);
-    opacity: 0;
-}
-to {
-    transform: translateX(0);
-    opacity: 1;
-}
-}
-@keyframes slideOutRight {
-from {
-    transform: translateX(0);
-    opacity: 1;
-}
-to {
-    transform: translateX(100%);
-    opacity: 0;
-}
 }
 
 .coordinate-dialog {