web_dist/src/layout/compoents/CollapseIcon.vue

<script setup lang="ts">
import {Expand, Fold} from "@element-plus/icons-vue";
import {useSystemStore} from "@/pinia/system-store";

const systemStore = useSystemStore()
const isCollapse = computed(() => systemStore.userConfig.isCollapse)
const switchCollapse = () => {
  systemStore.setCollapse(!isCollapse.value)
}
</script>

<template>
  <div class="collapse-icon"
       @click="switchCollapse">
    <el-icon>
      <Expand v-if="isCollapse"/>
      <Fold v-else/>
    </el-icon>
  </div>
</template>

<style lang="scss">
.collapse-icon {
  font-size: 26px;
  cursor: pointer;
}
</style>