Semi Design v2.98.0 发布,抖音企业级 UI 库
Semi Design 是现代、全面、灵活的设计系统和 UI 库,由字节跳动抖音前端与 UED 团队设计、开发并维护,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。 Semi Design v2.98.0 已发布,此版本带来如下更新内容: 【Feature】 新增@douyinfe/semi-vite-plugin包,提供 Vite 构建场景下的主题定制、CSS 类名前缀替换、SCSS 变量覆盖、@layer包裹、Semi 包 CSS import 剔除等能力,与@douyinfe/semi-webpack-plugin特性对齐#2390#3242#3275 Calendar 组件新增onMoreClickprop,支持自定义月视图下"还有几项"的点击事件#764#3283 DatePicker 组件新增rangeSeparatorNodeprop,支持传入 ReactNode 类型的范围分隔符#244#3281 DatePicker 组件范围选择未完成时确认按钮禁用:当type为 range 类型且needConfirm为 true 时,如果日期范围未选完(只选了开始或结束),确认按钮将被禁用#552#3269 Descriptions 组件新增keyStyleprop,支持自定义 key 的宽度、对齐方式、颜色等样式#458#3268 Form 组件的 Field 新增keepState属性,支持在 Field 卸载后保留其状态(value、error、touched),重新挂载时自动恢复#186#3279 InputNumber 组件新增scientificNotationprop,支持长数字的科学计数法显示,失焦时显示科学计数法,聚焦时显示完整数字,可通过threshold配置阈值#146#3277 Slider 组件支持 RTL 布局,当 ConfigProvider 的direction为rtl时,横向 Slider 自动调整为从右向左的交互方式#759#3265 Table 组件columns.render新增isHovering参数,用于判断当前行是否处于悬停状态#669#3287 Table 组件支持鼠标 hover 到 rowspan 单元格时高亮所有相关行#1177#3262 Table 组件新增rowSelection.checkRelationprop,支持树形表格父子节点选择关联。设置为'related'时,选中父节点自动选中所有子节点,选中子节点影响父节点状态(全选/半选/未选)#2864#3264 Tabs 组件新增collapsible="auto"选项,支持自动检测溢出并启用折叠功能#1596#3259 Tooltip 和 Popover 组件新增condition属性,用于控制是否允许触发显示。当condition为 false 时,hover/click/focus 等触发行为不生效(trigger='custom' 场景不受影响)#1648#3286 Transfer 组件新增paginationprop,支持左侧面板分页功能,包含pageSize、currentPage、defaultCurrentPage、onPageChange属性#480#3266 TreeSelect 组件新增triggerTagWrapprop,支持在 trigger 内多行换行展示已选标签#1709#3285 TreeSelect 组件新增remoteprop,支持远程搜索功能#1190#3258 【Fix】 修复 AIChatInput 组件 input-slot 在 IME 输入时 placeholder 遮挡未上屏文字的问题#3261#3263 修复 DatePicker 在needConfirm模式下无法通过预设清空({ start: null, end: null })后确认空范围的问题,将 UI 端的"完成"判定与 foundation_isRangeValueComplete对齐,空数组也视为完整状态,仅部分选择(长度为 2 且包含 null)禁用确认 修复 Form 组件的withFieldHOC 在被 Tooltip/Popover 等组件包裹时,因动态注入 props 导致useMemo依赖数组长度变化而触发 React 警告的问题#1017#3267 修复 InputNumber 组件在输入包含非数字字符的字符串(如 "1000CNY")时max和min限制不生效的问题#38#3273 修复 Tree 组件在 TreeNode 的label为 ReactNode 时,受控value改变选中项的展开行为异常问题,通过结构比较替代深度比较避免 ReactNode 对象引用变化导致的误判#1132#3260 修复 Tree 组件在展开节点较多(300+)时快速拖拽发生卡顿的问题,通过节流(16ms / 60fps)拖拽状态更新来优化性能#558#3271 调整默认 font-family 顺序,将 Segoe UI 移到 PingFang SC / Microsoft YaHei 之后,修复 Windows 下中文字符相对英文基线向下偏移的问题#2369#3276 统一 CodeHighlight / JsonViewer / 文档站点的 monospace 字体栈:补齐ui-monospace、Consolas、Liberation Mono、DejaVu Sans Mono等系统兜底,修复 Windows / Linux 下未安装 Menlo / SF Mono / Fira Code 时回落到 Courier New 字重过细的问题#2729#3274 【Documentation】 补充 Slider 组件聚焦样式说明文档,澄清"圆形按钮轮廓 - 聚焦"(--semi-color-primary-light-active,键盘 Tab 聚焦时生效)和"滑动条圆形描边颜色 - 激活态"(--semi-color-focus-border,鼠标点击/拖动时生效)两个设计变量的不同触发场景#2614#3257 修复 Tabs 组件renderTabBar拖拽排序 demo:将 dnd-kit 示例改为noInline模式以支持真实 import 语句,并复用 Semi 导出的Tabs.TabItem,保持各类型/尺寸/位置下的原生样式 详情可查看:https://semi.design/zh-CN/ecosystem/changelog