右侧控制显示面板，同时规整显示隐藏点的逻辑

src/component/rain-earthquake/LegendComponent.vue

@@ -4,17 +4,17 @@
   <div
     class="control-box"
     :style="{
-      bottom: `${useStatusStore().getLegendShow() ? 248 : 25}px`,
+      bottom: `${useStatusStore().uiComponents.legendShow ? 248 : 25}px`,
     }"
   >
     <el-button
       @click="changeStatus"
       circle
-      :title="`${useStatusStore().getLegendShow() ? '关闭' : '打开'}图例`"
-      >{{ useStatusStore().getLegendShow() ? '-' : '+' }}</el-button
+      :title="`${useStatusStore().uiComponents.legendShow ? '关闭' : '打开'}图例`"
+      >{{ useStatusStore().uiComponents.legendShow ? '-' : '+' }}</el-button
     >
   </div>
-  <div class="legend-box" v-show="useStatusStore().getLegendShow()">
+  <div class="legend-box" v-show="useStatusStore().uiComponents.legendShow">
     <div class="title-box">
       <header>图例</header>
     </div>
@@ -55,7 +55,8 @@
 
   // 切换图例显示状态
   const changeStatus = () => {
-    useStatusStore().setLegendShow(!useStatusStore().getLegendShow());
+    useStatusStore().uiComponents.legendShow =
+      !useStatusStore().uiComponents.legendShow;
   };
 
   onMounted(() => {