开源之夏报名倒计时3天!还有9个前端任务有余位,快来申请吧~

开源之夏 2025 精彩继续,本次活动OpenTiny开源社区还有9个赛题尚有余位,欢迎大家申请报名~

项目1:TinyEngine低代码设计器支持TS

项目简介: 本赛题旨在实现TinyEngine设计器对TypeScript的支持,包括出码、Schema、输入代码等,提高开发效率和代码质量。

项目产出要求:

  1. 实现低码设计器系统功能对TypeScript的支持,包括出码、Schema、状态变量、输入代码等;完善协议层面对TS的支持。
  2. 确保TypeScript代码的类型安全性和可维护性,出码代码能够正常预览与编译;TS作为可选功能,不打开TS时不影响当前功能正常。
  3. 提供详细的设计文档与使用文档,提供必要的提示,确保用户能够轻松使用该功能。
  4. 代码逻辑清晰,模块划分合理,可维护性强,符合项目开发规范。

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: 阿杰ing

导师联系方式: 632163606@qq.com


项目2:TinyEngine源码转换DSL能力

项目简介:

本赛题旨在实现将Vue/React代码转换为低代码DSL的能力,及支持出码后修改源码的逆向转换,提高低码扩展性与灵活性,方便更好的导入导出项目。

项目产出要求:

  1. 实现从Vue/React代码到低代码DSL的转换功能。
  2. 支持出码后修改源码的逆向转换功能。
  3. 提供详细的文档和示例代码,确保用户能够轻松使用该功能。
  4. 代码逻辑清晰,模块划分合理,可维护性强,符合项目开发规范。

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: zcating

导师联系方式: zcating@qq.com


项目3:TinyEngine运行时渲染解决方案

项目简介: 当前TinyEngine仅支持出码方案,本赛题需要实现运行时渲染功能,能够支持开发态运行时预览与生产态部署运行。

项目产出要求:

  1. 实现运行时渲染模块,支持设计态、预览态与生产运行场景,并统一渲染能力(重构当前画布与预览渲染能力)。
  2. 实现现上预览、部署运行能力。
  3. 确保运行时渲染性能,避免性能瓶颈。(与出码方案性能相比不能有较大差距。建议指标:中等复杂度页面首屏≤2s, TTI≤3.5s)
  4. 提供详细的方案文档、使用文档,确保用户能够轻松使用该功能。
  5. 界面引导清晰,交互友好,无明显问题;代码逻辑清晰,模块划分合理,可维护性强,符合项目开发规范。

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: 阿Z

导师联系方式: 1103085816@qq.com


项目4:TinyVue组件增加全局配置动效方案

项目简介: 在开发应用时,为组件添加全局配置的动效方案是一种提升用户体验的好方法。这种方案允许开发者通过统一的方式控制所有组件的动画效果,从而保持应用的一致性和美观性,可参考Uiverse。

项目产出要求:

  1. 定义全局动效配置,你需要定义一个全局的动效配置对象,这个对象可以包含各种动效相关的属性,比如动画类型、持续时间、延迟等。
  2. 创建动效函数库,创建一些通用的动效函数(js函数或者less通用类),这些函数可以根据全局配置来执行特定类型的动画。例如,你可以为淡入淡出、滑动和缩放等常见动画创建函数。
  3. 组件集成,每个组件都可以根据需要调用上述动效函数,并传入全局配置或局部配置。
  4. 动态调整配置,可以希望提供一种方式来动态地改变全局动效配置,以便于在不同的场景下使用不同的动画效果。
  5. 确保代码符合项目规范,有完整的TypeScript类型声明,UI美观体验良好。
  6. 补充相应的文档和自动化测试用例。

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: 吴义平

导师联系方式: 1106773985@qq.com


项目5:完善TinyVue对于nuxt工程的全面支持

项目简介: SSR服务端渲染在首屏加载性能、SEO等方面存在一定的优势,因此也有很多应用场景,完善TinyVue对于nuxt工程的全面支持,适配剩余暂时不支持ssr的组件(file-upload、pop-upload、mindMap、huichart),增加全局ID配置,ZIndex管理、Teleport处理等功能,可以参考elements-plus的SSR章节。

项目产出要求:

  1. 适配剩余暂时不支持ssr的组件(file-upload、pop-upload、mindMap、huichart)。
  2. 增加全局ID配置,因为不同的 IDs 容易发生SSR中的水合率错误
  3. 增加ZIndex管理,在SSR适配过程中可以能会遇到 z-index 引起的水合错误
  4. 增加 Teleport 处理,有多个组件使用到了 Teleport ,所以在SSR期间需要特殊处理。(如果不用改源码,可以供给解决方案文档)
  5. 补充对应的使用文档,并跑通TinyVue已经提供的E2E测试用例
  6. 将以上特性集成到 TinyVue Nuxt 模块中,给用户提供开箱即用的 Nuxt 模块
  7. 确保代码符合项目规范,有完整的TypeScript类型声明

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: 奋斗

