mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-11 11:46:38 +08:00
40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
|
<!-- 侧边栏折叠按钮 -->
|
||
|
|
<script setup lang="ts">
|
||
|
|
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||
|
|
import { SIDE_BAR_WIDTH } from '@/config/index';
|
||
|
|
import { useCollapseToggle } from '@/hooks/useCollapseToggle';
|
||
|
|
import { useDesignStore } from '@/stores';
|
||
|
|
|
||
|
|
const { changeCollapse } = useCollapseToggle();
|
||
|
|
const designStore = useDesignStore();
|
||
|
|
|
||
|
|
function handleChangeCollapse() {
|
||
|
|
changeCollapse();
|
||
|
|
// 每次切换折叠状态，重置安全区状态
|
||
|
|
designStore.isSafeAreaHover = false;
|
||
|
|
// 重置首次激活悬停状态
|
||
|
|
designStore.hasActivatedHover = false;
|
||
|
|
if (!designStore.isCollapse) {
|
||
|
|
document.documentElement.style.setProperty(
|
||
|
|
`--sidebar-left-container-default-width`,
|
||
|
|
`${SIDE_BAR_WIDTH}px`,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="collapse-container btn-icon-btn" @click="handleChangeCollapse">
|
||
|
|
<SvgIcon v-if="!designStore.isCollapse" name="ms-left-panel-close-outline" size="24" />
|
||
|
|
<SvgIcon v-if="designStore.isCollapse" name="ms-left-panel-open-outline" size="24" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
// .collapse-container {
|
||
|
|
// }
|
||
|
|
</style>
|
