01

核心技术方向

协同编辑引擎

低代码可视化

AI 流式交互

私有组件库

前端工程师

Vue 3 React TypeScript Vite Pinia Tailwind CSS

02

教育背景

本科

南京邮电大学通达学院

计算机科学与技术

硕士

安徽工业大学

计算机技术

多年前端工程经验 · 专注复杂 Web 应用研发

03

技术栈全景

前端框架

Vue 3 React TypeScript Vite Pinia Vue Router Tailwind CSS

后端 / 全栈

NestJS LangChain SSE RESTful API

编辑器 / 可视化

Tiptap ProseMirror Yjs (CRDT) ECharts Monaco Editor Jspreadsheet

工程化 / 架构

私有 npm 组件库 30+ 版本迭代前端技术规范团队管理

04

核心职责

技术选型与规范制定 — 将主产品从 Vue 2 升级至 Vue 3 + TypeScript + Vite，建立前端工程规范体系

团队管理 — 带领前端团队，统筹需求评审、技术方案、代码审查及版本发布全流程

核心产品研发 — 深度参与 elabnote (ELN/LIMS) 架构设计：协同编辑引擎、AI 问答、低代码平台

跨团队协作 — 与后端、UI、产品经理紧密配合，建立前后端接口规范，显著降低联调成本

多个大型项目按时交付 · 核心模块技术攻坚

05

核心项目

数据大屏低代码可视化平台

一站式数据大屏低代码构建平台，内置丰富图表物料库，支持 JSON 级微调与样式自定义。面向科研数据分析与业务决策场景，用户无需编写前端代码即可快速搭建专业可视化大屏。

Vue 3 · TypeScript · Vite · Pinia · Tailwind CSS · ECharts · Monaco Editor

06

低代码画布引擎

技术方案

主导搭建 Vue 3 低代码编辑器核心架构

开发画布动态缩放、多维组件拖拽交互系统

基于吸附算法与参考线辅助实现控件自由布局、对齐吸附

图层精细化控制，支持多选、框选、快速锁定等操作

交互设计

对标 Figma 等专业设计软件的交互体验，支持多选、框选、快速锁定图层等专业操作。

07

撤销/重做状态回溯系统

技术方案

运用命令模式独立封装 useCommand Hook

构建细粒度 Undo/Redo 队列

支持新增、拖拽、删除、层级切换、缩放、属性修改等全类型操作回退

工程质量

结合 Pinia + 本地持久化插件

大屏深层 JSON 状态刷新不丢失

Ctrl+Z / Ctrl+Y 全局快捷键绑定

08

企业级系统

斑马鱼数字智能平台 (elabnote)

ELN/LIMS 企业级系统，覆盖项目立项、实验设计、SOP 制定、数据记录、在线审批到库存追踪的全链路数字化管控。面向医药研发、生化实验与科研机构。

Vue 3 · TypeScript · Tiptap · Jspreadsheet · Yjs · React (Veaury)

09

实时协同编辑引擎 (CRDT)

技术方案

基于 Tiptap (ProseMirror) 构建结构化富文本编辑器

引入 CRDT 算法，结合 Yjs + Hocuspocus 实现多端实时协同

规模与成果

支持 100+ 用户 同屏在线编辑，彻底消除数据锁与记录冲突，保障科研数据强一致性。

          攻克难点：多人光标追踪 · 表格多层嵌套合并 · @提及渲染 ·
          复杂实验参数绑定
        

10

AI 文档问答 (RAG + 流式响应)

技术方案

后端基于 NestJS + LangChain 构建 RAG 检索管道

通过 SSE 推流实现实时响应

前端使用 fetch-event-source + markstream-vue 实现 AI 流式 Markdown 渲染

用户价值

科研人员可直接对实验文档进行自然语言问答，大幅提升查阅效率。

11

生命科学专业级渲染引擎

技术方案

通过 Veaury (React-in-Vue) 桥接，在 Vue 3 主应用中融合 React 18

接入 ketcher-react 实现化学分子结构绘制与 SMILES 导出

集成 @teselagen 与 biomsa，落地 DNA/RNA/蛋白质多序列比对可视化

业务价值

填补生命科学专业工具空白，显著提升产品在生物医药市场的核心竞争力。

12

私有组件库 jspreadsheet-bmy

技术方案

基于 Jspreadsheet 底层能力二次封装

支持复杂数据类型、复制粘贴及自定义单元格渲染

封装 arco-design Table，支持自定义列展示与批操作插槽

维护成果

公司私有 npm 库持续迭代 30+ 版本，稳定服务多个业务线。

13

开源贡献 & 个人项目

📤 开源贡献 (贡献 PR)

linshenkx/prompt-optimizer

⭐ 26.3k

提示词优化器，助力编写高质量提示词

varletjs/varlet

⭐ 5.5k

Vue3 移动端组件库

vueComponent/ant-design-vue

⭐ 21.4k

Vue 的 UI 组件库

🔧 个人项目 (独立开发)

vite-plugin-typed-env

自动生成环境变量类型和运行时验证 · v0.1.4

@zppo/vite-plugin-build-time

给 SPA 应用添加 build 时间展示 · v0.1.1

multi-table

多维表格组件，支持 Vue/React · 开发中

opbr-skills

日常使用的 skills 集合

@ollap/gantt-vue3

甘特图组件 · v0.3.6 · 已发布 npm

          🏆 发明专利：一种基于富文本数据结构图片格式的解析方法
        

14

个人评价

拥有多年前端工程经验，专注复杂 Web 应用研发，具备从 0 到 1 独立主导大型系统的全链路能力。掌握协同编辑、低代码引擎、AI 流式交互等前沿技术方向；具备跨框架（Vue + React）架构整合经验，有私有组件库维护与团队技术规范建设实践。

技术热情高责任心强跨团队协作持续输出价值

15

感谢聆听

📧 GitHub: OPBR