xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 15 Pull Requests 3 Actions Packages Projects Releases 7 Wiki Activity

[P2] 生成页标题输入框聚焦不展示标题库列表（AutoComplete空态不展开+无下拉入口） #1737

New Issue
Closed
opened 2026-09-06 14:23:45 +08:00 by xiaoxia · 0 comments
xiaoxia commented 2026-09-06 14:23:45 +08:00
Owner
Copy Link
Copy Source

现象（用户反馈 + staging 实测 2026-09-06）

生成视频第4步「选择标题」，标题输入框无法直接下拉选择标题库里已有标题；用户不知道要先打字才能看到标题库内容，且输入框没有任何下拉入口提示。

实测结论（浏览器真机取证，单视频 + 批量 N=3 两种模式一致）

  • GET /api/v1/titles 正常：HTTP 200，返回 9 条标题；Console 零报错；下拉 DOM 定位/z-index/样式全部正常
  • 聚焦空输入框（不输入文字）：下拉完全不渲染（.ant-select-dropdown 节点数为 0）
  • 输入文字（如"永康"）：下拉正常弹出，8 个匹配项，位置/样式正常，可正常选中填入
  • 根因：标题框用的是 antd AutoComplete 组件（apps/web/src/pages/generate/components/Step4TitleSettings.tsx，单视频约 206 行、批量约 268 行）。AutoComplete 的设计行为是"输入时给建议"，空态聚焦不展开列表（与点击即展开的 Select 不同）；且组件无下拉箭头，用户视觉上认为这是纯输入框，不知道标题库可选。
  • 结论：不是数据/接口/CSS/JS 故障，是交互设计与用户预期不符——用户期望"点一下就能看到标题库列表选标题"。

修复要求（前端）

  1. 聚焦/点击标题输入框即展开下拉，展示标题库全部标题（空输入时展示全部，输入文字时按现有逻辑过滤）
    • 推荐实现：AutoComplete 受控 open（onFocus 打开、onBlur/onSelect 关闭），filterOption 对空输入返回 true（当前写法空串 includes 虽为 true，但组件空态根本不展开，需受控 open 解决）
    • 或评估改用 Select showSearch（注意：必须保留用户自由输入自定义标题的能力，Select 默认只能选 options 内值，需验证 tags/combobox 模式或继续用 AutoComplete）
  2. 加下拉箭头图标（suffix 下拉三角）或占位提示文字（如"输入或从标题库选择"），让用户一眼知道可下拉选择
  3. 单视频模式标题框 + 批量模式 N 个标题框（视频1/2/3…）全部统一修改
  4. 选中标题库某条后正常填入输入框；用户自由输入自定义标题的能力不受影响
  5. 单测/E2E 覆盖：
    • 聚焦空标题框 → 下拉出现且展示标题库全部标题
    • 输入关键词 → 下拉只显示匹配项
    • 点击下拉项 → 文字填入输入框
    • 手动自由输入 → 不被下拉干扰，可正常提交
  6. CI 全绿 + 合并 develop + 部署 staging

验收

staging 实测：第4步标题框一点击就弹出标题库标题列表，可选、可搜、可自己输入，单视频和批量模式都正常。

## 现象（用户反馈 + staging 实测 2026-09-06） 生成视频第4步「选择标题」，标题输入框无法直接下拉选择标题库里已有标题；用户不知道要先打字才能看到标题库内容，且输入框没有任何下拉入口提示。 ## 实测结论（浏览器真机取证，单视频 + 批量 N=3 两种模式一致） - `GET /api/v1/titles` 正常：HTTP 200，返回 9 条标题；Console 零报错；下拉 DOM 定位/z-index/样式全部正常 - **聚焦空输入框（不输入文字）：下拉完全不渲染**（`.ant-select-dropdown` 节点数为 0） - 输入文字（如"永康"）：下拉**正常弹出**，8 个匹配项，位置/样式正常，可正常选中填入 - 根因：标题框用的是 antd `AutoComplete` 组件（`apps/web/src/pages/generate/components/Step4TitleSettings.tsx`，单视频约 206 行、批量约 268 行）。AutoComplete 的设计行为是"输入时给建议"，**空态聚焦不展开列表**（与点击即展开的 Select 不同）；且组件无下拉箭头，用户视觉上认为这是纯输入框，不知道标题库可选。 - 结论：不是数据/接口/CSS/JS 故障，是交互设计与用户预期不符——用户期望"点一下就能看到标题库列表选标题"。 ## 修复要求（前端） 1. **聚焦/点击标题输入框即展开下拉，展示标题库全部标题**（空输入时展示全部，输入文字时按现有逻辑过滤） - 推荐实现：AutoComplete 受控 `open`（onFocus 打开、onBlur/onSelect 关闭），`filterOption` 对空输入返回 true（当前写法空串 includes 虽为 true，但组件空态根本不展开，需受控 open 解决） - 或评估改用 `Select showSearch`（注意：必须保留用户自由输入自定义标题的能力，Select 默认只能选 options 内值，需验证 tags/combobox 模式或继续用 AutoComplete） 2. **加下拉箭头图标**（suffix 下拉三角）或占位提示文字（如"输入或从标题库选择"），让用户一眼知道可下拉选择 3. 单视频模式标题框 + 批量模式 N 个标题框（视频1/2/3…）全部统一修改 4. 选中标题库某条后正常填入输入框；用户自由输入自定义标题的能力不受影响 5. 单测/E2E 覆盖： - 聚焦空标题框 → 下拉出现且展示标题库全部标题 - 输入关键词 → 下拉只显示匹配项 - 点击下拉项 → 文字填入输入框 - 手动自由输入 → 不被下拉干扰，可正常提交 6. CI 全绿 + 合并 develop + 部署 staging ## 验收 staging 实测：第4步标题框一点击就弹出标题库标题列表，可选、可搜、可自己输入，单视频和批量模式都正常。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1737
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?