vue-openlayers-plugin 1.0.90 → 1.0.92

package/lib/style.css

@@ -118,7 +118,8 @@
 }
 
 .html-popup-content {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .html-popup-title {
   font-size: 16px;
@@ -186,7 +187,7 @@
   background-color: #f5f5f5;
   padding: 2px 4px;
   border-radius: 3px;
-  font-family: 'Monaco', 'Consolas', monospace;
+  font-family: "Monaco", "Consolas", monospace;
   font-size: 12px;
 }
 .html-popup-body :deep(pre) {
@@ -194,7 +195,7 @@
   padding: 12px;
   border-radius: 4px;
   overflow-x: auto;
-  font-family: 'Monaco', 'Consolas', monospace;
+  font-family: "Monaco", "Consolas", monospace;
   font-size: 12px;
 }
 .html-popup-body :deep(blockquote) {
@@ -206,7 +207,8 @@
 }
 
 .image-popup-content {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .image-popup-title {
   font-size: 16px;
@@ -265,9 +267,11 @@
   margin-bottom: 8px;
 }
 @keyframes spin {
-0% { transform: rotate(0deg);
+0% {
+    transform: rotate(0deg);
 }
-100% { transform: rotate(360deg);
+100% {
+    transform: rotate(360deg);
 }
 }
 .image-navigation {
@@ -402,7 +406,8 @@
 }
 
 .array-popup-content {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   max-width: 600px;
 }
 .array-popup-title {
@@ -669,26 +674,24 @@
   font-size: 14px;
 }
 
-.map-info-panel {
-  position: absolute;
-  gap: 12px;
-  bottom: 0px;
-  left: 0px;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 2px 0px;
-  text-align: center;
+.map-info-panel {
+  position: absolute;
+  gap: 12px;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 2px 0px;
+  text-align: center;
   backdrop-filter: blur(4px);
-}
-
-
-.map-toolbar[data-v-b8c938a3] {
+}
+.map-toolbar[data-v-80958d6e] {
   position: absolute;
   top: 20px;
   right: 1%;
   z-index: 100;
 }
-.map-toolbar[data-v-b8c938a3]:hover {
+.map-toolbar[data-v-80958d6e]:hover {
   box-shadow: var(--el-box-shadow);
   border-color: var(--el-border-color-hover);
 }.map-search-container {
@@ -875,12 +878,11 @@ to {
   .position-bottom-right {
     bottom: 5px;
 }
-}.control-group[data-v-2fc6cae7] {
+}.control-bar[data-v-8c624b16] {
   display: flex;
   align-items: center;
-  gap: 8px;
-  /* re-enable interactions inside the controls container */
-  pointer-events: auto;
+  gap: 0;
+  pointer-events: auto; /* Ensure interactions are enabled */
   background-color: var(--el-bg-color-overlay);
   backdrop-filter: blur(4px);
   padding: 4px;
@@ -889,38 +891,66 @@ to {
   border: 1px solid var(--el-border-color-light);
   transition: all 0.3s ease;
 }
-.control-group[data-v-2fc6cae7]:hover {
+.control-bar[data-v-8c624b16]: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-2fc6cae7] {
+.control-bar.flex-col[data-v-8c624b16] {
   flex-direction: column;
-  align-items: center; /* Center items in vertical mode */
-  gap: 8px;
-  padding: 6px 4px;
+  width: fit-content;
+}
+.control-bar.flex-row[data-v-8c624b16] {
+  flex-direction: row;
+  height: fit-content;
+}
+.control-section[data-v-8c624b16] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  /* Inherit direction from parent implicitly via flex layout */
+}
+.flex-col .control-section[data-v-8c624b16] {
+  flex-direction: column;
+  width: 100%;
+}
+.flex-row .control-section[data-v-8c624b16] {
+  flex-direction: row;
+  height: 100%;
+}
+.control-divider[data-v-8c624b16] {
+  background-color: var(--el-border-color-light);
+}
+.flex-col .control-divider[data-v-8c624b16] {
+  width: 80%;
+  height: 1px;
+  margin: 4px 0;
+}
+.flex-row .control-divider[data-v-8c624b16] {
+  width: 1px;
+  height: 16px; /* Explicit height for horizontal mode */
+  margin: 0 4px;
 }
 
 /* ensure buttons themselves are interactive */
-.control-btn[data-v-2fc6cae7] {
+.control-btn[data-v-8c624b16] {
   pointer-events: auto;
   margin: 0 !important; /* Ensure no margin interferes */
   transition: transform 0.1s;
 }
-.control-btn[data-v-2fc6cae7]:active {
+.control-btn[data-v-8c624b16]:active {
   transform: scale(0.95);
 }
 
 /* reset Element Plus button default adjacent margin and use our gap instead */
-[data-v-2fc6cae7] .el-button + .el-button {
+[data-v-8c624b16] .el-button + .el-button {
   margin-left: 0 !important;
 }
 
 /* make sure all EP interactive widgets are clickable */
-[data-v-2fc6cae7] .el-button,[data-v-2fc6cae7] .el-slider,[data-v-2fc6cae7] .el-icon {
+[data-v-8c624b16] .el-button,[data-v-8c624b16] .el-slider,[data-v-8c624b16] .el-icon {
   pointer-events: auto;
-}.ol-legend-panel[data-v-b1b6d5ed] {
+}.ol-legend-panel[data-v-ef59840c] {
   position: absolute;
   z-index: 1000;
   display: flex;
@@ -932,19 +962,19 @@ to {
   box-shadow: var(--el-box-shadow-light);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 }
-.ol-legend-panel.is-collapsed[data-v-b1b6d5ed] {
+.ol-legend-panel.is-collapsed[data-v-ef59840c] {
   width: auto !important;
   height: 40px;
   max-height: 40px;
 }
-.ol-legend-panel.is-collapsed .ol-legend-body[data-v-b1b6d5ed] {
+.ol-legend-panel.is-collapsed .ol-legend-body[data-v-ef59840c] {
   opacity: 0;
   pointer-events: none;
 }
-.ol-legend-panel.is-collapsed .header-title[data-v-b1b6d5ed] {
+.ol-legend-panel.is-collapsed .header-title[data-v-ef59840c] {
   display: none;
 }
-.ol-legend-header[data-v-b1b6d5ed] {
+.ol-legend-header[data-v-ef59840c] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -954,37 +984,37 @@ to {
   border-bottom: 1px solid var(--el-border-color-lighter);
   flex-shrink: 0;
 }
-.ol-legend-header .header-title[data-v-b1b6d5ed] {
+.ol-legend-header .header-title[data-v-ef59840c] {
   font-size: 14px;
   font-weight: 600;
   color: var(--el-text-color-primary);
 }
-.ol-legend-header .action-icon[data-v-b1b6d5ed] {
+.ol-legend-header .action-icon[data-v-ef59840c] {
   cursor: pointer;
   color: var(--el-text-color-secondary);
   transition: color 0.2s;
 }
-.ol-legend-header .action-icon[data-v-b1b6d5ed]:hover {
+.ol-legend-header .action-icon[data-v-ef59840c]:hover {
   color: var(--el-color-primary);
 }
-.ol-legend-body[data-v-b1b6d5ed] {
+.ol-legend-body[data-v-ef59840c] {
   flex: 1;
   overflow-y: auto;
   background-color: transparent;
   padding: 8px 0;
   /* 自定义滚动条 */
 }
-.ol-legend-body[data-v-b1b6d5ed]::-webkit-scrollbar {
+.ol-legend-body[data-v-ef59840c]::-webkit-scrollbar {
   width: 6px;
 }
-.ol-legend-body[data-v-b1b6d5ed]::-webkit-scrollbar-thumb {
+.ol-legend-body[data-v-ef59840c]::-webkit-scrollbar-thumb {
   background: var(--el-border-color-lighter);
   border-radius: 3px;
 }
-.legend-collapse[data-v-b1b6d5ed] {
+.legend-collapse[data-v-ef59840c] {
   border: none;
 }
-.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__header {
+.legend-collapse[data-v-ef59840c] .el-collapse-item__header {
   box-sizing: border-box;
   height: 36px;
   line-height: 36px;
@@ -994,77 +1024,77 @@ to {
   background-color: transparent;
   border-bottom-color: var(--el-border-color-lighter);
 }
-.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__header.is-active {
+.legend-collapse[data-v-ef59840c] .el-collapse-item__header.is-active {
   color: var(--el-text-color-primary);
   font-weight: 500;
 }
-.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__wrap {
+.legend-collapse[data-v-ef59840c] .el-collapse-item__wrap {
   background-color: transparent;
   border-bottom: none;
 }
-.legend-collapse[data-v-b1b6d5ed] .el-collapse-item__content {
+.legend-collapse[data-v-ef59840c] .el-collapse-item__content {
   padding: 8px 12px;
   padding-bottom: 12px;
 }
-.layer-title[data-v-b1b6d5ed] {
+.layer-title[data-v-ef59840c] {
   display: inline-block;
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.legend-row[data-v-b1b6d5ed] {
+.legend-row[data-v-ef59840c] {
   display: flex;
   align-items: center;
   margin-bottom: 6px;
 }
-.legend-row[data-v-b1b6d5ed]:last-child {
+.legend-row[data-v-ef59840c]:last-child {
   margin-bottom: 0;
 }
-.legend-row .legend-icon[data-v-b1b6d5ed] {
+.legend-row .legend-icon[data-v-ef59840c] {
   margin-right: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.legend-row .legend-icon .icon-img[data-v-b1b6d5ed] {
+.legend-row .legend-icon .icon-img[data-v-ef59840c] {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
-.legend-row .legend-icon .symbol-shape[data-v-b1b6d5ed] {
+.legend-row .legend-icon .symbol-shape[data-v-ef59840c] {
   /* style injected by js */
 }
-.legend-row .legend-label[data-v-b1b6d5ed] {
+.legend-row .legend-label[data-v-ef59840c] {
   font-size: 12px;
   color: var(--el-text-color-primary);
   line-height: 1.4;
 }
-.legend-gradient-box .gradient-bar[data-v-b1b6d5ed] {
+.legend-gradient-box .gradient-bar[data-v-ef59840c] {
   height: 12px;
   border-radius: 2px;
   margin-bottom: 4px;
   border: 1px solid var(--el-border-color-lighter);
 }
-.legend-gradient-box .gradient-labels[data-v-b1b6d5ed] {
+.legend-gradient-box .gradient-labels[data-v-ef59840c] {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: var(--el-text-color-secondary);
 }
-.legend-gradient-box .gradient-unit[data-v-b1b6d5ed] {
+.legend-gradient-box .gradient-unit[data-v-ef59840c] {
   text-align: center;
   font-size: 11px;
   color: var(--el-text-color-secondary);
   margin-top: 2px;
 }
-.legend-desc[data-v-b1b6d5ed] {
+.legend-desc[data-v-ef59840c] {
   margin-top: 6px;
   font-size: 11px;
   color: var(--el-text-color-secondary);
   line-height: 1.4;
 }
-.empty-state[data-v-b1b6d5ed] {
+.empty-state[data-v-ef59840c] {
   padding: 20px 0;
 }
 .filter-panel {
@@ -1223,277 +1253,277 @@ label {
 }
 .resize-handle{-webkit-user-select:none;user-select:none}.custom-dialog-actions{display:flex;align-items:center}.custom-dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%}.custom-dialog-actions .custom-header-btn{position:static;margin-left:10px;font-size:16px;width:20px;height:20px;line-height:1;border:none;background:transparent;cursor:pointer;padding:0;color:var(--el-color-info)}.custom-dialog-actions .custom-header-btn:hover{color:var(--el-color-primary)}.custom-dialog-actions .custom-header-btn svg{width:100%;height:100%;vertical-align:middle}.e-plus-resize-dialog{display:flex;flex-direction:column;max-height:85vh;overflow:hidden;margin-bottom:0}.e-plus-resize-dialog.is-fullscreen{max-height:100vh;height:100vh!important;margin:0!important}.e-plus-resize-dialog .el-dialog__header,.e-plus-resize-dialog .el-dialog__footer{flex-shrink:0}.e-plus-resize-dialog .el-dialog__body{flex:1;overflow:auto;min-height:0}.e-plus-modal-hidden-overlay,.e-plus-modal-hidden-overlay .el-overlay-dialog{pointer-events:none!important}.e-plus-resize-dialog.is-modal-hidden{pointer-events:auto!important}
 
-.layer-dialog {
+.layer-dialog {
   /* 全局样式面板样式 */
-.global-style-panel {
-    padding: 16px;
-    border-bottom: 1px solid var(--el-border-color-light);
+.global-style-panel {
+    padding: 16px;
+    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: var(--el-text-color-primary);
-      border-bottom: 1px solid var(--el-border-color-light);
+.panel-title {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+      border-bottom: 1px solid var(--el-border-color-light);
       padding-bottom: 8px;
 }
-.config-section {
+.config-section {
       margin-bottom: 16px;
-h5 {
-        margin: 0 0 12px 0;
-        font-size: 13px;
-        font-weight: 500;
+h5 {
+        margin: 0 0 12px 0;
+        font-size: 13px;
+        font-weight: 500;
         color: var(--el-text-color-regular);
 }
-.config-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
+.config-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
         gap: 8px;
-label {
-          flex: 0 0 60px;
-          font-size: 12px;
+label {
+          flex: 0 0 60px;
+          font-size: 12px;
           color: var(--el-text-color-regular);
 }
-.el-slider {
-          flex: 1;
+.el-slider {
+          flex: 1;
           margin: 0 8px;
 }
-.value-text {
-          flex: 0 0 45px;
-          font-size: 12px;
-          color: var(--el-text-color-secondary);
+.value-text {
+          flex: 0 0 45px;
+          font-size: 12px;
+          color: var(--el-text-color-secondary);
           text-align: right;
 }
 }
-.preset-buttons {
-        display: flex;
-        gap: 6px;
+.preset-buttons {
+        display: flex;
+        gap: 6px;
         flex-wrap: wrap;
-.el-button {
-          flex: 1;
+.el-button {
+          flex: 1;
           min-width: 60px;
 }
 }
 }
-.panel-actions {
-      margin-top: 16px;
-      padding-top: 12px;
-      border-top: 1px solid var(--el-border-color-light);
+.panel-actions {
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px solid var(--el-border-color-light);
       text-align: center;
 }
-.custom-css-input {
-      font-family: "Courier New", monospace;
-      font-size: 12px;
+.custom-css-input {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
       line-height: 1.4;
 }
-.custom-css-input :deep(.el-textarea__inner) {
-      font-family: "Courier New", monospace;
-      font-size: 12px;
-      line-height: 1.4;
-      background-color: var(--el-bg-color-overlay);
+.custom-css-input :deep(.el-textarea__inner) {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
+      line-height: 1.4;
+      background-color: var(--el-bg-color-overlay);
       border: 1px solid var(--el-border-color-light);
 }
 .style-tabs {
-:deep(.el-tabs__header) {
+:deep(.el-tabs__header) {
         margin: 0 0 16px 0;
 }
-:deep(.el-tabs__nav-wrap) {
+:deep(.el-tabs__nav-wrap) {
         padding: 0;
 }
-:deep(.el-tabs__item) {
-        font-size: 12px;
-        padding: 0 16px;
-        height: 32px;
+:deep(.el-tabs__item) {
+        font-size: 12px;
+        padding: 0 16px;
+        height: 32px;
         line-height: 32px;
 }
-:deep(.el-tabs__content) {
+:deep(.el-tabs__content) {
         padding: 0;
 }
 }
-.current-style-display {
-      margin-top: 16px;
-      padding: 12px;
-      background-color: var(--el-fill-color-light);
-      border-radius: 4px;
+.current-style-display {
+      margin-top: 16px;
+      padding: 12px;
+      background-color: var(--el-fill-color-light);
+      border-radius: 4px;
       border: 1px solid var(--el-border-color-light);
-h6 {
-        margin: 0 0 8px 0;
-        font-size: 12px;
-        font-weight: 500;
+h6 {
+        margin: 0 0 8px 0;
+        font-size: 12px;
+        font-weight: 500;
         color: var(--el-text-color-regular);
 }
-.style-preview {
-        font-family: "Courier New", monospace;
-        font-size: 11px;
-        line-height: 1.4;
-        color: var(--el-text-color-primary);
-        background-color: var(--el-bg-color-overlay);
-        padding: 8px;
-        border-radius: 3px;
-        border: 1px solid var(--el-border-color-light);
-        word-break: break-all;
-        white-space: pre-wrap;
-        max-height: 120px;
+.style-preview {
+        font-family: "Courier New", monospace;
+        font-size: 11px;
+        line-height: 1.4;
+        color: var(--el-text-color-primary);
+        background-color: var(--el-bg-color-overlay);
+        padding: 8px;
+        border-radius: 3px;
+        border: 1px solid var(--el-border-color-light);
+        word-break: break-all;
+        white-space: pre-wrap;
+        max-height: 120px;
         overflow-y: auto;
 }
 }
-}
-
+}
+
   /* 主标签页样式 */
-.main-tabs {
-    height: 100%;
-    display: flex;
+.main-tabs {
+    height: 100%;
+    display: flex;
     flex-direction: column;
 }
-.main-tabs .el-tabs__content {
-    flex: 1;
-    overflow: hidden;
+.main-tabs .el-tabs__content {
+    flex: 1;
+    overflow: hidden;
     padding: 0;
 }
-.main-tabs .el-tab-pane {
-    height: 100%;
-    overflow: auto;
-    display: flex;
+.main-tabs .el-tab-pane {
+    height: 100%;
+    overflow: auto;
+    display: flex;
     flex-direction: column;
 }
 .layer-tree {
-.tree-node-content {
+.tree-node-content {
       width: 100%;
-.group-node {
-        display: flex;
-        align-items: center;
+.group-node {
+        display: flex;
+        align-items: center;
         padding: 8px 0;
 }
-.layer-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
+.layer-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
         padding: 6px 0;
-.layer-info {
-          display: flex;
-          align-items: center;
-          flex: 1;
+.layer-info {
+          display: flex;
+          align-items: center;
+          flex: 1;
           min-width: 0;
-.layer-icon {
-            margin-right: 8px;
+.layer-icon {
+            margin-right: 8px;
             flex-shrink: 0;
 }
-.layer-name {
-            font-size: 14px;
-            color: var(--el-text-color-primary);
-            white-space: nowrap;
-            overflow: hidden;
+.layer-name {
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+            white-space: nowrap;
+            overflow: hidden;
             text-overflow: ellipsis;
 }
 }
-.layer-controls {
-          display: flex;
-          align-items: center;
+.layer-controls {
+          display: flex;
+          align-items: center;
           gap: 8px;
-.opacity-control {
-            display: flex;
-            align-items: center;
-            gap: 8px;
+.opacity-control {
+            display: flex;
+            align-items: center;
+            gap: 8px;
             min-width: 120px;
-.opacity-slider {
-              flex: 1;
+.opacity-slider {
+              flex: 1;
               min-width: 80px;
 }
-.opacity-value {
-              font-size: 12px;
-              color: var(--el-text-color-regular);
-              min-width: 35px;
-              text-align: right;
+.opacity-value {
+              font-size: 12px;
+              color: var(--el-text-color-regular);
+              min-width: 35px;
+              text-align: right;
               white-space: nowrap;
 }
 }
-.style-config-btn {
-            width: 24px;
-            height: 24px;
-            padding: 0;
+.style-config-btn {
+            width: 24px;
+            height: 24px;
+            padding: 0;
             margin-left: 4px;
 }
 }
 }
 }
 }
-}
-
+}
+
 /* 样式配置面板样式 */
 :deep(.layer-style-popover) {
-.style-config-panel {
+.style-config-panel {
     padding: 0;
-.panel-title {
-      margin: 0 0 16px 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--el-text-color-primary);
-      border-bottom: 1px solid var(--el-border-color-light);
+.panel-title {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+      border-bottom: 1px solid var(--el-border-color-light);
       padding-bottom: 8px;
 }
-.config-section {
+.config-section {
       margin-bottom: 16px;
-h5 {
-        margin: 0 0 12px 0;
-        font-size: 13px;
-        font-weight: 500;
+h5 {
+        margin: 0 0 12px 0;
+        font-size: 13px;
+        font-weight: 500;
         color: var(--el-text-color-regular);
 }
-.config-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
+.config-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
         gap: 8px;
-label {
-          flex: 0 0 60px;
-          font-size: 12px;
+label {
+          flex: 0 0 60px;
+          font-size: 12px;
           color: var(--el-text-color-regular);
 }
-.el-slider {
-          flex: 1;
+.el-slider {
+          flex: 1;
           margin: 0 8px;
 }
-.value-text {
-          flex: 0 0 45px;
-          font-size: 12px;
-          color: var(--el-text-color-secondary);
+.value-text {
+          flex: 0 0 45px;
+          font-size: 12px;
+          color: var(--el-text-color-secondary);
           text-align: right;
 }
 }
-.preset-buttons {
-        display: flex;
-        gap: 6px;
+.preset-buttons {
+        display: flex;
+        gap: 6px;
         flex-wrap: wrap;
-.el-button {
-          flex: 1;
+.el-button {
+          flex: 1;
           min-width: 60px;
 }
 }
 }
-.panel-actions {
-      margin-top: 16px;
-      padding-top: 12px;
-      border-top: 1px solid var(--el-border-color-light);
+.panel-actions {
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px solid var(--el-border-color-light);
       text-align: center;
 }
-.custom-css-input {
-      font-family: "Courier New", monospace;
-      font-size: 12px;
+.custom-css-input {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
       line-height: 1.4;
 }
-.custom-css-input :deep(.el-textarea__inner) {
-      font-family: "Courier New", monospace;
-      font-size: 12px;
-      line-height: 1.4;
-      background-color: var(--el-fill-color-light);
+.custom-css-input :deep(.el-textarea__inner) {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
+      line-height: 1.4;
+      background-color: var(--el-fill-color-light);
       border: 1px solid var(--el-border-color-light);
 }
 }
-}
+}
 
-.ol-base-layer-switcher[data-v-6a7660a8] {
+.ol-base-layer-switcher[data-v-83257bd9] {
   position: absolute;
   bottom: 20px;
   right: 20px;
@@ -1512,7 +1542,7 @@ label {
 }
 
 /* 列表面板 */
-.layer-panel[data-v-6a7660a8] {
+.layer-panel[data-v-83257bd9] {
   display: flex;
   gap: 10px;
   height: 100%;
@@ -1521,7 +1551,7 @@ label {
 }
 
 /* 收起状态的触发器 */
-.layer-trigger[data-v-6a7660a8] {
+.layer-trigger[data-v-83257bd9] {
   position: absolute;
   right: 5px;
   top: 5px;
@@ -1532,13 +1562,14 @@ label {
   z-index: 10;
   background: #fff; /* 遮挡下面的列表 */
 }
-.layer-trigger.is-hidden[data-v-6a7660a8] {
+.layer-trigger.is-hidden[data-v-83257bd9] {
   opacity: 0;
   pointer-events: none;
 }
 
 /* 通用图层项样式 */
-.layer-item[data-v-6a7660a8], .current-layer-box[data-v-6a7660a8] {
+.layer-item[data-v-83257bd9],
+.current-layer-box[data-v-83257bd9] {
   width: 86px;
   height: 60px;
   border-radius: 2px;
@@ -1551,16 +1582,16 @@ label {
   transition: all 0.2s;
   overflow: hidden;
 }
-.layer-item[data-v-6a7660a8]:hover {
+.layer-item[data-v-83257bd9]:hover {
   border-color: #409eff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
 }
-.layer-item.active[data-v-6a7660a8] {
+.layer-item.active[data-v-83257bd9] {
   border: 2px solid #409eff;
 }
 
 /* 选中状态的蓝色边框和对勾 */
-.active-border[data-v-6a7660a8] {
+.active-border[data-v-83257bd9] {
   position: absolute;
   top: 0;
   left: 0;
@@ -1571,7 +1602,7 @@ label {
   border-radius: 2px;
   pointer-events: none;
 }
-.check-icon[data-v-6a7660a8] {
+.check-icon[data-v-83257bd9] {
   position: absolute;
   bottom: 0;
   right: 0;
@@ -1580,7 +1611,7 @@ label {
   border-bottom: 24px solid #409eff;
   border-left: 24px solid transparent;
 }
-.check-icon svg[data-v-6a7660a8] {
+.check-icon svg[data-v-83257bd9] {
   position: absolute;
   right: -1px;
   bottom: -13px;
@@ -1588,7 +1619,7 @@ label {
 }
 
 /* 图层名称标签 */
-.layer-name[data-v-6a7660a8] {
+.layer-name[data-v-83257bd9] {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1603,41 +1634,41 @@ label {
   text-overflow: ellipsis;
   box-sizing: border-box;
 }
-.layer-item:hover .layer-name[data-v-6a7660a8] {
+.layer-item:hover .layer-name[data-v-83257bd9] {
   background: rgba(0, 0, 0, 0.7);
 }
-
+
 /* 地图预览容器样式 */
-.map-preview-container > div {
-  width: 100% !important;
+.map-preview-container > div {
+  width: 100% !important;
   height: 100% !important;
-}
-
+}
+
 /* 预览页面缩放变换 */
-.preview-page {
+.preview-page {
   transform-origin: top center;
-}
-
+}
+
 /* 确保地图容器有明确的尺寸 */
-#map-preview-container {
-  width: 100% !important;
-  height: 400px !important;
-  min-height: 400px !important;
+#map-preview-container {
+  width: 100% !important;
+  height: 400px !important;
+  min-height: 400px !important;
   position: relative !important;
-}
-
+}
+
 /* OpenLayers地图容器样式 */
-#map-preview-container .ol-viewport {
-  width: 100% !important;
+#map-preview-container .ol-viewport {
+  width: 100% !important;
   height: 100% !important;
-}
-
+}
+
 /* 确保Canvas元素正确显示 */
-#map-preview-container canvas {
-  width: 100% !important;
+#map-preview-container canvas {
+  width: 100% !important;
   height: 100% !important;
-}
-.context-menu[data-v-736d12b7] {
+}
+.context-menu[data-v-4eef8abb] {
   background: var(--el-bg-color-overlay);
   border: 1px solid var(--el-border-color-light);
   border-radius: var(--el-border-radius-base);
@@ -1646,7 +1677,7 @@ label {
   min-width: 140px;
   overflow: hidden;
 }
-.context-menu .context-menu-item[data-v-736d12b7] {
+.context-menu .context-menu-item[data-v-4eef8abb] {
   display: flex;
   align-items: center;
   padding: 8px 16px;
@@ -1655,14 +1686,14 @@ label {
   color: var(--el-text-color-primary);
   transition: all 0.2s;
 }
-.context-menu .context-menu-item[data-v-736d12b7]:hover {
+.context-menu .context-menu-item[data-v-4eef8abb]:hover {
   background-color: var(--el-fill-color-light);
   color: var(--el-color-primary);
 }
-.context-menu .context-menu-item:hover .el-icon[data-v-736d12b7] {
+.context-menu .context-menu-item:hover .el-icon[data-v-4eef8abb] {
   color: var(--el-color-primary);
 }
-.context-menu .context-menu-item .el-icon[data-v-736d12b7] {
+.context-menu .context-menu-item .el-icon[data-v-4eef8abb] {
   margin-right: 8px;
   font-size: 16px;
   color: var(--el-text-color-secondary);
@@ -2533,30 +2564,30 @@ to {
 /* 图例面板相关样式 */
 .legend-collapsed .panel-content {
   display: none;
-}.measurement-content[data-v-60e80f64] {
+}.measurement-content[data-v-88b16326] {
   background: var(--el-bg-color);
   border-radius: var(--el-border-radius-base);
   overflow: hidden;
 }
-.measurement-header[data-v-60e80f64] {
+.measurement-header[data-v-88b16326] {
   background: var(--el-bg-color-overlay);
   border-bottom: 1px solid var(--el-border-color-light);
 }
-.measurement-result[data-v-60e80f64] {
+.measurement-result[data-v-88b16326] {
   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-60e80f64] {
+.result-value[data-v-88b16326] {
   font-size: 42px;
   font-weight: 600;
   color: var(--el-color-primary);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1;
 }
-.tool-grid[data-v-60e80f64] {
+.tool-grid[data-v-88b16326] {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 18px;
@@ -2564,7 +2595,7 @@ to {
   justify-items: center;
   align-items: start;
 }
-.tool-item[data-v-60e80f64] {
+.tool-item[data-v-88b16326] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -2573,7 +2604,7 @@ to {
   user-select: none;
   transition: transform 0.2s ease;
 }
-.tool-icon[data-v-60e80f64] {
+.tool-icon[data-v-88b16326] {
   width: 28px;
   height: 28px;
   padding: 14px;
@@ -2584,204 +2615,215 @@ to {
   transition: all 0.2s ease;
   margin-bottom: 10px;
 }
-.tool-item:hover .tool-icon[data-v-60e80f64],
-.tool-item.active .tool-icon[data-v-60e80f64] {
+.tool-item:hover .tool-icon[data-v-88b16326],
+.tool-item.active .tool-icon[data-v-88b16326] {
   transform: translateY(-2px);
   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-60e80f64] {
+.tool-label[data-v-88b16326] {
   font-size: 14px;
   line-height: 1.2;
   color: var(--el-text-color-regular);
   font-weight: 500;
   white-space: nowrap;
 }
-.dialog-footer[data-v-60e80f64] {
+.dialog-footer[data-v-88b16326] {
   display: none;
-}
+}
 /* 底图对话框样式 */
-.basemap-dialog[data-v-75f232fd] {
+.basemap-dialog[data-v-60bca8a2] {
   /* CustomDialog 会处理右侧滑入动画 */
-}
-
+}
+
 /* 底图内容容器 */
-.basemap-content[data-v-75f232fd] {
-  padding: 8px;
-  height: 100%;
-  overflow: visible;
+.basemap-content[data-v-60bca8a2] {
+  padding: 8px;
+  height: 100%;
+  overflow: visible;
   background-color: var(--el-bg-color);
-}
-
+}
+
 /* 底图网格布局 */
-.basemap-grid[data-v-75f232fd] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 8px;
+.basemap-grid[data-v-60bca8a2] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
   padding: 8px 0;
-}
-
+}
+
 /* 底图项目 */
-.basemap-item[data-v-75f232fd] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 8px;
-  border: 2px solid transparent;
-  border-radius: var(--el-border-radius-base);
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  background: var(--el-bg-color-overlay);
-  box-shadow: var(--el-box-shadow-light);
+.basemap-item[data-v-60bca8a2] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  border: 2px solid transparent;
+  border-radius: var(--el-border-radius-base);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  background: var(--el-bg-color-overlay);
+  box-shadow: var(--el-box-shadow-light);
   border: 1px solid var(--el-border-color-light);
 }
-.basemap-item[data-v-75f232fd]:hover {
-  transform: translateY(-2px) scale(1.02);
-  border-color: var(--el-color-primary-light-5);
+.basemap-item[data-v-60bca8a2]:hover {
+  transform: translateY(-2px) scale(1.02);
+  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);
+.basemap-item.active[data-v-60bca8a2] {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
   box-shadow: var(--el-box-shadow);
-}
-
+}
+
 /* 底图预览图片 */
-.basemap-preview[data-v-75f232fd] {
-  width: 92px;
-  height: 68px;
-  border-radius: var(--el-border-radius-small);
-  overflow: hidden;
-  margin-bottom: 8px;
-  box-shadow: var(--el-box-shadow-lighter);
-  transition: all 0.3s ease;
-  background: var(--el-fill-color-light);
-  display: flex;
-  align-items: center;
+.basemap-preview[data-v-60bca8a2] {
+  width: 92px;
+  height: 68px;
+  border-radius: var(--el-border-radius-small);
+  overflow: hidden;
+  margin-bottom: 8px;
+  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[data-v-75f232fd] {
-  box-shadow: var(--el-box-shadow-light);
+.basemap-item:hover .basemap-preview[data-v-60bca8a2] {
+  box-shadow: var(--el-box-shadow-light);
   transform: scale(1.05);
 }
-.basemap-preview img[data-v-75f232fd] {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.basemap-preview img[data-v-60bca8a2] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   transition: all 0.3s ease;
-}
-
+}
+
 /* 底图名称 */
-.basemap-name[data-v-75f232fd] {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--el-text-color-regular);
-  text-align: center;
-  line-height: 1.4;
-  transition: all 0.3s ease;
+.basemap-name[data-v-60bca8a2] {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--el-text-color-regular);
+  text-align: center;
+  line-height: 1.4;
+  transition: all 0.3s ease;
   margin-top: 4px;
 }
-.basemap-item:hover .basemap-name[data-v-75f232fd] {
-  color: var(--el-text-color-primary);
+.basemap-item:hover .basemap-name[data-v-60bca8a2] {
+  color: var(--el-text-color-primary);
   font-weight: 600;
 }
-.basemap-item.active .basemap-name[data-v-75f232fd] {
-  color: var(--el-color-primary);
+.basemap-item.active .basemap-name[data-v-60bca8a2] {
+  color: var(--el-color-primary);
   font-weight: 600;
-}
-
+}
+
 /* 响应式设计 */
 @media (max-width: 480px) {
-.basemap-grid[data-v-75f232fd] {
+.basemap-grid[data-v-60bca8a2] {
     grid-template-columns: 1fr;
 }
-}
+}
 
-.coordinate-dialog {
-  --el-dialog-bg-color: #1a1a1a;
+.coordinate-dialog[data-v-0c70c644] {
+  /* Inherits from global if not scoped, but we can override */
 }
-.coordinate-content {
-  padding: 10px 0;
+.coordinate-content[data-v-0c70c644] {
+  padding: 10px 20px;
+  overflow-x: hidden;
 }
-.format-selection {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border: 1px solid #e9ecef;
+.format-selection[data-v-0c70c644] {
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: center;
 }
-.format-title {
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #495057;
+.coordinate-input[data-v-0c70c644] {
+  margin-bottom: 8px;
 }
-.format-options {
-  display: flex;
-  gap: 20px;
+.operation-tip[data-v-0c70c644] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  margin-top: 16px;
+  padding: 8px;
+  background-color: var(--el-fill-color-light);
+  border-radius: 4px;
+}
+.dialog-footer[data-v-0c70c644] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
-.format-options :deep(.el-radio) {
-  margin-right: 0;
+.action-btn[data-v-0c70c644] {
+  padding: 10px 20px;
+  font-weight: 500;
 }
-.coordinate-input {
-  margin-bottom: 20px;
+.mr-1[data-v-0c70c644] {
+  margin-right: 4px;
 }
-.dialog-footer {
-  text-align: right;
+
+/* Custom styling for inputs to look better */
+[data-v-0c70c644] .el-form-item__label {
+  font-weight: 500;
+  color: var(--el-text-color-primary);
 }
-.dialog-footer .el-button {
-  margin-left: 10px;
-}
 
 .region-dialog {
-.region-content {
-    max-height: 500px;
+.region-content {
+    max-height: 500px;
     overflow-y: auto;
 }
-:deep(.el-tabs__header) {
+:deep(.el-tabs__header) {
     margin: 0 0 20px 0;
 }
-:deep(.el-tabs__nav-wrap) {
+:deep(.el-tabs__nav-wrap) {
     padding: 0 20px;
 }
-:deep(.el-tabs__item) {
-    font-size: 16px;
-    font-weight: 500;
+:deep(.el-tabs__item) {
+    font-size: 16px;
+    font-weight: 500;
     color: #606266;
-&.is-active {
-      color: #409eff;
+&.is-active {
+      color: #409eff;
       font-weight: 600;
 }
 }
-:deep(.el-tabs__active-bar) {
+:deep(.el-tabs__active-bar) {
     background-color: #409eff;
 }
 .region-categories {
-.region-group {
+.region-group {
       margin-bottom: 20px;
-.group-title {
-        font-size: 14px;
-        font-weight: 600;
-        color: #606266;
-        margin-bottom: 10px;
-        padding-left: 8px;
+.group-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #606266;
+        margin-bottom: 10px;
+        padding-left: 8px;
         border-left: 3px solid #409eff;
 }
-.region-items {
-        display: flex;
-        flex-wrap: wrap;
+.region-items {
+        display: flex;
+        flex-wrap: wrap;
         gap: 8px;
-.region-btn {
-          margin: 0;
-          padding: 8px 16px;
-          border: 1px solid #dcdfe6;
-          border-radius: 4px;
-          background: #fff;
-          color: #606266;
+.region-btn {
+          margin: 0;
+          padding: 8px 16px;
+          border: 1px solid #dcdfe6;
+          border-radius: 4px;
+          background: #fff;
+          color: #606266;
           transition: all 0.3s;
-&:hover {
-            color: #409eff;
-            border-color: #409eff;
+&:hover {
+            color: #409eff;
+            border-color: #409eff;
             background: #ecf5ff;
 }
 }
@@ -2789,36 +2831,36 @@ to {
 }
 }
 .beijing-districts {
-.district-grid {
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      gap: 12px;
+.district-grid {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 12px;
       padding: 10px;
-.district-btn {
-        padding: 12px 8px;
-        border: 1px solid #dcdfe6;
-        border-radius: 6px;
-        background: #fff;
-        color: #606266;
-        font-size: 14px;
-        text-align: center;
-        transition: all 0.3s;
-        cursor: pointer;
-        min-height: 44px;
-        display: flex;
-        align-items: center;
+.district-btn {
+        padding: 12px 8px;
+        border: 1px solid #dcdfe6;
+        border-radius: 6px;
+        background: #fff;
+        color: #606266;
+        font-size: 14px;
+        text-align: center;
+        transition: all 0.3s;
+        cursor: pointer;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
         justify-content: center;
-&:hover {
-          color: #409eff;
-          border-color: #409eff;
-          background: #ecf5ff;
-          transform: translateY(-2px);
+&:hover {
+          color: #409eff;
+          border-color: #409eff;
+          background: #ecf5ff;
+          transform: translateY(-2px);
           box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
 }
-&.active {
-          color: #fff;
-          background: #409eff;
-          border-color: #409eff;
+&.active {
+          color: #fff;
+          background: #409eff;
+          border-color: #409eff;
           box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
 }
 }
@@ -2828,8 +2870,8 @@ to {
 @media (max-width: 768px) {
 .region-dialog {
 .beijing-districts {
-.district-grid {
-        grid-template-columns: repeat(3, 1fr);
+.district-grid {
+        grid-template-columns: repeat(3, 1fr);
         gap: 8px;
 }
 }
@@ -2838,234 +2880,266 @@ to {
 @media (max-width: 480px) {
 .region-dialog {
 .beijing-districts {
-.district-grid {
+.district-grid {
         grid-template-columns: repeat(2, 1fr);
 }
 }
 }
-}
-
-.markers-dialog {
-  --el-dialog-bg-color: #1a1a1a;
 }
-.markers-content {
-  padding: 10px 0;
+.markers-dialog .el-dialog__body {
+  padding: 0 !important;
 }
-.toolbar {
-  margin-bottom: 15px;
-  display: flex;
-  gap: 10px;
+.markers-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--el-bg-color);
 }
-.toolbar .adding-marker {
-  background-color: #f56c6c !important;
-  border-color: #f56c6c !important;
-  animation: pulse 1.5s infinite;
+.markers-content .toolbar {
+  padding: 12px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  background-color: var(--el-bg-color);
 }
-@keyframes pulse {
-0% {
-    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
+.markers-content .toolbar .adding-marker {
+  background-color: var(--el-color-danger) !important;
+  border-color: var(--el-color-danger) !important;
+  animation: pulse 1.5s infinite;
 }
-70% {
-    box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
+.markers-content .search-filter {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background-color: var(--el-fill-color-lighter);
+  border-bottom: 1px solid var(--el-border-color-lighter);
 }
-100% {
-    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
+.markers-content .markers-list {
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
 }
+.markers-content .markers-list .markers-table {
+  width: 100%;
 }
-.search-filter {
-  margin-bottom: 15px;
-  display: flex;
+.markers-content .markers-list .markers-table .marker-name {
+  display: flex;
   align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
 }
-.markers-list {
-  margin-bottom: 20px;
-}
-.markers-table {
-  --el-table-bg-color: transparent;
-  --el-table-tr-bg-color: transparent;
-  --el-table-header-bg-color: rgba(255, 255, 255, 0.05);
+.markers-content .markers-list .markers-table .delete-btn {
+  color: var(--el-color-danger);
 }
-.marker-name {
-  display: flex;
-  align-items: center;
-  gap: 5px;
+.markers-content .markers-list .markers-table .delete-btn:hover {
+  color: var(--el-color-danger-light-3);
 }
-.delete-btn {
-  color: #f56c6c;
+@keyframes pulse {
+0% {
+    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
 }
-.delete-btn:hover {
-  color: #f78989;
+70% {
+    box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
 }
-.statistics {
-  padding: 15px;
-  background: rgba(64, 158, 255, 0.05);
-  border-radius: 6px;
-  border: 1px solid rgba(64, 158, 255, 0.2);
+100% {
+    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
 }
-.dialog-footer {
-  text-align: right;
-}
-
-.bookmarks-dialog {
-  --el-dialog-bg-color: #1a1a1a;
+}.bookmarks-dialog .el-dialog__body {
+  padding: 0 !important;
 }
-.bookmarks-content {
-  padding: 10px 0;
+.bookmarks-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--el-bg-color);
 }
-.toolbar {
-  margin-bottom: 15px;
-  display: flex;
-  gap: 10px;
+.bookmarks-content .toolbar {
+  padding: 12px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  background-color: var(--el-bg-color);
+  margin-bottom: 0;
 }
-.search-filter {
-  margin-bottom: 15px;
-  display: flex;
+.bookmarks-content .search-filter {
+  padding: 12px 16px;
+  display: flex;
   align-items: center;
+  gap: 10px;
+  background-color: var(--el-fill-color-lighter);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  margin-bottom: 0;
 }
-.bookmarks-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 15px;
-  margin-bottom: 20px;
-  max-height: 400px;
+.bookmarks-content .bookmarks-grid {
+  flex: 1;
   overflow-y: auto;
+  padding: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  margin-bottom: 0;
+  max-height: none;
 }
-.bookmark-card {
-  border: 1px solid #303133;
-  border-radius: 8px;
-  overflow: hidden;
-  background: rgba(255, 255, 255, 0.02);
-  transition: all 0.3s ease;
+.bookmarks-content .bookmarks-grid::-webkit-scrollbar {
+  width: 6px;
+}
+.bookmarks-content .bookmarks-grid::-webkit-scrollbar-track {
+  background: var(--el-fill-color-light);
+  border-radius: 3px;
+}
+.bookmarks-content .bookmarks-grid::-webkit-scrollbar-thumb {
+  background: var(--el-border-color);
+  border-radius: 3px;
+}
+.bookmarks-content .bookmarks-grid::-webkit-scrollbar-thumb:hover {
+  background: var(--el-border-color-darker);
+}
+.bookmarks-content .bookmark-card {
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--el-bg-color-overlay);
+  transition: all 0.3s ease;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
 }
-.bookmark-card:hover {
-  border-color: #409eff;
-  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+.bookmarks-content .bookmark-card:hover {
+  border-color: var(--el-color-primary);
+  box-shadow: var(--el-box-shadow-light);
   transform: translateY(-2px);
 }
-.bookmark-thumbnail {
-  position: relative;
-  height: 120px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
+.bookmarks-content .bookmark-card .bookmark-thumbnail {
+  position: relative;
+  height: 140px;
+  background: var(--el-fill-color-light);
+  display: flex;
+  align-items: center;
   justify-content: center;
+  overflow: hidden;
 }
-.thumbnail-placeholder {
+.bookmarks-content .bookmark-card .bookmark-thumbnail .thumbnail-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.bookmarks-content .bookmark-card .bookmark-thumbnail .thumbnail-placeholder {
   opacity: 0.6;
 }
-.bookmark-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
+.bookmarks-content .bookmark-card .bookmark-thumbnail .bookmark-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
   transition: opacity 0.3s ease;
+  backdrop-filter: blur(2px);
 }
-.bookmark-card:hover .bookmark-overlay {
+.bookmarks-content .bookmark-card:hover .bookmark-overlay {
   opacity: 1;
 }
-.bookmark-info {
+.bookmarks-content .bookmark-card .bookmark-info {
   padding: 12px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
-.bookmark-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #e4e7ed;
-  margin-bottom: 8px;
-  white-space: nowrap;
-  overflow: hidden;
+.bookmarks-content .bookmark-card .bookmark-info .bookmark-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
-.bookmark-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.bookmarks-content .bookmark-card .bookmark-info .bookmark-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 8px;
 }
-.use-count {
-  font-size: 12px;
-  color: #909399;
-}
-.bookmark-description {
-  font-size: 12px;
-  color: #c0c4cc;
-  margin-bottom: 8px;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+.bookmarks-content .bookmark-card .bookmark-info .bookmark-meta .use-count {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.bookmarks-content .bookmark-card .bookmark-info .bookmark-description {
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+  margin-bottom: 12px;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
+  height: 36px;
 }
-.bookmark-details {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 8px;
+.bookmarks-content .bookmark-card .bookmark-info .bookmark-details {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
 }
-.detail-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: #909399;
+.bookmarks-content .bookmark-card .bookmark-info .bookmark-details .detail-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
 }
-.bookmark-time {
-  font-size: 11px;
-  color: #606266;
+.bookmarks-content .bookmark-card .bookmark-info .bookmark-time {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
   text-align: right;
 }
-.delete-btn {
-  color: #f56c6c;
-}
-.delete-btn:hover {
-  color: #f78989;
-}
-.empty-state {
-  text-align: center;
-  padding: 40px 0;
+.bookmarks-content .empty-state {
+  text-align: center;
+  padding: 60px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
 }
-.statistics {
-  padding: 15px;
-  background: rgba(64, 158, 255, 0.05);
-  border-radius: 6px;
-  border: 1px solid rgba(64, 158, 255, 0.2);
+.bookmarks-content .statistics {
+  padding: 12px 16px;
+  background-color: var(--el-fill-color-light);
+  border-top: 1px solid var(--el-border-color-lighter);
 }
-.dialog-footer {
-  text-align: right;
-}
-
-/* 自定义滚动条 */
-.bookmarks-grid::-webkit-scrollbar {
-  width: 6px;
+.bookmarks-content .statistics :deep(.el-statistic__title) {
+  font-size: 12px;
+  margin-bottom: 4px;
 }
-.bookmarks-grid::-webkit-scrollbar-track {
-  background: #2c2c2c;
-  border-radius: 3px;
+.bookmarks-content .statistics :deep(.el-statistic__content) {
+  font-size: 18px;
 }
-.bookmarks-grid::-webkit-scrollbar-thumb {
-  background: #409eff;
-  border-radius: 3px;
+.delete-btn {
+  color: var(--el-color-danger);
 }
-.bookmarks-grid::-webkit-scrollbar-thumb:hover {
-  background: #66b1ff;
-}
-.mark-tab-container[data-v-b5ca6d89] {
+.delete-btn:hover {
+  color: var(--el-color-danger-light-3);
+}.mark-tab-container[data-v-72865d9e] {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 12px;
 }
-.type-select[data-v-b5ca6d89] {
+.type-select[data-v-72865d9e] {
   width: 100%;
   margin-bottom: 12px;
 }
-.continuous-switch[data-v-b5ca6d89] {
+.continuous-switch[data-v-72865d9e] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3074,18 +3148,18 @@ to {
   background-color: #f9fafb;
   border-radius: 6px;
 }
-.switch-label[data-v-b5ca6d89] {
+.switch-label[data-v-72865d9e] {
   font-size: 14px;
   color: #374151;
 }
-.tools-grid[data-v-b5ca6d89] {
+.tools-grid[data-v-72865d9e] {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   flex: 1;
   overflow: auto;
 }
-.tool-item[data-v-b5ca6d89] {
+.tool-item[data-v-72865d9e] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3096,28 +3170,28 @@ to {
   cursor: pointer;
   transition: all 0.3s ease;
 }
-.tool-item[data-v-b5ca6d89]:hover {
+.tool-item[data-v-72865d9e]:hover {
   background-color: #f3f4f6;
   border-color: #60a5fa;
 }
-.tool-image[data-v-b5ca6d89] {
+.tool-image[data-v-72865d9e] {
   width: 24px;
   height: 24px;
   margin-bottom: 4px;
 }
-.tool-icon-large[data-v-b5ca6d89] {
+.tool-icon-large[data-v-72865d9e] {
   font-size: 24px;
   margin-bottom: 4px;
 }
-.tool-label[data-v-b5ca6d89] {
+.tool-label[data-v-72865d9e] {
   font-size: 12px;
   color: #6b7280;
   text-align: center;
 }
-.tool-item:hover .tool-label[data-v-b5ca6d89] {
+.tool-item:hover .tool-label[data-v-72865d9e] {
   color: #3b82f6;
 }
-.stop-drawing-section[data-v-b5ca6d89] {
+.stop-drawing-section[data-v-72865d9e] {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid #e5e7eb;
@@ -3132,61 +3206,61 @@ to {
   width: 100%;
   font-weight: 500;
 }
-.list-tab-container[data-v-148877f2] {
+.list-tab-container[data-v-7222689f] {
   display: flex;
   flex-direction: column;
   height: 100%;
   font-size: 14px;
 }
-.toolbar[data-v-148877f2] {
+.toolbar[data-v-7222689f] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 4px 8px;
   border-bottom: 1px solid #d1d5db;
 }
-.toolbar-left[data-v-148877f2] {
+.toolbar-left[data-v-7222689f] {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.toolbar-title[data-v-148877f2] {
+.toolbar-title[data-v-7222689f] {
   font-weight: 500;
 }
-.toolbar-icon[data-v-148877f2] {
+.toolbar-icon[data-v-7222689f] {
   font-size: 16px;
 }
-.data-count[data-v-148877f2] {
+.data-count[data-v-7222689f] {
   color: #6b7280;
 }
-.list-content[data-v-148877f2] {
+.list-content[data-v-7222689f] {
   flex: 1;
   overflow: auto;
   padding: 4px;
 }
-.tree-component[data-v-148877f2] {
+.tree-component[data-v-7222689f] {
   font-size: 14px;
 }
-.tree-node[data-v-148877f2] {
+.tree-node[data-v-7222689f] {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.node-icon[data-v-148877f2] {
+.node-icon[data-v-7222689f] {
   font-size: 16px;
 }
-.empty-state[data-v-148877f2] {
+.empty-state[data-v-7222689f] {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9ca3af;
-}.dialog-content[data-v-c695eece] {
+}.dialog-content[data-v-57937348] {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.toolbar[data-v-c695eece] {
+.toolbar[data-v-57937348] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3194,46 +3268,46 @@ to {
   border-bottom: 1px solid #e5e7eb;
   background-color: #f9fafb;
 }
-.toolbar-left[data-v-c695eece] {
+.toolbar-left[data-v-57937348] {
   display: flex;
   align-items: center;
   gap: 20px;
 }
-.toolbar-right[data-v-c695eece] {
+.toolbar-right[data-v-57937348] {
   display: flex;
   align-items: center;
   gap: 20px;
 }
-.tool-icon[data-v-c695eece] {
+.tool-icon[data-v-57937348] {
   font-size: 20px;
   cursor: pointer;
   color: #6b7280;
   transition: color 0.3s ease;
 }
-.tool-icon[data-v-c695eece]:hover {
+.tool-icon[data-v-57937348]:hover {
   color: var(--el-color-primary, #409eff);
 }
-.content-area[data-v-c695eece] {
+.content-area[data-v-57937348] {
   flex: 1;
   overflow: hidden;
 }
-.tabs-container[data-v-c695eece] {
+.tabs-container[data-v-57937348] {
   height: 100%;
 }
-.map-drawing-dialog[data-v-c695eece] .el-tabs {
+.map-drawing-dialog[data-v-57937348] .el-tabs {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.map-drawing-dialog[data-v-c695eece] .el-tabs__content {
+.map-drawing-dialog[data-v-57937348] .el-tabs__content {
   flex: 1;
   overflow: auto;
   padding: 12px;
 }
-.map-drawing-dialog[data-v-c695eece] .el-tabs__nav-wrap {
+.map-drawing-dialog[data-v-57937348] .el-tabs__nav-wrap {
   padding: 0 10px;
 }
-.map-drawing-dialog[data-v-c695eece] .el-tabs__item {
+.map-drawing-dialog[data-v-57937348] .el-tabs__item {
   font-size: 14px;
   font-weight: 500;
   padding: 0 20px;
@@ -3241,10 +3315,10 @@ to {
   line-height: 40px;
   transition: all 0.3s;
 }
-.map-drawing-dialog[data-v-c695eece] .el-tabs__item.is-active {
+.map-drawing-dialog[data-v-57937348] .el-tabs__item.is-active {
   color: var(--el-color-primary);
   font-weight: 600;
 }
-.map-drawing-dialog[data-v-c695eece] .el-tabs__item:hover {
+.map-drawing-dialog[data-v-57937348] .el-tabs__item:hover {
   color: var(--el-color-primary);
 }