导师联系方式: 552847957@qq.com


项目6:TinyEditor 支持协同编辑

项目简介: 随着在线协作需求的日益增长,用户希望在 TinyEditor 富文本编辑器中实现多人实时协同编辑功能。本功能需要从0开始开发,旨在允许多个用户同时对同一文档进行编辑,并且能够实时看到彼此的修改内容,确保团队成员之间的高效协作。

项目产出要求:

  1. 完成 TinyEditor 富文本编辑器的协同编辑功能开发,确保多个用户能够同时对同一个文档进行编辑,且编辑操作能够实时同步到所有参与协作的客户端。
  2. 用户在编辑器中的操作(如文本输入、删除、格式调整、图片插入、表格编辑等)能够在极短的时间内(不超过 1 秒)反映到其他协同编辑用户的编辑器界面上,确保实时性。不同用户的编辑操作能够在编辑器中以不同的颜色、光标样式或其他可视化方式加以区分,方便用户清楚地了解每个操作是由谁执行的。
  3. 冲突解决机制 :在多个用户同时对同一段内容进行编辑时,能够自动检测并合理解决编辑冲突,确保文档内容的一致性和正确性。
  4. 接口与集成 :提供与后端服务的接口,实现编辑器内容的实时保存和同步,确保在网络中断或其他异常情况下,用户的编辑内容不会丢失,并且能够在重新连接后继续协同编辑。
  5. 提供一个或多个完整的示例项目,展示 TinyEditor 协同编辑功能在实际应用场景中的使用方法,包括如何初始化协同编辑、如何处理用户加入和退出协同编辑等情况。编写详细的协同编辑功能使用文档和开发教程,包括功能介绍、操作步骤、接口说明、常见问题解答等内容,帮助用户快速上手并有效使用协同编辑功能。
  6. 确保代码符合项目规范,有完整的TypeScript类型声明,UI美观体验良好。
  7. 补充相应的文档和自动化测试用例。

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: vaebe

导师联系方式: ygdpz@outlook.com


项目7:使用floating-ui重构TinyVue的tooltip和popover组件

项目简介: 使用Floating UI 重构 TinyVue 的 tooltip 和 popover 组件,可以提升这些组件的灵活性和可维护性。Floating UI 是一个用于创建浮动元素(如 tooltip、popover 等)的库,它提供了强大的功能来处理定位和动画效果。替换 TinyVue 弹出框底层的 popper.js。

项目产出要求:

  1. 使用 Floating UI 替换TinyVue组件库目前使用的 popper.js
  2. 兼容 tooltip 组件的所有功能和 api 并且跑通所有的测试用例
  3. 兼容 popover 组件的所有功能和 api 并且跑通所有的测试用例
  4. 补充对应的使用文档

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: fanbingbing16

导师联系方式: 2581932570@qq.com


项目8:参考 NestJS 后端接口规范,提供 Java SpringBoot 或 Python Django 版本后端

项目简介: 随着 TinyPro 后台管理系统的广泛应用,为满足不同技术栈团队的需求,计划基于 TinyPro 现有的 NestJS 后端接口规范,分别提供 Java SpringBoot 和 Python Django 版本的后端实现。通过这一举措,使熟悉 Java 或 Python 的开发团队能够更便捷地使用 TinyPro 模板进行开发,降低技术门槛,提升开发效率。

项目产出要求:

  1. 完成基于 Java SpringBoot 或 Python Django 的后端项目搭建,项目结构清晰合理,按照 TinyPro NestJS 后端接口规范,实现相应的 RESTful API 接口,,包括用户管理、菜单配置、权限管理等模块的接口,确保接口功能完整、响应数据格式与原规范一致,且能与 TinyPro 的前端部分能够无缝对接。
  2. 完成Java SpringBoot 或 Python Django 的后端与MySQL、Redis数据库的对接。
  3. 编写详细的 SpringBoot或Python Django 版后端使用文档,包括项目部署、接口调用示例、配置说明等内容,方便开发人员快速上手使用。
  4. 提供一个使用 SpringBoot 或Python Django版后端与 TinyPro 前端结合的示例项目,展示从项目启动到页面展示、数据交互的完整流程,涵盖常见的后台管理功能,如用户登录、菜单显示、数据列表查询等,方便用户直观了解和学习。
  5. 提供清晰的项目部署方案,包括在常见服务器环境(如 Linux 系统)下的部署步骤、所需依赖环境的安装配置方法、容器化部署(如 Docker)的支持等,方便用户将项目部署到生产环境,实现快速上线和稳定运行。
  6. 确保代码符合项目规范,有完整的TypeScript类型声明,UI美观体验良好。
  7. 补充相应的文档和自动化测试用例。

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: GaoNeng-wWw

