TrueGrowth/docs/AI_INPUT_COMPOSER_SHARED_SHELL_LESSONS.md

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 通过
• 抽屉输入框内层橙色边框已移除