优化永不止步：TinyVue v3.20.0 正式发布，更美观的官网UI，更友好的文档搜索，更强大的主题配置能力~

本文由体验技术团队Kagol原创。

我们非常高兴地宣布，2024年12月4日，TinyVue 发布了 v3.20.0 🎉。

本次 3.20.0 版本主要有以下重大变更：

• OpenTiny 官网首页 UI 和性能优化，更具现代性和设计美感，加载速度更快、体验更好。
• TinyVue 官网增加 Algolia 全文搜索，原来只能搜索组件名称，现在可以搜索组件Demo和API文档，让你更容易搜索到自己想要的内容。
• 主题配置工具增加覆盖CSS功能，定制性更强，并且增加了老主题、Aurora主题的适配。

详细的 Release Notes 请参考：github.com/opentiny/ti...

本次版本共有13位贡献者参与开发，感谢朋友们的辛苦付出👏

• shenjunjian
• kagol
• zzcr
• gimmyhehe
• Davont
• GaoNeng-wWw
• betavs
• wuyiping0628
• Youyou-smiles
• James-9696
• chenxi-20
• mengqiuleo
• MomoPoppy

你可以更新 @opentiny/[email protected] 进行体验！

npm i @opentiny/[email protected]

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

1 OpenTiny 官网首页 UI 和性能优化

1.1 官网 UI 美化

2024年7月，我们对 TinyVue 网站的 UI 进行了优化，让组件文档阅读体验更友好。

• 设计师小姐姐加入之后，TinyVue 组件库官网焕然一新！

2024年11月，我们在 TinyVue 3.19.0 版本对组件库整个UI进行了升级，让UI更美观、更符合现代风格。

• 焕然一新！TinyVue 组件库 UI 大升级，更符合现代的审美！
• 🎉TinyVue v3.19.0 正式发布！Tree 组件终于支持虚拟滚动啦！UI 也升级啦，更更符合现代审美~

2024年12月，我们对 OpenTiny 官网首页进行了 UI 优化，更具现代性和设计美感，并对官网首页的加载性能进行优化，实现秒开。

我们对体验和性能的优化，永不止步！

欢迎大家访问 OpenTiny 官网进行体验：opentiny.design/

1.2 官网性能优化

之前 OpenTiny 首页打开比较慢，一个 js 文件就将近 8MB，存在性能问题。

于是我们全面分析了网站的构建产物，寻找性能瓶颈，并进行优化，以下是取得的主要成果：

1. Lighthouse 性能分从68分提升到了93分，各项数据都有明显提升，提升37%左右；
2. 构建产物体积从 8MB 降到 856KB（其中与首页相关的js代码仅有 450KB），提升近10倍；
3. 构建时长从 50s 缩短到 7.63s，提升6.5倍左右。

Lighthouse 性能得分对比：

构建产物对比：

2 TinyVue 官网增加 Algolia 全文搜索

之前 TinyVue 组件库的官网只支持搜索组件，这样用户想找组件怎么用还是比较难的。

• 首先需要知道组件准确的名字
• 然后在左侧菜单打开组件的文档
• 还要在组件 demo 和 api 文档中一个一个看，自己要的功能在哪里，怎么配置
• 特别是有些组件功能非常复杂，比如表格，光是组件api就100多个

新手觉得很头大。

为了让不熟悉 TinyVue 组件库的新手也能快速找到组件文档，快速使用上 TinyVue，我们给 TinyVue 文档增加了 Algolia 全文搜索功能。

只需要打开 TinyVue 网站：opentiny.design/tiny-vue/

按 Ctrl + K 快捷键，或者点击左上角的搜索框，会弹出搜索面板，输入你想了解的内容，比如："圆角按钮"，按 Enter 就可以跳转到圆角按钮对应的页面。

跳转到圆角按钮页面：

再比如："日期范围"

跳转到日期范围页面：

