本文由體驗技術團隊Kagol原創~
之前有一些朋友吐槽我們 TinyVue 組件庫的 UI 不夠美觀，於是我們請了設計師小姐姐給我們的組件和網站進行優化，經過設計師小姐姐和我們的開發兄弟們一個多月的努力，終於完成網站第一版的優化。

優化點

主要優化點：

• 選項式和組合式寫法、單示例和多示例這兩個切換入口移到右下角，和主題切換放在一起，讓頁面整體上更加清爽
• 組件示例和 API 通過頁籤分開，雙排 Demo 改成單排居中，避免左右來回尋找 Demo 不聚焦，以及錯亂感
• 每個組件 Demo 最後增加貢獻者區塊（歡迎參與過 TinyVue 貢獻的朋友們進行補充）
• API 表格中組件 props 的自定義類型通過展開行方式呈現，避免來回跳轉

以及大量細節優化點：

• 優化左上角組件搜索輸入框的樣式，增加邊框
• 優化組件總覽的圖標樣式，移除六邊形外框
• 左側組件分類增加小圖標
• 優化右側組件 Demo 錨點樣式，使用小圓點風格
• ...

一起來看看效果吧。

效果頁面

組件概覽頁：

組件 Demo 頁：

組件 API 表格：

不管是組件還是文檔，我們都在持續進行優化，希望能給開發者帶來更好的使用體驗。

歡迎朋友們體驗和反饋~

關於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標籤，一起參與開源貢獻~