# AI 输入框共享壳与抽屉复用经验

更新日期：2026-05-17

## 背景

画布底部 AI 输入框和对话抽屉输入框看起来很像，但它们的职责并不一样。

- 画布侧要承载固定定位、灵感板、选择监听、工作流等上下文。
- 抽屉侧只需要对话输入、选中内容预览、附件、模型和参数控制。

如果直接复用整块 `AIInputBar`，会把画布业务一并拖进去，耦合会越来越重。

## 架构变更

- 抽出 `AIInputComposerShell`，只保留输入壳的布局和插槽，不承载业务逻辑。
- 画布侧继续使用 `variant="canvas"`，保留原有业务能力。
- 抽屉侧使用 `variant="drawer"`，复用同一套壳和控件层。
- 抽屉输入框改成纯 textarea，不再包一层额外的输入面板。
- 删除全局 `textarea:hover` / `textarea:focus` 橙色描边，避免污染所有输入场景。

## 经验规则

- 共享的是布局壳，不是整块业务组件。
- 同源输入框优先用 `variant` 区分差异，不要复制两套 wrapper。
- 全局 textarea 样式不要写 hover / focus 边框，容易制造“内层框”。
- 需要统一视觉时，优先保留单一主容器边界，textarea 只保留无边框状态。
- 结构复用比纯 CSS 修补更稳，后续抽屉和画布都更容易继续收敛。

## 验证

- `EnhancedChatInput` 单测通过
- `drawnix:typecheck` 通过
- 抽屉输入框内层橙色边框已移除