水平分栏（拖拽中间分隔条）
左侧面板 · 文件树 / 列表 / 导航
右侧面板 · 主内容 / 详情区
垂直分栏（上下）
上侧面板
下侧面板
<p class="chart-cap">水平分栏（拖拽中间分隔条）</p><div class="icen-split-pane" data-icen-split-pane style="height:200px;margin-top:6px"> <div class="icen-split-pane-first" style="padding:14px;font-size:var(--icen-density-font-size-sm);color:var(--icen-token-text-muted)">左侧面板 · 文件树 / 列表 / 导航</div> <div class="icen-split-pane-divider" role="separator" aria-label="拖拽调整"></div> <div class="icen-split-pane-second" style="padding:14px;font-size:var(--icen-density-font-size-sm);color:var(--icen-token-text-muted)">右侧面板 · 主内容 / 详情区</div></div><p class="chart-cap" style="margin-top:20px">垂直分栏（上下）</p><div class="icen-split-pane icen-split-pane--vertical" data-icen-split-pane style="height:240px;margin-top:6px"> <div class="icen-split-pane-first" style="padding:14px;font-size:var(--icen-density-font-size-sm);color:var(--icen-token-text-muted)">上侧面板</div> <div class="icen-split-pane-divider" role="separator" aria-label="拖拽调整"></div> <div class="icen-split-pane-second" style="padding:14px;font-size:var(--icen-density-font-size-sm);color:var(--icen-token-text-muted)">下侧面板</div></div>特性
- 方向：默认水平；
icen-split-pane--vertical垂直上下分栏 - 复位：双击分隔条回到 50%；初始比例用
--split变量 - 键盘：聚焦分隔条后 ←→ ↑↓ 步进调整，Home/End 到极值
- 结构：
icen-split-pane-first/icen-split-pane-divider/icen-split-pane-second，分隔条带role="separator"
接口
- 初始化
initSplitPane()（kit 一行入口可直接命名导入）- 导出
-
initSplitPane - 事件
-
icen:split-changedetail 契约见IcenEventMap - 类型
dist/behaviors/split-pane.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initSplitPane } from '@icen.ai/ui/kit/split-pane';initSplitPane();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add split-pane
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/split-pane.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initSplitPane } from '@icen.ai/ui/behaviors/split-pane';initSplitPane();<!-- DOM 契约 --><div class="icen-split-pane [--vertical]" data-icen-split-pane style="--split:50%; height:400px"> <div class="icen-split-pane-first">左侧</div> <div class="icen-split-pane-divider" role="separator"></div> <div class="icen-split-pane-second">右侧</div></div><!-- data-icen-split-min/max（默认 10/90）、data-icen-split-step（键盘步长，默认 2） -->