本文由體驗技術團隊Kagol老師原創~
我們非常高興地宣佈，2024年6月26日，TinyVue 發佈了 v3.17.0 🎉。

TinyVue 每次大版本發佈，都會給大家帶來一些實用的新特性，上一個版本我們重構了 chart-core，新增 CircleProcessChart 圓環進度圖等6個新的圖表組件，並增加了 Statistic 數據統計組件。

TinyVue 3.15.0 正式發佈，推出全新的 Charts 圖表組件底座📊，功能更強、圖表更豐富！

本次 3.17.0 版本主要有以下重大變更：

• 增加 FluentEditor 富文本編輯器：一個基於 Quill 2.0 的富文本編輯器，在 Quill 基礎上擴展了表格、圖片、超鏈接、複製粘貼、插入表情、文件上傳、@提醒、斜杆菜單等豐富的模塊和格式，框架無關、兼容 Quill API、兼容 Quill 模塊生態。
• 增加 @opentiny/vue-directive 子包，用來存放實用的公共指令，並抽取 v-auto-tip 指令。
• 增加 @opentiny/vue-runtime 子包，用來存放 pc / mobile / mobile-first 等多種格式的組件庫 runtime。
• 基於 Select 組件封裝輕量級的 BaseSelect 下拉選擇組件，移除下拉樹、下拉表格功能，只包含基本的下拉選擇功能，並給 BaseSelect 增加 panel 插槽，用於擴展多種形態的下拉選擇場景。

詳細的 Release Notes 請參考：https://github.com/opentiny/tiny-vue/releases/tag/v3.17.0

本次版本共有12位貢獻者參與開發，其中 @zhangpaopao0609 / @Rainer-Yu / @Zcating / trueLoving 是新朋友👏

• zhangpaopao0609 - 新增貢獻者✨
• Rainer-Yu - 新增貢獻者✨
• Zcating - 新增貢獻者✨
• trueLoving - 新增貢獻者✨
• kagol
• zzcr
• gimmyhehe
• Davont
• betavs
• wuyiping0628
• You-Hw-Y
• James-9696

也感謝新老朋友們對 TinyVue 的辛苦付出！

你可以更新 @opentiny/vue@3.17.0 進行體驗！

我們一起來看看都有哪些更新吧！

增加 FluentEditor 富文本編輯器

2024年4月17日，Quill 2.0 正式發佈！

重回鐵王座！時隔5年！Quill 2.0 終於發佈啦🎉

Quill 是一款 API 驅動、支持格式和模塊定製的開源 Web 富文本編輯器，目前在 GitHub 的 Star 數是 42.4k（開源富文本編輯器裏 Star 數最高的）。

而 Quill 內置能力相對比較弱，無法完全滿足企業級應用的複雜編輯場景，我們基於 Quill 2.0 封裝了一個功能強大、開箱即用的 FluentEditor 編輯器，在 Quill 基礎上擴展了表格、圖片、超鏈接、複製粘貼、插入表情、文件上傳、@提醒、斜杆菜單等豐富的模塊和格式，框架無關、兼容 Quill API、兼容 Quill 模塊生態。

FluentEditor 主要有以下特點和優勢：

• 包含30多種豐富的模塊和格式，除了 Quill 內置的21種格式之外，還擴展和增強了表格、圖片、超鏈接、字數統計、表情、文件上傳、複製粘貼、@提醒、斜杆快捷菜單、截圖等15種模塊和格式。
• 強大的表格功能，支持在工具欄插入指定行列的表格、表格行高/列寬拖拽、插入行/列、刪除行/列、合併/拆分單元格等豐富的表格操作。
• 與框架無關，可以在 Vue、React、Angular 等多種框架中使用。
• 兼容 Quill 所有 API，兼容 Quill 生態模塊和格式。

適用於所有有富文本編輯場景的業務，比如需求管理平台、Wiki、博客系統、工單系統等。

我們還基於 FluentEditor 封裝了 Vue FluentEditor 組件，使用起來非常方便。

# 安裝依賴
npm i @opentiny/vue-fluent-editor

<script setup lang="ts">
// 引入 TinyVue FluentEditor 組件
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
</script>

