右侧弹出收起修改

frontend/src/components/RightDrawer/index.vue

@@ -1,8 +1,8 @@
 <!-- SidePanelItem.vue -->
 <template>
   <div class="rightContentDrawer">
-    <div @click="handleToggle" class="drawerController1" v-if="!drawerOpen">
-      <img src="../../assets/components/arrow-left.png" alt="">
+    <div @click="handleToggle" class="drawerController1" v-if="!uiStore.drawerOpen">
+      <img src="../../assets/components/arrow-left.png" alt="" />
     </div>
 
     <!-- 使用 Vue 的 Transition 组件控制动画 -->
@@ -10,14 +10,15 @@
       <a-drawer
         :get-container="false"
         :style="{ position: 'relative' }"
-        v-model:open="drawerOpen"
+        v-model:open="uiStore.drawerOpen"
         :mask="false"
         placement="right"
         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">
           <slot />
@@ -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,7 +69,6 @@ const handleToggle = () => {
   }
 }
 
-
 .ant-drawer {
   margin: 5px 0px;
 

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>

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,
+  };
+});