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

原创
05/21 20:34
阅读数 76

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部