Skip to content

Skill 卡片和编辑弹窗在长文本/多标签场景下存在多处 UI 溢出和布局问题 #1017

Description

@Sharonxxxxxxxxx

问题描述

在技能市场(Marketplace)测试中,通过创建名称/标签极端数据的测试 Skill,发现 Skill 卡片列表页和 Skill 编辑弹窗在面对长文本、多标签场景时存在多处 UI 溢出和布局不一致问题。


问题 1:Skill 卡片标题和 slug 名称溢出截断

位置: 技能市场列表页 Skill 卡片

卡片标题溢出

现象:

  • Skill 的中文 display_name 过长时,卡片标题区域溢出,被强制省略号截断
  • 英文 name(slug 标识名)同样因过长被截断,且截断位置没有留出合理空间
  • 从截图右侧红字备注可见,调整截断策略后还需要确认「人名/agent 名称能不能看全」——即作者名/Bot 名等字段也可能受类似溢出影响

期望:

  1. 卡片标题应支持多行显示或有合理的省略策略(如最多 2 行后省略)
  2. 英文 slug 名如果显示,应统一使用等宽/较小字号并配合 ellipsis
  3. 作者名(creator_name / bot 名)区域需要预留足够宽度或也做 ellipsis 处理,避免截断后无法识别

测试数据(复现用):

  • display_name: 这是一个名字超级无敌长的测试Skill专门用来验证UI卡片标题在文字过多时是否能正确换行或截断不至于撑破布局(约 49 字)
  • name (slug): ui-overflow-card-test-skill-with-very-long-slug-name-for-testing(62 字符)
  • skill_id: 6906a6f9-40a0-4b4b-9e72-250409127dcb(测试环境)

问题 2:编辑 Skill 弹窗标签区域溢出 + 数量限制提示不一致

位置: Skill 编辑弹窗(上架/编辑时的标签输入区域)

标签溢出与限制不一致

现象:

  1. 标签文字溢出/重叠:单个标签(tag)内容过长时,文字超出 pill 胶囊容器边界,多个长标签之间文字互相重叠,视觉混乱
  2. 标签数量限制提示不一致:截图红框标注显示,存在标签数量上限相关的提示文案前后不一致/不清晰的问题(如提示写了一个数量限制,但实际校验/UI 表现对应另一个限制),用户无法确认到底最多能加多少个标签

期望:

  1. 单个标签应支持 ellipsis 截断(超长标签中间或末尾省略),不允许文字超出 pill 边界
  2. 标签容器应保持 flex-wrap,长标签自动换行而非撑开容器
  3. 标签数量上限应有明确且统一的提示,输入校验与提示文案保持一致;超出限制时给出明确的阻止反馈(而非只是视觉上混乱)

测试数据(复现用):

  • 共 16 个标签,其中包含:
    • 超长中文标签:这是一个非常非常长的中文标签专门用来测试标签溢出效果看看会不会换行截断(26+ 字)
    • 超长英文标签:overflow-testing-with-extremely-long-english-tag-content-for-ui-card(73 字符)
  • skill_id 同上

环境信息

  • 环境:OCTO 测试环境 (im-test.deepminer.com.cn)
  • 浏览器:见图
  • 测试 Skill ID: 6906a6f9-40a0-4b4b-9e72-250409127dcb

建议

建议对 Skill 卡片和编辑弹窗所有可能承载可变长度文本的区域做一次系统性的边界数据测试,包括:

  • 标题(display_name):短/中/超长
  • 标识名(name/slug):短/长
  • 作者名/owner 名:中英文混合长名称
  • 标签(tags):单个超长、数量极多、中英文混合
  • 描述(description):卡片摘要是否需要固定行数截断

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:frontendFrontend areaauto-triagedAuto-triaged by workflowneeds-human-verifyBug report; needs manual reproduction or investigationpriority:P3Low — backlogtype:bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions