右侧弹出收起修改

frontend/src/components/RightDrawer/index.vue

@@ -1,25 +1,26 @@
 <!-- SidePanelItem.vue -->
 <template>
   <div class="rightContentDrawer">
-    <div @click="handleToggle" class="drawerController1" v-if="!drawerOpen">
+    <div @click="handleToggle" class="drawerController1" v-if="!uiStore.drawerOpen">
-      <img src="../../assets/components/arrow-left.png" alt="">
+      <img src="../../assets/components/arrow-left.png" alt="" />
     </div>
-    
+
     <!-- 使用 Vue 的 Transition 组件控制动画 -->
     <transition name="drawer-slide">
-      <a-drawer 
+      <a-drawer
         :get-container="false"
-        :style="{ position: 'relative' }" 
+        :style="{ position: 'relative' }"
-        v-model:open="drawerOpen"
+        v-model:open="uiStore.drawerOpen"
-        :mask="false" 
+        :mask="false"
-        placement="right" 
+        placement="right"
-        width="450" 
+        width="450"
         :closable="false"
-        :headerStyle="{ color: '#FAFCFE' }">
+        :headerStyle="{ color: '#FAFCFE' }"
+      >
         <div @click="handleToggle" class="drawerController">
-          <img src="../../assets/components/arrow-right.png" alt="">
+          <img src="../../assets/components/arrow-right.png" alt="" />
         </div>
-        <div style="padding:16px 16px 0">
+        <div style="padding: 16px 16px 0">
           <slot />
         </div>
       </a-drawer>
@@ -28,16 +29,19 @@
 </template>
 
 <script setup>
-import { ref, defineOptions } from 'vue';
+import { ref, defineOptions, watch } from "vue";
+import { useUiStore } from "@/store/modules/ui";
+import { set } from "nprogress";
 
 // 定义组件名 (便于调试和递归)
 defineOptions({
-  name: 'rightDrawer'
+  name: "rightDrawer",
 });
-const drawerOpen = ref(true);
+
+const uiStore = useUiStore();
 
 const handleToggle = () => {
-  drawerOpen.value = !drawerOpen.value;
+  uiStore.toggleDrawer()
 };
 </script>
 
@@ -65,14 +69,13 @@ const handleToggle = () => {
   }
 }
 
-
 .ant-drawer {
   margin: 5px 0px;
-  
+
-  .ant-drawer-content{
+  .ant-drawer-content {
-    overflow:visible;
+    overflow: visible;
   }
-  
+
   .ant-drawer-content-wrapper {
     border: 2px solid #c5d6e2 !important;
     box-shadow: 3px 3px 3px 9px #e5edf3 !important;
@@ -97,7 +100,7 @@ const handleToggle = () => {
   background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
   background-repeat: no-repeat;
   display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
 }
-</style>
+</style>

frontend/src/components/mapController/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="map-controller">
+  <div class="map-controller" :style="{ right: drawerOpen ? '480px' : '12px' }">
     <div class="map-controller-group">
       <div class="map-controller-item" v-for="item in controllers" :key="item.key">
         <a-tooltip :title="item.name" placement="left">
@@ -10,9 +10,22 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useUiStore } from "@/store/modules/ui";
+
+// 使用 Pinia store
+const uiStore = useUiStore();
+const drawerOpen = ref(uiStore.drawerOpen);
+
+// 监听 store 中的 drawerOpen 变化
+watch(() => uiStore.drawerOpen, (newVal) => {
+  drawerOpen.value = newVal;
+});
+
 const isFullScreen = ref(false);
 const mapType = ref("2D");
+
+// 响应式的控制器配置
 const controllers = ref([
   {
     name: "全屏",
@@ -34,7 +47,6 @@ const controllers = ref([
     key: "zoomOut",
     icon: "zoomOut",
   },
-
   {
     name: "3D",
     key: "dim",
@@ -42,9 +54,8 @@ const controllers = ref([
   },
   {
     name: "图层",
-    // 树形图层组件
     key: "layerController",
-    icon: "layer"
+    icon: "layer",
   },
   {
     name: "下载",
@@ -67,6 +78,7 @@ const controllers = ref([
     icon: "roaming",
   },
 ]);
+
 </script>
 
 <style lang="scss" scoped>
@@ -100,4 +112,4 @@ const controllers = ref([
     }
   }
 }
-</style>
+</style>

frontend/src/store/modules/ui.ts

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useUiStore = defineStore('ui', () => {
+  // 右侧抽屉状态
+  const drawerOpen = ref(true);
+
+  // 切换抽屉状态
+  const toggleDrawer = () => {
+    drawerOpen.value = !drawerOpen.value;
+  };
+
+  // 设置抽屉状态
+  const setDrawerOpen = (open: boolean) => {
+    drawerOpen.value = open;
+  };
+
+  return {
+    drawerOpen,
+    toggleDrawer,
+    setDrawerOpen,
+  };
+});