右侧抽屉组件添加

frontend/src/assets/components/bg-toggle.e1dabcf3.svg

@@ -0,0 +1 @@
+<svg width="16" height="88" xmlns="http://www.w3.org/2000/svg"><path d="M16 0a22.397 22.397 0 0 1-8.71 12.793l-2.265 1.618A12 12 0 0 0 0 24.175v39.65a12 12 0 0 0 5.025 9.764l2.265 1.618c4.2 3 7.23 7.356 8.588 12.325L16 88V0Z" fill="#E5EDF3" fill-rule="evenodd"/></svg>

frontend/src/components/RightDrawer/index.vue

@@ -1,83 +1,97 @@
-<script setup lang="ts">
+<!-- SidePanelItem.vue -->
-import { ref } from "vue";
+<template>
-import { RightOutlined, LeftOutlined } from "@ant-design/icons-vue";
+  <div class="rightContentDrawer">
+    <div @click="drawerOpen = !drawerOpen" class="drawerController1"
+      >
+      <img src="../../assets/components/arrow-left.png" alt="">
+    </div>
+    <a-drawer :get-container="false"
+      :style="{ position: 'absolute' }" v-model:open="drawerOpen" :mask="false" placement="right" width="450" :closable="false"
+      @after-open-change="afterOpenChange" :headerStyle="{ color: '#FAFCFE' }">
+      <div @click="drawerOpen = !drawerOpen" class="drawerController">
+        <img src="../../assets/components/arrow-right.png" alt="">
+      </div>
+      <div style="padding:16px 16px 0">
+        <slot />
+      </div>
+    </a-drawer>
+  </div>
+</template>
 
-const open = ref(true);
+<script setup>
+import { ref, defineOptions, watch } from 'vue';
 
-// 切换抽屉状态
+// 定义组件名（便于调试和递归）
-const toggleDrawer = () => {
+defineOptions({
-  open.value = !open.value;
+  name: 'rightDrawer'
-};
+});
+const drawerOpen = ref(true);
+const shujv = ref('123456789');
+// const afterOpenChange = (open) => {
+//   if (!open) {
+//     drawerOpen.value = false;
+//   }
+// };
 </script>
 
