Layout 布局
帮助构建中后台页面的整体框架，提供 <c-layout>、<c-layout-header>、<c-layout-sider>、<c-layout-content>、<c-layout-footer> 五个组件。
何时使用
- 中后台典型布局：顶部导航 / 侧边导航 / 主体内容 / 底部信息。
- 在
<c-layout>嵌套<c-layout>实现复杂分栏。
基本使用
最简的"上中下"结构。
含侧边栏
<c-layout-sider> 直接放在 <c-layout> 第一位作为左栏。
可折叠侧边栏
collapsible 在底部加上一个折叠按钮；用 v-model:collapsed 双向同步状态。
自定义宽度
width 设置展开宽度，collapsedWidth 设置折叠后的宽度。
浅色侧边栏
theme="light" 用浅色背景的 sider，更适合品牌色顶栏 + 白色侧栏的搭配。
监听折叠
collapse 事件回调 (collapsed, type)，type 标识触发来源（'clickTrigger'）。
API
Layout / Header / Content / Footer
直接渲染对应语义化标签，无额外 props。style 可自由覆盖背景 / 内边距等。
LayoutSider Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | number | string | 200 | 展开宽度 |
| collapsedWidth | number | string | 80 | 折叠后宽度。设为 0 时 Sider 完全消失，触发器由 zeroWidthTriggerStyle 定位为浮动按钮 |
| collapsed | boolean | — | 当前折叠状态，支持 v-model:collapsed |
| defaultCollapsed | boolean | false | 初始折叠状态 |
| collapsible | boolean | false | 显示底部折叠按钮 |
| reverseArrow | boolean | false | 折叠按钮的箭头反向 |
| theme | 'light' | 'dark' | 'dark' | 主题色 |
| breakpoint | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | 响应式断点。视口宽度小于对应断点时自动折叠；解除时自动展开。受控 collapsed 时仅 emit 事件不覆盖父值 |
| zeroWidthTriggerStyle | CSSProperties | — | collapsedWidth=0 且当前折叠时，触发器的 inline style（用于做浮动定位） |
LayoutSider Events
| 事件 | 回调签名 | 说明 |
|---|---|---|
| update:collapsed | (value: boolean) | 折叠状态变化 |
| collapse | (value: boolean, type: string) | 折叠被触发，type 为 'clickTrigger' / 'responsive' |
| breakpoint | (broken: boolean) | 断点状态变化。broken=true 表示视口已小于断点（自动折叠），false 表示恢复 |