Cherry Studio v2 变更说明Sortable 垂直列表默认改为整行拉伸items-stretch的视觉行为变化与兼容指南【免费下载链接】cherry-studio Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端项目地址: https://gitcode.com/CherryHQ/cherry-studio本篇技术指南面向 Cherry Studiocherrystudio/ui组件库的使用者与 v2 版本升级维护者讲解 2026-05-14 引入的组件级破坏性变更Sortable垂直列表的交叉轴对齐方式由items-center切换为items-stretch。你将了解该变更对 Provider Settings v2provider 列表、model 列表、api-key 列表等场景的视觉影响、无需任何代码改动的自动适配机制以及如何在外部消费方恢复 v1 外观。变更概述从居中对齐到整行拉伸本次变更introduced_in_pr: #14631类别changed严重级别notice发生在cherrystudio/ui组件库的Sortable组件默认布局上变更前垂直Sortable列表的容器交叉轴对齐为items-center每个条目只占据自身内容的固有宽度行内两侧留有空白变更后垂直Sortable列表的容器交叉轴对齐为items-stretch每个条目沿容器主轴水平方向自动拉伸至整行宽度。对应的源码实现位于 sortable.tsx容器类名拼接逻辑如下div className{cn( layout grid ? grid w-full grid-cols-[repeat(auto-fill,minmax(280px,1fr))] max-md:grid-cols-1 : cn(flex, horizontal ? flex-row items-center : w-full flex-col items-stretch), className )} >Sortable items{items} itemKeyid onSortEnd{handleSortEnd} renderItem{renderItem} classNameitems-center /注意items-stretch与items-center同为 flex 对齐类二者优先级由样式表中的类顺序与具体性决定使用className覆盖时建议结合组件库样式加载顺序进行验证。发布与维护备忘影响范围仅影响cherrystudio/ui中Sortable的垂直list布局默认值Cherry Studio 应用内部无需代码改动。关联组件路径packages/ui/src/components/composites/sortable/sortable.tsx文档原始描述中的Sortable/Sortable.tsx对应仓库内小写目录sortable/。升级建议由于属于组件级默认行为变更外部消费方如独立使用cherrystudio/ui的项目在升级组件库版本时应进行视觉回归检查重点排查垂直可排序列表的悬停/选中态宽度与行内右侧操作区布局是否符合预期。【免费下载链接】cherry-studio Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端项目地址: https://gitcode.com/CherryHQ/cherry-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Cherry Studio v2 变更说明Sortable 垂直列表默认改为整行拉伸items-stretch的视觉行为变化与兼容指南【免费下载链接】cherry-studio Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端项目地址: https://gitcode.com/CherryHQ/cherry-studio本篇技术指南面向 Cherry Studiocherrystudio/ui组件库的使用者与 v2 版本升级维护者讲解 2026-05-14 引入的组件级破坏性变更Sortable垂直列表的交叉轴对齐方式由items-center切换为items-stretch。你将了解该变更对 Provider Settings v2provider 列表、model 列表、api-key 列表等场景的视觉影响、无需任何代码改动的自动适配机制以及如何在外部消费方恢复 v1 外观。变更概述从居中对齐到整行拉伸本次变更introduced_in_pr: #14631类别changed严重级别notice发生在cherrystudio/ui组件库的Sortable组件默认布局上变更前垂直Sortable列表的容器交叉轴对齐为items-center每个条目只占据自身内容的固有宽度行内两侧留有空白变更后垂直Sortable列表的容器交叉轴对齐为items-stretch每个条目沿容器主轴水平方向自动拉伸至整行宽度。对应的源码实现位于 sortable.tsx容器类名拼接逻辑如下div className{cn( layout grid ? grid w-full grid-cols-[repeat(auto-fill,minmax(280px,1fr))] max-md:grid-cols-1 : cn(flex, horizontal ? flex-row items-center : w-full flex-col items-stretch), className )} >Sortable items{items} itemKeyid onSortEnd{handleSortEnd} renderItem{renderItem} classNameitems-center /注意items-stretch与items-center同为 flex 对齐类二者优先级由样式表中的类顺序与具体性决定使用className覆盖时建议结合组件库样式加载顺序进行验证。发布与维护备忘影响范围仅影响cherrystudio/ui中Sortable的垂直list布局默认值Cherry Studio 应用内部无需代码改动。关联组件路径packages/ui/src/components/composites/sortable/sortable.tsx文档原始描述中的Sortable/Sortable.tsx对应仓库内小写目录sortable/。升级建议由于属于组件级默认行为变更外部消费方如独立使用cherrystudio/ui的项目在升级组件库版本时应进行视觉回归检查重点排查垂直可排序列表的悬停/选中态宽度与行内右侧操作区布局是否符合预期。【免费下载链接】cherry-studio Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端项目地址: https://gitcode.com/CherryHQ/cherry-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
