TinaCMS 参考字段选择器优化实践

背景介绍

TinaCMS 是一个开源的内容管理系统，近期开发团队对其中的参考字段(reference field)选择器进行了重要优化。原生的参考字段选择器存在两个主要问题：一是依赖操作系统和浏览器的原生下拉组件导致体验不一致；二是仅能显示文件名，缺乏筛选和操作能力。

技术实现方案

开发团队选择了基于 shadcn 的 Combobox 组件进行重构，主要实现了以下改进：

1. 统一交互体验：替换原生下拉组件，确保在所有平台和浏览器上表现一致
2. 增强搜索功能：新增搜索/筛选功能，提升用户查找效率
3. 优化显示效果：支持集合分组显示和自定义选项展示格式
4. 滚动支持：当选项过多时自动添加滚动条
5. 样式修复：解决了弹出层z-index问题和编辑链接的CSS问题

实现细节

重构过程中，开发团队完成了以下关键任务：

• 将 shadcn Combobox 集成到现有参考字段组件中
• 迁移原有业务逻辑和状态管理
• 确保新组件完全兼容原有功能
• 实现集合分组显示功能
• 支持自定义选项显示格式
• 清理优化参考字段组件代码

使用注意事项

在使用新版参考字段选择器时需要注意：

1. 参考文档必须包含title/name字段，否则无法同时显示标题和文件名
2. 需要同时更新tinacms和@tinacms/cli到最新版本以确保功能正常

效果对比

优化前后的对比效果明显：

优化前：依赖原生下拉组件，样式不统一且功能有限 优化后：拥有统一的UI风格，支持搜索筛选，显示信息更丰富

总结

这次优化显著提升了TinaCMS中参考字段选择器的用户体验，解决了跨平台一致性问题，并增加了实用的搜索功能。开发团队通过精心设计的组件重构，在不破坏现有功能的前提下，为用户带来了更现代化、更高效的交互体验。