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