显示修改

src/component/rain-earthquake/ControlShowComponent.vue

@@ -110,16 +110,18 @@
     right: 20px;
     border-radius: 2px;
     z-index: 1000;
-    width: 200px;
-    overflow: auto;
+    width: 160px;
+    overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: white;
     border: 1px solid rgb(0, 225, 255);
-    max-height: 650px;
+    max-height: 50vh;
+    display: flex;
+    flex-direction: column;
   }
   .title-box {
     font-weight: bold;
-    font-size: 16px;
+    font-size: 14px;
     background: linear-gradient(
       180deg,
       rgb(86, 204, 242) 0%,
@@ -133,17 +135,52 @@
     padding: 8px;
     display: flex;
     flex-direction: column;
-    font-size: 14px;
+    font-size: 12px;
     gap: 6px;
-    max-height: 60vh;
     overflow-y: auto;
+    overflow-x: hidden;
+    flex: 1;
+  }
+
+  /* 自定义滚动条样式 */
+  .control-show-list::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .control-show-list::-webkit-scrollbar-track {
+    background: rgba(14, 52, 98, 0.5);
+    border-radius: 3px;
+  }
+
+  .control-show-list::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+      180deg,
+      rgba(86, 204, 242, 0.8) 0%,
+      rgba(47, 128, 237, 0.8) 100%
+    );
+    border-radius: 3px;
+    transition: background 0.3s ease;
+  }
+
+  .control-show-list::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(
+      180deg,
+      rgba(86, 204, 242, 1) 0%,
+      rgba(47, 128, 237, 1) 100%
+    );
+  }
+
+  /* Firefox 滚动条样式 */
+  .control-show-list {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(86, 204, 242, 0.8) rgba(14, 52, 98, 0.5);
   }
   .category-section {
     margin-bottom: 8px;
   }
   .category-title {
     font-weight: bold;
-    font-size: 14px;
+    font-size: 12px;
     color: #00e1ff;
     padding: 4px 0;
     margin-bottom: 4px;
@@ -183,7 +220,7 @@
     flex: 1;
     text-align: justify;
     text-justify: inter-ideograph;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 1.5;
     letter-spacing: 0.5px;
     word-break: break-all;

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -184,7 +184,7 @@ export const useEarthquakeDisasterChain = () => {
     return [
       // 灾害隐患点类别
       {
-        name: '显示滑坡隐患点',
+        name: '滑坡隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showLandslideHiddenPoint' as const,
         callback: layerControl.clickLandslideHiddenPoint,
@@ -192,7 +192,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.DISASTER_HAZARD,
       },
       {
-        name: '显示泥石流隐患点',
+        name: '泥石流隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDebrisFlowHiddenPoint' as const,
         callback: layerControl.clickDebrisFlowHiddenPoint,
@@ -200,7 +200,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.DISASTER_HAZARD,
       },
       {
-        name: '显示风险点',
+        name: '风险点',
         statusStore: statusStore.mapLayers,
         statusKey: 'riskPointShow' as const,
         callback: layerControl.clickRiskPoint,
@@ -208,7 +208,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.DISASTER_HAZARD,
       },
       {
-        name: '显示断裂带',
+        name: '断裂带',
         statusStore: statusStore.mapLayers,
         statusKey: 'faultShow' as const,
         callback: layerControl.clickFault,
@@ -217,7 +217,7 @@ export const useEarthquakeDisasterChain = () => {
       },
       // 基础设施类别
       {
-        name: '显示医院',
+        name: '医院',
         statusStore: statusStore.poiLayers,
         statusKey: 'showHospital' as const,
         callback: layerControl.clickHospital,
@@ -225,7 +225,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示危险源',
+        name: '危险源',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDangerSource' as const,
         callback: layerControl.clickDangerousSource,
@@ -233,7 +233,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示避难所',
+        name: '避难所',
         statusStore: statusStore.poiLayers,
         statusKey: 'showRefugeeShelter' as const,
         callback: layerControl.clickEmergencyShelter,
@@ -241,7 +241,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示消防站',
+        name: '消防站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showFireStation' as const,
         callback: layerControl.clickFireStation,
@@ -249,7 +249,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示储备点',
+        name: '储备点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showReservePoint' as const,
         callback: layerControl.clickStorePoints,
@@ -257,7 +257,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示学校',
+        name: '学校',
         statusStore: statusStore.poiLayers,
         statusKey: 'showSchool' as const,
         callback: layerControl.clickSchool,
@@ -265,28 +265,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示人口网格',
-        statusStore: statusStore.poiLayers,
-        statusKey: 'showPopulationGrid' as const,
-        callback: layerControl.clickPopulationGrid,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示管网系统',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showNetworkSystem' as const,
-        callback: layerControl.clickWaterPipe,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示交通道路',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showTrafficRoad' as const,
-        callback: layerControl.clickTrafficRoad,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示桥梁',
+        name: '桥梁',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showBridge' as const,
         callback: layerControl.clickBridge,
@@ -294,21 +273,7 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示高速',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showHighway' as const,
-        callback: layerControl.clickHighway,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示国道',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showMainRoad' as const,
-        callback: layerControl.clickNationRoad,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示水库',
+        name: '水库',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showReservoir' as const,
         callback: layerControl.clickReservoir,
@@ -316,13 +281,49 @@ export const useEarthquakeDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示地铁站',
+        name: '地铁站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showSubwayStation' as const,
         callback: layerControl.clickSubwayStation,
         link: subwayIcon,
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
+      {
+        name: '人口网格',
+        statusStore: statusStore.poiLayers,
+        statusKey: 'showPopulationGrid' as const,
+        callback: layerControl.clickPopulationGrid,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+      {
+        name: '管网系统',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showNetworkSystem' as const,
+        callback: layerControl.clickWaterPipe,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+      {
+        name: '交通道路',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showTrafficRoad' as const,
+        callback: layerControl.clickTrafficRoad,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+
+      {
+        name: '高速',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showHighway' as const,
+        callback: layerControl.clickHighway,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+      {
+        name: '国道',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showMainRoad' as const,
+        callback: layerControl.clickNationRoad,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
     ];
   };
 

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -213,7 +213,7 @@ export const useRainDisasterChain = () => {
     return [
       // 灾害隐患点类别
       {
-        name: '显示滑坡隐患点',
+        name: '滑坡隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showLandslideHiddenPoint' as const,
         callback: layerControl.clickLandslideHiddenPoint,
@@ -221,7 +221,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.DISASTER_HAZARD,
       },
       {
-        name: '显示泥石流隐患点',
+        name: '泥石流隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDebrisFlowHiddenPoint' as const,
         callback: layerControl.clickDebrisFlowHiddenPoint,
@@ -229,7 +229,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.DISASTER_HAZARD,
       },
       {
-        name: '显示内涝隐患点',
+        name: '内涝隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showWaterLoggingHiddenPoint' as const,
         callback: layerControl.clickWaterLoggingHiddenPoint,
@@ -237,7 +237,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.DISASTER_HAZARD,
       },
       {
-        name: '显示山洪隐患点',
+        name: '山洪隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showFlashFloodHiddenPoint' as const,
         callback: layerControl.clickFlashFloodHiddenPoint,
@@ -245,7 +245,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.DISASTER_HAZARD,
       },
       {
-        name: '显示风险点',
+        name: '风险点',
         statusStore: statusStore.mapLayers,
         statusKey: 'riskPointShow' as const,
         callback: layerControl.clickRiskPoint,
@@ -254,7 +254,7 @@ export const useRainDisasterChain = () => {
       },
       // 基础设施类别
       {
-        name: '显示医院',
+        name: '医院',
         statusStore: statusStore.poiLayers,
         statusKey: 'showHospital' as const,
         callback: layerControl.clickHospital,
@@ -262,7 +262,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示危险源',
+        name: '危险源',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDangerSource' as const,
         callback: layerControl.clickDangerousSource,
@@ -270,7 +270,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示避难所',
+        name: '避难所',
         statusStore: statusStore.poiLayers,
         statusKey: 'showRefugeeShelter' as const,
         callback: layerControl.clickEmergencyShelter,
@@ -278,7 +278,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示消防站',
+        name: '消防站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showFireStation' as const,
         callback: layerControl.clickFireStation,
@@ -286,7 +286,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示储备点',
+        name: '储备点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showReservePoint' as const,
         callback: layerControl.clickStorePoints,
@@ -294,7 +294,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示学校',
+        name: '学校',
         statusStore: statusStore.poiLayers,
         statusKey: 'showSchool' as const,
         callback: layerControl.clickSchool,
@@ -302,28 +302,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示人口网格',
-        statusStore: statusStore.poiLayers,
-        statusKey: 'showPopulationGrid' as const,
-        callback: layerControl.clickPopulationGrid,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示管网系统',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showNetworkSystem' as const,
-        callback: layerControl.clickWaterPipe,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示交通道路',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showTrafficRoad' as const,
-        callback: layerControl.clickTrafficRoad,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示桥梁',
+        name: '桥梁',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showBridge' as const,
         callback: layerControl.clickBridge,
@@ -331,21 +310,7 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示高速',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showHighway' as const,
-        callback: layerControl.clickHighway,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示国道',
-        statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showMainRoad' as const,
-        callback: layerControl.clickNationRoad,
-        category: ControlPanelCategory.INFRASTRUCTURE,
-      },
-      {
-        name: '显示水库',
+        name: '水库',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showReservoir' as const,
         callback: layerControl.clickReservoir,
@@ -353,13 +318,49 @@ export const useRainDisasterChain = () => {
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
       {
-        name: '显示地铁站',
+        name: '地铁站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showSubwayStation' as const,
         callback: layerControl.clickSubwayStation,
         link: subwayIcon,
         category: ControlPanelCategory.INFRASTRUCTURE,
       },
+      {
+        name: '人口网格',
+        statusStore: statusStore.poiLayers,
+        statusKey: 'showPopulationGrid' as const,
+        callback: layerControl.clickPopulationGrid,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+      {
+        name: '管网系统',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showNetworkSystem' as const,
+        callback: layerControl.clickWaterPipe,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+      {
+        name: '交通道路',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showTrafficRoad' as const,
+        callback: layerControl.clickTrafficRoad,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+
+      {
+        name: '高速',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showHighway' as const,
+        callback: layerControl.clickHighway,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
+      {
+        name: '国道',
+        statusStore: statusStore.infrastructureLayers,
+        statusKey: 'showMainRoad' as const,
+        callback: layerControl.clickNationRoad,
+        category: ControlPanelCategory.INFRASTRUCTURE,
+      },
     ];
   };