TinyVue v3.31 更新速览：新组增件 + 文档优化，多项实用能力升级

版本速览

TinyVue v3.31.0 已经发布，带来了：

新增组件：1 个（SliderButtonGroup 滑动按钮组）
新增特性与属性增强：6 项（Modal before-close、Drawer destroyOnClose、Image SVG URL 编码、Tag round、Alert 尺寸、Switch display-only）
示例与文档：补全Flowchart 流程图 API 说明与示例
Bug 修复：52 项，稳定性进一步提升

详细的 Release Notes 请参考：TinyVue v3.31.0 Release Notes

新贡献者

本次版本共有 3 位首次贡献者，分别是 @Malusnow、@xuxiao1797 和 @cfljue，参与了 dialog-select 多选同步、file-upload 通配符支持与 fluent-editor 行高格式修复，欢迎新朋友的加入👏

感谢新老朋友们对 TinyVue 的辛苦付出👏

反馈与支持

如果你在使用过程中遇到任何问题，或者有好的建议，欢迎：

升级时请更新到 @opentiny/vue@3.31.0 进行体验，升级前建议先回归一遍本文提到的重点修复项。

特性介绍

下面我们一起来看看都有哪些更新吧！

SliderButtonGroup 滑动按钮组

SliderButtonGroup （滑动按钮组）是 v3.31.0 新增的组件：它像 ButtonGroup 一样渲染多个按钮，内部可以放置多个 SliderButton，选中态用一块白色背景块表示------激活的按钮。当点击激活另一个按钮时，背景块会平滑地滑动过去。该组件支持文本类型与图标类型，并提供 small / medium / large 尺寸，适合在页面内的模式切换的场景：

vue 复制代码

<template>
  <tiny-slider-button-group v-model="value">
    <tiny-slider-button label="1">当天</tiny-slider-button>
    <tiny-slider-button label="2">本周</tiny-slider-button>
    <tiny-slider-button label="3">本月</tiny-slider-button>
  </tiny-slider-button-group>
</template>

<script>
import { TinySliderButton, TinySliderButtonGroup } from "@opentiny/vue";

export default {
  components: { TinySliderButton, TinySliderButtonGroup },
  data() {
    return { value: "1" };
  },
};
</script>

Flowchart 流程图

完善 Flowchart 流程图的文档 API 说明与示例。 Flowchart 用来定制流程图，不依赖其它库或组件，支持有状态的节点和连线，支持节点、连线以及空白区域的点击事件，也支持通过插槽个性化定制节点、通过配置项控制连线样式。

vue 复制代码

<template>
  <tiny-flowchart :data="data" :config="config" />
</template>

<script setup>
import { TinyFlowchart } from "@opentiny/vue";
import { reactive } from "vue";

const { createNode, createLink, createConfig } = TinyFlowchart;

const config = createConfig();
config.width = 960;
config.height = 260;

const data = reactive({
  nodes: [
    createNode("1", 1, "提交申请", "2024-01-01", null, 1, 1),
    createNode("2", 2, "主管审批", "2024-01-02", null, 1, 3),
    createNode("3", 3, "流程结束", "", null, 1, 5),
  ],
  links: [createLink("1", "2", "0 r2", 2, "solid"), createLink("2", "3", "0 r2", 3, "solid")],
});
</script>

Flowchart组件区别于传统基于DOM的组件，它是使用Canvas 绘制,它自身拥有许多静态方法，方便使用。比如以下静态方法： createNode 快速创建节点， createLink 快速创建连接线，createConfig() 提供画布宽高等配置。数据是结构化数组，后端返回的数据可以直接映射成节点和连线，不需要为展示层手工维护坐标。

基础用法（用 createNode / createLink / createConfig 声明节点、连线和画布配置）、分支流程（卡片式分支、网格路径流程）、自定义连线样式与节点样式、动态更新（审批流逐步推进）、事件处理（节点与连线点击）、人员列表（用 createItem 展示审批人）和插槽定制节点。

原有组件增强与优化

这一版对原有组件也做了一批实用增强，最典型的是配置弹窗的关闭拦截：用户改了配置后点了关闭，还有未保存的输入，以前要在外层拦截，现在把校验逻辑放进 Modal 新增的 before-close 回调即可，弹层关闭路径统一收口。同一个版本里还有一组类似的属性增强：

组件	新增属性	场景
Modal	`before-close`	关闭前拦截，适合「有关未保存内容先确认再关」
Drawer	`destroyOnClose`	关闭时销毁内容，避免表单残留状态
Image	SVG URL 编码	直接渲染含特殊字符的 SVG 地址
Tag	`round`	圆角标签
Alert	small / medium 尺寸	紧凑提示条
Switch	`display-only`	只读展示开关状态

这些增强不需要改数据结构，升级时按页面实际用到的组件逐个评估即可。

值得关注的修复：

form-item 内按钮的 size 属性此前不生效（PR #4206）；form-item-inline 的 padding-top 修正为 12px。
date-picker 修复了半选（half-select）时面板数据未清空的问题；date-picker / date-panel 修复了多时区场景下选中日期偏移一天的问题。
file-upload 的 accept 现在支持 video/*、audio/* 通配符，更符合HTTP中的MIME类型规范；uploader 修复了 webkitGetAsEntry() 返回 null 导致的报错（PR #4226）。

关于 OpenTiny NEXT

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot 智能助手、GenUI 等新产品，实现 AI 理解用户意图自主完成任务，加速企业应用的智能化改造。

联系我们

GitHub：github.com/opentiny/ti...（欢迎 Star ⭐）

官网：opentiny.design

TinyVue 文档：opentiny.design/tiny-vue

关于我们：opentiny.design/opentiny-de...

小助手微信：opentiny-official

公众号：OpenTiny

欢迎加入 OpenTiny 开源社区；如果你有任何问题，欢迎在评论区留言交流！