-<template>
+<style lang="scss">
-  <!-- <div class="rightContentDrawer"> -->
-  <!-- 保持原有的 drawer 参数不变 -->
-  <a-drawer
-    :mask="false"
-    placement="right"
-    :open="true"
-    width="450"
-    :closable="false"
-    :headerStyle="{ color: '#FAFCFE' }"
-    :rootClassName="{ 'drawer-collapsed': !open }"
-    :getContainer="false"
-    :destroyOnClose="false"
-  >
-    <!-- 箭头按钮 - 始终显示在左侧中间位置 -->
-    <div class="toggle-button" :class="{ collapsed: !open }" @click="toggleDrawer">
-      <span class="arrow-icon" v-if="!open">
-        <LeftOutlined />
-      </span>
-      <span class="arrow-icon" v-else>
-        <RightOutlined />
-      </span>
-    </div>
-    <slot />
-  </a-drawer>
-  <!-- </div> -->
-</template>
-<style scoped lang="scss">
 .rightContentDrawer {
   height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  // 修复收起时布局塌陷问题
+  flex-shrink: 0;
+
+  .drawerController1 {
+    width: 18px;
+    position: absolute;
+    right: 0px;
+    cursor: pointer;
+    z-index: 10;
+    height: 88px;
+    line-height: 88px;
+    top: 45%;
+    // left: -18px;
+    vertical-align: middle;
+    background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
 }
 
-    .toggle-button {
+.ant-drawer {
-        width: 18px;
+  margin: 5px 0px;
-        position: absolute;
+.ant-drawer-content{
-        right: 10px;
+  overflow:visible;
-        cursor: pointer;
+}
-        z-index: 10;
+  .ant-drawer-content-wrapper {
-        height: 88px;
+    border: 2px solid #c5d6e2 !important;
-        line-height: 88px;
+    box-shadow: 3px 3px 3px 9px #e5edf3 !important;
-        top: 45%;
+  }
-        left: -18px;
-        vertical-align: middle;
-        background-image: url('@/assets/bg-toggle.svg');
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
 
-        &.collapsed {
+  .ant-drawer-body {
-            left: -20px;
+    padding: 0px !important;
-            border-radius: 0 4px 4px 0;
+  }
-        }
+}
 
-        .arrow-icon {
+.drawerController {
-            color: rgb(81, 131, 169);
+  width: 18px;
-            font-size: 18px;
+  position: absolute;
-            transition: transform 0.3s ease;
+  right: 10px;
-        }
+  cursor: pointer;
-    }
+  z-index: 10;
-
+  height: 88px;
-    :deep(.ant-drawer) {
+  line-height: 88px;
-
+  top: 45%;
-        .ant-drawer-content-wrapper {
+  left: -18px;
-            right: 0;
+  vertical-align: middle;
-            bottom: 0px;
+  background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
-            border: 2px solid #c5d6e2 !important;
+  background-repeat: no-repeat;
-            box-shadow: 3px 3px 3px 9px #e5edf3 !important;
+  display: flex;
-            display: flex;
+    justify-content: center;
-            flex-direction: column;
+    align-items: center;
-        }
+}
-    }
 </style>

frontend/src/modules/rightDrawer/index.vue

@@ -0,0 +1,88 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <div class="rightContentDrawer">
+    <div @click="drawerOpen = !drawerOpen" class="drawerController1"
+      :style="drawerOpen ? 'display:none' : 'display:block'">
+      <img src="../../assets/components/arrow-left.png" alt="">
+    </div>
+    <a-drawer v-model:open="drawerOpen" :mask="false" placement="right" width="450" :closable="false"
+      @after-open-change="afterOpenChange" :headerStyle="{ color: '#FAFCFE' }">
+      <div @click="drawerOpen = !drawerOpen" class="drawerController">
+        <img src="../../assets/components/arrow-right.png" alt="">
+      </div>
+      <div style="padding:16px 16px 0">
+        <slot />
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineOptions, watch } from 'vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+  name: 'rightDrawer'
+});
+const drawerOpen = ref(true);
+const shujv = ref('123456789');
+// const afterOpenChange = (open) => {
+//   if (!open) {
+//     drawerOpen.value = false;
+//   }
+// };
+</script>
+
+<style lang="less">
+.rightContentDrawer {
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  // 修复收起时布局塌陷问题
+  flex-shrink: 0;
+
+  .drawerController1 {
+    width: 18px;
+    position: absolute;
+    right: 0px;
+    cursor: pointer;
+    z-index: 10;
+    height: 88px;
+    line-height: 88px;
+    top: 45%;
+    // left: -18px;
+    vertical-align: middle;
+    background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
+    background-repeat: no-repeat;
+  }
+
+}
+
+.ant-drawer {
+  margin: 5px 0px;
+
+  .ant-drawer-content-wrapper {
+    border: 2px solid #c5d6e2 !important;
+    box-shadow: 3px 3px 3px 9px #e5edf3 !important;
+  }
+
+  .ant-drawer-body {
+    padding: 0px !important;
+  }
+}
+
+.drawerController {
+  width: 18px;
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+  z-index: 10;
+  height: 88px;
+  line-height: 88px;
+  top: 45%;
+  left: -18px;
+  vertical-align: middle;
+  background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
+  background-repeat: no-repeat;
+}
+</style>

frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue

@@ -11,7 +11,7 @@ import RightDrawer from "@/components/RightDrawer/index.vue";
       </div>
       <div class="rightContent">
         <RightDrawer>
-        789231
+        <!-- 789231 -->
                     <!-- <SidePanel title={currentItem ? currentItem.basename : ""}>
                         <JidiInfoMod />
                         <ShuidianhuangjingjieruMod />
@@ -21,3 +21,12 @@ import RightDrawer from "@/components/RightDrawer/index.vue";
     </div>
   </div>
 </template>
+<style lang="scss">
+  .moduleContent{
+    display: flex;
+    justify-content: space-between;
+    .rightContent{
+      height: 85vh;
+    }
+  }
+</style>