# CollapseContainer 折叠容器

参考 Vben Admin 的 `CollapseContainer` 交互习惯封装的内容容器，适合包裹表单、表格、统计卡片、详情区块等内容区域。

支持以下能力：

- 标题区与帮助提示
- 展开 / 收起切换
- `expanded` 受控模式与 `defaultExpand` 非受控模式
- `title` / `action` 插槽
- `loading` 状态
- `ghost` 透明模式
- 折叠后自动触发 `window.resize`，便于内部表格/图表重新计算布局

## 基础用法

```vue
<template>
  <CollapseContainer title="查询条件">
    <ProForm :schemas="schemas" />
  </CollapseContainer>
</template>

<script setup lang="ts">
import { CollapseContainer, ProForm } from 'element-component-pro'
import type { ProFormSchema } from 'element-component-pro'

const schemas: ProFormSchema[] = [
  { field: 'name', label: '姓名', component: 'input' },
  { field: 'status', label: '状态', component: 'select', componentProps: { options: [
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 },
  ] } },
]
</script>
```

## 受控展开

```vue
<template>
  <CollapseContainer
    title="高级筛选"
    :expanded.sync="expanded"
  >
    <div>这里放高级筛选内容</div>
  </CollapseContainer>

  <el-button @click="expanded = !expanded">
    外部切换
  </el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CollapseContainer } from 'element-component-pro'

const expanded = ref(true)
</script>
```

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `title` | `string` | - | 标题文案 |
| `loading` | `boolean` | `false` | 容器 loading |
| `canExpan` | `boolean` | `true` | 是否显示折叠按钮，保留 Vben Admin 命名 |
| `canExpand` | `boolean` | - | `canExpan` 的语义化别名，优先级更高 |
| `helpMessage` | `string \| string[]` | - | 标题右侧帮助提示 |
| `triggerWindowResize` | `boolean` | `true` | 展开收起后是否触发 `window.resize` |
| `expanded` | `boolean` | - | 受控展开状态 |
| `defaultExpand` | `boolean` | `true` | 非受控模式下默认是否展开 |
| `ghost` | `boolean` | `false` | 是否使用透明背景模式 |
| `expandButtonText` | `string` | `'展开'` | 展开按钮文案 |
| `collapseButtonText` | `string` | `'收起'` | 收起按钮文案 |

## Events

| 事件 | 回调参数 | 说明 |
|------|----------|------|
| `update:expanded` | `(value: boolean)` | 受控模式同步展开状态 |
| `change` | `(value: boolean)` | 展开状态变化时触发 |
| `expand` | - | 展开时触发 |
| `collapse` | - | 收起时触发 |

## Slots

| 名称 | 说明 |
|------|------|
| `default` | 容器主体内容 |
| `title` | 自定义标题区域 |
| `action` | 标题右侧操作区 |

## Expose

| 方法 | 类型 | 说明 |
|------|------|------|
| `setExpanded` | `(value: boolean) => void` | 手动设置展开状态 |
| `toggleExpand` | `() => void` | 手动切换展开状态 |