35 lines
1.4 KiB
Markdown
35 lines
1.4 KiB
Markdown
# 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` 通过
|
||
- 抽屉输入框内层橙色边框已移除
|