JavaScript

低代码平台，可以快速搭建京东中台各页面，包含多种组件，依托于京东组件库，可以拖拽出各种样式的页面，并且可以联通数据和其他项目要求，极大减少了开发时间，做到了提效并且向外赋能的能力。 我在项目中主要参与组件接入低代码平台以及对于各组件在低代码平台的适配

1、周期小但精致的低代码博客项目，有自研物料库，第三方物料库、模拟手机渲染、PC渲染等功能 2、负责项目从0-1搭建，负责项目所有前端代码

1、 从 0 到 1 基于 sketchrule 搭建可视化大屏编辑器框架，提供图标组件动态开发模板，合理分配图表开发任务。 2、 负责代码合并与审查，并在 gitlab 解决代码冲突，负责版本迭代代码部署及后续维护。 3、 负责本产品在本司内培训、宣发任务。完成院内培训宣传、实操演讲。

1.低代码平台为电商后台多表单页面的低代码配置平台。将二十多种常见的表单组件如input、select、upload、级联选择器、dialog、等等，通过拖拽生成所需要的表单页，前端不需要写代码，大大提升了研发工作效率。 2.此项目由我个人从0到1独立设计并研发。

通过拖拽组件、属性配置、数据配置、事件交互配置等操作，可快速的生成可视化大屏，大大降低了开发成本。项目广泛应用于公司各业务线，包含公司内部、工厂产线上等等。 项目使用 VUE、Element-UI、Echarts 等框架、库进行开发；地图组件使用leaflet+mapbox为底图，引用地图返回数据进行各个图层渲染，使用canvas2Dapi实现多边形的阴影，使用mixin实现多个地图图层的代码分割；3D部分使用three.js,初始化场景灯光等，并可导入3D模型（fbx或obj格式等），交互部分添加了位置等配置来控制模型；在组件初始化时，会注册各类交互事件到事件中心，联动交互时发送命令到事件中心寻找被关联组件事件进行触发。

1. 项目功能模块与实现功能 大屏列表： 展示所有已创建的大屏项目列表。 提供搜索、排序、查看、编辑、删除等大屏管理功能。 项目模板： 提供预设的大屏模板供用户选择。 用户可以基于模板快速创建新的大屏项目。 新建大屏： 提供可视化的拖拽式大屏编辑界面。 用户可以通过拖拽工具组件（如图表、信息、列表、小组件、图片、图标等）来自定义大屏布局和内容。 支持实时预览编辑效果。 图表组件数据配置： 在大屏编辑界面的右侧，提供图表组件的数据配置功能。 用户可以配置数据源、数据字段、样式等属性，实现图表组件的动态数据展示。 对使用者来说能实现的功能： 用户可以快速查看、编辑和管理已创建的大屏项目。 用户可以利用预设的模板快速搭建大屏项目，减少开发时间。 用户可以自定义大屏的布局和内容，通过拖拽组件来灵活构建大屏页面。 用户可以配置图表组件的数据源和样式，实现数据的可视化展示。 2. 我的任务、技术栈及成果 我负责的任务： 负责前端页面的开发和维护，包括大屏列表、项目模板、新建大屏等模块。 实现组件的拖拽、放置、编辑等交互功能。 完成图表组件的数据配置功能。 确保前端页面的稳定性和兼容性。 使用的技术栈： 前端框架：Vue.js（构建用户界面的渐进式框架） 编程语言：TypeScript (TS)（JavaScript的超集，添加静态类型、接口等特性） UI框架：NaiveUI（基于Vue 3的组件库，提供丰富的UI组件） 开发工具：Vue CLI、VS Code等 最终成果： 成功开发并维护了低代码平台的前端页面，包括大屏列表、项目模板、新建大屏等功能模块。 实现了组件的拖拽、放置、编辑等交互功能，提高了用户操作的便捷性和效率。 完成了图表组件的数据配置功能，支持用户自定义配置数据源和样式。 前端页面在不同设备和浏览器上具有良好的兼容性和稳定性。 3. 难点与解决方案（选填） 难点一： 组件拖拽交互的实现 解决方案： 使用Vue的指令和事件系统，结合NaiveUI提供的拖拽组件或自定义实现拖拽逻辑。通过监听鼠标事件（如mousedown、mousemove、mouseup），计算组件的拖拽位置和边界，实现组件的拖拽和放置功能。 难点二： 图表组件数据配置的复杂性 解决方案： 设计合理的图表配置数据结构，提供易于理解和使用的配置界面。利用Vue的表单处理和响应式特性，实时更新和渲染配置结果。同时，与后端进行数据交互，支持动态加载和配置数据源。 难点三： 大屏页面跨页面间复制粘贴 解决方案：实现收藏功能，将组合起来的组件添加到收藏夹中，这样可以跨页面将收藏的组件拖拽到当前页面，从而实现跨页面复制粘贴功能。

