ruoyi-plus-soybean/src/layouts/common/setting-drawer/components/drawer-button/index.vue

<template>
  <n-button
    type="primary"
    :class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
    class="fixed top-360px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
    @click="app.toggleSettingDrawerVisible"
  >
    <icon-ant-design-close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
    <icon-ant-design-setting-outlined v-else class="text-24px" />
  </n-button>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store';

defineOptions({ name: 'DrawerButton' });

const app = useAppStore();
</script>

<style scoped></style>