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

<!-- SidePanelItem.vue -->
<template>
  <div class="rightContentDrawer">
    <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
        :get-container="false"
        :style="{ position: 'relative' }"
        v-model:open="uiStore.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 8px 0;" class="text_she">
          <slot />
        </div>
      </a-drawer>
    </transition>
  </div>
</template>

<script setup>
import { ref, defineOptions, watch } from "vue";
import { useUiStore } from "@/store/modules/ui";
import { set } from "nprogress";

// 定义组件名 (便于调试和递归)
defineOptions({
  name: "rightDrawer",
});

const uiStore = useUiStore();

const handleToggle = () => {
  uiStore.toggleDrawer()
};
</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;
}
.text_she{
  font-size: 14px;
  color:#262626;
  font-variant: tabular-nums;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
</style>