5月16日，OpenTiny 開源社區成功舉辦了以《OpenTiny 開源之夏項目解讀直播》為主題的直播活動。此次直播中，華為云的高級前端工程師曾令卡、華為云的高級前端工程師伍其和與10位開源之夏技術專家攜手組成項目導師團，面向廣大開發者一同深入探討了 OpenTiny 開源之夏活動的各項細節。此外，針對 OpenTiny 的10個重點項目，項目導師還進行了關鍵技術的細致剖析，旨在為開發者們提供更清晰的指引，助力大家高效選擇并參與到自己感興趣的開源項目中。
活動詳情
1、活動對象
- 本活動面向年滿 18 周歲的高校在校學生。
- 暑期即將畢業的學生，只要申請時學生證處在有效期內，就可以報名活動。
- 中國籍學生參與活動時需提供身份證、學生證、教育部學籍在線驗證報告（學信網）或在讀證明。
- 外籍學生參與活動時需提供護照，同時提供錄取通知書、學生卡、在讀證明等文件用于證明學生身份。
2、如何報名
本次開源之夏活動自4月30日正式啟動報名，一直持續到11月8日結項審核完畢，歷時數月。目前，活動正處于火熱報名階段。學生們可輕松通過活動官網首頁的學生登錄入口注冊賬號、登錄系統，并按照活動規定填寫并提交詳細的個人資料。一旦資料通過組委會的嚴格審核，即標志著報名成功。成功報名后，學生們可自由瀏覽并挑選項目，包括進入開源之夏官網，查看并搜索OpenTiny相關項目。選定心儀項目后，只需根據項目要求，參照項目申請模板，通過系統便捷地提交申請材料，即可踏上參與開源項目的精彩旅程。
具體內容也可以前往學生指南進行查看：https://summer-ospp.ac.cn/help/student/
項目詳解
項目1：Grid 組件重構和優化
項目簡介： 目前TinyVue的Grid表格組件并沒有將組件邏輯拆分成renderless函數，后續無法擴展到其他前端框架中，因此需要對Grid組件進行重構，將組件邏輯抽離成renderless。完成重構之后，還需要基于目前的虛擬滾動進行優化，優化大數據場景下樹表、單元格編輯、行列拖拽等場景的功能和性能，實現動態高度的虛擬滾動、樹表懶加載等特性。
項目產出要求：
- Grid 組件抽離 renderless 邏輯層
- 優化虛擬滾動下行列拖拽、樹表、插入節點等場景的功能和效率
- 實現動態高度的虛擬滾動
- 實現樹表懶加載功能
- 完善以上特性的自動化測試用例
- 完善以上特性對應的API/Demo文檔
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0057?list=org&navpage=org
項目2：TinyVue增加Nuxt支持
項目簡介： SSR服務端渲染在首屏加載性能、SEO等方面存在一定的優勢，因此也有很多應用場景，TinyVue組件庫目前還不支持SSR，希望能提供對Nuxt框架的支持，使TinyVue的組件也能用在Nuxt框架搭建的應用中
項目產出要求：
- 增加tiny-vue-nuxt模塊
- 改造TinyVue代碼，以適應Nuxt環境
- 支持Vue2和Vue3，在Vue2和Vue3項目中走通nuxt插件使用流程
- 完善對應的自動化測試
- 補充對應的使用文檔
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0058?list=org&navpage=org
項目3：Tree組件增加虛擬滾動功能
項目簡介： 在文件瀏覽器、組織結構圖、分類目錄等場景中，Tree組件能夠以樹形結構展示數據，并支持展開/折疊、選擇/取消選擇等交互操作，方便用戶查看和管理數據。TinyVue組件庫的Tree組件包含非常豐富的功能，比如節點單選/多選、節點增刪改、拖拽節點、搜索過濾、懶加載等，但缺乏虛擬滾動功能，在大數據場景下會存在性能問題，所以我們應該給Tree組件增加虛擬滾動的功能。
項目產出要求：
- 實現嵌套節點的 Tree 虛擬滾動
- 實現帶增刪改節點的虛擬滾動
- 實現拖拽樹的虛擬滾動
- 實現節點搜索過濾下的虛擬滾動
- 為Tree組件虛擬滾動功能編寫API/Demo文檔
- 為Tree組件虛擬滾動功能編寫自動化測試用例
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0053?list=org&navpage=org
項目4：TinyVue 富文本功能增強
項目簡介： 富文本編輯器是一個使用場景很豐富的組件，目前TinyVue的富文本組件支持20多種富文本格式，但是表格操作、復制粘貼等功能還不夠完善，并且缺乏斜桿菜單、浮動菜單、協同編輯等實用功能，需要對這些功能進行增強和補齊，為更廣大的業務提供一個功能強大、穩定的富文本編輯器。
項目產出要求：
最終要形成一個高度優化且具有豐富增強功能的 tinyvue 富文本組件。該組件需具備抽取的框架無關的 TinyTiptap、易用性和定制能力優秀的 Toolbar 工具欄組件、功能和交互顯著增強的表格模塊、完善的粘貼模塊，包括支持多種內容的粘貼，還要有斜杠菜單功能、浮動菜單功能、協同編輯功能以及配套的自動化測試用例和詳細準確的 API/Demo 文檔，以確保其穩定性和可用性。
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0054?list=org&navpage=org
項目5：完善 TinyPro Vue 中后臺系統
項目簡介： TinyVue Pro是一個基于TinyVue的中后臺系統，支持 10+ 實用功能，20+ 典型頁面場景，還缺乏頁簽模式、多級菜單等實用功能需要完善和豐富。
項目產出要求：
- 增加頁簽模式
- 支持多級菜單
- 支持在初始化項目時選擇vite/webpack/rspack/farm等構建工具
- 支持在初始化項目時選擇Vue2還是Vue3項目
- 支持多維度權限管理能力：頁面權限管理、菜單權限管理、按鈕權限管理
項目鏈接：https://summer-ospp.ac.cn/org/prodetail/2436e0065?list=org&navpage=org
項目6：開發 TinyEngine 模板功能
項目簡介： 本賽題需要從0實現TinyEngine模板功能并提供中后臺管理系統模板，官網展示頁類型模板、基礎表單類型模板，用戶可以基于模板創建頁面和應用，實現快速搭建。
項目產出要求：
- 作品應能完成模板基礎功能。
- 作品應完成三類模板：后臺管理系統模板、官網展示頁類型模板、基礎表單類型模板，用戶可以基于模板創建頁面和應用，實現快速搭建。
- 作品包含完整的代碼、文檔等產物。
- 作品代碼邏輯清晰，模塊劃分合理，可維護性強，符合項目開發規范。
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0063?list=org&navpage=org
項目7：AI插件搭建能力增強
項目簡介： TinyEngine當前已有基礎的AI插件能夠實現通過輸入需求對話調用AI能力生成前端頁面，本賽題需要完善AI插件能力，改進AI生成頁面流程，利用AI多模態能力, 同時將AI與TinyEngine功能相結合等方式，來優化AI插件的搭建效果與使用體驗。
項目產出要求：
- 優化當前對話方式生成頁面效果，支持更多TinyVue組件，通過AI直接返回符合低碼平臺頁面協議格式的頁面schema渲染增強用戶交互體驗：優化AI插件的用戶界面和交互設計，提升用戶體驗。
- 支持通過上傳設計稿或者原型圖，使用AI能力搭建出頁面，頁面使用TinyVue組件，效果應與上傳圖片大致類似，生成的頁面可以手動確認和二次修改
- 實現AI調用TinyEngine能力，生成頁面時實現自動生成頁面狀態變量、頁面JS、國際化等數據并自動進行綁定
- 完善對應的文檔
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0062?list=org&navpage=org
項目8：插件靈活布局能力
項目簡介： TinyEngine 使用插件架構，每個插件都是一個相對獨立的功能，本賽題為插件提供靈活布局能力，可以實現插件在運行時，通過右鍵菜單控制插件顯示隱藏、調整位置、插件切換左右側顯示，同時可以拖拽調整展開的插件面板寬度。
項目產出要求：
- 拖拉調整插件面板寬度
- 拖拽調整插件調整順序
- 拖拽調整插件調整位置
- 右鍵菜單控制插件顯示隱藏、插件切換左右側顯示
項目鏈接：https://summer-ospp.ac.cn/org/prodetail/2436e0060?list=org&navpage=org
項目9：React DSL 出碼與預覽功能實現
項目簡介： TinyEngine基于符合頁面描述協議的schema文件來描述搭建的低代碼前端頁面結構，本賽題需要根據頁面schema來實現生成React技術棧代碼，并在預覽插件中能夠實現預覽React代碼效果。
項目產出要求：
- 作品應能完成在React出碼插件中實現由頁面Schema生成React代碼功能。
- 作品需要在預覽插件中實現生成React代碼的預覽功能，通過出碼模塊生成的React代碼應能正常預覽，預覽顯示效果與設計器畫布效果基本一致。
- 作品包含完整的代碼、基礎的測試用例、文檔等產物。
- 作品代碼邏輯清晰，模塊劃分合理，可維護性強，符合項目開發規范。
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0061?list=org&navpage=org
項目10：ElementPlus組件庫全量物料接入
項目簡介： TinyEngine 支持導入三方組件庫物料，本賽題需要完成導入ElementPlus全量組件物料。
項目產出要求：
- 需要提供完整的包含ElementPlus組件庫全量組件的JSON格式物料文件，導入TinyEngine后可以正常顯示、拖拽組件并配置屬性。
- 作品包含完整的代碼、自動化腳本、文檔等產物。
- 作品代碼邏輯清晰，模塊劃分合理，可維護性強，符合項目開發規范。
項目鏈接： https://summer-ospp.ac.cn/org/prodetail/2436e0059?list=org&navpage=org
上述列出的十個賽題均源自于 OpenTiny 開源之夏活動，它們聚焦于 TinyVue 組件庫項目及 TinyEngine 低代碼引擎項目。若你希望深入了解這兩個項目的精髓與魅力，歡迎訪問 OpenTiny 官網并聯系項目導師，將有更多詳盡的資訊和精彩的內容等待你的探索。
關于 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標簽，一起參與開源貢獻~
-磁盤結構)