我不需要知道文档在哪里，要的时候我按 Ctrl + K 进行搜索就行了！

寻找文档的效率大大提升！

欢迎大家体验！

3 主题配置工具增加覆盖 CSS 功能

TinyVue 组件库提供了 TinyThemeTool 类进行主题切换和自定义主题配置，如果你的业务需要定制主题风格，或者覆盖某些组件的样式，可以考虑使用我们提供的 TinyThemeTool 工具。

3.1 自定义主题

v3.20.0 版本我们给 TinyThemeTool 增加了覆盖组件 CSS 样式的功能，使用方式如下：

ThemeData 是自定义主题数据格式，用户可以通过data属性，传入覆盖的全局 CSS 变量， 通过css属性，传入有效的 CSS 规则块。

interface ThemeData {
/** 主题的ID */
 id?: string
/** 主题的名称 */
 name?: string
/** 主题的中文名称 */
 cnName?: string
/**
  * 需要追加的全局css变量的对象
  * 比如：{ 'tv-base-color-brand' : '#1476ff' } 会追加到 :root { --tv-base....... }
  * */
 data?: Record<string, string>
/**
  * 需要追加的样式规则, 以覆盖或扩充组件的样式
  * 比如：.tiny-button { border:none;  }
  * */
 css?: string
}

自定义主题的方式如下：

import TinyThemeToolfrom'@opentiny/vue-theme/theme-tool'

const themeTool = newTinyThemeTool()

themeTool.changeTheme({
name: 'my-app-custom-styles',
data: {
   'tv-base-color-brand': '#1476ff',
   'tv-font-size-md': '12px',
   'tv-font-size-lg': '16px',
   'tv-font-size-xxl': '20px'
 },
css: `
   .tiny-button {
     --tv-Button-border-radius: 6px;

     min-width: 80px;
     border:none;
     padding : 2px 20px;
   }
   .tiny-button.tiny-button--primary{
     background-color: #508de3;
   }
 `
})

3.2 使用老主题或 Aurora 主题

我们不建议用户继续使用旧主题，对于历史项目，我们提供一组旧主题的CSS变量,需要用户在工程中适配。

如果你实在不喜欢我们提供的新主题，想使用老主题或者 Aurora 主题，你可以通过 ThemeTool 工具进行配置。

import TinyThemeTool, { tinyOldTheme, tinyAuroraTheme } from '@opentiny/vue-theme/theme-tool'

const themeTool = new TinyThemeTool(tinyOldTheme) // 传入 tinyAuroraTheme 可以配置 Aurora 主题

// themeTool.changeTheme(tinyOldTheme)  // 动态切换主题

3.3 对新主题进行定制

如果你喜欢我们的新主题，但觉得新主题有一部分样式我不喜欢，那么你也可以自由定制。

比如你觉得新主题太大了，想改成小尺寸，你可以在 App.vue 中加上以下样式，覆盖默认的主题变量。

:root {
 --tv-size-height-xs: 24px; // mini 尺寸
 --tv-size-height-sm: 24px; // small 尺寸
 --tv-size-height-md: 28px; // medium 尺寸 - 默认
 --tv-size-height-lg: 32px; // large 尺寸
 --tv-size-height-xl: 36px; //  xLarge 尺寸
}

效果对比：

除了以上优化之外，我们还对社区朋友们提到的以下问题进行了优化：

• 将按钮组件默认的全圆角改成了小圆角，用户可以通过配置 round 属性为 true 来设置大圆角

欢迎大家体验我们的 TinyVue 组件库，并在评论区进行反馈和交流~

关于OpenTiny

OpenTiny官网：opentiny.design

TinyVue 源码：github.com/opentiny/ti... （欢迎 Star ⭐）

TinyEngine 源码：github.com/opentiny/ti... （欢迎 Star ⭐）

B站：space.bilibili.com/15284299

欢迎加入 OpenTiny 开源社区。添加微信小助手 opentiny-official 一起参与交流前端技术～