witFold 侧边栏折叠控制

witFold是一个侧边栏折叠/展开控制组件，用于切换左侧菜单的显示状态，提供直观的视觉交互反馈。

用法实例

<template>
  <div class="app-container">
    <witFallBar />
    <witFold />
    <main class="app-main">
      <!-- 主要内容区域 -->
    </main>
  </div>
</template>

<script lang="ts" setup>
// 组件会自动与 settingsStore 集成，无需额外配置
</script>

<style>
.app-container {
  display: flex;
  height: 100vh;
}

.app-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>

API

属性名	类型	默认值	描述
无	-	-	组件无需额外属性配置

插槽

插槽名	描述
无	组件不提供插槽

事件

事件名	描述	参数
无	组件不触发外部事件	-

功能说明

1. 状态管理：组件与 settingsStore 集成，自动同步侧边栏折叠状态
2. 视觉反馈：点击时图标会旋转180度，提供清晰的状态切换反馈
3. 自定义样式：采用了现代化的三角形上下边框设计，与侧边栏风格统一

使用提示

TIP

1. 组件依赖 settingsStore 来管理折叠状态，确保已正确配置状态管理
2. 组件通常与 witFallBar 或其他侧边栏组件配合使用
3. 点击组件会触发 settingsStore 中的 toggleCollapse 方法
4. 折叠状态变化会自动反映在侧边栏组件上
5. 组件样式使用了 CSS 变量，可通过主题配置进行自定义