<template>
  <tiny-fluent-editor></tiny-fluent-editor>
</template>

效果圖：

增加 @opentiny/vue-directive 子包

為了將 TinyVue 內部能力盡可能外溢，我們封裝了一個通用指令包，將原本只在組件庫內部使用的指令暴露出來給更廣大的開發者使用，比如文本提示指令 v-auto-tip，後續也會將更多指令開放出來。

<template>
  <div class="auto-tip" v-auto-tip>超出省略隱藏，鼠標移入是會有ToolTip提示</div>
</template>

<script setup>
import { AutoTip as VAutoTip } from '@opentiny/vue-directive'
</script>

<style scoped>
.auto-tip {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

效果圖：

增加 @opentiny/vue-runtime 子包

之前 TinyVue 只有全量的 runtime 包（包含了 pc / mobile / mobile-first 等多個模板），只會導致 runtime 包體積很大，影響加載性能，為了有效減少 runtime 包的體積，提升性能，增加了分模板構建的腳本，如果你是 PC 端應用，可以只引入 Runtime PC。

增加輕量級的 BaseSelect 下拉選擇組件

我們先來看下 Select 組件的現狀和問題：

• Select 組件中耦合了 Tree / Grid 兩個重型組件，分別對應下拉樹和下拉表格兩個特性，render-type="tree" | "grid"
• 下拉樹和下拉表格並不是常態，普通的下拉列表才是常態，這就導致了大量只使用Select簡單功能的業務包體積也很大，影響業務性能
• 依賴了 Select 的組件，比如 Area，間接地等於依賴了 Select / Grid / Tree，導致包體積變大
• 本來應該依賴基於 Select 組件的組件，比如 Pager，由於 Select 耦合了 tree/grid，因此只能自己實現一個 Select，造成重複代碼

我們使用 Vite 創建一個空的 Vue 項目，對比下不同情況下構建產物體積情況：

可以看到：

• 只引入 Select 組件，產物裏面卻同時包含了 tree/grid 兩個組件，導致產物體積很大
• Area 組件本身只是一個很簡單的組件，由於引入了 Select，導致產物體積也非常大

因此為了優化 Select 組件性能，減小包體積，有必要對其進行重構，但又不能引入破壞性變更，以免影響到現有的使用了 Select 組件的業務。

這就是我們封裝 BaseSelect 的初衷。

BaseSelect 組件目前已經封裝完成，增加了 panel 插槽，並補充了對應的文檔和E2E測試用例（所有62個E2E測試用例均已通過），BaseSelect的API保持和Select完全一致，如果你的Select組件沒有配置 render-type 屬性，可以直接替換成 BaseSelect。

如果你的項目中只用了基本的下拉選擇功能，沒有下拉樹和下拉表格，那麼歡迎使用更加輕量化的 BaseSelect 組件🤝。

後續我們會基於 BaseSelect 的 panel 插槽擴展 TreeSelect 下拉樹和 GridSelect 下拉表格。

貢獻者招募

2024年，我們規劃了很多新組件和新特性，歡迎朋友們一起參與共建。

可以在以下 discussion 進行任務認領：

TinyVue 2024年規劃：https://github.com/opentiny/tiny-vue/discussions/645

關於OpenTiny

OpenTiny 是一套企業級 Web 前端開發解決方案，提供跨端、跨框架、跨版本的 TinyVue 組件庫，包含基於 Angular+TypeScript 的 TinyNG 組件庫，擁有靈活擴展的低代碼引擎 TinyEngine，具備主題配置系統TinyTheme / 中後台模板 TinyPro/ TinyCLI 命令行等豐富的效率提升工具，可幫助開發者高效開發 Web 應用。

歡迎加入 OpenTiny 開源社區。添加微信小助手：opentiny-official 一起參與交流前端技術～
OpenTiny 官網：https://opentiny.design/
OpenTiny 代碼倉庫：https://github.com/opentiny/
TinyVue 源碼：https://github.com/opentiny/tiny-vue
TinyEngine 源碼： https://github.com/opentiny/tiny-engine
歡迎進入代碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以進入代碼倉庫，找到 good first issue標籤，一起參與開源貢獻~