报名倒计时两周|2024 OpenTiny 开源之夏项目直播解读回顾

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标签，一起参与开源贡献~