1. 项目分为渲染引擎，流程引擎，构造器，模型层，权限层等部分。 2. 我负责渲染引擎，流程引擎的开发，担任前端负责人

通过此可视化平台，可设计各行业数据大屏，通过预先配置后，发布大屏链接，实时查看大屏数据 本人在项目中担任前端开发工程师，负责开发低代码平台，使用VUE2（前期使用）和VUE3（后期升级使用）开发项目

1、界面设计模块 2、组件拖拽模块 3、属性配置模块 5、json存储模块 6、组件渲染模块 因公司内部要求不可以公布系统内的核心界面，以下作品图片是类似的，仅供参考

低代码可视化设计及开发，由本人设计并全部开发完成，目前已经上线使用，并且有多个用户用该平台完成整个项目

从建设低代码平台的思路开始入手，目标是能够利用既有物料，满足局部多样化设计，节约开发资源，快速上线，长期迭代。 收集既有物料，建设业务组件，并设计对应组件的schema规则 建设渲染引擎srender，用于渲染组件和画布内容 建设事件编排和消息通信，用于页面交互

项目内容： 1. 前端低代码开发平台框架，用于实现对各种前端框架，灵活的自定义页面能力 2. 当前实现了对uniapp、vue的兼容 3.

项目简介：公司中台研发部开发的aPaaS低代码平台，快速生成pc端与移动端页面。页面产出需要经历模型层，交互层、事件层三个部分，其中交互层设计器是基于vision框架实现，它是一套类似Webpack Tapable事件流机制实现的框架，通过该框架只需要在React组件上简单打标与配置，就可以实现节点树管理、节点树json转化、节点渲染、交互处理（拖拽，缩放，滚动、功能按钮组等）、动态属性菜单等功能。 工作内容：该框架由我主导开发与维护，并录制多个框架源码课程，在公司内分享讲解，协调移动组与PC组技术进行协作开发。 项目成果：为飞搭交互层设计器提供了低耦合、易于拓展的基础框架，显著降低了低代码组件的开发时间与难度。

这是一个快速搭建企业信息管理系统的低代码平台（并非代码生成器）。特点：支持多种关系型数据库、支持多种类型的终端、元数据驱动而非代码驱动，同时它也支持功能化的分布式部署。 开发人员使用平台提供的设计器，可以拖过拖拽控件和配置属性，实现基础的软件功能，如UI、数据结构、数据CRUD、业务服务等等，大量在信息管理系统中遇到的基础需求和问题都在BS2中提供了配置化解决方案，包括但不限于【公式计算】、【UI控制】、【事件注册】、【数据导入导出】、【条件设置】、【自动赋值】、【验证配置】等等，其中对于传统OLAP控件的性能有重大突破，除了配置外，也提供了【插件框架】，用于实现配置无法实现的特殊业务。该框架实现【前后端分离】，可以单机部署，也可以分布式部署，平台内置了【分布式调用框架】、【MQ框架】和【redis客户端】。BS2支持【SAAS部署】，实现一个应用隔离多个业务账套。 除了上述非业务功能外，也提供了常规ERP的一些通用模块：【功能权限】、【数据权限】、【字段权限】、【工作流集成】、【excel导入导出】、【业务对象锁】、【用户级个性化】等等。 自主研发核心技术：元数据、表单引擎、多终端UI适配器、ORM框架、查询引擎、实体数据服务、脚本引擎、OLAP控件改造、BS2平台设计器等。 附件为PPT介绍

