WholeProcessPlatform/frontend/src/components/RightDrawer/index.vue

<!-- SidePanelItem.vue -->
<template>
  <div class="rightContentDrawer">
    <div @click="handleToggle" class="drawerController1" v-if="!drawerOpen">
      <img src="../../assets/components/arrow-left.png" alt="">
    </div>
    
    <!-- 使用 Vue 的 Transition 组件控制动画 -->
    <transition name="drawer-slide">
      <a-drawer 
        :get-container="false"
        :style="{ position: 'relative' }" 
        v-model:open="drawerOpen"
        :mask="false" 
        placement="right" 
        width="450" 
        :closable="false"
        :headerStyle="{ color: '#FAFCFE' }">
        <div @click="handleToggle" class="drawerController">
          <img src="../../assets/components/arrow-right.png" alt="">
        </div>
        <div style="padding:16px 16px 0">
          <slot />
        </div>
      </a-drawer>
    </transition>
  </div>
</template>

<script setup>
import { ref, defineOptions } from 'vue';

// 定义组件名 (便于调试和递归)
defineOptions({
  name: 'rightDrawer'
});
const drawerOpen = ref(true);

const handleToggle = () => {
  drawerOpen.value = !drawerOpen.value;
};
</script>

<style lang="scss">
.rightContentDrawer {
  height: 100%;
  position: relative;
  box-sizing: border-box;

  .drawerController1 {
    width: 18px;
    position: absolute;
    right: -2px;
    cursor: pointer;
    z-index: 10;
    height: 88px;
    line-height: 88px;
    top: 45%;
    vertical-align: middle;
    background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}


.ant-drawer {
  margin: 5px 0px;
  
  .ant-drawer-content{
    overflow:visible;
  }
  
  .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;
  display: flex;
    justify-content: center;
    align-items: center;
}
</style>