导师联系方式: gaonenggg@outlook.com


项目9:TinyPro 适配移动端,提升平板和手机端访问的体验

项目简介: TinyPro 是一个基于 TinyVue 打造的前后端分离的后台管理系统,支持在线配置菜单、路由、国际化等,还支持页签模式、多级菜单等丰富的特性。目前 TinyPro 在移动端场景下表现不佳,希望能适配移动端,让平板和手机用户访问 TinyPro 时也能保持良好的用户体验。技术上可以考虑基于 UnoCSS 原子化CSS进行实现。

项目产出要求:

  1. 实现响应式布局,确保在各种移动端设备上,如手机、平板等,后台管理界面能够自适应屏幕大小,提供良好的视觉效果和用户体验,包括但不限于菜单、登录、表格、表单、详情、个人中心、系统管理等模块的合理展示和操作。
  2. 根据移动端的操作习惯,设计简洁、直观、易用的交互界面和操作方式,如手势操作、触摸反馈、弹窗、下拉面板、表单、表格等,需要符合移动端交互习惯,提升用户在移动端使用后台管理系统的便捷性和舒适度。
  3. 确保在主流的移动浏览器上能够正常运行,如 Chrome、Safari、Firefox、UC 等,进行充分的浏览器兼容性测试和问题修复,保证用户在不同浏览器环境下都能获得一致的使用体验。
  4. 确保设备兼容性,对不同品牌、型号的移动端设备进行适配和测试,包括但不限于 iOS、Android 系统的手机和平板,解决因设备差异可能导致的显示问题、操作问题等,确保系统在各种移动端设备上的稳定性和可靠性。
  5. 确保在各种屏幕大小和分辨率下友好展示,包括但不限于:1024X768、2048X1536、1125X2436、1080X1920、750X1334、640X1136、1536X2560、1440X2560等分辨率
  6. 确保代码符合项目规范,有完整的TypeScript类型声明,UI美观体验良好。
  7. 补充相应的文档和自动化测试用例。

项目链接: summer-ospp.ac.cn/org/prodeta...

项目社区导师: 胡琦

导师联系方式: huqi1024@gmail.com

上述列出的九个赛题均源自于 OpenTiny 开源之夏活动,它们聚焦于 TinyVue 组件库项目及 TinyEngine 低代码引擎项目。若你希望深入了解这两个项目的精髓与魅力,欢迎访问 OpenTiny 官网并联系项目导师,将有更多详尽的资讯和精彩的内容等待你的探索~

* 项目难度分为基础和进阶两档,项目结项后可以获得劳动报酬,基础难度为税前 8000 元人民币,进阶难度税前 12000 元人民币。

报名须知

  • 报名对象:年满 18 周岁的高校在校学生(学生证在有效期内即可)。
  • 中国籍学生:提供身份证、学生证、教育部学籍在线验证报告(学信网)或在读证明。
  • 外籍学生:提供护照,同时提供录取通知书、学生卡、在读证明等文件。
  • 对项目感兴趣可以通过导师邮箱与导师联系,了解项目课题要求,导师对于最终的项目参与者有最终决定权。

了解更多:summer-ospp.ac.cn/help/studen...

关于开源之夏

开源之夏是中国科学院软件研究所发起的"开源软件供应链点亮计划"系列暑期活动,旨在鼓励高校学生积极参与开源软件的开发维护,促进优秀开源软件社区的蓬勃发展。活动联合各大开源社区,针对重要开源软件的开发与维护提供项目课题开发任务,并向全球高校学生开放报名。

关于OpenTiny

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

OpenTiny 官网:opentiny.design

OpenTiny 代码仓库:github.com/opentiny

TinyVue 源码:github.com/opentiny/ti...

TinyEngine 源码:github.com/opentiny/ti...

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

相关推荐
Jimmy6 分钟前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
来来走走11 分钟前
Flutter dart运算符
android·前端·flutter
moddy16 分钟前
新人怎么去做低代码,并且去使用?
前端
风清云淡_A16 分钟前
【Flutter3.8x】flutter从入门到实战基础教程(五):Material Icons图标的使用
前端·flutter
安心不心安21 分钟前
React ahooks——副作用类hooks之useThrottleEffect
前端·react.js·前端框架
jstart千语23 分钟前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
肖师叔爱抽风30 分钟前
使用nvm use切换版本时出现虚假成功信息,使用nvm ls,实际显示没有切换成功,解决方法
前端
猩猩程序员32 分钟前
Rust为什么需要Borrow Trait
前端
BUG收容所所长32 分钟前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
司宸36 分钟前
学习笔记十四 —— 嵌套JSON树结构 实现模糊匹配返回搜索路径
前端