添加折叠面板

docs/components/tab.md

@@ -0,0 +1,92 @@
+## 1. 组件概述
+- **名称**：BimTab
+- **位置**：`src/components/tab/`
+- **功能**：渲染固定标签页（不支持运行期增删），支持点击切换、禁用、可选内容托管。主题由全局 `ThemeManager` 提供，文案通过 `t()` 翻译。
+- **使用方式**：直接通过构造函数 + `init()` 创建；本项目内目前仅在 `ConstructTreeManagerBtn` 弹窗中使用（无专门 Manager）。
+
+## 2. 组件类 API（BimTab）
+- `constructor(options: TabOptions)`：创建实例并挂载到 `options.container`。
+- `init(): void`：渲染头部与内容，订阅主题/语言。
+- `activateTab(tabId: string): void`：切换激活标签，触发 `onChange`。
+- `setTheme(theme: ThemeConfig): void`：应用主题变量。
+- `setLocales(): void`：刷新标题文案。
+- `destroy(): void`：解绑事件、取消订阅、移除 DOM。
+
+## 3. 分化组件
+- 当前无子类或变体，后续可扩展滚动、溢出折叠等能力。
+
+## 4. 使用场景说明
+- **ConstructTreeManagerBtn 弹窗**：顶部三段标签（构件/系统/空间），构件标签承载原有 Tree，系统/空间暂为空容器。
+- 适用于固定分区切换，内容简单或由外部回调控制。
+
+## 5. UI 结构
+```
+div.bim-tab
+  div.bim-tab__nav [role=tablist]
+    button.bim-tab__item[role=tab][aria-selected][aria-disabled?]
+      span.bim-tab__icon? (可选)
+      span.bim-tab__title
+  div.bim-tab__content
+    div.bim-tab__panel[role=tabpanel][aria-labelledby=tab-xxx]
+    ...
+```
+- 状态类：`.is-active`、`.is-disabled`。
+- 内容区：仅切换显示，不强制填充（可为空）。
+
+## 6. 逻辑流程
+1) `constructor`：创建根节点、头部、内容容器；缓存 tab 数据；挂载到传入容器。  
+2) `init`：渲染头部按钮与内容面板，设置初始激活；应用当前主题/语言；订阅主题、语言变更。  
+3) 交互：点击非禁用按钮 → `activateTab` 更新头部/面板状态 → 回调 `onChange`。  
+4) 销毁：解绑点击监听、取消订阅、清空映射并移除 DOM。
+
+## 7. 国际化
+- 标题：`t(tab.title)`，若翻译键不存在则回退原文。
+- 新增翻译键：`tab.component` / `tab.system` / `tab.space`（已在 `zh-CN.ts`、`en-US.ts` 注册）。
+- `setLocales()`：遍历头部按钮刷新标题文案；订阅 `localeManager` 自动响应语言切换。
+
+## 8. 主题支持
+- 来自 `themeManager`，不从配置传入。
+- 使用的变量（设置在根节点上）：  
+  - `--bim-tab-bg`、`--bim-tab-nav-bg`  
+  - `--bim-tab-text`、`--bim-tab-text-secondary`、`--bim-tab-text-active`  
+  - `--bim-tab-border`、`--bim-tab-hover-bg`、`--bim-tab-active-bg`  
+  - `--bim-tab-icon`
+- `setTheme(theme)`：根据 `ThemeConfig` 写入上述 CSS 变量。
+
+## 9. 使用示例
+```ts
+const tabMount = document.createElement('div');
+const tab = new BimTab({
+  container: tabMount,
+  tabs: [
+    { id: 'component', title: 'tab.component', content: componentEl },
+    { id: 'system', title: 'tab.system', content: systemEl },
+    { id: 'space', title: 'tab.space', content: spaceEl },
+  ],
+  activeId: 'component',
+  onChange: (id) => {
+    // 根据 id 做额外逻辑（如埋点、动态加载）
+  },
+});
+tab.init();
+```
+
+## 10. 实现细节
+- 仅支持固定 tabs：`TabOptions.tabs` 为初始化列表，不提供新增/删除接口。
+- 内容托管两种方式：`content: HTMLElement`（append）或 `content: string`（innerHTML）。未提供内容时面板为空。
+- 事件绑定：头部使用事件委托绑定 click，销毁时移除。  
+- 访问性：头部 `role=tab`、`aria-selected`、`aria-disabled`；面板 `role=tabpanel` 且 `aria-labelledby` 对应头部 id。  
+- 主题/语言订阅：`localeManager.subscribe`、`themeManager.subscribe`，销毁时必须取消。
+
+## 11. 类型定义
+- 位置：`src/components/tab/index.type.ts`
+- 主要类型：
+  - `TabItem`: `{ id; title; disabled?; icon?; content?; meta? }`
+  - `TabOptions`: `{ container; tabs; activeId?; onChange? }`
+
+## 12. 文件清单
+- `src/components/tab/index.ts`：组件实现
+- `src/components/tab/index.type.ts`：类型定义
+- `src/components/tab/index.css`：样式
+- （无 Manager）当前仅在 `ConstructTreeManagerBtn` 中直接使用
+