项目描述：该项目是用于单位的财务报销后台管理系统；共十七个模块。主要是用来做单据的填报、报表查看等功能，页面上主要功能有：列表搜索、新增、修改、删除、提交、撤销、提交、流程查看、复制、打印、导入、导出、审批、撤销审批等功能。 责任描述： 1. 参与系统单据可配置需求讨论、页面可配置逻辑开发； 2. 通过 axios 调用后台的接口，同时涉及到数据双向绑定的原理渲染前台数据。 3. 通过 el-table、v-table 渲染表格数据和表格数据的填报； 4. 利用 elementui 前端框架快速搭建页面

后台管理 包含功能模块、文件管理、通知公告、角色管理、人员管理的后台管理系统 功能绑定二维码打开对应小程序

背景： 由于公司长期依赖于QuickBI，但其自定义能力受限，迭代链路繁琐，成本高昂，无法满足大量分析报表的需求。 职责：带领团队，搭建了一个类似QuickBI的平台，支持一站式开发能力，解决了个性化交互、权限配置和成本等方面的问题。 实施：与产品经理和设计师合作，拆解业务需求，转化为可执行的前端任务。领导团队进行技术选型，确定前端框架和工具，制定开发计划和任务分配。负责架构设计、流程设计、功能设计、代码编写。注重团队沟通和协作，及时解决问题，确保项目按时交付。 结果：按期完成目标上线，报表产出占据开发份额8成以上，人力成本节省7成以上。

1. 项目概述：该企业级应用旨在帮助公司管理各种流程的生命周期，以及流程中台的运营。通过极低的代码成本，可以快速适应公 司不同的流程需求，并生成相应的表单系统。 2. 系统规模：包括三大核心模块，使用了10多个自定义组件，覆盖了50多个页面，同时支持PC端和移动端H5的访问。 3. 技术架构：基于Vue2进行开发，使用了vue-router进行页面路由管理，vuex进行状态管理，v-cli作为脚手架工具，并结合 Element-UI组件库进行界面设计。 4. 个人职责： a. 公共部分：负责开发和封装了Ajax拦截器，以及一系列功能性函数（防抖、节流、字面量判断、常用正则等），为项目提供基础功能支持。 b. 组件部分：根据项目需求，开发了满足当前项目需求的组件，并将其整理成组件库，通过npm提供下载。 c. 文档部分：利用vitepress工具，编写了主要的组件使用文档和API接口文档，方便团队成员查阅和使用。 d. 整体优化：对构建速度和代码体积进行了优化，同时采用了面向对象编程的思想，提升了代码的可维护性和可扩展性。 业绩: 1. 细化 css 颗粒，使 class=w24 h24 md:w48 md:hauto ，更加语义，提升开发效率 2. git-hooks husky 配合 eslint,prettier 处理代码规范，使不合规代码无法提交，提升系统品质 3. 根据 webpack 配置 CssMinimizerPlugin 压缩，splitChunks 分包，以及 TerserPlugin 多进程打包，使 webpack 构建速度优化，产出物优化。 4. 建立组件文档，功能函数文档，使同事阅读文档开箱即用，减少重复开发 5.keep-alive 缓存技术，懒加载，移动端虚拟列表，小图片转 base64等常用的性能优化提升项目渲染

node+vue 后端：express+axios+awilix 前端：vue3+axios+elementplus 选择模版，通过自定义配置，一键生成桌面应用。省去大量不必要的开发时间。生成后的项目扩展性极强，内置丰富的代码逻辑供二次开发使用。

代码开源：https://gitee.com/forward-seen/vlife vlife是一款模型驱动的低代码平台，编写模型即可轻松完成全栈功能开发。对于更复杂的业务逻辑，提供了强大的配置功能和低代码开发能力，极大地提升了开发效率和质量。