【Semi Design 简介】Semi Design 是现代、全面、灵活的设计系统和 UI 库由字节跳动抖音前端与 UED 团队设计、开发并维护是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案可用于快速搭建美观的 React 应用。【Semi Design v2.97.0 发布】此版本带来如下更新内容【Feature】Cascader 组件新增 remote 属性支持远程搜索功能[#2956](https://github.com/DouyinFE/semi-design/issues/2956)[#3232](https://github.com/DouyinFE/semi-design/pull/3232)ConfigProvider 组件新增 responsiveMap prop支持自定义响应式断点配置[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)ConfigProvider 组件新增 responsiveObserve prop支持全局响应式断点监听默认关闭按需开启[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)ConfigConsumer 新增 onBreakpoint 方法支持订阅断点变化[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)ConfigConsumer 新增 screens 属性提供当前断点匹配状态[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)Form 组件统一校验函数命名为 validator。Field 新增 validator prop替代 validateForm 新增 validator prop替代 validateFields旧属性名保留但标记 deprecated[#2933](https://github.com/DouyinFE/semi-design/issues/2933)[#3233](https://github.com/DouyinFE/semi-design/pull/3233)Image 和 ImagePreview 组件新增 initialZoom 属性支持设置预览图片初始缩放比例[#1368](https://github.com/DouyinFE/semi-design/issues/1368)[#3255](https://github.com/DouyinFE/semi-design/pull/3255)Image 和 ImagePreview 组件新增 maxZoom 属性支持设置预览图片最大缩放比例[#1368](https://github.com/DouyinFE/semi-design/issues/1368)[#3255](https://github.com/DouyinFE/semi-design/pull/3255)Image 和 ImagePreview 组件新增 minZoom 属性支持设置预览图片最小缩放比例[#1368](https://github.com/DouyinFE/semi-design/issues/1368)[#3255](https://github.com/DouyinFE/semi-design/pull/3255)Tag 组件新增 SplitTagGroup 子组件支持将多个标签组合成连续的视觉整体[#2891](https://github.com/DouyinFE/semi-design/issues/2891)[#3234](https://github.com/DouyinFE/semi-design/pull/3234)Switch 组件新增 $color-switch_knob-bg-checked CSS 变量支持独立控制开关按钮在开启和关闭状态下的背景颜色[#2635](https://github.com/DouyinFE/semi-design/issues/2635)[#3236](https://github.com/DouyinFE/semi-design/pull/3236)Table 组件新增 headerStyle prop支持统一设置所有表头单元格样式包括 fixed 列[#2347](https://github.com/DouyinFE/semi-design/issues/2347)[#3246](https://github.com/DouyinFE/semi-design/pull/3246)TagInput 组件支持标签溢出时自动换行显示[#2715](https://github.com/DouyinFE/semi-design/issues/2715)[#3237](https://github.com/DouyinFE/semi-design/pull/3237)TextArea 组件新增 resize 属性支持用户通过拖动调整文本域尺寸。当 autosize 启用时resize 将被强制设为 none。水平方向 resize 时组件边框和附属元素会跟随文本域宽度自适应[#2441](https://github.com/DouyinFE/semi-design/issues/2441)[#3243](https://github.com/DouyinFE/semi-design/pull/3243)TimePicker 组件新增 disabledTime prop支持在 range 模式下对左右面板分别应用不同的禁用规则[#1443](https://github.com/DouyinFE/semi-design/issues/1443)[#3252](https://github.com/DouyinFE/semi-design/pull/3252)Transfer 组件新增 virtualize prop支持右侧已选择面板的虚拟化渲染解决大数据量场景下的性能问题[#2586](https://github.com/DouyinFE/semi-design/issues/2586)[#3240](https://github.com/DouyinFE/semi-design/pull/3240)Upload 组件新增 crop prop支持图片上传前裁切可配置裁切框比例、形状等参数[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)Upload 组件新增 beforeCrop prop支持裁切前拦截[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)Upload 组件新增 onCropError prop支持裁切失败回调[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)Upload 组件新增 cropModalProps prop支持自定义裁切弹窗[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)【Fix】修复 DatePicker 组件 compact 模式下长月份名称导致面板宽度溢出的问题[#2487](https://github.com/DouyinFE/semi-design/issues/2487)[#3244](https://github.com/DouyinFE/semi-design/pull/3244)修复 Form 组件 Field 在使用 rules 校验且 message 为空字符串时无法触发 onSubmit/onSubmitFail 的问题[#2340](https://github.com/DouyinFE/semi-design/issues/2340)[#3245](https://github.com/DouyinFE/semi-design/pull/3245)修复 JsonViewer 组件在 options.autoWrap 为 true 时容器尺寸变化后内容显示不正确的问题[#2837](https://github.com/DouyinFE/semi-design/issues/2837)[#3239](https://github.com/DouyinFE/semi-design/pull/3239)修复 JsonViewer 组件多行替换/插入操作时光标位置计算不正确的问题[#2908](https://github.com/DouyinFE/semi-design/issues/2908)[#3231](https://github.com/DouyinFE/semi-design/pull/3231)修复 Navigation 组件 Footer 内折叠按钮颜色 token 不生效的问题确保按钮图标使用 Navigation 定义的颜色变量而非 Button 的默认颜色[#1841](https://github.com/DouyinFE/semi-design/issues/1841)[#3250](https://github.com/DouyinFE/semi-design/pull/3250)修复 Select 组件通过 showClear 清空后blur 失焦触发校验失效的问题[#1453](https://github.com/DouyinFE/semi-design/issues/1453)[#3254](https://github.com/DouyinFE/semi-design/pull/3254)修复 Spin 组件在 Next.js SSR 环境下因 ID 生成方式导致的 hydration mismatch 错误[#2114](https://github.com/DouyinFE/semi-design/issues/2114)[#3249](https://github.com/DouyinFE/semi-design/pull/3249)修复 Table 组件在 virtualized 模式下使用 JSX children 方式定义 columns 时快速切换数据源触发无限更新循环的问题[#2592](https://github.com/DouyinFE/semi-design/issues/2592)[#3241](https://github.com/DouyinFE/semi-design/pull/3241)修复 Table 组件在设置了 sorter 的列上onHeaderCell 的 onClick 回调在点击 title 部分时不触发的问题[#1861](https://github.com/DouyinFE/semi-design/issues/1861)[#3248](https://github.com/DouyinFE/semi-design/pull/3248)修复 Tabs 组件在 scroll 模式下新增或删除 tab 时折叠按钮出现闪烁的问题[#2145](https://github.com/DouyinFE/semi-design/issues/2145)[#3247](https://github.com/DouyinFE/semi-design/pull/3247)修复 Toast 组件手动关闭时导致 content 副作用重复执行的问题[#1483](https://github.com/DouyinFE/semi-design/issues/1483)[#3251](https://github.com/DouyinFE/semi-design/pull/3251)【Documentation】Tabs 组件新增拖拽排序使用示例展示如何使用 renderTabBar API 配合 dnd-kit 实现标签页拖拽排序[#2687](https://github.com/DouyinFE/semi-design/issues/2687)[#3238](https://github.com/DouyinFE/semi-design/pull/3238)详情可查看
Semi Design v2.97.0 发布:多项组件更新与问题修复,功能再升级!
【Semi Design 简介】Semi Design 是现代、全面、灵活的设计系统和 UI 库由字节跳动抖音前端与 UED 团队设计、开发并维护是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案可用于快速搭建美观的 React 应用。【Semi Design v2.97.0 发布】此版本带来如下更新内容【Feature】Cascader 组件新增 remote 属性支持远程搜索功能[#2956](https://github.com/DouyinFE/semi-design/issues/2956)[#3232](https://github.com/DouyinFE/semi-design/pull/3232)ConfigProvider 组件新增 responsiveMap prop支持自定义响应式断点配置[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)ConfigProvider 组件新增 responsiveObserve prop支持全局响应式断点监听默认关闭按需开启[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)ConfigConsumer 新增 onBreakpoint 方法支持订阅断点变化[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)ConfigConsumer 新增 screens 属性提供当前断点匹配状态[#1335](https://github.com/DouyinFE/semi-design/issues/1335)[#3253](https://github.com/DouyinFE/semi-design/pull/3253)Form 组件统一校验函数命名为 validator。Field 新增 validator prop替代 validateForm 新增 validator prop替代 validateFields旧属性名保留但标记 deprecated[#2933](https://github.com/DouyinFE/semi-design/issues/2933)[#3233](https://github.com/DouyinFE/semi-design/pull/3233)Image 和 ImagePreview 组件新增 initialZoom 属性支持设置预览图片初始缩放比例[#1368](https://github.com/DouyinFE/semi-design/issues/1368)[#3255](https://github.com/DouyinFE/semi-design/pull/3255)Image 和 ImagePreview 组件新增 maxZoom 属性支持设置预览图片最大缩放比例[#1368](https://github.com/DouyinFE/semi-design/issues/1368)[#3255](https://github.com/DouyinFE/semi-design/pull/3255)Image 和 ImagePreview 组件新增 minZoom 属性支持设置预览图片最小缩放比例[#1368](https://github.com/DouyinFE/semi-design/issues/1368)[#3255](https://github.com/DouyinFE/semi-design/pull/3255)Tag 组件新增 SplitTagGroup 子组件支持将多个标签组合成连续的视觉整体[#2891](https://github.com/DouyinFE/semi-design/issues/2891)[#3234](https://github.com/DouyinFE/semi-design/pull/3234)Switch 组件新增 $color-switch_knob-bg-checked CSS 变量支持独立控制开关按钮在开启和关闭状态下的背景颜色[#2635](https://github.com/DouyinFE/semi-design/issues/2635)[#3236](https://github.com/DouyinFE/semi-design/pull/3236)Table 组件新增 headerStyle prop支持统一设置所有表头单元格样式包括 fixed 列[#2347](https://github.com/DouyinFE/semi-design/issues/2347)[#3246](https://github.com/DouyinFE/semi-design/pull/3246)TagInput 组件支持标签溢出时自动换行显示[#2715](https://github.com/DouyinFE/semi-design/issues/2715)[#3237](https://github.com/DouyinFE/semi-design/pull/3237)TextArea 组件新增 resize 属性支持用户通过拖动调整文本域尺寸。当 autosize 启用时resize 将被强制设为 none。水平方向 resize 时组件边框和附属元素会跟随文本域宽度自适应[#2441](https://github.com/DouyinFE/semi-design/issues/2441)[#3243](https://github.com/DouyinFE/semi-design/pull/3243)TimePicker 组件新增 disabledTime prop支持在 range 模式下对左右面板分别应用不同的禁用规则[#1443](https://github.com/DouyinFE/semi-design/issues/1443)[#3252](https://github.com/DouyinFE/semi-design/pull/3252)Transfer 组件新增 virtualize prop支持右侧已选择面板的虚拟化渲染解决大数据量场景下的性能问题[#2586](https://github.com/DouyinFE/semi-design/issues/2586)[#3240](https://github.com/DouyinFE/semi-design/pull/3240)Upload 组件新增 crop prop支持图片上传前裁切可配置裁切框比例、形状等参数[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)Upload 组件新增 beforeCrop prop支持裁切前拦截[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)Upload 组件新增 onCropError prop支持裁切失败回调[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)Upload 组件新增 cropModalProps prop支持自定义裁切弹窗[#2889](https://github.com/DouyinFE/semi-design/issues/2889)[#3256](https://github.com/DouyinFE/semi-design/pull/3256)【Fix】修复 DatePicker 组件 compact 模式下长月份名称导致面板宽度溢出的问题[#2487](https://github.com/DouyinFE/semi-design/issues/2487)[#3244](https://github.com/DouyinFE/semi-design/pull/3244)修复 Form 组件 Field 在使用 rules 校验且 message 为空字符串时无法触发 onSubmit/onSubmitFail 的问题[#2340](https://github.com/DouyinFE/semi-design/issues/2340)[#3245](https://github.com/DouyinFE/semi-design/pull/3245)修复 JsonViewer 组件在 options.autoWrap 为 true 时容器尺寸变化后内容显示不正确的问题[#2837](https://github.com/DouyinFE/semi-design/issues/2837)[#3239](https://github.com/DouyinFE/semi-design/pull/3239)修复 JsonViewer 组件多行替换/插入操作时光标位置计算不正确的问题[#2908](https://github.com/DouyinFE/semi-design/issues/2908)[#3231](https://github.com/DouyinFE/semi-design/pull/3231)修复 Navigation 组件 Footer 内折叠按钮颜色 token 不生效的问题确保按钮图标使用 Navigation 定义的颜色变量而非 Button 的默认颜色[#1841](https://github.com/DouyinFE/semi-design/issues/1841)[#3250](https://github.com/DouyinFE/semi-design/pull/3250)修复 Select 组件通过 showClear 清空后blur 失焦触发校验失效的问题[#1453](https://github.com/DouyinFE/semi-design/issues/1453)[#3254](https://github.com/DouyinFE/semi-design/pull/3254)修复 Spin 组件在 Next.js SSR 环境下因 ID 生成方式导致的 hydration mismatch 错误[#2114](https://github.com/DouyinFE/semi-design/issues/2114)[#3249](https://github.com/DouyinFE/semi-design/pull/3249)修复 Table 组件在 virtualized 模式下使用 JSX children 方式定义 columns 时快速切换数据源触发无限更新循环的问题[#2592](https://github.com/DouyinFE/semi-design/issues/2592)[#3241](https://github.com/DouyinFE/semi-design/pull/3241)修复 Table 组件在设置了 sorter 的列上onHeaderCell 的 onClick 回调在点击 title 部分时不触发的问题[#1861](https://github.com/DouyinFE/semi-design/issues/1861)[#3248](https://github.com/DouyinFE/semi-design/pull/3248)修复 Tabs 组件在 scroll 模式下新增或删除 tab 时折叠按钮出现闪烁的问题[#2145](https://github.com/DouyinFE/semi-design/issues/2145)[#3247](https://github.com/DouyinFE/semi-design/pull/3247)修复 Toast 组件手动关闭时导致 content 副作用重复执行的问题[#1483](https://github.com/DouyinFE/semi-design/issues/1483)[#3251](https://github.com/DouyinFE/semi-design/pull/3251)【Documentation】Tabs 组件新增拖拽排序使用示例展示如何使用 renderTabBar API 配合 dnd-kit 实现标签页拖拽排序[#2687](https://github.com/DouyinFE/semi-design/issues/2687)[#3238](https://github.com/DouyinFE/semi-design/pull/3238)详情可查看