From 561ac8a76a2cb3d126953849823a0ceb0cfb8f20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E8=89=AF=E6=A3=AE=28zhaols=29?=
 <你的邮箱@example.com>
Date: Thu, 2 Apr 2026 08:56:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=BC=B9=E5=87=BA=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/RightDrawer/index.vue | 51 ++++++++++---------
 .../src/components/mapController/index.vue    | 24 ++++++---
 frontend/src/store/modules/ui.ts              | 23 +++++++++
 3 files changed, 68 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/store/modules/ui.ts

diff --git a/frontend/src/components/RightDrawer/index.vue b/frontend/src/components/RightDrawer/index.vue
index f199a89..33799af 100644
--- a/frontend/src/components/RightDrawer/index.vue
+++ b/frontend/src/components/RightDrawer/index.vue
@@ -1,25 +1,26 @@
 <!-- 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 组件控制动画 -->
     <transition name="drawer-slide">
-      <a-drawer 
+      <a-drawer
         :get-container="false"
-        :style="{ position: 'relative' }" 
-        v-model:open="drawerOpen"
-        :mask="false" 
-        placement="right" 
-        width="450" 
+        :style="{ position: 'relative' }"
+        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">
+        <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{
-    overflow:visible;
+
+  .ant-drawer-content {
+    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;
-    align-items: center;
+  justify-content: center;
+  align-items: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/mapController/index.vue b/frontend/src/components/mapController/index.vue
index 2bd8b65..b89c4d8 100644
--- a/frontend/src/components/mapController/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/store/modules/ui.ts b/frontend/src/store/modules/ui.ts
new file mode 100644
index 0000000..12adb5e
--- /dev/null
+++ b/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,
+  };
+});
\ No newline at end of file