Skip to content

feat: 新增统一的飞书标签选择组件 - #799

Merged
deepcoldy merged 2 commits into
deepcoldy:masterfrom
ArchLance:feishu-tag-dropdown
Aug 10, 2026
Merged

feat: 新增统一的飞书标签选择组件#799
deepcoldy merged 2 commits into
deepcoldy:masterfrom
ArchLance:feishu-tag-dropdown

Conversation

@ArchLance

@ArchLance ArchLance commented Aug 9, 2026

Copy link
Copy Markdown
Contributor

变更内容

  • 在“创建会话”和“创建群聊”中复用统一的飞书标签选择组件。
  • 下拉面板第一行可直接输入新标签名称,下面依次显示“不选择标签”和已有标签。
  • 当前选择会直接显示在入口中;下拉入口使用明显箭头标识。
  • 补充键盘焦点、禁用状态、超长标签省略和长列表滚动处理。

界面截图

创建会话时选择或新建飞书标签

验证

  • git diff --check
  • pnpm exec vitest run --project unit test/dashboard-feed-groups.test.ts test/dashboard-create-session.test.ts test/dashboard-sessions-ui.test.ts test/dashboard-groups-command.test.ts
  • pnpm build

以上检查均通过。

@ArchLance
ArchLance requested a review from deepcoldy as a code owner August 9, 2026 10:14

@deepcoldy deepcoldy left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

审查结论

结论:COMMENT;disabled 问题本身不需要升级为阻断。

  • 当前实现已经包含 aria-disabledonClick(...preventDefault())。Chromium 实测 disabled summary 聚焦后按 Enter / Space,details.open 均保持 false;因此“键盘仍可展开”的判断不成立。
  • 实际存在的 disabled 回归是 summary 仍为 tabIndex=0,会留下一个无效 Tab 停靠点。建议补齐 tabIndex={disabled ? -1 : undefined};为组件健壮性可同时补上 disabled 切换时关闭已展开菜单。
  • 还有两个从原生 select 迁移后更值得修的 a11y 细节:
    1. aria-label="飞书标签" 覆盖了 summary 的可见文本,读屏聚焦控件时不再像原生 select 那样暴露当前值;建议把当前 label 纳入可访问名称。
    2. 键盘激活某个标签按钮后,菜单关闭且焦点落到 body;建议关闭后把焦点还给 summary。
  • 布局边界:60 字符无空格标签在 360px 视口实测,summary 宽 248px、scrollWidth=582px,文字会穿过箭头并溢出控件。建议给 summary 文本和选项文本增加 min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
  • 长列表边界:20 个已有标签时弹层实测高约 889px,max-height: none; overflow-y: visible,最后选项落在 600px 视口之外,只能依赖外层 modal 滚动。建议给弹层设置视口相关 max-heightoverflow-y: auto

这些问题均有 workaround,未达到“核心流程不可用、无绕行”的阻断级别;但修复成本很低,建议在合并前一并收口。

验证:

  • pnpm build:通过
  • pnpm exec vitest run --project unit test/dashboard-feed-groups.test.ts test/dashboard-create-session.test.ts test/dashboard-sessions-ui.test.ts test/dashboard-groups-command.test.ts:4 files / 84 tests 通过
  • Chromium 键盘与 360×640、800×600 布局实测:结果如上

流程项:PR 标题/描述目前为英文,且 UI 改动未附截图;按仓库规范应改为中文说明并补实际界面截图。

@ArchLance ArchLance changed the title feat: add unified Feishu label picker feat: 新增统一的飞书标签选择组件 Aug 9, 2026
@ArchLance

Copy link
Copy Markdown
Contributor Author

已按审核意见逐项修改:禁用时移出 Tab 顺序并关闭已展开菜单;无障碍名称包含当前值;键盘选择后焦点返回入口;超长标签显示省略号;长列表限制高度并支持滚动。PR 标题和说明已改为中文,并补充真实界面截图。相关单测与构建均通过,请复审。

@deepcoldy deepcoldy left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

审查通过

head e3b2d716f 已逐项收口此前反馈:disabled Tab 顺序与状态切换、可访问名称当前值、选项选择后的焦点归还、长文本省略、长列表内部滚动,以及中文说明和界面截图均已核对。

验证:

  • 与最新 master@574603c9d 合并树无冲突
  • pnpm build 通过
  • 相关单测 4 files / 84 tests 通过
  • git diff --check 通过
  • 改动范围为 4 个 Dashboard 前端文件 + 1 张截图,无夹带

两个非阻断残留:

  • 弹层输入框内按 Esc 会关闭 details,但 Chromium 实测焦点落到 body;后续可让 Escape 路径也归还 summary。
  • PR 标题仍缺仓库约定的 scope,建议合并前改为 feat(dashboard): 新增统一的飞书标签选择组件。两个 commit message 也未带 scope;如采用 squash merge,至少确保最终标题/提交信息符合规范。

以上不影响本次代码批准;未执行合并。

@deepcoldy
deepcoldy merged commit ca30f52 into deepcoldy:master Aug 10, 2026
@github-actions

Copy link
Copy Markdown

🚀 Released in v3.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants