vue-openlayers-plugin 1.0.82 → 1.0.85

package/lib/style.css

@@ -683,1870 +683,1025 @@
 }
 
 
-
-/* 右侧滑入动画 */
-.fixed.items-stretch.justify-end .bg-white {
-  animation: slideInRight 0.3s ease-out;
-}
-.fixed.items-stretch.justify-start .bg-white {
-  animation: slideInLeft 0.3s ease-out;
+.map-toolbar[data-v-65f64ab9] {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  height: 32px;
 }
-.fixed.items-start.justify-center .bg-white {
-  animation: slideInTop 0.3s ease-out;
+[data-v-65f64ab9].el-menu--horizontal {
+  height: 100% !important;
+}.map-search-container {
+  position: absolute;
+  z-index: 99;
+  min-width: 300px;
+  max-width: 400px;
 }
-.fixed.items-end.justify-center .bg-white {
-  animation: slideInBottom 0.3s ease-out;
+
+/* 位置样式 */
+.position-top-left {
+  top: 10px;
+  left: 10px;
 }
-@keyframes slideInRight {
-from {
-    transform: translateX(100%);
+.position-top-right {
+  top: 10px;
+  right: 10px;
 }
-to {
-    transform: translateX(0);
+.position-bottom-left {
+  bottom: 10px;
+  left: 10px;
 }
+.position-bottom-right {
+  bottom: 10px;
+  right: 10px;
 }
-@keyframes slideInLeft {
-from {
-    transform: translateX(-100%);
+.search-input-wrapper {
+  position: relative;
 }
-to {
-    transform: translateX(0);
+.search-input {
+  width: 100%;
 }
+.search-input :deep(.el-input__inner) {
+  transition: all 0.3s ease;
 }
-@keyframes slideInTop {
-from {
-    transform: translateY(-100%);
+.search-active .search-input :deep(.el-input__inner) {
+  border-color: #409eff;
+  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
 }
-to {
-    transform: translateY(0);
+.search-icon {
+  color: #909399;
 }
+.loading-icon {
+  color: #409eff;
+  animation: rotate 1s linear infinite;
 }
-@keyframes slideInBottom {
+@keyframes rotate {
 from {
-    transform: translateY(100%);
+    transform: rotate(0deg);
 }
 to {
-    transform: translateY(0);
-}
-}
-
-/* 调整右侧对话框的样式 */
-.fixed.items-stretch.justify-end .bg-white,
-.fixed.items-stretch.justify-start .bg-white {
-  max-width: none;
-  max-height: none;
-  border-radius: 0;
-  height: 100vh;
+    transform: rotate(360deg);
 }
-
-/* 调整上下对话框的样式 */
-.fixed.items-start.justify-center .bg-white,
-.fixed.items-end.justify-center .bg-white {
-  max-height: none;
-  width: 100vw;
-  border-radius: 0;
 }
-
-/* 调整大小控制点样式 */
-.resize-n {
-  top: -3px;
+.search-results {
+  position: absolute;
+  top: 100%;
   left: 0;
   right: 0;
-  height: 6px;
-  cursor: n-resize;
-}
-.resize-ne {
-  top: -3px;
-  right: -3px;
-  width: 6px;
-  height: 6px;
-  cursor: ne-resize;
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-height: 400px;
+  overflow-y: auto;
+  z-index: 10000;
+  margin-top: 4px;
 }
-.resize-e {
-  top: 0;
-  right: -3px;
-  bottom: 0;
-  width: 6px;
-  cursor: e-resize;
+.search-section {
+  padding: 8px 0;
 }
-.resize-se {
-  bottom: -3px;
-  right: -3px;
-  width: 6px;
-  height: 6px;
-  cursor: se-resize;
+.search-section:not(:last-child) {
+  border-bottom: 1px solid #f0f0f0;
 }
-.resize-s {
-  bottom: -3px;
-  left: 0;
-  right: 0;
-  height: 6px;
-  cursor: s-resize;
+.section-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: #909399;
+  font-weight: 500;
 }
-.resize-sw {
-  bottom: -3px;
-  left: -3px;
-  width: 6px;
-  height: 6px;
-  cursor: sw-resize;
+.result-count {
+  color: #c0c4cc;
 }
-.resize-w {
-  top: 0;
-  left: -3px;
-  bottom: 0;
-  width: 6px;
-  cursor: w-resize;
+.search-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
 }
-.resize-nw {
-  top: -3px;
-  left: -3px;
-  width: 6px;
-  height: 6px;
-  cursor: nw-resize;
+.search-item:hover,
+.search-item.active {
+  background-color: #f5f7fa;
 }
-
-/* 底图对话框样式 */
-.basemap-dialog {
-  /* CustomDialog 会处理右侧滑入动画 */
+.item-icon {
+  margin-right: 12px;
+  color: #909399;
+  font-size: 16px;
+  flex-shrink: 0;
 }
-
-/* 底图内容容器 */
-.basemap-content {
-  padding: 16px;
-  height: 100%;
-  overflow: visible;
+.history-item .item-icon {
+  color: #c0c4cc;
 }
-
-/* 底图网格布局 */
-.basemap-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 16px;
-  padding: 8px 0;
+.result-item .item-icon {
+  color: #409eff;
 }
-
-/* 底图项目 */
-.basemap-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px;
-  border: 2px solid transparent;
-  border-radius: 12px;
-  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);
+.item-content {
+  flex: 1;
+  min-width: 0;
 }
-.basemap-item: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%);
+.item-name {
+  font-size: 14px;
+  color: #303133;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.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);
+.item-name :deep(mark) {
+  background-color: #fff2cc;
+  color: #e6a23c;
+  padding: 0 2px;
+  border-radius: 2px;
 }
-
-/* 底图预览图片 */
-.basemap-preview {
-  width: 100px;
-  height: 75px;
-  border-radius: 8px;
+.item-address {
+  font-size: 12px;
+  color: #909399;
+  white-space: nowrap;
   overflow: hidden;
-  margin-bottom: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
+  text-overflow: ellipsis;
 }
-.basemap-item:hover .basemap-preview {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  transform: scale(1.05);
+.item-address :deep(mark) {
+  background-color: #fff2cc;
+  color: #e6a23c;
+  padding: 0 2px;
+  border-radius: 2px;
 }
-.basemap-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: all 0.3s ease;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
+.item-type {
+  font-size: 11px;
+  color: #c0c4cc;
+  margin-top: 2px;
 }
-
-/* 底图名称 */
-.basemap-name {
+.item-confidence {
   font-size: 12px;
-  font-weight: 500;
-  color: #374151;
-  text-align: center;
-  line-height: 1.4;
-  transition: all 0.3s ease;
-}
-.basemap-item:hover .basemap-name {
-  color: #1f2937;
-  font-weight: 600;
+  color: #67c23a;
+  margin-left: 8px;
+  flex-shrink: 0;
 }
-.basemap-item.active .basemap-name {
-  color: #3b82f6;
-  font-weight: 600;
+.no-results {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+  color: #909399;
+  font-size: 14px;
 }
-
-/* 底图网格 */
-.basemap-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 16px;
+.no-results .el-icon {
+  margin-right: 8px;
+  font-size: 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;
+/* 响应式设计 */
+@media (max-width: 768px) {
+.map-search-container {
+    min-width: 280px;
+    max-width: calc(100vw - 20px);
 }
-.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);
+.position-top-left,
+  .position-top-right {
+    top: 5px;
 }
-.basemap-item:hover::before {
-  opacity: 1;
+.position-top-left,
+  .position-bottom-left {
+    left: 5px;
 }
-.basemap-item.active {
-  border-color: #3b82f6;
-  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
-  transform: translateY(-2px);
+.position-top-right,
+  .position-bottom-right {
+    right: 5px;
 }
-.basemap-item.active::before {
-  opacity: 0.7;
+.position-bottom-left,
+  .position-bottom-right {
+    bottom: 5px;
 }
-
-/* 底图预览 */
-.basemap-preview {
-  width: 100%;
-  height: 80px;
-  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+}.control-group[data-v-e2bbe659] {
   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;
+  gap: 6px;
+  /* re-enable interactions inside the controls container */
+  pointer-events: auto;
 }
-.basemap-item:hover .basemap-preview img {
-  transform: scale(1.1);
+
+/* when direction becomes column, keep spacing vertical */
+.control-group.flex-col[data-v-e2bbe659] {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
 }
 
-/* 底图名称 */
-.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;
+/* ensure buttons themselves are interactive */
+.control-btn[data-v-e2bbe659] {
+  pointer-events: auto;
 }
-.basemap-item.active .basemap-name {
-  color: #1f2937;
-  font-weight: 600;
+
+/* reset Element Plus button default adjacent margin and use our gap instead */
+[data-v-e2bbe659] .el-button + .el-button {
+  margin-left: 0 !important;
 }
 
-/* 响应式设计 */
-@media (max-width: 480px) {
-.basemap-panel {
-    width: 100%;
+/* make sure all EP interactive widgets are clickable */
+[data-v-e2bbe659] .el-button,[data-v-e2bbe659] .el-slider,[data-v-e2bbe659] .el-icon {
+  pointer-events: auto;
 }
-.basemap-grid {
-    grid-template-columns: 1fr;
+.absolute { 
+  position: absolute;
 }
-.panel-content {
-    padding: 16px;
+.bottom-40px {
+  bottom: 40px;
+}
+
+/* 图例面板样式 */
+.legend-collapsed {
+  transform: translateX(calc(100% - 40px));
 }
+.legend-collapsed:hover {
+  transform: translateX(0);
+}
+
+/* 图例项样式 */
+.legend-item {
+@apply mb-2 last:mb-0;
 }
-
-/* 动画关键帧 */
-@keyframes slideInRight {
-from {
-    transform: translateX(100%);
-    opacity: 0;
+.legend-title {
+@apply text-sm font-medium text-gray-700 mb-2;
 }
-to {
-    transform: translateX(0);
-    opacity: 1;
+.legend-content {
+@apply space-y-1;
 }
+.legend-symbol {
+@apply inline-block mr-2 align-middle;
 }
-@keyframes slideOutRight {
-from {
-    transform: translateX(0);
-    opacity: 1;
+.legend-label {
+@apply text-xs text-gray-600 align-middle;
+}
+
+/* 渐变图例样式 */
+.gradient-legend {
+@apply h-4 rounded mb-1;
 }
-to {
-    transform: translateX(100%);
-    opacity: 0;
+.gradient-labels {
+@apply flex justify-between text-xs text-gray-500;
+}
+
+/* 分类图例样式 */
+.category-legend {
+@apply flex items-center mb-1;
 }
+.category-symbol {
+@apply w-4 h-4 mr-2 rounded-sm;
+}
+
+/* 符号图例样式 */
+.symbol-legend {
+@apply flex items-center mb-1;
 }
-/* 让样式穿透到 CustomDialog 内部容器（其上有我们传入的 class="measurement-dialog"） */
-[data-v-d868b567] .measurement-dialog {
-  background-color: transparent !important; /* 覆盖 CustomDialog 根容器的 bg-white */
-  box-shadow: none !important;
+.symbol-item {
+@apply w-4 h-4 mr-2;
+}
+
+/* 面板头部样式 */
+.legend-header {
+@apply flex items-center justify-between p-3 border-b border-gray-200;
 }
-
-/* 让 CustomDialog 自带的标题栏不再是灰底 */
-[data-v-d868b567] .measurement-dialog .bg-gray-50 {
-  background-color: transparent !important;
-  border-bottom-color: transparent !important;
+.legend-body {
+@apply p-3 max-h-96 overflow-y-auto;
+}
+
+/* 折叠按钮样式 */
+.collapse-btn {
+@apply p-1 rounded hover:bg-gray-100 transition-colors;
 }
+.close-btn {
+@apply p-1 rounded hover:bg-gray-100 transition-colors text-gray-500 hover:text-gray-700;
+}
 
-/* 保留以下原有样式 */
-.measurement-dialog[data-v-d868b567] {
-  --el-dialog-bg-color: transparent;
-  --el-dialog-title-font-size: 16px;
-  --el-dialog-box-shadow: none;
+.filter-panel {
+.config-section {
+    margin-bottom: 16px;
+h5 {
+      margin: 0 0 12px 0;
+      font-size: 13px;
+      font-weight: 500;
+      color: #666;
 }
-.measurement-content[data-v-d868b567] {
-  background: transparent;
-  border-radius: 12px;
-  overflow: hidden;
+.config-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      gap: 8px;
+label {
+        flex: 0 0 60px;
+        font-size: 12px;
+        color: #666;
 }
-.measurement-header[data-v-d868b567] {
-  background: transparent;
-  backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(226, 232, 240, 0);
+.el-slider {
+        flex: 1;
+        margin: 0 8px;
 }
-.measurement-result[data-v-d868b567] {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.value-text {
+        flex: 0 0 45px;
+        font-size: 12px;
+        color: #999;
+        text-align: right;
 }
-.result-value[data-v-d868b567] {
-  font-size: 42px;
-  font-weight: 600;
-  color: #3b82f6;
-  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-d868b567] {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  column-gap: 18px;
-  row-gap: 12px;
-  justify-items: center;
-  align-items: start;
+.preset-buttons {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+.el-button {
+        flex: 1;
+        min-width: 60px;
 }
-.tool-item[data-v-d868b567] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  transition: transform 0.2s ease;
 }
-.tool-icon[data-v-d868b567] {
-  width: 28px;
-  height: 28px;
-  padding: 14px; /* 28 + 14*2 = 56px 的方块 */
-  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;
-  margin-bottom: 10px;
 }
-.tool-item:hover .tool-icon[data-v-d868b567],
-.tool-item.active .tool-icon[data-v-d868b567] {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  border-color: #c8d4e6;
 }
-.tool-label[data-v-d868b567] {
-  font-size: 14px;
-  line-height: 1.2;
-  color: #334155; /* 不改变整体背景，仅优化文字可读性 */
-  font-weight: 500;
-  white-space: nowrap;
+
+.style-config-panel {
+  padding: 0;
+.panel-title {
+    margin: 0 0 16px 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 8px;
 }
-.dialog-footer[data-v-d868b567] {
-@apply hidden;
+.config-section {
+    margin-bottom: 16px;
+h5 {
+      margin: 0 0 12px 0;
+      font-size: 13px;
+      font-weight: 500;
+      color: #666;
 }
-.coordinate-dialog {
-  --el-dialog-bg-color: #1a1a1a;
+.config-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      gap: 8px;
+label {
+        flex: 0 0 60px;
+        font-size: 12px;
+        color: #666;
 }
-.coordinate-content {
-  padding: 10px 0;
+.el-slider {
+        flex: 1;
+        margin: 0 8px;
 }
-.format-selection {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border: 1px solid #e9ecef;
+.el-select {
+        flex: 1;
 }
-.format-title {
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #495057;
+.value-text {
+        flex: 0 0 45px;
+        font-size: 12px;
+        color: #999;
+        text-align: right;
 }
-.format-options {
-  display: flex;
-  gap: 20px;
 }
-.format-options :deep(.el-radio) {
-  margin-right: 0;
 }
-.coordinate-input {
-  margin-bottom: 20px;
+.panel-actions {
+    padding-top: 12px;
+    border-top: 1px solid #eee;
+    text-align: center;
 }
-.dialog-footer {
-  text-align: right;
 }
-.dialog-footer .el-button {
-  margin-left: 10px;
-}
 
-.region-dialog {
-.region-content {
-    max-height: 500px;
-    overflow-y: auto;
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 4px 0;
 }
-:deep(.el-tabs__header) {
-    margin: 0 0 20px 0;
+.group-node {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: #333;
 }
-:deep(.el-tabs__nav-wrap) {
-    padding: 0 20px;
+.layer-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 2px 0;
+.layer-info {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+.layer-icon {
+      margin-right: 8px;
+      font-size: 14px;
 }
-:deep(.el-tabs__item) {
-    font-size: 16px;
-    font-weight: 500;
-    color: #606266;
-&.is-active {
-      color: #409eff;
-      font-weight: 600;
+.layer-name {
+      font-size: 13px;
+      color: #333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 }
 }
-:deep(.el-tabs__active-bar) {
-    background-color: #409eff;
+.layer-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+.opacity-control {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+.opacity-slider {
+        width: 60px;
 }
-.region-categories {
-.region-group {
-      margin-bottom: 20px;
-.group-title {
-        font-size: 14px;
-        font-weight: 600;
-        color: #606266;
-        margin-bottom: 10px;
-        padding-left: 8px;
-        border-left: 3px solid #409eff;
+.opacity-value {
+        font-size: 11px;
+        color: #999;
+        min-width: 30px;
+        text-align: right;
 }
-.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;
-          transition: all 0.3s;
-&:hover {
-            color: #409eff;
-            border-color: #409eff;
-            background: #ecf5ff;
 }
+.style-config-btn {
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      margin-left: 4px;
 }
 }
 }
+.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}
+
+.layer-dialog {
+  /* 全局样式面板样式 */
+.global-style-panel {
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+    background-color: #f8f9fa;
+.panel-title {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      border-bottom: 1px solid #ddd;
+      padding-bottom: 8px;
 }
-.beijing-districts {
-.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;
+.config-section {
+      margin-bottom: 16px;
+h5 {
+        margin: 0 0 12px 0;
+        font-size: 13px;
+        font-weight: 500;
+        color: #666;
+}
+.config-item {
         display: flex;
         align-items: center;
-        justify-content: center;
-&: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;
-          box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
+        margin-bottom: 12px;
+        gap: 8px;
+label {
+          flex: 0 0 60px;
+          font-size: 12px;
+          color: #666;
 }
+.el-slider {
+          flex: 1;
+          margin: 0 8px;
 }
+.value-text {
+          flex: 0 0 45px;
+          font-size: 12px;
+          color: #999;
+          text-align: right;
 }
 }
+.preset-buttons {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+.el-button {
+          flex: 1;
+          min-width: 60px;
 }
-@media (max-width: 768px) {
-.region-dialog {
-.beijing-districts {
-.district-grid {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 8px;
 }
 }
+.panel-actions {
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px solid #ddd;
+      text-align: center;
 }
+.custom-css-input {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
+      line-height: 1.4;
 }
-@media (max-width: 480px) {
-.region-dialog {
-.beijing-districts {
-.district-grid {
-        grid-template-columns: repeat(2, 1fr);
+.custom-css-input :deep(.el-textarea__inner) {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
+      line-height: 1.4;
+      background-color: #fff;
+      border: 1px solid #e9ecef;
 }
+.style-tabs {
+:deep(.el-tabs__header) {
+        margin: 0 0 16px 0;
 }
+:deep(.el-tabs__nav-wrap) {
+        padding: 0;
 }
-}
-
-.markers-dialog {
-  --el-dialog-bg-color: #1a1a1a;
+:deep(.el-tabs__item) {
+        font-size: 12px;
+        padding: 0 16px;
+        height: 32px;
+        line-height: 32px;
 }
-.markers-content {
-  padding: 10px 0;
+:deep(.el-tabs__content) {
+        padding: 0;
 }
-.toolbar {
-  margin-bottom: 15px;
-  display: flex;
-  gap: 10px;
 }
-.toolbar .adding-marker {
-  background-color: #f56c6c !important;
-  border-color: #f56c6c !important;
-  animation: pulse 1.5s infinite;
+.current-style-display {
+      margin-top: 16px;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 4px;
+      border: 1px solid #e9ecef;
+h6 {
+        margin: 0 0 8px 0;
+        font-size: 12px;
+        font-weight: 500;
+        color: #666;
 }
-@keyframes pulse {
-0% {
-    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
+.style-preview {
+        font-family: "Courier New", monospace;
+        font-size: 11px;
+        line-height: 1.4;
+        color: #333;
+        background-color: #fff;
+        padding: 8px;
+        border-radius: 3px;
+        border: 1px solid #ddd;
+        word-break: break-all;
+        white-space: pre-wrap;
+        max-height: 120px;
+        overflow-y: auto;
 }
-70% {
-    box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
 }
-100% {
-    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
-}
-}
-.search-filter {
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-}
-.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);
-}
-.marker-name {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-.delete-btn {
-  color: #f56c6c;
-}
-.delete-btn:hover {
-  color: #f78989;
+}
+
+  /* 主标签页样式 */
+.main-tabs {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
-.statistics {
-  padding: 15px;
-  background: rgba(64, 158, 255, 0.05);
-  border-radius: 6px;
-  border: 1px solid rgba(64, 158, 255, 0.2);
+.main-tabs .el-tabs__content {
+    flex: 1;
+    overflow: hidden;
+    padding: 0;
 }
-.dialog-footer {
-  text-align: right;
-}
-
-.bookmarks-dialog {
-  --el-dialog-bg-color: #1a1a1a;
+.main-tabs .el-tab-pane {
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
 }
-.bookmarks-content {
-  padding: 10px 0;
+.layer-tree {
+.tree-node-content {
+      width: 100%;
+.group-node {
+        display: flex;
+        align-items: center;
+        padding: 8px 0;
 }
-.toolbar {
-  margin-bottom: 15px;
-  display: flex;
-  gap: 10px;
+.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;
+          min-width: 0;
+.layer-icon {
+            margin-right: 8px;
+            flex-shrink: 0;
 }
-.search-filter {
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
+.layer-name {
+            font-size: 14px;
+            color: #333;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
 }
-.bookmarks-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 15px;
-  margin-bottom: 20px;
-  max-height: 400px;
-  overflow-y: auto;
 }
-.bookmark-card {
-  border: 1px solid #303133;
-  border-radius: 8px;
-  overflow: hidden;
-  background: rgba(255, 255, 255, 0.02);
-  transition: all 0.3s ease;
-  cursor: pointer;
+.layer-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+.opacity-control {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            min-width: 120px;
+.opacity-slider {
+              flex: 1;
+              min-width: 80px;
 }
-.bookmark-card:hover {
-  border-color: #409eff;
-  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
-  transform: translateY(-2px);
+.opacity-value {
+              font-size: 12px;
+              color: #666;
+              min-width: 35px;
+              text-align: right;
+              white-space: nowrap;
 }
-.bookmark-thumbnail {
-  position: relative;
-  height: 120px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
-.thumbnail-placeholder {
-  opacity: 0.6;
+.style-config-btn {
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            margin-left: 4px;
 }
-.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;
-  transition: opacity 0.3s ease;
 }
-.bookmark-card:hover .bookmark-overlay {
-  opacity: 1;
 }
-.bookmark-info {
-  padding: 12px;
 }
-.bookmark-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #e4e7ed;
-  margin-bottom: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-.bookmark-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
+}
+
+/* 样式配置面板样式 */
+:deep(.layer-style-popover) {
+.style-config-panel {
+    padding: 0;
+.panel-title {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 8px;
 }
-.use-count {
-  font-size: 12px;
-  color: #909399;
+.config-section {
+      margin-bottom: 16px;
+h5 {
+        margin: 0 0 12px 0;
+        font-size: 13px;
+        font-weight: 500;
+        color: #666;
 }
-.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;
-  overflow: hidden;
+.config-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+        gap: 8px;
+label {
+          flex: 0 0 60px;
+          font-size: 12px;
+          color: #666;
 }
-.bookmark-details {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 8px;
+.el-slider {
+          flex: 1;
+          margin: 0 8px;
 }
-.detail-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: #909399;
+.value-text {
+          flex: 0 0 45px;
+          font-size: 12px;
+          color: #999;
+          text-align: right;
 }
-.bookmark-time {
-  font-size: 11px;
-  color: #606266;
-  text-align: right;
 }
-.delete-btn {
-  color: #f56c6c;
+.preset-buttons {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+.el-button {
+          flex: 1;
+          min-width: 60px;
 }
-.delete-btn:hover {
-  color: #f78989;
 }
-.empty-state {
-  text-align: center;
-  padding: 40px 0;
 }
-.statistics {
-  padding: 15px;
-  background: rgba(64, 158, 255, 0.05);
-  border-radius: 6px;
-  border: 1px solid rgba(64, 158, 255, 0.2);
+.panel-actions {
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px solid #eee;
+      text-align: center;
 }
-.dialog-footer {
-  text-align: right;
-}
-
-/* 自定义滚动条 */
-.bookmarks-grid::-webkit-scrollbar {
-  width: 6px;
+.custom-css-input {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
+      line-height: 1.4;
 }
-.bookmarks-grid::-webkit-scrollbar-track {
-  background: #2c2c2c;
-  border-radius: 3px;
+.custom-css-input :deep(.el-textarea__inner) {
+      font-family: "Courier New", monospace;
+      font-size: 12px;
+      line-height: 1.4;
+      background-color: #f8f9fa;
+      border: 1px solid #e9ecef;
 }
-.bookmarks-grid::-webkit-scrollbar-thumb {
-  background: #409eff;
-  border-radius: 3px;
 }
-.bookmarks-grid::-webkit-scrollbar-thumb:hover {
-  background: #66b1ff;
 }
 
-/* 地图预览容器样式 */
-.map-preview-container > div {
-  width: 100% !important;
-  height: 100% !important;
+.ol-base-layer-switcher[data-v-6a7660a8] {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 100;
+  height: 70px; /* 60px + 5px padding * 2 */
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  padding: 5px;
+  box-sizing: border-box;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  /* 即使内容还没出来，也要从右边开始长出来 */
+  display: flex;
+  justify-content: flex-end;
 }
 
-/* 预览页面缩放变换 */
-.preview-page {
-  transform-origin: top center;
+/* 列表面板 */
+.layer-panel[data-v-6a7660a8] {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+  /* 绝对定位以防止宽度变化时的挤压，或者使用flex布局 */
+  min-width: max-content;
 }
 
-/* 确保地图容器有明确的尺寸 */
-#map-preview-container {
-  width: 100% !important;
-  height: 400px !important;
-  min-height: 400px !important;
-  position: relative !important;
+/* 收起状态的触发器 */
+.layer-trigger[data-v-6a7660a8] {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  width: 86px;
+  height: 60px;
+  pointer-events: none; /* 让鼠标事件穿透到底下的 panel */
+  transition: opacity 0.2s;
+  z-index: 10;
+  background: #fff; /* 遮挡下面的列表 */
 }
-
-/* OpenLayers地图容器样式 */
-#map-preview-container .ol-viewport {
-  width: 100% !important;
-  height: 100% !important;
+.layer-trigger.is-hidden[data-v-6a7660a8] {
+  opacity: 0;
+  pointer-events: none;
 }
 
-/* 确保Canvas元素正确显示 */
-#map-preview-container canvas {
-  width: 100% !important;
-  height: 100% !important;
+/* 通用图层项样式 */
+.layer-item[data-v-6a7660a8], .current-layer-box[data-v-6a7660a8] {
+  width: 86px;
+  height: 60px;
+  border-radius: 2px;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid #e4e7ed;
+  cursor: pointer;
+  transition: all 0.2s;
+  overflow: hidden;
 }
-.mark-tab-container[data-v-fdf095a0] {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px;
-}
-.type-select[data-v-fdf095a0] {
-  width: 100%;
-  margin-bottom: 12px;
-}
-.continuous-switch[data-v-fdf095a0] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  padding: 8px;
-  background-color: #f9fafb;
-  border-radius: 6px;
-}
-.switch-label[data-v-fdf095a0] {
-  font-size: 14px;
-  color: #374151;
-}
-.tools-grid[data-v-fdf095a0] {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  flex: 1;
-  overflow: auto;
+.layer-item[data-v-6a7660a8]:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
 }
-.tool-item[data-v-fdf095a0] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease;
+.layer-item.active[data-v-6a7660a8] {
+  border: 2px solid #409eff;
 }
-.tool-item[data-v-fdf095a0]:hover {
-  background-color: #f3f4f6;
-  border-color: #60a5fa;
+
+/* 选中状态的蓝色边框和对勾 */
+.active-border[data-v-6a7660a8] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 2px solid #409eff;
+  box-sizing: border-box;
+  border-radius: 2px;
+  pointer-events: none;
 }
-.tool-image[data-v-fdf095a0] {
-  width: 24px;
-  height: 24px;
-  margin-bottom: 4px;
+.check-icon[data-v-6a7660a8] {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-bottom: 24px solid #409eff;
+  border-left: 24px solid transparent;
 }
-.tool-icon-large[data-v-fdf095a0] {
-  font-size: 24px;
-  margin-bottom: 4px;
+.check-icon svg[data-v-6a7660a8] {
+  position: absolute;
+  right: -1px;
+  bottom: -13px;
+  transform: scale(0.7);
 }
-.tool-label[data-v-fdf095a0] {
+
+/* 图层名称标签 */
+.layer-name[data-v-6a7660a8] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
   font-size: 12px;
-  color: #6b7280;
+  padding: 2px 4px;
   text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
 }
-.tool-item:hover .tool-label[data-v-fdf095a0] {
-  color: #3b82f6;
+.layer-item:hover .layer-name[data-v-6a7660a8] {
+  background: rgba(0, 0, 0, 0.7);
 }
-.stop-drawing-section[data-v-fdf095a0] {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #e5e7eb;
+
+/* 地图预览容器样式 */
+.map-preview-container > div {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* 预览页面缩放变换 */
+.preview-page {
+  transform-origin: top center;
+}
+
+/* 确保地图容器有明确的尺寸 */
+#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;
+  height: 100% !important;
+}
+
+/* 确保Canvas元素正确显示 */
+#map-preview-container canvas {
+  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;
 }
-.stop-drawing-section {
-  margin-top: 20px;
-  padding-top: 16px;
-  border-top: 1px solid #e4e7ed;
-  text-align: center;
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  transition: background-color 0.3s;
 }
-.stop-drawing-section .el-button {
-  width: 100%;
-  font-weight: 500;
+.context-menu-item:hover {
+  background-color: #f5f7fa;
 }
-.list-tab-container[data-v-1cc008ea] {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  font-size: 14px;
+.context-menu-item .el-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+/* 右侧滑入动画 */
+.fixed.items-stretch.justify-end .bg-white {
+  animation: slideInRight 0.3s ease-out;
 }
-.toolbar[data-v-1cc008ea] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 8px;
-  border-bottom: 1px solid #d1d5db;
+.fixed.items-stretch.justify-start .bg-white {
+  animation: slideInLeft 0.3s ease-out;
 }
-.toolbar-left[data-v-1cc008ea] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.fixed.items-start.justify-center .bg-white {
+  animation: slideInTop 0.3s ease-out;
 }
-.toolbar-title[data-v-1cc008ea] {
-  font-weight: 500;
+.fixed.items-end.justify-center .bg-white {
+  animation: slideInBottom 0.3s ease-out;
 }
-.toolbar-icon[data-v-1cc008ea] {
-  font-size: 16px;
+@keyframes slideInRight {
+from {
+    transform: translateX(100%);
 }
-.data-count[data-v-1cc008ea] {
-  color: #6b7280;
+to {
+    transform: translateX(0);
 }
-.list-content[data-v-1cc008ea] {
-  flex: 1;
-  overflow: auto;
-  padding: 4px;
 }
-.tree-component[data-v-1cc008ea] {
-  font-size: 14px;
+@keyframes slideInLeft {
+from {
+    transform: translateX(-100%);
 }
-.tree-node[data-v-1cc008ea] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+to {
+    transform: translateX(0);
 }
-.node-icon[data-v-1cc008ea] {
-  font-size: 16px;
 }
-.empty-state[data-v-1cc008ea] {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #9ca3af;
-}.dialog-content[data-v-d7434b96] {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+@keyframes slideInTop {
+from {
+    transform: translateY(-100%);
 }
-.toolbar[data-v-d7434b96] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f9fafb;
+to {
+    transform: translateY(0);
 }
-.toolbar-left[data-v-d7434b96] {
-  display: flex;
-  align-items: center;
-  gap: 20px;
 }
-.toolbar-right[data-v-d7434b96] {
-  display: flex;
-  align-items: center;
-  gap: 20px;
+@keyframes slideInBottom {
+from {
+    transform: translateY(100%);
 }
-.tool-icon[data-v-d7434b96] {
-  font-size: 20px;
-  cursor: pointer;
-  color: #6b7280;
-  transition: color 0.3s ease;
+to {
+    transform: translateY(0);
 }
-.tool-icon[data-v-d7434b96]:hover {
-  color: var(--el-color-primary, #409eff);
 }
-.content-area[data-v-d7434b96] {
-  flex: 1;
-  overflow: hidden;
+
+/* 调整右侧对话框的样式 */
+.fixed.items-stretch.justify-end .bg-white,
+.fixed.items-stretch.justify-start .bg-white {
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  height: 100vh;
 }
-.tabs-container[data-v-d7434b96] {
-  height: 100%;
+
+/* 调整上下对话框的样式 */
+.fixed.items-start.justify-center .bg-white,
+.fixed.items-end.justify-center .bg-white {
+  max-height: none;
+  width: 100vw;
+  border-radius: 0;
 }
-.map-drawing-dialog[data-v-d7434b96] .el-tabs {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+
+/* 调整大小控制点样式 */
+.resize-n {
+  top: -3px;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: n-resize;
 }
-.map-drawing-dialog[data-v-d7434b96] .el-tabs__content {
-  flex: 1;
-  overflow: auto;
-  padding: 12px;
+.resize-ne {
+  top: -3px;
+  right: -3px;
+  width: 6px;
+  height: 6px;
+  cursor: ne-resize;
 }
-.map-drawing-dialog[data-v-d7434b96] .el-tabs__nav-wrap {
-  padding: 0 10px;
-}
-.map-drawing-dialog[data-v-d7434b96] .el-tabs__item {
-  font-size: 14px;
-  font-weight: 500;
-  padding: 0 20px;
-  height: 40px;
-  line-height: 40px;
-  transition: all 0.3s;
-}
-.map-drawing-dialog[data-v-d7434b96] .el-tabs__item.is-active {
-  color: var(--el-color-primary);
-  font-weight: 600;
-}
-.map-drawing-dialog[data-v-d7434b96] .el-tabs__item:hover {
-  color: var(--el-color-primary);
-}.map-toolbar[data-v-f8ee8458] {
-  position: absolute;
-  top: 10px;
-  right: 20px;
-  height: 32px;
-}
-[data-v-f8ee8458].el-menu--horizontal {
-  height: 100% !important;
-}.map-search-container {
-  position: absolute;
-  z-index: 99;
-  min-width: 300px;
-  max-width: 400px;
-}
-
-/* 位置样式 */
-.position-top-left {
-  top: 10px;
-  left: 10px;
-}
-.position-top-right {
-  top: 10px;
-  right: 10px;
-}
-.position-bottom-left {
-  bottom: 10px;
-  left: 10px;
-}
-.position-bottom-right {
-  bottom: 10px;
-  right: 10px;
-}
-.search-input-wrapper {
-  position: relative;
-}
-.search-input {
-  width: 100%;
-}
-.search-input :deep(.el-input__inner) {
-  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);
-}
-.search-icon {
-  color: #909399;
-}
-.loading-icon {
-  color: #409eff;
-  animation: rotate 1s linear infinite;
-}
-@keyframes rotate {
-from {
-    transform: rotate(0deg);
-}
-to {
-    transform: rotate(360deg);
+.resize-e {
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: e-resize;
 }
+.resize-se {
+  bottom: -3px;
+  right: -3px;
+  width: 6px;
+  height: 6px;
+  cursor: se-resize;
 }
-.search-results {
-  position: absolute;
-  top: 100%;
+.resize-s {
+  bottom: -3px;
   left: 0;
   right: 0;
-  background: white;
-  border: 1px solid #e4e7ed;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  max-height: 400px;
-  overflow-y: auto;
-  z-index: 10000;
-  margin-top: 4px;
-}
-.search-section {
-  padding: 8px 0;
-}
-.search-section:not(:last-child) {
-  border-bottom: 1px solid #f0f0f0;
-}
-.section-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  font-size: 12px;
-  color: #909399;
-  font-weight: 500;
-}
-.result-count {
-  color: #c0c4cc;
-}
-.search-item {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-.search-item:hover,
-.search-item.active {
-  background-color: #f5f7fa;
-}
-.item-icon {
-  margin-right: 12px;
-  color: #909399;
-  font-size: 16px;
-  flex-shrink: 0;
-}
-.history-item .item-icon {
-  color: #c0c4cc;
-}
-.result-item .item-icon {
-  color: #409eff;
-}
-.item-content {
-  flex: 1;
-  min-width: 0;
-}
-.item-name {
-  font-size: 14px;
-  color: #303133;
-  margin-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.item-name :deep(mark) {
-  background-color: #fff2cc;
-  color: #e6a23c;
-  padding: 0 2px;
-  border-radius: 2px;
-}
-.item-address {
-  font-size: 12px;
-  color: #909399;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.item-address :deep(mark) {
-  background-color: #fff2cc;
-  color: #e6a23c;
-  padding: 0 2px;
-  border-radius: 2px;
-}
-.item-type {
-  font-size: 11px;
-  color: #c0c4cc;
-  margin-top: 2px;
-}
-.item-confidence {
-  font-size: 12px;
-  color: #67c23a;
-  margin-left: 8px;
-  flex-shrink: 0;
-}
-.no-results {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px 16px;
-  color: #909399;
-  font-size: 14px;
-}
-.no-results .el-icon {
-  margin-right: 8px;
-  font-size: 16px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-.map-search-container {
-    min-width: 280px;
-    max-width: calc(100vw - 20px);
-}
-.position-top-left,
-  .position-top-right {
-    top: 5px;
-}
-.position-top-left,
-  .position-bottom-left {
-    left: 5px;
-}
-.position-top-right,
-  .position-bottom-right {
-    right: 5px;
-}
-.position-bottom-left,
-  .position-bottom-right {
-    bottom: 5px;
+  height: 6px;
+  cursor: s-resize;
 }
-}.control-group[data-v-d2ffe2db] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  /* re-enable interactions inside the controls container */
-  pointer-events: auto;
+.resize-sw {
+  bottom: -3px;
+  left: -3px;
+  width: 6px;
+  height: 6px;
+  cursor: sw-resize;
 }
-
-/* when direction becomes column, keep spacing vertical */
-.control-group.flex-col[data-v-d2ffe2db] {
-  flex-direction: column;
-  align-items: stretch;
-  gap: 6px;
+.resize-w {
+  top: 0;
+  left: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: w-resize;
 }
-
-/* ensure buttons themselves are interactive */
-.control-btn[data-v-d2ffe2db] {
-  pointer-events: auto;
+.resize-nw {
+  top: -3px;
+  left: -3px;
+  width: 6px;
+  height: 6px;
+  cursor: nw-resize;
 }
+/*
+ * 基础样式文件
+ * 替换UnoCSS的基础样式类
+ */
 
-/* reset Element Plus button default adjacent margin and use our gap instead */
-[data-v-d2ffe2db] .el-button + .el-button {
-  margin-left: 0 !important;
-}
-
-/* make sure all EP interactive widgets are clickable */
-[data-v-d2ffe2db] .el-button,[data-v-d2ffe2db] .el-slider,[data-v-d2ffe2db] .el-icon {
-  pointer-events: auto;
-}
-.absolute { 
-  position: absolute;
-}
-.bottom-40px {
-  bottom: 40px;
-}
-
-/* 图例面板样式 */
-.legend-collapsed {
-  transform: translateX(calc(100% - 40px));
-}
-.legend-collapsed:hover {
-  transform: translateX(0);
-}
-
-/* 图例项样式 */
-.legend-item {
-@apply mb-2 last:mb-0;
-}
-.legend-title {
-@apply text-sm font-medium text-gray-700 mb-2;
-}
-.legend-content {
-@apply space-y-1;
-}
-.legend-symbol {
-@apply inline-block mr-2 align-middle;
-}
-.legend-label {
-@apply text-xs text-gray-600 align-middle;
-}
-
-/* 渐变图例样式 */
-.gradient-legend {
-@apply h-4 rounded mb-1;
-}
-.gradient-labels {
-@apply flex justify-between text-xs text-gray-500;
-}
-
-/* 分类图例样式 */
-.category-legend {
-@apply flex items-center mb-1;
-}
-.category-symbol {
-@apply w-4 h-4 mr-2 rounded-sm;
-}
-
-/* 符号图例样式 */
-.symbol-legend {
-@apply flex items-center mb-1;
-}
-.symbol-item {
-@apply w-4 h-4 mr-2;
-}
-
-/* 面板头部样式 */
-.legend-header {
-@apply flex items-center justify-between p-3 border-b border-gray-200;
-}
-.legend-body {
-@apply p-3 max-h-96 overflow-y-auto;
-}
-
-/* 折叠按钮样式 */
-.collapse-btn {
-@apply p-1 rounded hover:bg-gray-100 transition-colors;
-}
-.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;
-h5 {
-      margin: 0 0 12px 0;
-      font-size: 13px;
-      font-weight: 500;
-      color: #666;
-}
-.config-item {
-      display: flex;
-      align-items: center;
-      margin-bottom: 12px;
-      gap: 8px;
-label {
-        flex: 0 0 60px;
-        font-size: 12px;
-        color: #666;
-}
-.el-slider {
-        flex: 1;
-        margin: 0 8px;
-}
-.value-text {
-        flex: 0 0 45px;
-        font-size: 12px;
-        color: #999;
-        text-align: right;
-}
-}
-.preset-buttons {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-.el-button {
-        flex: 1;
-        min-width: 60px;
-}
-}
-}
-}
-
-.style-config-panel {
-  padding: 0;
-.panel-title {
-    margin: 0 0 16px 0;
-    font-size: 14px;
-    font-weight: 600;
-    color: #333;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 8px;
-}
-.config-section {
-    margin-bottom: 16px;
-h5 {
-      margin: 0 0 12px 0;
-      font-size: 13px;
-      font-weight: 500;
-      color: #666;
-}
-.config-item {
-      display: flex;
-      align-items: center;
-      margin-bottom: 12px;
-      gap: 8px;
-label {
-        flex: 0 0 60px;
-        font-size: 12px;
-        color: #666;
-}
-.el-slider {
-        flex: 1;
-        margin: 0 8px;
-}
-.el-select {
-        flex: 1;
-}
-.value-text {
-        flex: 0 0 45px;
-        font-size: 12px;
-        color: #999;
-        text-align: right;
-}
-}
-}
-.panel-actions {
-    padding-top: 12px;
-    border-top: 1px solid #eee;
-    text-align: center;
-}
-}
-
-.tree-node-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 4px 0;
-}
-.group-node {
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  color: #333;
-}
-.layer-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 2px 0;
-.layer-info {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    min-width: 0;
-.layer-icon {
-      margin-right: 8px;
-      font-size: 14px;
-}
-.layer-name {
-      font-size: 13px;
-      color: #333;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-}
-}
-.layer-controls {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-.opacity-control {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-.opacity-slider {
-        width: 60px;
-}
-.opacity-value {
-        font-size: 11px;
-        color: #999;
-        min-width: 30px;
-        text-align: right;
-}
-}
-.style-config-btn {
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      margin-left: 4px;
-}
-}
-}
-
-.layer-dialog {
-  /* 全局样式面板样式 */
-.global-style-panel {
-    padding: 16px;
-    border-bottom: 1px solid #eee;
-    background-color: #f8f9fa;
-.panel-title {
-      margin: 0 0 16px 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: #333;
-      border-bottom: 1px solid #ddd;
-      padding-bottom: 8px;
-}
-.config-section {
-      margin-bottom: 16px;
-h5 {
-        margin: 0 0 12px 0;
-        font-size: 13px;
-        font-weight: 500;
-        color: #666;
-}
-.config-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
-        gap: 8px;
-label {
-          flex: 0 0 60px;
-          font-size: 12px;
-          color: #666;
-}
-.el-slider {
-          flex: 1;
-          margin: 0 8px;
-}
-.value-text {
-          flex: 0 0 45px;
-          font-size: 12px;
-          color: #999;
-          text-align: right;
-}
-}
-.preset-buttons {
-        display: flex;
-        gap: 6px;
-        flex-wrap: wrap;
-.el-button {
-          flex: 1;
-          min-width: 60px;
-}
-}
-}
-.panel-actions {
-      margin-top: 16px;
-      padding-top: 12px;
-      border-top: 1px solid #ddd;
-      text-align: center;
-}
-.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: #fff;
-      border: 1px solid #e9ecef;
-}
-.style-tabs {
-:deep(.el-tabs__header) {
-        margin: 0 0 16px 0;
-}
-:deep(.el-tabs__nav-wrap) {
-        padding: 0;
-}
-:deep(.el-tabs__item) {
-        font-size: 12px;
-        padding: 0 16px;
-        height: 32px;
-        line-height: 32px;
-}
-:deep(.el-tabs__content) {
-        padding: 0;
-}
-}
-.current-style-display {
-      margin-top: 16px;
-      padding: 12px;
-      background-color: #f5f5f5;
-      border-radius: 4px;
-      border: 1px solid #e9ecef;
-h6 {
-        margin: 0 0 8px 0;
-        font-size: 12px;
-        font-weight: 500;
-        color: #666;
-}
-.style-preview {
-        font-family: "Courier New", monospace;
-        font-size: 11px;
-        line-height: 1.4;
-        color: #333;
-        background-color: #fff;
-        padding: 8px;
-        border-radius: 3px;
-        border: 1px solid #ddd;
-        word-break: break-all;
-        white-space: pre-wrap;
-        max-height: 120px;
-        overflow-y: auto;
-}
-}
-}
-
-  /* 主标签页样式 */
-.main-tabs {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-.main-tabs .el-tabs__content {
-    flex: 1;
-    overflow: hidden;
-    padding: 0;
-}
-.main-tabs .el-tab-pane {
-    height: 100%;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-}
-.layer-tree {
-.tree-node-content {
-      width: 100%;
-.group-node {
-        display: flex;
-        align-items: center;
-        padding: 8px 0;
-}
-.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;
-          min-width: 0;
-.layer-icon {
-            margin-right: 8px;
-            flex-shrink: 0;
-}
-.layer-name {
-            font-size: 14px;
-            color: #333;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-}
-}
-.layer-controls {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-.opacity-control {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            min-width: 120px;
-.opacity-slider {
-              flex: 1;
-              min-width: 80px;
-}
-.opacity-value {
-              font-size: 12px;
-              color: #666;
-              min-width: 35px;
-              text-align: right;
-              white-space: nowrap;
-}
-}
-.style-config-btn {
-            width: 24px;
-            height: 24px;
-            padding: 0;
-            margin-left: 4px;
-}
-}
-}
-}
-}
-}
-
-/* 样式配置面板样式 */
-:deep(.layer-style-popover) {
-.style-config-panel {
-    padding: 0;
-.panel-title {
-      margin: 0 0 16px 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: #333;
-      border-bottom: 1px solid #eee;
-      padding-bottom: 8px;
-}
-.config-section {
-      margin-bottom: 16px;
-h5 {
-        margin: 0 0 12px 0;
-        font-size: 13px;
-        font-weight: 500;
-        color: #666;
-}
-.config-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
-        gap: 8px;
-label {
-          flex: 0 0 60px;
-          font-size: 12px;
-          color: #666;
-}
-.el-slider {
-          flex: 1;
-          margin: 0 8px;
-}
-.value-text {
-          flex: 0 0 45px;
-          font-size: 12px;
-          color: #999;
-          text-align: right;
-}
-}
-.preset-buttons {
-        display: flex;
-        gap: 6px;
-        flex-wrap: wrap;
-.el-button {
-          flex: 1;
-          min-width: 60px;
-}
-}
-}
-.panel-actions {
-      margin-top: 16px;
-      padding-top: 12px;
-      border-top: 1px solid #eee;
-      text-align: center;
-}
-.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: #f8f9fa;
-      border: 1px solid #e9ecef;
-}
-}
-}
-
-.ol-base-layer-switcher[data-v-396e5ed1] {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-  z-index: 100;
-  height: 70px; /* 60px + 5px padding * 2 */
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  padding: 5px;
-  box-sizing: border-box;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-  /* 即使内容还没出来，也要从右边开始长出来 */
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* 列表面板 */
-.layer-panel[data-v-396e5ed1] {
-  display: flex;
-  gap: 10px;
-  height: 100%;
-  /* 绝对定位以防止宽度变化时的挤压，或者使用flex布局 */
-  min-width: max-content;
-}
-
-/* 收起状态的触发器 */
-.layer-trigger[data-v-396e5ed1] {
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  width: 86px;
-  height: 60px;
-  pointer-events: none; /* 让鼠标事件穿透到底下的 panel */
-  transition: opacity 0.2s;
-  z-index: 10;
-  background: #fff; /* 遮挡下面的列表 */
-}
-.layer-trigger.is-hidden[data-v-396e5ed1] {
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* 通用图层项样式 */
-.layer-item[data-v-396e5ed1], .current-layer-box[data-v-396e5ed1] {
-  width: 86px;
-  height: 60px;
-  border-radius: 2px;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid #e4e7ed;
-  cursor: pointer;
-  transition: all 0.2s;
-  overflow: hidden;
-}
-.layer-item[data-v-396e5ed1]:hover {
-  border-color: #409eff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
-}
-.layer-item.active[data-v-396e5ed1] {
-  border: 2px solid #409eff;
-}
-
-/* 选中状态的蓝色边框和对勾 */
-.active-border[data-v-396e5ed1] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 2px solid #409eff;
-  box-sizing: border-box;
-  border-radius: 2px;
-  pointer-events: none;
-}
-.check-icon[data-v-396e5ed1] {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 0;
-  height: 0;
-  border-bottom: 24px solid #409eff;
-  border-left: 24px solid transparent;
-}
-.check-icon svg[data-v-396e5ed1] {
-  position: absolute;
-  right: -1px;
-  bottom: -13px;
-  transform: scale(0.7);
-}
-
-/* 图层名称标签 */
-.layer-name[data-v-396e5ed1] {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  font-size: 12px;
-  padding: 2px 4px;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-.layer-item:hover .layer-name[data-v-396e5ed1] {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-.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-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #606266;
-  transition: background-color 0.3s;
-}
-.context-menu-item:hover {
-  background-color: #f5f7fa;
-}
-.context-menu-item .el-icon {
-  margin-right: 8px;
-  font-size: 16px;
-}
-/*
- * 基础样式文件
- * 替换UnoCSS的基础样式类
- */
-
-/* 布局相关 */
-.w-full { width: 100%; }
-.h-full { height: 100%; }
-.w-screen { width: 100vw; }
-.h-screen { height: 100vh; }
+/* 布局相关 */
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.w-screen { width: 100vw; }
+.h-screen { height: 100vh; }
 
 /* 尺寸 */
 .w-0 { width: 0px; }
@@ -3238,48 +2393,894 @@ label {
 .cursor-zoom-in { cursor: zoom-in; }
 .cursor-zoom-out { cursor: zoom-out; }
 
-/* 用户选择 */
-.select-none { user-select: none; }
-.select-text { user-select: text; }
-.select-all { user-select: all; }
-.select-auto { user-select: auto; }
+/* 用户选择 */
+.select-none { user-select: none; }
+.select-text { user-select: text; }
+.select-all { user-select: all; }
+.select-auto { user-select: auto; }
+
+/* 指针事件 */
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }
+
+/* 过渡 */
+.transition-none { transition-property: none; }
+.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.duration-75 { transition-duration: 75ms; }
+.duration-100 { transition-duration: 100ms; }
+.duration-150 { transition-duration: 150ms; }
+.duration-200 { transition-duration: 200ms; }
+.duration-300 { transition-duration: 300ms; }
+.duration-500 { transition-duration: 500ms; }
+.duration-700 { transition-duration: 700ms; }
+.duration-1000 { transition-duration: 1000ms; }
+.ease-linear { transition-timing-function: linear; }
+.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* 变换 */
+.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
+.transform-gpu { transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
+.transform-none { transform: none; }
 
-/* 指针事件 */
-.pointer-events-none { pointer-events: none; }
-.pointer-events-auto { pointer-events: auto; }
+/* hover伪类样式 */
+.hover-bg-gray-100:hover {
+  background-color: #f3f4f6;
+}
+
+/* 图例面板相关样式 */
+.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;
+  overflow: hidden;
+}
+.measurement-header[data-v-ac238457] {
+  background: transparent;
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(226, 232, 240, 0);
+}
+.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);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.result-value[data-v-ac238457] {
+  font-size: 42px;
+  font-weight: 600;
+  color: #3b82f6;
+  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] {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: 18px;
+  row-gap: 12px;
+  justify-items: center;
+  align-items: start;
+}
+.tool-item[data-v-ac238457] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  transition: transform 0.2s ease;
+}
+.tool-icon[data-v-ac238457] {
+  width: 28px;
+  height: 28px;
+  padding: 14px; /* 28 + 14*2 = 56px 的方块 */
+  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;
+  margin-bottom: 10px;
+}
+.tool-item:hover .tool-icon[data-v-ac238457],
+.tool-item.active .tool-icon[data-v-ac238457] {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  border-color: #c8d4e6;
+}
+.tool-label[data-v-ac238457] {
+  font-size: 14px;
+  line-height: 1.2;
+  color: #334155; /* 不改变整体背景，仅优化文字可读性 */
+  font-weight: 500;
+  white-space: nowrap;
+}
+.dialog-footer[data-v-ac238457] {
+@apply hidden;
+}
+/* 底图对话框样式 */
+.basemap-dialog {
+  /* CustomDialog 会处理右侧滑入动画 */
+}
+
+/* 底图内容容器 */
+.basemap-content {
+  padding: 16px;
+  height: 100%;
+  overflow: visible;
+}
+
+/* 底图网格布局 */
+.basemap-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 16px;
+  padding: 8px 0;
+}
+
+/* 底图项目 */
+.basemap-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+  border: 2px solid transparent;
+  border-radius: 12px;
+  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);
+}
+.basemap-item: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);
+}
+
+/* 底图预览图片 */
+.basemap-preview {
+  width: 100px;
+  height: 75px;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+.basemap-item:hover .basemap-preview {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  transform: scale(1.05);
+}
+.basemap-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.3s ease;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
+/* 底图名称 */
+.basemap-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #374151;
+  text-align: center;
+  line-height: 1.4;
+  transition: all 0.3s ease;
+}
+.basemap-item:hover .basemap-name {
+  color: #1f2937;
+  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;
+  font-weight: 600;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+.basemap-panel {
+    width: 100%;
+}
+.basemap-grid {
+    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 {
+  --el-dialog-bg-color: #1a1a1a;
+}
+.coordinate-content {
+  padding: 10px 0;
+}
+.format-selection {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+}
+.format-title {
+  font-weight: 500;
+  margin-bottom: 10px;
+  color: #495057;
+}
+.format-options {
+  display: flex;
+  gap: 20px;
+}
+.format-options :deep(.el-radio) {
+  margin-right: 0;
+}
+.coordinate-input {
+  margin-bottom: 20px;
+}
+.dialog-footer {
+  text-align: right;
+}
+.dialog-footer .el-button {
+  margin-left: 10px;
+}
 
-/* 过渡 */
-.transition-none { transition-property: none; }
-.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.duration-75 { transition-duration: 75ms; }
-.duration-100 { transition-duration: 100ms; }
-.duration-150 { transition-duration: 150ms; }
-.duration-200 { transition-duration: 200ms; }
-.duration-300 { transition-duration: 300ms; }
-.duration-500 { transition-duration: 500ms; }
-.duration-700 { transition-duration: 700ms; }
-.duration-1000 { transition-duration: 1000ms; }
-.ease-linear { transition-timing-function: linear; }
-.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
-.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
-.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+.region-dialog {
+.region-content {
+    max-height: 500px;
+    overflow-y: auto;
+}
+:deep(.el-tabs__header) {
+    margin: 0 0 20px 0;
+}
+:deep(.el-tabs__nav-wrap) {
+    padding: 0 20px;
+}
+:deep(.el-tabs__item) {
+    font-size: 16px;
+    font-weight: 500;
+    color: #606266;
+&.is-active {
+      color: #409eff;
+      font-weight: 600;
+}
+}
+:deep(.el-tabs__active-bar) {
+    background-color: #409eff;
+}
+.region-categories {
+.region-group {
+      margin-bottom: 20px;
+.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;
+        gap: 8px;
+.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;
+            background: #ecf5ff;
+}
+}
+}
+}
+}
+.beijing-districts {
+.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;
+        justify-content: center;
+&: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;
+          box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
+}
+}
+}
+}
+}
+@media (max-width: 768px) {
+.region-dialog {
+.beijing-districts {
+.district-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+}
+}
+}
+}
+@media (max-width: 480px) {
+.region-dialog {
+.beijing-districts {
+.district-grid {
+        grid-template-columns: repeat(2, 1fr);
+}
+}
+}
+}
 
-/* 变换 */
-.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
-.transform-gpu { transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
-.transform-none { transform: none; }
+.markers-dialog {
+  --el-dialog-bg-color: #1a1a1a;
+}
+.markers-content {
+  padding: 10px 0;
+}
+.toolbar {
+  margin-bottom: 15px;
+  display: flex;
+  gap: 10px;
+}
+.toolbar .adding-marker {
+  background-color: #f56c6c !important;
+  border-color: #f56c6c !important;
+  animation: pulse 1.5s infinite;
+}
+@keyframes pulse {
+0% {
+    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
+}
+70% {
+    box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
+}
+100% {
+    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
+}
+}
+.search-filter {
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+}
+.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);
+}
+.marker-name {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.delete-btn {
+  color: #f56c6c;
+}
+.delete-btn:hover {
+  color: #f78989;
+}
+.statistics {
+  padding: 15px;
+  background: rgba(64, 158, 255, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(64, 158, 255, 0.2);
+}
+.dialog-footer {
+  text-align: right;
+}
 
-/* hover伪类样式 */
-.hover-bg-gray-100:hover {
+.bookmarks-dialog {
+  --el-dialog-bg-color: #1a1a1a;
+}
+.bookmarks-content {
+  padding: 10px 0;
+}
+.toolbar {
+  margin-bottom: 15px;
+  display: flex;
+  gap: 10px;
+}
+.search-filter {
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+}
+.bookmarks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 15px;
+  margin-bottom: 20px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.bookmark-card {
+  border: 1px solid #303133;
+  border-radius: 8px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.02);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+.bookmark-card:hover {
+  border-color: #409eff;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+  transform: translateY(-2px);
+}
+.bookmark-thumbnail {
+  position: relative;
+  height: 120px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.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;
+  transition: opacity 0.3s ease;
+}
+.bookmark-card:hover .bookmark-overlay {
+  opacity: 1;
+}
+.bookmark-info {
+  padding: 12px;
+}
+.bookmark-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #e4e7ed;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.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;
+  overflow: hidden;
+}
+.bookmark-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #909399;
+}
+.bookmark-time {
+  font-size: 11px;
+  color: #606266;
+  text-align: right;
+}
+.delete-btn {
+  color: #f56c6c;
+}
+.delete-btn:hover {
+  color: #f78989;
+}
+.empty-state {
+  text-align: center;
+  padding: 40px 0;
+}
+.statistics {
+  padding: 15px;
+  background: rgba(64, 158, 255, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(64, 158, 255, 0.2);
+}
+.dialog-footer {
+  text-align: right;
+}
+
+/* 自定义滚动条 */
+.bookmarks-grid::-webkit-scrollbar {
+  width: 6px;
+}
+.bookmarks-grid::-webkit-scrollbar-track {
+  background: #2c2c2c;
+  border-radius: 3px;
+}
+.bookmarks-grid::-webkit-scrollbar-thumb {
+  background: #409eff;
+  border-radius: 3px;
+}
+.bookmarks-grid::-webkit-scrollbar-thumb:hover {
+  background: #66b1ff;
+}
+.mark-tab-container[data-v-b5ca6d89] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px;
+}
+.type-select[data-v-b5ca6d89] {
+  width: 100%;
+  margin-bottom: 12px;
+}
+.continuous-switch[data-v-b5ca6d89] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding: 8px;
+  background-color: #f9fafb;
+  border-radius: 6px;
+}
+.switch-label[data-v-b5ca6d89] {
+  font-size: 14px;
+  color: #374151;
+}
+.tools-grid[data-v-b5ca6d89] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  flex: 1;
+  overflow: auto;
+}
+.tool-item[data-v-b5ca6d89] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.tool-item[data-v-b5ca6d89]:hover {
   background-color: #f3f4f6;
+  border-color: #60a5fa;
 }
-
-/* 图例面板相关样式 */
-.legend-collapsed .panel-content {
-  display: none;
+.tool-image[data-v-b5ca6d89] {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 4px;
+}
+.tool-icon-large[data-v-b5ca6d89] {
+  font-size: 24px;
+  margin-bottom: 4px;
+}
+.tool-label[data-v-b5ca6d89] {
+  font-size: 12px;
+  color: #6b7280;
+  text-align: center;
+}
+.tool-item:hover .tool-label[data-v-b5ca6d89] {
+  color: #3b82f6;
+}
+.stop-drawing-section[data-v-b5ca6d89] {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+}
+.stop-drawing-section {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e4e7ed;
+  text-align: center;
+}
+.stop-drawing-section .el-button {
+  width: 100%;
+  font-weight: 500;
+}
+.list-tab-container[data-v-148877f2] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-size: 14px;
+}
+.toolbar[data-v-148877f2] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  border-bottom: 1px solid #d1d5db;
+}
+.toolbar-left[data-v-148877f2] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.toolbar-title[data-v-148877f2] {
+  font-weight: 500;
+}
+.toolbar-icon[data-v-148877f2] {
+  font-size: 16px;
+}
+.data-count[data-v-148877f2] {
+  color: #6b7280;
+}
+.list-content[data-v-148877f2] {
+  flex: 1;
+  overflow: auto;
+  padding: 4px;
+}
+.tree-component[data-v-148877f2] {
+  font-size: 14px;
+}
+.tree-node[data-v-148877f2] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.node-icon[data-v-148877f2] {
+  font-size: 16px;
+}
+.empty-state[data-v-148877f2] {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #9ca3af;
+}.dialog-content[data-v-c695eece] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.toolbar[data-v-c695eece] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+.toolbar-left[data-v-c695eece] {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+.toolbar-right[data-v-c695eece] {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+.tool-icon[data-v-c695eece] {
+  font-size: 20px;
+  cursor: pointer;
+  color: #6b7280;
+  transition: color 0.3s ease;
+}
+.tool-icon[data-v-c695eece]:hover {
+  color: var(--el-color-primary, #409eff);
+}
+.content-area[data-v-c695eece] {
+  flex: 1;
+  overflow: hidden;
+}
+.tabs-container[data-v-c695eece] {
+  height: 100%;
+}
+.map-drawing-dialog[data-v-c695eece] .el-tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.map-drawing-dialog[data-v-c695eece] .el-tabs__content {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+}
+.map-drawing-dialog[data-v-c695eece] .el-tabs__nav-wrap {
+  padding: 0 10px;
+}
+.map-drawing-dialog[data-v-c695eece] .el-tabs__item {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  transition: all 0.3s;
+}
+.map-drawing-dialog[data-v-c695eece] .el-tabs__item.is-active {
+  color: var(--el-color-primary);
+  font-weight: 600;
+}
+.map-drawing-dialog[data-v-c695eece] .el-tabs__item:hover {
+  color: var(--el-color-primary);
 }