OpenSourceTalent icon indicating copy to clipboard operation
OpenSourceTalent copied to clipboard
verified publisher icon Tencent

2025腾讯犀牛鸟开源人才培养计划—OMI

Open tencent-adm opened this issue 2 years ago • 1 comments

腾讯犀牛鸟开源人才培养计划

欢迎广大高校学子及开发者加入2025腾讯犀牛鸟开源人才培养计划！犀牛鸟开源人才培养计划同教育部计算机类专业教学指导委员会、教育部软件工程专业教学指导委员会、教育部电子信息类专业教学指导委员会、中国信息通信研究院一起作为联合指导单位，腾讯开源和腾讯高校合作联合主办，开发者通过参与腾讯全链路技术栈15个明星项目的学、练、赛研学，有机会获得腾讯颁发的荣誉证书、现金奖励以及腾讯特色礼包，获得“优秀学生”即可优先获得腾讯面试机会。

期待同学们在本次研学旅程中，和腾讯一起探索未知、学习技术，让开源伴你成长，收获满满一夏！

更多项目信息请看：腾讯开源活动官网 、 腾讯开源研学基地

项目简介

OMI 是前端 Web Components 框架，使用 OMI 可以编写标准化、可重用和组合的跨框架的 W3C 标准组件，也可以使用 OMI 编写整个 Web 页面。

项目导师

张磊, OMI、Cax、AlloyFinger等框架作者，Kbone框架贡献者，HTM小程序SVG渲染器作者

导师寄语

OMI + TDesign 能碰撞出什么火花？希望优秀的你参与进来，一起实现，一定会收获满满，让我们一起来见证。

培养概览

1️⃣ 参与“腾讯开源基础课程” 完成考试可获得《腾讯开源研学结课证书》

2️⃣ 参与“腾讯开源issue实战” 完成任意issue即可获得专属《腾讯开源实战证书》+ 腾讯周边精美礼包一套。其中issue难度对应礼包大小

3️⃣ 参与“腾讯开源课题实战” 任务奖金从6K、8K到12K不等、腾讯犀牛鸟研学专属《优秀学生证书》或《优秀开发者证书》、全球限量《腾讯开源贡献者证书》 *获得《优秀学生证书》，即可优先获得腾讯面试机会

4️⃣ 彩蛋玩法：分享有礼、帮带有礼

【玩法1-分享有礼】 在任意社交平台（知乎/b站/掘金/CSDN等）分享你在【本届犀牛鸟研学的心得+犀牛鸟官网】，在9月10日前把分享记录填写在【分享有礼登记表】表中，分享量Top 10即可获得鹅厂周边礼包！🎁

【玩法2-帮带有礼】： 你可以在项目社群、项目repo页面、项目研学基地【我要提问】区域三个位置回答其他同学提出的问题，在9月10日前，我们会综合导师意见，对积极且正确帮助他人解答问题的幸运同学送出鹅厂周边礼包！🎁

如何贡献

参与“腾讯开源issue实战”

进入“研学基地”，参与“腾讯开源issue实战”，选择你感兴趣项目的 Issue 任务，认领和完成它。7月10日开放 issue ，学生及开发者可无门槛参与和认领

1、如果你愿意解决issue，请在腾讯开源研学基地的【3️⃣issue认领任务大厅】领取issue任务 2、Fork 到个人的仓库下 3、在个人仓库解决完对应的任务后，提交 PR 至 Issue 所在仓库的 master 分支 4、PR提交后，项目导师将进行 code review， PR 被合并后即视为任务完成 5、如有任何疑问可以在评论区留言或者邮件至联络人

参与“腾讯开源课题实战”

时间安排：6月20日至7月28日为活动报名期，8月1日公布入围名单，8月2日至9月10日为课题实战期，通过筛选的学生即可参与此模块。

Omi + SVG 图形编辑器实战大纲

一、项目简介

  • 项目名称：SVG图形编辑器
  • 技术栈：Omi（Web Components）、SVG、TypeScript/JavaScript、CSS
  • 目标功能：实现基本的SVG图形绘制、编辑、属性调整、导出等功能，体验Omi组件化开发流程。

二、核心功能模块

1. 画布（Canvas）组件

  • SVG画布区域，支持鼠标绘制、选择、拖拽、缩放
  • 响应式渲染SVG元素（rect、circle、line、path等）

2. 工具栏（Toolbar）组件

  • 图形选择（矩形、圆形、线条、路径等）
  • 操作按钮（撤销、重做、删除、导出等）

3. 图形列表（ShapeList）组件

  • 展示当前所有图形对象
  • 支持选中、重命名、删除

4. 属性面板（PropertyPanel）组件

  • 显示并编辑选中图形的属性（位置、尺寸、颜色、边框等）

5. SVG导出（SVGExport）组件

  • 导出SVG代码或下载SVG文件

三、开发流程与技术要点

1. Omi基础与组件化

  • Omi组件声明、生命周期、props与state管理
  • 组件通信（事件、props传递）

2. SVG基础与交互

  • SVG基本图形元素及属性
  • SVG事件处理（mousedown、mousemove、mouseup）
  • 图形的选中、拖拽、缩放、变换

3. 状态管理

  • 全局状态（当前选中工具、图形列表、选中图形ID等）
  • Undo/Redo历史记录实现

4. 属性编辑与双向绑定

  • 属性面板与SVG元素属性的同步
  • 颜色选择器、数值输入等UI实现

5. 导出与持久化

  • SVG代码生成与下载
  • 可选：本地存储/加载

四、进阶与扩展

  • 支持多选、组合、对齐
  • 支持路径编辑（锚点、曲线）
  • 支持图层管理
  • 支持导入SVG文件
  • 响应式布局与移动端适配

五、实战任务拆解

  1. Omi项目初始化与基础组件搭建
  2. 实现SVG画布与基本图形绘制
  3. 实现工具栏与图形选择逻辑
  4. 实现图形的选中、拖拽、删除
  5. 实现属性面板与属性编辑
  6. 实现撤销/重做功能
  7. 实现SVG导出与下载
  8. UI美化与交互优化
  9. 进阶功能开发（如多选、路径编辑等）

联系导师

张磊: [email protected]

💁🏻‍♀️ 欢迎加入腾讯开源犀牛鸟官方微信群：官方通知及解答、最新腾讯开源动态

Image

💁🏻‍♀️欢迎加入OMI项目官方交流群，导师在线为你答疑解惑！

Image

tencent-adm avatar Jun 13 '23 07:06 tencent-adm

前端编程任务：基于 Omi/WebComponents 的低代码搭建平台

项目概述

开发一个基于 Omi WebComponents 的前端低代码搭建平台。该平台允许用户通过选择组件、配置属性等方式快速构建前端页面。项目只涉及前端部分，不包括后端开发。选择组件交互参考 power page

image

技术栈

  • 框架Omi
  • 构建 Vite
  • 样式tailwindcss
  • 语言 TypsScript

任务分工

  • 项目初始化，设置项目结构
  • 编辑器界面开发
  • 组件库开发【边搭建编辑器边开发】
  • 编辑器预览
  • 生成代码

代码地址

https://github.com/Tencent/omi/tree/master/packages/omi-low-code

dntzhang avatar Aug 14 '24 07:08 dntzhang