我們非常高興地宣布，2025年4月7日，TinyVue發布了v3.22.0🎉。
本次 3.22.0 版本主要有以下重大變更：
- 支持深色模式
- 增加基于 UnoCSS 的圖標庫
- 更豐富的 TypeScript 類型聲明
- 支持 XSS 配置
詳細的 Release Notes 請參考：https://github.com/opentiny/tiny-vue/releases/tag/v3.22.0
本次版本共有 18 位貢獻者參與開發，其中hashiqi12138/hu-qi/tsinghua-lauDarkingtail/lcy0620/discreted66是新朋友，歡迎新朋友的加入👏
- hashiqi12138- 新增貢獻者?
- hu-qi- 新增貢獻者?
- tsinghua-lau- 新增貢獻者?
- Darkingtail- 新增貢獻者?
- lcy0620- 新增貢獻者?
- discreted66- 新增貢獻者?
- shenjunjian
- kagol
- zzcr
- gimmyhehe
- Davont
- betavs
- wuyiping0628
- Youyou-smiles
- James-9696
- chenxi-20
- MomoPoppy
- gweesin
感謝新老朋友們對 TinyVue 的辛苦付出👏
你可以更新@opentiny/vue@3.22.0進行體驗！
npm i @opentiny/vue@3.22.0
我們一起來看看都有哪些更新吧！
1 支持深色模式
TinyVue 開源以來，陸續有小伙伴提出要支持深色模式。
本次 v3.22.0 版本全面支持了深色模式。
效果如下：
使用方式也非常簡單，只需要引入深色模式樣式文件，在 html 標簽配置class="dark"即可。
假設我們已經有了一個 Vite + Vue3 的工程。
先安裝 TinyVue 3.22.0 版本。
npm i @opentiny/vue@3.22.0
然后在 src/style.css 文件中寫入以下代碼，引入深色模式樣式文件。
@import '@opentiny/vue-theme/dark-theme-index.css';
接著在 index.html 的 HTML 根元素添加 dark 類名。
<html class="dark">
...
</html>
我們嘗試在 App.vue 中引入 TinyVue 的 Button 組件。
<template><tiny-button type="primary">主要按鈕</tiny-button><tiny-button>次要按鈕</tiny-button>
</template><script setup>
import { TinyButton } from '@opentiny/vue'
</script>
具體代碼可以拷貝 Button 組件的 demo 代碼：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/button
效果如下：
2 增加基于 UnoCSS 的圖標庫
之前 TinyVue 的圖標庫圖標整體不夠統一，存在一些重復圖標，并且是通過封裝 Vue 組件方式提供的，性能欠佳。
本次我們的設計師小姐姐和開發小哥哥攜手推出了一款更加現代、更美觀、性能更優異的圖標庫，而且是框架無關的。
- 源碼：https://github.com/opentiny/icons（歡迎 Star ?）
- 官網：https://opentiny.github.io/icons/
- 圖標預覽：https://opentiny.github.io/icons/browser-icons-base
OpenTiny Icons 是 OpenTiny 團隊推出的一款純 CSS 圖標庫，單色圖標以線型圖標為主的設計風格，圖標統一為16*16的大小，擁有安全邊距，保證了一致的視覺大小。
該圖標庫主要有以下亮點特色：
- CSS 圖標庫：純 CSS 圖標，支持 Vue / React 等所有的前端框架
- 按需引用：支持
@iconify-json導出方式，配合@unocss/preset-icons插件， 實現按需引用 - 圖標美觀/豐富：300+ 基礎單色圖標，精致美觀，風格統一，大小&顏色隨心變，可滿足大部分日常開發需要
- 支持多色圖標：支持 330+ 的多色圖標，覆蓋常見的空數據、請求狀態、應用權限等場景
- 適用場景多：支持組件庫的開發，日常應用開發
歡迎有需要的朋友使用！
使用方式也非常簡單，我們以一個普通的 vite 工程 為例，執行以下命令安裝@opentiny/icons圖標庫。
npm install @opentiny/icons
在 style.css 中加入以下內容，就可以放心使用圖標庫了
@import "@opentiny/icons/style/all.css";
圖標庫可以通過 CSS 去完全控制樣式，其中單色圖標支持通過字體大小和顏色去自定義樣式，而彩色圖標僅支持自定義大小。
<i class="ci-home" style="font-size:14px; color:#000;"></i>
<i class="ci-email" style="font-size:16px; color:#d32222;"></i>
<i class="ci-news" style="font-size:18x; color:#4822d3;"></i>
<i class="ci-date" style="font-size:20px; color:#40d322;"></i>
<hr />
<i class="ci-svc-ecs" style="font-size:72px;"></i>
<i class="ci-svc-obs" style="font-size:72px;"></i>
<i class="ci-svc-cbr" style="font-size:72px;"></i>
<i class="ci-svc-live" style="font-size:72px;"></i>
<hr />
效果如下：
更多使用方式，請參考文檔：https://opentiny.github.io/icons/
3 更豐富的 TypeScript 類型聲明
TinyVue 組件庫很早就支持 TypeScript 類型提示，不過有些函數式組件（比如 Modal、Loading 等）的 TypeScript 支持不是特別友好，本次版本完善了這部分組件的 TypeScript 類型聲明，給 Modal、Notify、Loading、Message 等函數式組件增加了 TypeScript 類型聲明。
使用效果如下：
4 支持 XSS 配置
為了盡可能防止 XSS 攻擊，TinyVue 內置的 XSS 過濾規則比較嚴格，會對所有包含 XSS 風險的代碼片段進行過濾處理。若開發者需要放開部分規則（比如富文本場景下放開 img 標簽的 src 屬性）的需求場景，可以手動配置 xss 白名單。
使用 @opentiny/utils 中的 setXssOption 方法傳入自定義的 xss 白名單，示例：
import { xss } from'@opentiny/utils'const options = {
enableAttrs: true,
enableHtml: true,
enableUrl: true,html: {whiteList: {a: ['class', 'style', 'contenteditable', 'data-id', 'data-title', 'data-size', 'href', 'data-last-modified'],img: ['class', 'style', 'src']}}
}xss.setXssOption(options)
同時歡迎大家一起參與OpenTiny開源共建：朋友你好，一起加入OpenTiny社區吧~
關于OpenTiny
歡迎加入 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、TinyEditor~ 如果你也想要共建，可以進入代碼倉庫，找到 good first issue標簽，一起參與開源貢獻~
)
)
)
