|
|
@@ -0,0 +1,125 @@
|
|
|
+# AI 大纲输入区底栏控制设计
|
|
|
+
|
|
|
+日期：2026-06-30
|
|
|
+
|
|
|
+## 目标
|
|
|
+
|
|
|
+优化 AI 大纲输入框的控制区布局，解决当前“章节细纲、人物小传、组织势力设定、金手指与能力体系、伏笔计划、地点设定”等长文字按钮占用空间的问题，同时把输入框内左上角的停靠图标移动到底栏右侧，让底栏控制集中、紧凑、与整体主题一致。
|
|
|
+
|
|
|
+## 成功标准
|
|
|
+
|
|
|
+1. AI 大纲输入框上方不再常驻显示一排长文字生成按钮。
|
|
|
+2. 停靠图标移动到底栏右侧，不再漂在输入框内容区左上角。
|
|
|
+3. 底栏右侧顺序固定为：停靠图标、大纲生成图标、模型选择、发送按钮。
|
|
|
+4. 大纲生成图标点击后弹出完整文字菜单，菜单项包括：
|
|
|
+ 章节细纲、人物小传、组织势力设定、金手指与能力体系、伏笔计划、地点设定。
|
|
|
+5. 点击菜单项后继续调用现有大纲生成流程，不改变 AI 工作流和提示词配置。
|
|
|
+6. 加号按钮颜色改为跟随主题，不再固定使用突兀的绿色。
|
|
|
+7. 修改不影响 AI 会话输入框、模型选择、发送、停止生成、停靠控制等既有功能。
|
|
|
+
|
|
|
+## 范围
|
|
|
+
|
|
|
+本次只调整 AI 大纲面板输入区与头部加号按钮的展示方式。核心生成配置、模型解析、流式生成、保存为大纲、会话历史等逻辑不做重构。
|
|
|
+
|
|
|
+预计后续实现涉及：
|
|
|
+
|
|
|
+1. `src/components/sources/outline-chat-panel.tsx`
|
|
|
+2. `src/components/sources/outline-chat-panel.spec.tsx`
|
|
|
+
|
|
|
+如发现停靠图标来自共享 `ChatInput` 的布局能力，才在保持兼容的前提下最小调整 `src/components/chat/chat-input.tsx` 及对应测试。
|
|
|
+
|
|
|
+## 推荐方案
|
|
|
+
|
|
|
+采用“底栏右侧图标组 + 弹出文字菜单”的方案。
|
|
|
+
|
|
|
+默认底栏右侧布局：
|
|
|
+
|
|
|
+```text
|
|
|
+[停靠图标] [大纲生成图标] [模型选择] [发送]
|
|
|
+```
|
|
|
+
|
|
|
+大纲生成图标建议使用 `ListPlus`。它比纯闪光类图标更接近“大纲、列表、模块生成”的含义。图标按钮本身不显示文字，只通过 `aria-label`、`title` 或 Tooltip 提供“生成大纲模块”的说明。
|
|
|
+
|
|
|
+点击大纲生成图标后，在按钮上方弹出紧凑菜单：
|
|
|
+
|
|
|
+```text
|
|
|
+章节细纲
|
|
|
+人物小传
|
|
|
+组织势力设定
|
|
|
+金手指与能力体系
|
|
|
+伏笔计划
|
|
|
+地点设定
|
|
|
+```
|
|
|
+
|
|
|
+菜单项显示“图标 + 中文名称”，鼠标悬停显示简短说明。点击菜单项后关闭菜单，并调用现有的 `handleGenerateSection(config.title, config.requestHint)`。
|
|
|
+
|
|
|
+## 组件设计
|
|
|
+
|
|
|
+### 底栏控制
|
|
|
+
|
|
|
+AI 大纲面板继续复用 `ChatInput` 作为输入组件。大纲面板通过 `leftControls` 或 `rightControls` 传入控制按钮，但最终视觉上要把停靠、大纲生成、模型选择、发送归到同一底栏右侧控制组。
|
|
|
+
|
|
|
+如果 `ChatInput` 当前把停靠控件固定渲染到输入区左侧，则需要把停靠控件改为可由调用方控制位置，或在 AI 大纲面板中传入右侧停靠控制。该调整必须保持普通 AI 会话输入框现有布局不回退。
|
|
|
+
|
|
|
+### 大纲生成菜单
|
|
|
+
|
|
|
+新增一个局部菜单状态，例如 `outlineMenuOpen`。菜单打开后：
|
|
|
+
|
|
|
+1. 点击任一菜单项，执行对应生成并关闭菜单。
|
|
|
+2. 生成中禁用菜单项，避免重复触发。
|
|
|
+3. 点击外部或再次点击图标关闭菜单。
|
|
|
+4. 键盘可通过 Escape 关闭菜单。
|
|
|
+
|
|
|
+菜单数据继续使用 `OUTLINE_SECTION_GENERATION_CONFIGS`，不复制生成配置，避免后续配置不同步。
|
|
|
+
|
|
|
+### 加号按钮
|
|
|
+
|
|
|
+AI 大纲会话头部的新建会话按钮保留功能，但颜色从固定 `emerald` 改为主题跟随样式：
|
|
|
+
|
|
|
+```text
|
|
|
+border-border
|
|
|
+bg-accent/60
|
|
|
+text-foreground 或 text-primary
|
|
|
+hover:bg-accent
|
|
|
+```
|
|
|
+
|
|
|
+这样在东方美学配色和原有主题中都能自然适配。
|
|
|
+
|
|
|
+## 数据流
|
|
|
+
|
|
|
+1. 用户点击底栏右侧大纲生成图标。
|
|
|
+2. 面板打开由 `OUTLINE_SECTION_GENERATION_CONFIGS` 渲染的菜单。
|
|
|
+3. 用户选择一个大纲模块。
|
|
|
+4. 调用现有 `handleGenerateSection(title, requestHint)`。
|
|
|
+5. `handleGenerateSection` 继续调用 `handleSend`，进入现有 AI 大纲生成工作流。
|
|
|
+
|
|
|
+该流程只改变入口展示，不改变生成链路。
|
|
|
+
|
|
|
+## 错误与边界处理
|
|
|
+
|
|
|
+1. 生成中禁用大纲生成菜单，避免重复请求。
|
|
|
+2. 无可用模型时仍沿用现有无模型提示。
|
|
|
+3. 窄宽度下模型选择保持固定窄宽，图标按钮不换成文字。
|
|
|
+4. 菜单不应遮挡发送按钮，也不应撑高输入框。
|
|
|
+5. 所有可见提示语使用中文。
|
|
|
+
|
|
|
+## 测试计划
|
|
|
+
|
|
|
+1. 单元测试确认 AI 大纲面板不再常驻显示长文字生成按钮。
|
|
|
+2. 单元测试确认存在大纲生成图标按钮，并具备中文 `aria-label`。
|
|
|
+3. 单元测试确认点击大纲生成图标后出现完整中文菜单项。
|
|
|
+4. 单元测试确认点击菜单项会触发原有发送流程。
|
|
|
+5. 单元测试确认新建大纲会话加号按钮不再使用固定 `emerald` 样式。
|
|
|
+6. 手动验证底栏顺序为：停靠图标、大纲生成图标、模型选择、发送。
|
|
|
+
|
|
|
+## 风险
|
|
|
+
|
|
|
+主要风险在于 `ChatInput` 是共享组件。如果停靠图标位置由 `ChatInput` 内部固定控制，调整时必须避免影响普通 AI 会话输入框。实现时优先在 AI 大纲面板局部组合控制项；只有局部方案无法完成时，才对 `ChatInput` 增加兼容参数。
|
|
|
+
|
|
|
+## 非目标
|
|
|
+
|
|
|
+1. 不修改大纲生成提示词。
|
|
|
+2. 不修改模型选择逻辑。
|
|
|
+3. 不修改 AI 会话历史存储。
|
|
|
+4. 不新增新的大纲模块类型。
|
|
|
+5. 不改变普通 AI 会话输入框的既有功能。
|
Mochocyang